:root{
    --ink:#0B0E17;
    --panel:#12151F;
    --panel-2:#181C28;
    --line: rgba(243,241,236,0.10);
    --line-strong: rgba(243,241,236,0.18);
    --cream:#F3F1EC;
    --muted:#9A9CAE;
    --blue:#4C6FFF;
    --blue-dim: rgba(76,111,255,0.14);
    --coral:#FF6B4A;
    --coral-dim: rgba(255,107,74,0.14);
    --radius: 18px;
    --ease: cubic-bezier(.16,.84,.32,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--ink);
    color:var(--cream);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    cursor:none;
  }

  @media (max-width: 860px){
    body{ cursor:auto; }
  }

  ::selection{ background:var(--coral); color:var(--ink); }

  h1,h2,h3,h4{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.04;
  }

  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }

  a{ color:inherit; text-decoration:none; }

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
  }

  @media (max-width:640px){ .wrap{ padding:0 20px; } }

  /* ---------- Custom cursor ---------- */
  .cursor-dot, .cursor-ring{
    position:fixed;
    top:0; left:0;
    pointer-events:none;
    z-index:9999;
    border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor-dot{
    width:6px; height:6px;
    background:var(--coral);
    transition:opacity .2s;
  }
  .cursor-ring{
    width:34px; height:34px;
    border:1px solid var(--line-strong);
    transition:width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s;
  }
  .cursor-ring.hover{
    width:64px; height:64px;
    border-color:var(--coral);
    background:rgba(255,107,74,0.08);
  }
  @media (max-width:860px){ .cursor-dot, .cursor-ring{ display:none; } }

  /* ---------- Preloader ---------- */
  #preloader{
    position:fixed; inset:0; z-index:10000;
    background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .7s var(--ease), visibility .7s;
  }
  #preloader.done{ opacity:0; visibility:hidden; }
  .pre-mark{ width:56px; height:56px; opacity:0; animation:preIn .8s var(--ease) forwards .1s; }
  @keyframes preIn{ to{opacity:1; transform:scale(1);} from{transform:scale(.7);} }

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:500;
    padding:20px 0;
    background:linear-gradient(to bottom, rgba(11,14,23,0.85), rgba(11,14,23,0));
    backdrop-filter:blur(6px);
    transition:padding .3s var(--ease), background .3s var(--ease), border-color .3s;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    padding:14px 0;
    background:rgba(11,14,23,0.88);
    border-bottom:1px solid var(--line);
  }
  nav{ display:flex; align-items:center; justify-content:space-between; }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo svg{ width:30px; height:30px; display:block; }
  .logo-text{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:15.5px; letter-spacing:0.01em; }
  .logo-text span{ color:var(--coral); }

  .nav-links{ display:flex; gap:34px; align-items:center; }
  .nav-links a{
    font-size:13.5px; font-family:'IBM Plex Mono'; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--muted);
    position:relative;
    padding-bottom:3px;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--coral);
    transition:width .3s var(--ease);
  }
  .nav-links a:hover{ color:var(--cream); }
  .nav-links a:hover::after{ width:100%; }

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono'; font-size:13px; text-transform:uppercase; letter-spacing:0.06em;
    padding:12px 22px;
    border-radius:100px;
    border:1px solid var(--line-strong);
    background:transparent;
    color:var(--cream);
    transition:background .3s var(--ease), border-color .3s, color .3s, transform .2s;
  }
  .btn-solid{
    background:var(--cream); color:var(--ink); border-color:var(--cream);
  }
  .btn-solid:hover{ background:var(--coral); border-color:var(--coral); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--coral); color:var(--coral); }
  .btn svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
  .btn:hover svg{ transform:translateX(3px); }

  .hamburger{ display:none; width:24px; height:18px; position:relative; cursor:pointer; }
  .hamburger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--cream); transition:.3s var(--ease); }
  .hamburger span:nth-child(1){ top:0; }
  .hamburger span:nth-child(2){ top:8px; }
  .hamburger span:nth-child(3){ top:16px; }
  .hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  @media (max-width: 900px){
    .nav-links{
      position:fixed; top:0; right:0; height:100vh; width:min(78vw, 340px);
      background:var(--panel);
      flex-direction:column; justify-content:center; align-items:flex-start;
      padding:40px;
      gap:26px;
      transform:translateX(100%);
      transition:transform .45s var(--ease);
      border-left:1px solid var(--line);
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-links a{ font-size:16px; }
    .nav-cta{ display:none; }
    .hamburger{ display:block; }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:150px 0 80px;
    overflow:hidden;
  }

  .hero-field{
    position:absolute; inset:0; z-index:0;
    pointer-events:none;
  }
  .blob{
    position:absolute;
    width:640px; height:640px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--blue), transparent 60%),
               radial-gradient(circle at 70% 70%, var(--coral), transparent 60%);
    filter:blur(90px);
    opacity:0.35;
    top:calc(var(--my, 40%) - 320px);
    left:calc(var(--mx, 60%) - 320px);
    transition:top .9s var(--ease), left .9s var(--ease);
  }
  .grid-overlay{
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(420px 420px at var(--mx,60%) var(--my,40%), black, transparent 75%);
    mask-image:radial-gradient(420px 420px at var(--mx,60%) var(--my,40%), black, transparent 75%);
    transition:mask-position .2s linear;
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12.5px; color:var(--muted);
    margin-bottom:26px;
    opacity:0; transform:translateY(10px);
    animation:fadeUp .8s var(--ease) forwards .1s;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--coral); }

  .hero h1{
    position:relative; z-index:2;
    font-size:clamp(42px, 7vw, 92px);
    max-width:920px;
  }
  .hero h1 .line{ display:block; overflow:hidden; }
  .hero h1 .line span{
    display:block; transform:translateY(110%);
    animation:lineUp .9s var(--ease) forwards;
  }
  .hero h1 .line:nth-child(1) span{ animation-delay:.2s; }
  .hero h1 .line:nth-child(2) span{ animation-delay:.34s; }
  .hero .accent-blue{ color:var(--blue); }
  .hero .accent-coral{ color:var(--coral); font-style:italic; }

  .hero-sub{
    position:relative; z-index:2;
    max-width:480px;
    color:var(--muted);
    font-size:16.5px;
    line-height:1.6;
    margin:28px 0 40px;
    opacity:0; transform:translateY(10px);
    animation:fadeUp .8s var(--ease) forwards .6s;
  }

  .hero-actions{
    position:relative; z-index:2;
    display:flex; gap:16px; align-items:center;
    opacity:0; transform:translateY(10px);
    animation:fadeUp .8s var(--ease) forwards .75s;
  }

  .scroll-cue{
    position:absolute; bottom:36px; left:32px; z-index:2;
    display:flex; align-items:center; gap:10px;
    color:var(--muted); font-size:11.5px;
    opacity:0; animation:fadeUp .8s var(--ease) forwards 1.1s;
  }
  .scroll-cue .bar{ width:1px; height:34px; background:var(--line-strong); position:relative; overflow:hidden; }
  .scroll-cue .bar::after{
    content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
    background:var(--coral);
    animation:scrollBar 1.8s ease-in-out infinite;
  }
  @keyframes scrollBar{ 0%{top:-100%;} 50%{top:0;} 100%{top:100%;} }

  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
  @keyframes lineUp{ to{ transform:translateY(0); } }

  /* ---------- Marquee ---------- */
  .marquee-section{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:22px 0;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
  }
  .marquee-track{
    display:inline-flex;
    animation:marquee 32s linear infinite;
  }
  .marquee-section:hover .marquee-track{ animation-play-state:paused; }
  .marquee-track span{
    font-family:'Bricolage Grotesque';
    font-weight:600;
    font-size:22px;
    color:var(--muted);
    padding:0 28px;
    display:inline-flex;
    align-items:center;
    gap:28px;
  }
  .marquee-track span i{ color:var(--coral); font-style:normal; font-size:14px; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- Section shared ---------- */
  section{ padding:130px 0; position:relative; }
  @media (max-width:640px){ section{ padding:88px 0; } }

  .sec-head{ margin-bottom:64px; max-width:640px; }
  .sec-tag{ color:var(--coral); font-size:12.5px; margin-bottom:16px; display:block; }
  .sec-head h2{ font-size:clamp(30px, 4vw, 46px); }
  .sec-head p{ color:var(--muted); margin-top:16px; font-size:16px; line-height:1.6; max-width:520px; }

  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- Duality strip ---------- */
  .duality{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .duality-cell{
    background:var(--panel);
    padding:44px 40px;
  }
  .duality-cell h3{ font-size:22px; margin-bottom:10px; }
  .duality-cell p{ color:var(--muted); font-size:14.5px; line-height:1.6; }
  .duality-cell .tag{ font-size:11.5px; margin-bottom:18px; display:inline-block; }
  .duality-cell.blue .tag{ color:var(--blue); }
  .duality-cell.coral .tag{ color:var(--coral); }
  @media (max-width:720px){ .duality{ grid-template-columns:1fr; } }

  /* ---------- Services ---------- */
  .services-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  @media (max-width:900px){ .services-grid{ grid-template-columns:1fr; } }

  .service-group{ background:var(--ink); }
  .group-head{
    padding:30px 34px 20px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--line);
  }
  .group-head .mono{ font-size:12.5px; }
  .group-head.blue .mono{ color:var(--blue); }
  .group-head.coral .mono{ color:var(--coral); }
  .group-count{ color:var(--muted); font-size:12px; font-family:'IBM Plex Mono'; }

  .s-card{
    padding:28px 34px;
    border-bottom:1px solid var(--line);
    display:flex; gap:20px; align-items:flex-start;
    transition:background .35s var(--ease), padding-left .35s var(--ease);
    position:relative;
    overflow:hidden;
  }
  .service-group .s-card:last-child{ border-bottom:none; }
  .s-card::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--coral); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease);
  }
  .group-head.blue ~ .s-card::before, .service-group:has(.group-head.blue) .s-card::before{ background:var(--blue); }
  .s-card:hover{ background:var(--panel); padding-left:42px; }
  .s-card:hover::before{ transform:scaleY(1); }
  .s-icon{
    width:38px; height:38px; flex:none;
    border-radius:10px;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    transition:transform .4s var(--ease), border-color .4s;
  }
  .s-card:hover .s-icon{ transform:rotate(-8deg) scale(1.08); border-color:var(--coral); }
  .s-icon svg{ width:17px; height:17px; }
  .s-card h4{ font-size:17px; margin-bottom:6px; font-weight:600; }
  .s-card p{ color:var(--muted); font-size:14px; line-height:1.55; }

  /* ---------- Work / Case studies ---------- */
  .work-note{ color:var(--muted); font-size:13.5px; margin-top:14px; max-width:560px; line-height:1.6; }
  .work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  @media (max-width:820px){ .work-grid{ grid-template-columns:1fr; } }
  .work-card{ background:var(--ink); padding:38px 36px; transition:background .35s var(--ease); }
  .work-card:hover{ background:var(--panel); }
  .work-card.span2{ grid-column:1 / -1; }
  .work-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
  .work-client{ font-size:21px; margin-bottom:4px; }
  .work-industry{ color:var(--muted); font-size:12.5px; }
  .work-concept-tag{ font-size:10px; color:var(--muted); border:1px solid var(--line-strong); padding:5px 11px; border-radius:100px; white-space:nowrap; font-family:'IBM Plex Mono'; letter-spacing:0.05em; }
  .work-block{ margin-bottom:16px; }
  .work-block .label{ font-size:11px; color:var(--coral); margin-bottom:5px; display:block; font-family:'IBM Plex Mono'; letter-spacing:0.05em; text-transform:uppercase; }
  .work-block p{ color:var(--muted); font-size:14.5px; line-height:1.6; }
  .work-result{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14.5px; color:var(--cream); font-weight:500; }
  .work-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
  .work-tags span{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted); border:1px solid var(--line); padding:5px 10px; border-radius:100px; }

  /* ---------- Process ---------- */
  .process-list{ display:flex; flex-direction:column; }
  .p-row{
    display:grid; grid-template-columns:70px 1fr 44px;
    align-items:center;
    gap:24px;
    padding:32px 0;
    border-top:1px solid var(--line);
    transition:padding-left .4s var(--ease);
  }
  .process-list .p-row:last-child{ border-bottom:1px solid var(--line); }
  .p-row:hover{ padding-left:14px; }
  .p-num{ font-family:'IBM Plex Mono'; color:var(--coral); font-size:14px; }
  .p-body h3{ font-size:21px; margin-bottom:6px; }
  .p-body p{ color:var(--muted); font-size:14.5px; max-width:520px; line-height:1.6; }
  .p-arrow{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition:.35s var(--ease); flex:none; justify-self:end; }
  .p-arrow svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
  .p-row:hover .p-arrow{ background:var(--coral); border-color:var(--coral); }
  .p-row:hover .p-arrow svg{ transform:rotate(45deg); }
  @media (max-width:640px){ .p-row{ grid-template-columns:44px 1fr; } .p-arrow{ display:none; } }

  /* ---------- Why us ---------- */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  @media (max-width:820px){ .why-grid{ grid-template-columns:1fr; } }
  .why-cell{ background:var(--ink); padding:38px 32px; transition:background .35s; }
  .why-cell:hover{ background:var(--panel); }
  .why-cell .mark{ width:30px; height:30px; margin-bottom:22px; }
  .why-cell h4{ font-size:17.5px; margin-bottom:10px; }
  .why-cell p{ color:var(--muted); font-size:14px; line-height:1.6; }

  /* ---------- CTA ---------- */
  .cta-band{
    border:1px solid var(--line);
    border-radius:24px;
    padding:70px 56px;
    display:flex; align-items:center; justify-content:space-between; gap:40px;
    background:
      radial-gradient(500px 260px at 15% 0%, var(--blue-dim), transparent 60%),
      radial-gradient(500px 260px at 85% 100%, var(--coral-dim), transparent 60%),
      var(--panel);
    position:relative; overflow:hidden;
  }
  .cta-band h2{ font-size:clamp(28px,3.6vw,42px); max-width:520px; }
  .cta-band p{ color:var(--muted); margin-top:14px; font-size:15.5px; max-width:440px; }
  @media (max-width:760px){ .cta-band{ flex-direction:column; align-items:flex-start; padding:48px 30px; } }

  /* ---------- Contact ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
  .contact-info a.mail{
    font-family:'Bricolage Grotesque'; font-weight:600; font-size:26px;
    display:inline-flex; align-items:center; gap:10px;
    border-bottom:1px solid var(--line-strong);
    padding-bottom:8px; margin:18px 0 34px;
    transition:color .3s, border-color .3s;
  }
  .contact-info a.mail:hover{ color:var(--coral); border-color:var(--coral); }
  .info-line{ display:flex; justify-content:space-between; padding:16px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
  .info-line span:last-child{ color:var(--cream); }

  .field{ margin-bottom:22px; }
  .field label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:8px; }
  .field input, .field select, .field textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line-strong);
    color:var(--cream);
    font-family:'Inter';
    font-size:15px;
    padding:10px 2px;
    outline:none;
    transition:border-color .3s;
  }
  .field select option{ background:var(--panel); }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--coral); }
  .field textarea{ resize:vertical; min-height:80px; }
  form .btn{ margin-top:8px; cursor:pointer; }

  /* ---------- Footer ---------- */
  footer{ border-top:1px solid var(--line); padding:50px 0 34px; }
  .foot-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; margin-bottom:40px; }
  .foot-links{ display:flex; gap:40px; flex-wrap:wrap; }
  .foot-col h5{ font-size:11.5px; color:var(--muted); margin-bottom:14px; }
  .foot-col a{ display:block; font-size:14px; color:var(--cream); margin-bottom:9px; opacity:.85; transition:opacity .2s, color .2s; }
  .foot-col a:hover{ opacity:1; color:var(--coral); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; flex-wrap:wrap; gap:14px; }

  [data-magnetic]{ display:inline-flex; }

  /* ============ Sub-page shared components ============ */

  .page-hero{
    padding:150px 0 60px;
    border-bottom:1px solid var(--line);
  }
  .breadcrumb{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--muted); font-size:12.5px;
    margin-bottom:28px;
  }
  .breadcrumb a{ transition:color .25s; }
  .breadcrumb a:hover{ color:var(--coral); }
  .breadcrumb svg{ width:12px; height:12px; }

  .meta-row{
    display:flex; flex-wrap:wrap; gap:0;
    margin-top:44px;
    border-top:1px solid var(--line);
  }
  .meta-item{
    flex:1 1 160px;
    padding:22px 0 0;
    padding-right:24px;
  }
  .meta-item .label{ font-size:11px; color:var(--muted); margin-bottom:8px; display:block; }
  .meta-item .value{ font-family:'Bricolage Grotesque'; font-size:17px; font-weight:600; }
  .meta-item .value.blue{ color:var(--blue); }
  .meta-item .value.coral{ color:var(--coral); }

  /* Case studies index grid */
  .cs-index-grid{ display:flex; flex-direction:column; }
  .cs-row{
    display:grid; grid-template-columns:120px 1fr auto auto 24px;
    align-items:center; gap:28px;
    padding:30px 0;
    border-top:1px solid var(--line);
    transition:padding-left .4s var(--ease), background .3s;
  }
  .cs-index-grid .cs-row:last-child{ border-bottom:1px solid var(--line); }
  .cs-row:hover{ padding-left:16px; background:var(--panel); }
  .cs-row .cs-num{ font-family:'IBM Plex Mono'; color:var(--muted); font-size:13px; }
  .cs-row .cs-name{ font-size:24px; }
  .cs-row .cs-name span{ display:block; font-family:'IBM Plex Mono'; text-transform:none; letter-spacing:0; font-size:13px; color:var(--muted); margin-top:6px; }
  .cs-row .cs-tags{ display:flex; gap:8px; flex-wrap:wrap; }
  .cs-row .cs-tags span{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted); border:1px solid var(--line-strong); padding:5px 10px; border-radius:100px; white-space:nowrap; }
  .cs-row .cs-dur{ font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--muted); white-space:nowrap; }
  .cs-row .cs-go{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition:.35s var(--ease); }
  .cs-row .cs-go svg{ width:13px; height:13px; transition:transform .35s var(--ease); }
  .cs-row:hover .cs-go{ background:var(--coral); border-color:var(--coral); }
  .cs-row:hover .cs-go svg{ transform:rotate(45deg); }
  @media (max-width:820px){
    .cs-row{ grid-template-columns:1fr; gap:12px; }
    .cs-row .cs-go{ display:none; }
  }

  /* Impact stats */
  .impact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  @media (max-width:720px){ .impact-grid{ grid-template-columns:1fr; } }
  .impact-cell{ background:var(--panel); padding:34px 30px; }
  .impact-cell .num{ font-family:'Bricolage Grotesque'; font-size:34px; font-weight:700; color:var(--coral); display:block; margin-bottom:8px; }
  .impact-cell .desc{ color:var(--muted); font-size:14px; line-height:1.55; }

  /* Two-col detail block */
  .detail-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; }
  @media (max-width:860px){ .detail-grid{ grid-template-columns:1fr; gap:32px; } }
  .detail-grid h2{ font-size:clamp(26px,3vw,36px); margin-bottom:18px; }
  .detail-grid .num-tag{ color:var(--coral); font-size:12.5px; margin-bottom:14px; display:block; }
  .detail-copy p{ color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:16px; }
  .detail-copy p:last-child{ margin-bottom:0; }
  .detail-list{ list-style:none; }
  .detail-list li{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14.5px; line-height:1.6; }
  .detail-list li:last-child{ border-bottom:1px solid var(--line); }
  .detail-list li svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--coral); }

  /* ---------- Mockup frames (illustrative UI, not real screenshots) ---------- */
  .screens-strip{ display:flex; gap:24px; overflow-x:auto; padding:6px 2px 26px; scrollbar-width:thin; }
  .screens-strip::-webkit-scrollbar{ height:6px; }
  .screens-strip::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:10px; }

  .browser-mock{
    flex:none; width:520px;
    border-radius:14px;
    border:1px solid var(--line-strong);
    background:var(--panel);
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
  }
  @media (max-width:640px){ .browser-mock{ width:86vw; } }
  .browser-bar{ display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); }
  .browser-bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); display:block; }
  .browser-body{ padding:0; }
  .mock-nav{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); }
  .mock-logo{ width:22px; height:22px; border-radius:6px; }
  .mock-pill{ width:70px; height:8px; border-radius:6px; background:var(--line-strong); }
  .mock-btn{ width:56px; height:22px; border-radius:100px; }
  .mock-hero{ padding:30px 22px; }
  .mock-line{ height:9px; border-radius:5px; background:var(--line-strong); margin-bottom:10px; }
  .mock-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 22px 24px; }
  .mock-card{ aspect-ratio:1/0.9; border-radius:10px; }
  .mock-list-row{ display:flex; align-items:center; gap:12px; padding:14px 22px; border-top:1px solid var(--line); }
  .mock-dot{ width:26px; height:26px; border-radius:50%; flex:none; }
  .mock-chart{ margin:0 22px 24px; height:120px; border-radius:10px; display:flex; align-items:flex-end; gap:6px; padding:14px; }
  .mock-chart i{ flex:1; border-radius:4px 4px 0 0; display:block; }

  .phone-mock{
    flex:none; width:230px;
    border-radius:34px;
    border:8px solid #1c1f2b;
    background:var(--panel);
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
    position:relative;
  }
  .phone-mock .notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:18px; background:#1c1f2b; border-radius:0 0 12px 12px; z-index:2; }
  .phone-status{ padding:18px 18px 6px; display:flex; justify-content:space-between; }
  .phone-status .mock-pill{ width:36px; }
  .phone-hero{ padding:16px 18px; }
  .phone-avatar{ width:40px; height:40px; border-radius:50%; margin-bottom:14px; }
  .phone-stat{ border-radius:14px; padding:16px; margin:0 18px 14px; }
  .phone-stat .mock-line{ background:rgba(255,255,255,0.35); }
  .phone-tabbar{ display:flex; justify-content:space-around; padding:14px 0; border-top:1px solid var(--line); margin-top:8px; }
  .phone-tabbar i{ width:18px; height:18px; border-radius:5px; background:var(--line-strong); display:block; }

  /* Palette / brand mockups */
  .palette-strip{ display:flex; border-radius:14px; overflow:hidden; border:1px solid var(--line); margin-bottom:8px; }
  .palette-swatch{ flex:1; height:90px; display:flex; align-items:flex-end; padding:10px; font-family:'IBM Plex Mono'; font-size:10.5px; }
  .card-mock{
    flex:none; width:280px; height:170px; border-radius:14px; padding:22px;
    display:flex; flex-direction:column; justify-content:space-between;
    border:1px solid var(--line-strong);
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
  }
  .card-mock .mock-logo{ width:30px; height:30px; }
  .logo-lockup{
    flex:none; width:230px; height:230px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong);
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
  }

  .screens-note{ color:var(--muted); font-size:12.5px; margin-top:-8px; margin-bottom:34px; }

  /* Next case study */
  .next-cs{
    display:flex; justify-content:space-between; align-items:center;
    border:1px solid var(--line); border-radius:var(--radius);
    padding:36px 40px;
    transition:border-color .3s;
  }
  .next-cs:hover{ border-color:var(--coral); }
  .next-cs .label{ color:var(--muted); font-size:12px; margin-bottom:8px; display:block; }
  .next-cs h3{ font-size:26px; }
  .next-cs .arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition:.35s var(--ease); flex:none; }
  .next-cs:hover .arrow{ background:var(--coral); border-color:var(--coral); }
  .next-cs .arrow svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
  .next-cs:hover .arrow svg{ transform:rotate(45deg); }
  @media (max-width:600px){ .next-cs{ flex-direction:column; align-items:flex-start; gap:20px; } }