:root{
    --brand:#F36F21;--brand-dark:#d55d13;--ink:#1d2a44;--muted:#5b6a85;
    --line:#e4e9f2;--bg:#f6f8fb;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--ink);
       background:var(--bg);line-height:1.75;font-size:16px}
  .xc-wrap{max-width:780px;margin:0 auto;padding:34px 22px 60px;background:#fff;
           min-height:100vh;box-shadow:0 0 40px rgba(29,42,68,.06)}
  .xc-cat{display:inline-block;background:var(--brand);color:#fff;font-size:12px;
          font-weight:700;letter-spacing:.5px;text-transform:uppercase;
          padding:3px 10px;border-radius:6px;margin-bottom:14px}
  h1.xc-title{font-size:30px;line-height:1.3;margin-bottom:16px}
  .xc-brand{display:flex;justify-content:center;margin:2px 0 20px}
  .xc-brand img{width:200px;height:auto}
  .xc-lead{font-size:17.5px;color:var(--ink);border-left:3px solid var(--brand);
           padding-left:14px;margin-bottom:22px}
  .xc-content p{margin:0 0 16px}
  .xc-content h2{font-size:21px;margin:30px 0 12px;color:var(--ink)}
  .xc-list{margin:0 0 16px 2px;list-style:none}
  .xc-list li{margin:0 0 10px;padding-left:20px;position:relative}
  .xc-list li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
                      border-radius:50%;background:var(--brand)}
  .xc-list a{text-decoration:none;color:var(--brand);font-weight:600}
  .xc-list a:hover{text-decoration:underline}
  .xc-figs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
  .xc-figs figure{margin:0;display:flex;flex-direction:column}
  .xc-figs .xc-figbox{height:210px;display:flex;align-items:center;justify-content:center;
      background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
      box-shadow:0 6px 20px rgba(29,42,68,.08);overflow:hidden;
      transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,
                 border-color .28s ease}
  .xc-figs .xc-figbox a{display:flex;align-items:center;justify-content:center;
      width:100%;height:100%;text-decoration:none;cursor:pointer;
      -webkit-tap-highlight-color:transparent}
  .xc-figs img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
      display:block;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
  .xc-figs figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;text-align:center;
      line-height:1.5;min-height:38px}
  .xc-figs figcaption a{color:var(--brand);font-weight:700;text-decoration:none;
      transition:color .2s ease}
  .xc-figs figcaption a:hover{text-decoration:underline}
  @media(hover:hover){
    .xc-figs .xc-figbox:hover{transform:translateY(-6px);border-color:var(--brand);
        box-shadow:0 16px 32px rgba(243,111,33,.22)}
    .xc-figs .xc-figbox:hover img{transform:scale(1.09)}
    .xc-figs .xc-figbox:active{transform:translateY(-2px);
        box-shadow:0 8px 18px rgba(243,111,33,.18)}
    .xc-figs .xc-figbox:focus-within{border-color:var(--brand);
        box-shadow:0 0 0 3px rgba(243,111,33,.28)}
  }
  @media(prefers-reduced-motion:reduce){
    .xc-figs .xc-figbox,.xc-figs img{transition:none}
    .xc-figs .xc-figbox:hover{transform:none}
    .xc-figs .xc-figbox:hover img{transform:none}
  }
  .xc-cta{margin-top:36px;padding:24px;border:1px solid var(--line);border-radius:14px;
          background:#fff;text-align:center}
  .xc-cta .xc-cta-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
  .xc-cta a.xc-btn{display:inline-block;color:#fff !important;text-decoration:none !important;
      font-weight:600;padding:11px 22px;border-radius:8px;margin:4px;font-size:14.5px;
      transition:transform .15s ease, box-shadow .15s ease}
  .xc-cta a.xc-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(29,42,68,.18)}
  .xc-btn--msg{background:#42707d}
  .xc-btn--msg:hover{background:#315560 !important}
  .xc-btn--wa{background:#123a63}
  .xc-btn--wa:hover{background:#0b2848 !important}
  .xc-btn--mail{background:#2f5d8f}
  .xc-btn--mail:hover{background:#20456b !important}
  @media(max-width:600px){
    h1.xc-title{font-size:24px}
    .xc-figs{grid-template-columns:1fr}
  }