:root{
    --bg: #FFFFFF;
    --bg-soft: #FDF0EA;
    --sky: #F4551E;
    --sky-deep: #CC3D0B;
    --sky-dark: #2B211C;
    --navy: #1A120F;
    --ink: #1C1D22;
    --ink-soft: #6E6E76;
    --ink-faint: #A89B95;
    --sky-pale: #FDE6DC;
    --border: #F2DFD7;
    --card: #FFFFFF;
    --radius: 20px;
    --wrap: 1140px;
    --ff-display: 'Sora', sans-serif;
    --ff-body: 'Inter', sans-serif;
    --ff-mono: 'IBM Plex Mono', monospace;
    --shadow-sky: 0 24px 50px -28px rgba(244,85,30,0.35);
    --shadow-sky-soft: 0 16px 34px -22px rgba(244,85,30,0.28);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ff-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
  }

  .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
  section{ position: relative; }

  .eyebrow{
    font-family: var(--ff-mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sky-deep);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .eyebrow:before{
    content:"";
    width: 6px; height: 6px;
    background: var(--sky);
    border-radius: 50%;
    display:inline-block;
    box-shadow: 0 0 0 4px var(--sky-pale);
  }

  h1,h2,h3{ font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
  h2{ font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; }
  .section-head{ max-width: 640px; margin-bottom: 48px; }
  .section-head p{ color: var(--ink-soft); margin-top: 14px; font-size: 16.5px; }

  .btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 14.5px;
    padding: 14px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn-primary{
    background: linear-gradient(135deg, #FF7A45, var(--sky-deep));
    color: #fff;
    box-shadow: var(--shadow-sky);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 26px 46px -20px rgba(244,85,30,0.55); }
  .btn-ghost{ background: #fff; color: var(--ink); border-color: var(--border); }
  .btn-ghost:hover{ border-color: var(--sky); color: var(--sky-deep); transform: translateY(-1px); }
  .btn-onDark{ background: #fff; color: var(--navy); }
  .btn-onDark:hover{ background: var(--sky-pale); transform: translateY(-1px); }
  .btn-onDark-ghost{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.28); }
  .btn-onDark-ghost:hover{ border-color: #fff; }

  /* ---------- NAV ---------- */
  header.site{
    position: sticky; top:0; z-index: 50;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 32px;
    max-width: var(--wrap); margin:0 auto;
  }
  .logo{ font-family: var(--ff-display); font-weight:800; font-size:18.5px; letter-spacing:-0.01em; }
  .logo span{
    background: linear-gradient(135deg, var(--sky), var(--sky-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .nav-links{ display:flex; gap:34px; font-size: 14.5px; color: var(--ink-soft); }
  .nav-links a{ transition: color .15s ease; position:relative; }
  .nav-links a:hover{ color: var(--sky-deep); }
  .nav-cta{ display:flex; align-items:center; gap:22px; }
  .burger{ display:none; }

  @media (max-width: 860px){
    .nav-links{ display:none; }
    .nav-cta .btn-ghost{ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{ padding: 100px 0 76px; overflow:hidden; position:relative; }
  .hero:before, .hero:after{
    content:""; position:absolute; border-radius: 50%; filter: blur(70px); z-index:0;
    animation: drift 14s ease-in-out infinite;
  }
  .hero:before{
    width: 480px; height: 480px; background: radial-gradient(circle, rgba(244,85,30,0.28), rgba(244,85,30,0) 70%);
    top: -180px; right: -120px;
  }
  .hero:after{
    width: 360px; height: 360px; background: radial-gradient(circle, rgba(255,122,69,0.2), rgba(255,122,69,0) 70%);
    bottom: -140px; left: -80px; animation-delay: -6s;
  }
  @keyframes drift{ 0%,100%{ transform: translateY(0) translateX(0); } 50%{ transform: translateY(24px) translateX(-14px); } }

  .hero-grid{
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
    position: relative; z-index: 1;
  }
  .hero h1{
    font-size: clamp(38px, 5.1vw, 62px);
    line-height: 1.06;
    margin: 20px 0 22px;
  }
  .hero h1 em{
    font-style: normal;
    background: linear-gradient(135deg, var(--sky), var(--sky-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero p.lede{ font-size: 18px; color: var(--ink-soft); max-width: 480px; margin-bottom: 8px; }
  .hero p.lede + p.lede{ margin-top: 14px; }
  .hero-actions{ display:flex; gap:14px; margin-top: 34px; flex-wrap: wrap; }

  .hero-visual{
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 28px;
    box-shadow: var(--shadow-sky);
    overflow: hidden;
  }

  .hv-profile{
    display:flex; align-items:center; gap:14px;
    padding-bottom: 22px; margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  .hv-photo{
    width: 60px; height: 60px; border-radius: 50%;
    object-fit: cover; object-position: top center;
    border: 2px solid #fff; box-shadow: 0 0 0 2px var(--sky);
    flex-shrink: 0;
  }
  .hv-name{ font-family: var(--ff-display); font-weight:700; font-size: 15.5px; color: var(--ink); }
  .hv-role{ font-family: var(--ff-mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }

  .hv-diagram{ display:flex; flex-direction:column; align-items:center; gap:0; width:100%; }
  .hv-node{
    font-family: var(--ff-mono); font-size: 12.5px; letter-spacing:0.04em;
    text-align:center; padding: 11px 22px; border-radius: 999px;
    white-space: nowrap; max-width: 100%;
  }
  .hv-node-main{
    background: linear-gradient(135deg, var(--sky), var(--sky-deep)); color:#fff; font-weight:600;
  }
  .hv-node-accent{ background: var(--sky); color:#fff; font-weight:600; }
  .hv-node-outline{ border: 1.5px solid var(--ink); color: var(--ink); font-weight:700; background:#fff; }
  .hv-node-flag{
    border: 1.5px solid var(--sky); color: var(--sky-deep); font-weight:700; background: var(--sky-pale);
  }
  .hv-node-mini{
    font-size: 11px; padding: 7px 16px; background: #fff; border: 1px solid var(--border); color: var(--ink-soft);
  }

  .hv-connector{ width: 2px; height: 26px; background: var(--border); position: relative; }
  .hv-connector-sm{ height: 14px; }
  .hv-connector:after{
    content:""; position:absolute; left:50%; top:0; width:6px; height:6px; margin-left:-3px;
    border-radius:50%; background: var(--sky);
    animation: hv-flow 2.2s linear infinite;
  }
  @keyframes hv-flow{ 0%{ top:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:100%; opacity:0; } }

  .hv-stairs{ display:flex; flex-direction:column; align-items:center; gap:0; margin-bottom: 0; }

  .hv-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; width: 100%; }
  .hv-row + .hv-row{ margin-top: 8px; }
  .hv-chip{
    font-family: var(--ff-mono); font-size: 11.5px; padding: 9px 8px; border-radius: 12px;
    background: #fff; border: 1px solid var(--border); color: var(--ink);
    text-align: center; line-height: 1.3; overflow-wrap: break-word;
  }
  .hv-chip-pale{ background: var(--sky-pale); border-color: transparent; color: var(--sky-deep); }

  @media (max-width: 420px){
    .hv-node{ font-size: 11.5px; padding: 10px 16px; }
    .hv-chip{ font-size: 10px; padding: 8px 6px; }
  }

  @media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero{ padding-top: 44px; }
  }

  /* ---------- TRUST STRIP ---------- */
  .trust{
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background: var(--bg-soft);
    padding: 26px 0;
  }
  .trust .wrap{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  .trust-channels{ font-family: var(--ff-mono); font-size:13px; letter-spacing:0.06em; color: var(--ink-soft); }
  .trust-channels b{ color: var(--sky-deep); font-weight:500; }
  .trust-stats{ display:flex; gap:34px; }
  .trust-stat{ text-align:right; }
  .trust-stat .num{ font-family: var(--ff-display); font-size: 22px; font-weight:800; color:var(--ink); }
  .trust-stat .label{ font-size:12px; color: var(--ink-faint); }

  /* ---------- CREDENTIALS ---------- */
  .credentials{ padding: 22px 0; }
  .credentials .wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
  .cred-label{ font-family: var(--ff-mono); font-size: 11.5px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-faint); white-space:nowrap; }
  .cred-list{ display:flex; gap: 10px; flex-wrap:wrap; }
  .cred-list span{
    font-family: var(--ff-mono); font-size: 12px; color: var(--sky-deep);
    background: var(--sky-pale);
    border: 1px solid transparent; border-radius: 999px; padding: 7px 14px;
  }

  /* ---------- PROBLEM ---------- */
  .problem{ padding: 100px 0 40px; }
  .problem-top{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
  .problem-top p{ color: var(--ink-soft); font-size: 17px; margin-top: 16px; }
  .channel-list{ margin-top: 26px; }
  .channel-row{
    display:grid; grid-template-columns: 130px 1fr; gap: 18px;
    padding: 18px 0; border-top: 1px solid var(--border);
    font-size: 15px;
  }
  .channel-row:last-child{ border-bottom: 1px solid var(--border); }
  .channel-row .name{ font-family: var(--ff-display); font-weight:700; color: var(--sky-deep); }
  .channel-row .desc{ color: var(--ink-soft); }

  .statement{
    margin-top: 74px;
    padding: 50px 0;
    border-top: 1px solid var(--border);
    text-align:center;
  }
  .statement p{
    font-family: var(--ff-display);
    font-size: clamp(22px, 3vw, 32px);
    max-width: 780px; margin: 0 auto;
    color: var(--ink);
  }
  .statement p .hl{
    background: linear-gradient(135deg, var(--sky), var(--sky-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* ---------- SERVICES ---------- */
  .services{ padding: 96px 0; }
  .service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .service-card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 26px;
    transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
  }
  .service-card:hover{
    border-color: var(--sky);
    transform: translateY(-4px);
    box-shadow: var(--shadow-sky-soft);
  }
  .service-tag{ font-family: var(--ff-mono); font-size: 12px; color: var(--sky-deep); letter-spacing:0.08em; background: var(--sky-pale); padding: 5px 10px; border-radius: 999px; }
  .service-card h3{ font-size: 19px; margin: 16px 0 10px; }
  .service-card p{ color: var(--ink-soft); font-size: 14.5px; margin-bottom: 18px; }
  .service-card .go{ font-size: 13.5px; font-weight:600; color: var(--sky-deep); display:inline-flex; gap:6px; align-items:center; }
  .service-card .go svg{ transition: transform .18s ease; }
  .service-card:hover .go svg{ transform: translateX(3px); }

  @media (max-width: 900px){ .service-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px){ .service-grid{ grid-template-columns: 1fr; } }

  /* ---------- SPECIALIZATION ---------- */
  .specialization{ padding: 90px 0; }
  .spec-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .spec-card{
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px 20px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .spec-card:hover{ border-color: var(--sky); transform: translateY(-3px); box-shadow: var(--shadow-sky-soft); }
  .spec-card h3{ font-size: 16px; margin: 12px 0 8px; }
  .spec-card p{ color: var(--ink-soft); font-size: 13.5px; }
  @media (max-width: 1000px){ .spec-grid{ grid-template-columns: 1fr 1fr 1fr; } }
  @media (max-width: 640px){ .spec-grid{ grid-template-columns: 1fr 1fr; } }

  /* ---------- PROCESS ---------- */
  .process{ padding: 96px 0; background: var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .process-list{ position:relative; }
  .process-list:before{
    content:""; position:absolute; left: 27px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(var(--border), var(--border));
  }
  .process-item{
    position:relative;
    display:grid; grid-template-columns: 56px 1fr; gap: 28px;
    padding: 18px 0;
  }
  .process-marker{ display:flex; align-items:flex-start; justify-content:center; padding-top: 4px; }
  .process-badge{
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--card); border: 2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--ff-mono); font-weight:700; font-size: 15px; color: var(--sky-deep);
    position: relative; z-index: 1;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease, color .25s ease;
  }
  .process-item:hover .process-badge{
    background: linear-gradient(135deg, var(--sky), var(--sky-deep));
    border-color: transparent; color:#fff;
    transform: scale(1.08);
    box-shadow: var(--shadow-sky-soft);
  }
  .process-body{
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    padding: 22px 26px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .process-item:hover .process-body{
    border-color: var(--sky); box-shadow: var(--shadow-sky-soft); transform: translateX(4px);
  }
  .process-body h3{ font-size: 20px; margin-bottom: 6px; }
  .process-body p{ color: var(--ink-soft); font-size: 15px; max-width: 560px; }

  @media (max-width: 560px){
    .process-list:before{ left: 21px; }
    .process-item{ grid-template-columns: 44px 1fr; gap: 18px; }
    .process-badge{ width:44px; height:44px; font-size:13px; }
    .process-body{ padding: 18px 20px; }
  }

  /* ---------- WHY ---------- */
  .why{ padding: 100px 0; }
  .why-top{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; margin-bottom: 56px;}
  .why-top p{ color: var(--ink-soft); font-size: 16.5px; margin-top: 14px; }
  .flow{
    font-family: var(--ff-mono); font-size: 13.5px; color: var(--sky-deep);
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top: 20px;
  }
  .why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
  .why-card{ border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: var(--bg-soft); transition: background .2s ease, transform .2s ease; }
  .why-card:hover{ background: var(--sky-pale); transform: translateY(-3px); }
  .why-card h3{ font-size:16.5px; margin-bottom:8px; }
  .why-card p{ font-size:14px; color: var(--ink-soft); }
  @media (max-width: 900px){ .why-top{grid-template-columns:1fr;} .why-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }

  /* ---------- CASE STUDIES ---------- */
  .cases{ padding: 100px 0; background: var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .case-grid{ display:flex; flex-direction:column; gap: 22px; }
  .case-card{
    background: var(--card); border:1px solid var(--border); border-radius: 24px;
    padding: 36px; transition: box-shadow .2s ease;
  }
  .case-card:hover{ box-shadow: var(--shadow-sky-soft); }
  .case-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 24px; flex-wrap:wrap; margin-bottom: 26px; }
  .case-card .tag{ font-family: var(--ff-mono); font-size: 12px; color: var(--sky-deep); background: var(--sky-pale); padding: 5px 10px; border-radius: 999px; }
  .case-card h3{ font-size: 22px; margin: 12px 0 10px; }
  .case-card h3 .by{ font-family: var(--ff-body); font-weight: 400; font-size: 14px; color: var(--ink-faint); }
  .case-desc{ color: var(--ink-soft); font-size: 15px; max-width: 620px; line-height:1.55; }
  .case-card .go, .case-card .go-label{ font-size: 13.5px; font-weight:600; color: var(--sky-deep); display:inline-flex; gap:6px; align-items:center; white-space:nowrap; flex-shrink:0; }
  .case-card .go svg{ transition: transform .18s ease; }
  .case-card:hover .go svg{ transform: translateX(3px); }
  .case-stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .stat{ background: var(--sky-pale); border-radius: 16px; padding: 18px 16px; }
  .stat-num{ font-family: var(--ff-display); font-weight:800; font-size: 22px; color: var(--ink); line-height:1.1; }
  .stat-label{ font-family: var(--ff-mono); font-size: 11px; color: var(--sky-deep); margin-top: 6px; line-height:1.4; }
  .case-substats{ display:flex; gap: 30px; flex-wrap:wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
  .case-substats span{ font-size: 13.5px; color: var(--ink-soft); }
  .case-substats b{ color: var(--ink); }
  @media (max-width: 760px){ .case-stats{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px){ .case-stats{ grid-template-columns: 1fr; } }

  /* ---------- ABOUT ---------- */
  .about{ padding: 104px 0; }
  .about-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: center; }
  .about-photo{
    aspect-ratio: 4/5; border-radius: 24px;
    background: linear-gradient(160deg, var(--sky-pale), #FFFFFF);
    border: 1px solid var(--border);
    display:flex; align-items:flex-end; padding: 22px;
    position:relative; overflow:hidden;
    box-shadow: var(--shadow-sky-soft);
  }
  .about-photo img{
    position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: top center;
  }
  .about-photo .cap{
    position: relative; z-index: 1;
    font-family: var(--ff-mono); font-size:12.5px; color: var(--sky-deep);
    background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
    padding:9px 14px; border-radius: 999px; border:1px solid var(--border);
  }
  .about h2{ margin-bottom: 18px; }
  .about p{ color: var(--ink-soft); font-size: 16.5px; margin-bottom: 16px; max-width: 560px; }
  .about .stack{ font-family: var(--ff-mono); font-size: 14px; color: var(--sky-deep); margin: 18px 0; }
  .about .question{ font-family: var(--ff-display); font-size: 20px; color: var(--ink); margin: 22px 0; max-width: 520px; font-weight:600; }
  @media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; } }

  /* ---------- AUDIT / FORM ---------- */
  .audit{
    padding: 100px 0;
    background: linear-gradient(160deg, var(--sky-dark), var(--navy));
    color: #fff; border-radius: 32px; margin: 0 24px; max-width: none;
    position: relative; overflow: hidden;
  }
  .audit:before{
    content:""; position:absolute; width:420px; height:420px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,122,69,0.28), rgba(255,122,69,0) 70%);
    top:-160px; right:-100px; filter: blur(10px);
  }
  .audit .wrap{ max-width: var(--wrap); position:relative; z-index:1; }
  .audit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  .audit h2{ color:#fff; }
  .audit p.lede{ color: rgba(255,255,255,0.68); margin-top:16px; font-size: 16.5px; max-width: 440px; }
  .checks{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 28px; }
  .checks li{ font-size: 14.5px; color: rgba(255,255,255,0.88); display:flex; gap:8px; align-items:center; }
  .checks li:before{ content:"✓"; color: #FFC2A8; font-weight:700; }

  form.audit-form{ display:flex; flex-direction:column; gap: 14px; }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-family: var(--ff-mono); font-size: 11.5px; letter-spacing:0.06em; color: rgba(255,255,255,0.55); text-transform:uppercase; }
  .field input, .field select, .field textarea{
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 12px 14px;
    color: #fff;
    font-family: var(--ff-body);
    font-size: 14.5px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color: var(--sky);
    background: rgba(255,255,255,0.11);
  }
  .field input:placeholder, .field textarea:placeholder{ color: rgba(255,255,255,0.4); }
  .check-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .check-pill{
    display:flex; align-items:center; gap:8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px; padding: 10px 12px; cursor:pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .check-pill:hover{ border-color: rgba(255,255,255,0.32); }
  .check-pill input{ accent-color: var(--sky); width:15px; height:15px; flex-shrink:0; }
  .check-pill span{ font-family: var(--ff-body); font-size: 13.5px; color: rgba(255,255,255,0.85); }
  .check-pill:has(input:checked){ border-color: var(--sky); background: rgba(244,85,30,0.14); }
  @media (max-width: 560px){ .check-grid{ grid-template-columns: repeat(2, 1fr); } }
  form.audit-form .btn-onDark{ margin-top: 6px; justify-content:center; }
  @media (max-width: 900px){ .audit-grid{ grid-template-columns:1fr; } .audit{ margin:0 14px; padding: 60px 0;} }
  @media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } .audit .wrap{ padding: 0 20px;} }

  /* ---------- INSIGHTS ---------- */
  .insights{ padding: 100px 0; }
  .cat-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 44px; }
  .cat-pills span{
    font-family: var(--ff-mono); font-size: 12.5px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--ink-soft);
  }
  .article-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
  .article{ background: var(--card); padding: 28px; display:flex; flex-direction:column; gap:10px; transition: background .15s ease; }
  .article:hover{ background: var(--sky-pale); }
  .article .tag{ font-family: var(--ff-mono); font-size: 11.5px; color: var(--sky-deep); }
  .article h3{ font-size: 17px; font-weight:600; font-family: var(--ff-body); line-height:1.35; }
  @media (max-width: 760px){ .article-list{ grid-template-columns: 1fr; } }

  /* ---------- WHO THIS IS FOR ---------- */
  .fit{ padding: 90px 0; background: var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .fit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .fit-card{ background: var(--card); border-radius: var(--radius); padding: 32px 28px; border: 1px solid var(--border); }
  .fit-card h3{ font-size: 18px; margin-bottom: 18px; }
  .fit-yes{ border-color: var(--sky); }
  .fit-list{ display:flex; flex-direction:column; gap: 13px; }
  .fit-list li{ font-size: 14.5px; color: var(--ink-soft); display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
  .fit-yes .fit-list li:before{ content:"✓"; color: var(--sky-deep); font-weight:700; flex-shrink:0; }
  .fit-no .fit-list li:before{ content:"✕"; color: var(--ink-faint); font-weight:700; flex-shrink:0; }
  @media (max-width: 760px){ .fit-grid{ grid-template-columns: 1fr; } }

  /* ---------- FAQ ---------- */
  .faq{ padding: 100px 0; background: var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .faq-list{ display:flex; flex-direction:column; gap: 12px; max-width: 800px; }
  .faq-item{
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    padding: 6px 24px; transition: border-color .2s ease, box-shadow .2s ease;
  }
  .faq-item:hover{ border-color: var(--sky); }
  .faq-item[open]{ box-shadow: var(--shadow-sky-soft); }
  .faq-item summary{
    list-style: none; cursor: pointer;
    display:flex; align-items:center; justify-content:space-between; gap: 20px;
    padding: 20px 0; font-family: var(--ff-display); font-weight:600; font-size: 16px; color: var(--ink);
  }
  .faq-item summary:-webkit-details-marker{ display:none; }
  .faq-icon{
    position: relative; flex-shrink:0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--sky-pale); transition: background .2s ease;
  }
  .faq-icon:before, .faq-icon:after{
    content:""; position:absolute; top:50%; left:50%; background: var(--sky-deep);
    transform: translate(-50%,-50%); transition: transform .25s ease;
  }
  .faq-icon:before{ width: 10px; height: 2px; }
  .faq-icon:after{ width: 2px; height: 10px; }
  .faq-item[open] .faq-icon{ background: var(--sky); }
  .faq-item[open] .faq-icon:before, .faq-item[open] .faq-icon:after{ background:#fff; }
  .faq-item[open] .faq-icon:after{ transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
  .faq-answer{ padding: 0 0 22px; margin-top: -6px; }
  .faq-answer p{ color: var(--ink-soft); font-size: 15px; line-height:1.6; max-width: 680px; }

  /* ---------- FINAL CTA ---------- */
  .final-cta{ padding: 116px 0; text-align:center; }
  .final-cta h2{ font-size: clamp(30px, 4.4vw, 48px); max-width: 720px; margin: 0 auto 16px; }
  .final-cta p{ color: var(--ink-soft); font-size: 17px; max-width: 520px; margin: 0 auto 34px; }
  .final-cta .hero-actions{ justify-content:center; }

  /* ---------- FOOTER ---------- */
  footer{ background: linear-gradient(180deg, var(--sky-dark), var(--navy)); color: rgba(255,255,255,0.72); padding: 74px 0 30px; }
  .footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .footer-brand .logo{ color:#fff; }
  .footer-brand .logo span{ background: linear-gradient(135deg, #FFC2A8, #fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .footer-brand p{ margin-top: 12px; font-size: 14px; max-width: 260px; color: rgba(255,255,255,0.58); }
  footer h4{ font-family: var(--ff-mono); font-size: 12px; letter-spacing:0.08em; text-transform:uppercase; color: rgba(255,255,255,0.48); margin-bottom: 16px; }
  footer ul li{ margin-bottom: 10px; font-size: 14.5px; }
  footer ul li a:hover{ color:#FFC2A8; }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 26px; font-size: 13px; color: rgba(255,255,255,0.42); flex-wrap:wrap; gap:10px; }
  @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

  /* ---------- reveal on scroll ---------- */
  .reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform: none; }


  /* ---------- MOTION GRAPHIC (animated hero illustration) ---------- */
  .motion-graphic{
    position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  }
  .mg-ring{
    position:absolute; top:50%; left:50%; border-radius:50%;
    border:1px solid rgba(244,85,30,0.22);
    transform: translate(-50%,-50%);
    animation: mg-spin linear infinite;
  }
  .mg-ring-1{ width:280px; height:280px; animation-duration: 22s; }
  .mg-ring-2{ width:420px; height:420px; animation-duration: 34s; animation-direction: reverse; border-color: rgba(244,85,30,0.15); }
  .mg-ring-3{ width:580px; height:580px; animation-duration: 48s; border-color: rgba(244,85,30,0.1); }
  .mg-dot{
    position:absolute; top:-6px; left:50%; width:11px; height:11px; margin-left:-5.5px;
    border-radius:50%; background: var(--sky);
    box-shadow: 0 0 14px 2px rgba(244,85,30,0.55);
  }
  .mg-ring-2 .mg-dot{ background: var(--sky-deep); box-shadow: 0 0 14px 2px rgba(204,61,11,0.5); }
  .mg-ring-3 .mg-dot{ width:8px; height:8px; margin-left:-4px; }
  @keyframes mg-spin{ from{ transform: translate(-50%,-50%) rotate(0deg); } to{ transform: translate(-50%,-50%) rotate(360deg); } }

  .mg-bars{
    position:absolute; right: 6%; bottom: 8%; display:flex; align-items:flex-end; gap: 7px; height: 130px;
  }
  .mg-bars span{
    width: 11px; border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--sky), var(--sky-deep));
    opacity: 0.55; transform-origin: bottom;
    animation: mg-rise 3.6s ease-in-out infinite;
  }
  .mg-bars span:nth-child(1){ height: 34%; animation-delay: 0s; }
  .mg-bars span:nth-child(2){ height: 52%; animation-delay: .2s; }
  .mg-bars span:nth-child(3){ height: 40%; animation-delay: .4s; }
  .mg-bars span:nth-child(4){ height: 70%; animation-delay: .6s; }
  .mg-bars span:nth-child(5){ height: 58%; animation-delay: .8s; }
  .mg-bars span:nth-child(6){ height: 88%; animation-delay: 1s; }
  @keyframes mg-rise{ 0%,100%{ transform: scaleY(0.55); opacity:0.4; } 50%{ transform: scaleY(1); opacity:0.75; } }

  .mg-particles i{
    position:absolute; width:5px; height:5px; border-radius:50%; background: var(--sky); opacity:0;
    animation: mg-float 7s linear infinite;
  }
  .mg-particles i:nth-child(1){ left:12%; bottom:6%; animation-delay:0s; }
  .mg-particles i:nth-child(2){ left:24%; bottom:2%; animation-delay:1.1s; }
  .mg-particles i:nth-child(3){ left:38%; bottom:10%; animation-delay:2.3s; }
  .mg-particles i:nth-child(4){ left:55%; bottom:4%; animation-delay:0.6s; }
  .mg-particles i:nth-child(5){ left:68%; bottom:8%; animation-delay:3.1s; }
  .mg-particles i:nth-child(6){ left:80%; bottom:2%; animation-delay:1.8s; }
  .mg-particles i:nth-child(7){ left:90%; bottom:12%; animation-delay:4s; }
  .mg-particles i:nth-child(8){ left:6%; bottom:14%; animation-delay:2.6s; }
  @keyframes mg-float{
    0%{ transform: translateY(0); opacity:0; }
    12%{ opacity:.85; }
    88%{ opacity:.85; }
    100%{ transform: translateY(-220px); opacity:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .mg-ring, .mg-bars span, .mg-particles i{ animation: none !important; }
  }
  @media (max-width: 900px){
    .mg-ring-3{ display:none; }
    .mg-bars{ height: 90px; }
  }
/* ---------- SERVICE PAGE SPECIFIC ---------- */

  .op-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .op-card{
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px 28px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .op-card:hover{ border-color: var(--sky); box-shadow: var(--shadow-sky-soft); transform: translateY(-3px); }
  .op-card h3{ font-size: 21px; margin: 14px 0 8px; }
  .op-card > p{ color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; }
  .op-list{ display:flex; flex-direction:column; gap: 11px; }
  .op-list li{ font-size: 14.5px; color: var(--ink); display:flex; gap:9px; align-items:flex-start; }
  .op-list li:before{ content:"✓"; color: var(--sky-deep); font-weight:700; flex-shrink:0; }
  @media (max-width: 760px){ .op-grid{ grid-template-columns: 1fr; } }

  .breadcrumb{
    font-family: var(--ff-mono); font-size: 12.5px; color: var(--ink-faint);
    display:flex; align-items:center; gap:8px; margin-bottom: 22px;
  }
  .breadcrumb a{ color: var(--ink-faint); transition: color .15s ease; }
  .breadcrumb a:hover{ color: var(--sky-deep); }
  .breadcrumb span.current{ color: var(--sky-deep); }

  .sp-hero{ padding: 64px 0 76px; position: relative; overflow:hidden; }
  .sp-hero:before{
    content:""; position:absolute; width: 480px; height: 480px; border-radius:50%;
    background: radial-gradient(circle, rgba(244,85,30,0.22), rgba(244,85,30,0) 70%);
    filter: blur(70px); top: -220px; right: -140px; z-index:0;
  }
  .sp-hero .wrap{ position:relative; z-index:1; }
  .sp-hero-inner{ max-width: 720px; }
  .sp-hero h1{ font-size: clamp(34px, 5vw, 54px); line-height:1.06; margin: 16px 0 20px; }
  .sp-hero h1 em{
    font-style: normal;
    background: linear-gradient(135deg, var(--sky), var(--sky-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .sp-hero p.lede{ font-size: 18px; color: var(--ink-soft); max-width: 620px; }
  .sp-hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap:wrap; }

  .sp-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; max-width: 640px; }
  .sp-stats .stat{ background: var(--sky-pale); border-radius: 16px; padding: 18px 16px; }
  @media (max-width: 560px){ .sp-stats{ grid-template-columns: 1fr; } }

  .sp-section{ padding: 88px 0; }
  .sp-section.sp-alt{ background: var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

  @media (max-width: 620px){ .sp-hero{ padding-top: 40px; } }


/* ============================================================
   Freelancer skin : shape and decoration layer

   Colour note: #CC3D0B is the accent used behind or as TEXT
   (4.95:1 on white, clears WCAG AA). The vivid #F4551E from the
   reference is kept for decoration only : rings, dots, circles :
   where contrast rules do not apply.
   ============================================================ */

/* Reference uses rounded rectangles, not pills. */
.btn{ border-radius: 10px; }
.btn-primary{ background:#CC3D0B; box-shadow: 0 14px 26px -14px rgba(204,61,11,0.5); }
.btn-primary:hover{ background:#B83407; }
.btn-ghost{ background:#fff; border:1px solid #F0DCD3; }
.btn-ghost:hover{ border-color:#CC3D0B; color:#CC3D0B; }

/* Blush hero panel, as in the reference. */
.hero, .sp-hero{
  background: linear-gradient(180deg, #FDEDE6 0%, #FDF4F0 62%, #FFFFFF 100%);
}

/* Concentric rings behind the hero visual : decoration promoted to feature. */
.mg-ring{ border-color: rgba(244,85,30,0.16) !important; }
.mg-dot{ background:#F4551E !important; box-shadow:0 0 0 4px rgba(244,85,30,0.14); }

/* Warm, low shadows instead of the blue-tinted lift. */
.card, .case-card, .badge-card, .article, .svc-card{
  box-shadow: 0 18px 40px -30px rgba(90,45,25,0.35);
}

/* Big orange circle bleeding off the About block, as in the reference. */
.about{ position:relative; overflow:hidden; }
.about:after{
  content:""; position:absolute; right:-140px; bottom:-150px;
  width:340px; height:340px; border-radius:50%;
  background:#F4551E; z-index:0; pointer-events:none;
}
.about .wrap{ position:relative; z-index:1; }

/* Floating dots near the portrait. These sit on .about-grid, not
   .about-photo, because the photo card clips its own overflow. */
.about-grid{ position:relative; }
.about-grid:before, .about-grid:after{
  content:""; position:absolute; border-radius:50%;
  background:#F4551E; z-index:2; pointer-events:none;
}
.about-grid:before{ width:26px; height:26px; left:-13px; top:54px; }
.about-grid:after{ width:13px; height:13px; left:24px; bottom:38px; }

/* Warm header tint. */
header.site{ background: rgba(253,240,234,0.86); }

@media (max-width: 860px){
  .about:after{ width:200px; height:200px; right:-90px; bottom:-100px; }
  .about-grid:before, .about-grid:after{ display:none; }
}