/* ===== Tokens ===== */
  :root{
    --ink:#0D152E;
    --ink-soft:#3A3D42;
    --muted:#6B6F75;
    --paper:#FFFFFF;
    --fog:#F6F7F8;
    --line:#E7E8EA;
    --signal:#7C3AED;
    --signal-soft:#EDE9FE;
    --signal-dark:#5B21B6;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-full:999px;
    --max-w:1200px;
    --shadow-card: 0 24px 48px -24px rgba(11,12,14,0.18);
    --ease: cubic-bezier(.2,.8,.2,1);
  }

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

  ::selection{background:var(--signal-soft);color:var(--signal-dark);}

  .font-display{font-family:'Sora',system-ui,sans-serif;}
  .font-mono{font-family:'JetBrains Mono',monospace;}

  .container{
    width:100%;
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 1.5rem;
  }
  @media(min-width:768px){
    .container{padding:0 3rem;}
  }

  .section{padding:6rem 0;}
  .section--lg{padding:8rem 0;position:relative;overflow:hidden;}
  .section--border-top{border-top:1px solid var(--line);}
  .section .container{position:relative;z-index:2;}

  /* ===== Section background treatments ===== */
  #services::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:url('https://images.unsplash.com/photo-1574218732130-6b19257fd9db?auto=format&fit=crop&w=1600&q=60');
    background-size:cover;
    background-position:center;
    opacity:0.05;
  }
  #services::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.9) 35%, #fff 100%);
  }

  h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;font-weight:700;letter-spacing:-0.02em;}

  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:#9CA0A6;
    margin-bottom:0.75rem;
  }

  .lead{font-size:1.125rem;color:var(--ink-soft);}

  .focus-ring:focus-visible{
    outline:2px solid var(--signal);
    outline-offset:3px;
    border-radius:8px;
  }

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    font-weight:600;
    font-size:0.95rem;
    padding:0.9rem 1.75rem;
    border-radius:var(--radius-full);
    border:1px solid transparent;
    transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    white-space:nowrap;
  }
  .btn--primary{
    background:var(--ink);
    color:#fff;
  }
  .btn--primary:hover{
    background:var(--signal-dark);
    transform:translateY(-2px);
    box-shadow:0 16px 32px -16px rgba(124,58,237,0.45);
  }
  .btn--secondary{
    background:transparent;
    color:var(--ink);
    border-color:var(--line);
  }
  .btn--secondary:hover{
    border-color:var(--ink);
    background:var(--fog);
  }
  .btn--signal{
    background:var(--signal);
    color:#fff;
  }
  .btn--signal:hover{
    background:var(--signal-dark);
    transform:translateY(-2px);
  }
  .btn--block{width:100%;}

  /* ===== Nav ===== */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem;
    height:4.5rem;
  }
  @media(min-width:768px){.nav__inner{height:5rem;}}

  .brand{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-weight:700;
    font-size:1.125rem;
  }
  .brand__mark{
    width:36px;height:34px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .brand__mark img{width:100%;height:100%;object-fit:contain;display:block;}

  .nav__links{
    display:none;
    align-items:center;
    gap:1.75rem;
    font-size:0.875rem;
    font-weight:500;
  }

  @media(min-width:1024px){
    .nav__links{display:flex;}
  }

  .nav__link{
    position:relative;
    color:var(--ink-soft);
    transition:color .25s;
    padding-bottom:4px;
  }
  .nav__link::after{
    content:'';
    position:absolute;left:0;bottom:0;
    width:0;height:1px;
    background:var(--ink);
    transition:width .25s var(--ease);
  }
  .nav__link:hover{color:var(--ink);}
  .nav__link:hover::after{width:100%;}

  .nav__cta{
    display:none;
    flex-shrink:0;
    padding:0.9rem 1.75rem;
    font-size:0.95rem;
  }
  @media(min-width:1024px){
    .nav__cta{display:inline-flex;}
  }

  /* ===== Burger toggle (tablet & mobile only) ===== */
  .nav__toggle{
    display:flex;
    align-items:center;justify-content:center;
    width:40px;height:40px;
    background:none;border:none;
    color:var(--ink);
    font-size:1.25rem;
    flex-shrink:0;
  }
  @media(min-width:1024px){
    .nav__toggle{display:none;}
  }

  .nav__mobile{
    position:fixed;
    top:4.5rem;left:0;right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -24px rgba(0,0,0,0.2);
    transform:translateY(-100vh);
    opacity:0;
    visibility:hidden;
    transition:transform .4s var(--ease), opacity .3s ease, visibility 0s linear .4s;
    z-index:999;
    max-height:calc(100vh - 4.5rem);
    overflow-y:auto;
  }
  .nav__mobile.is-open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    transition:transform .4s var(--ease), opacity .3s ease, visibility 0s linear 0s;
  }
  .nav__mobile-list{
    display:flex;flex-direction:column;
    gap:1.25rem;
    padding:1.5rem;
    font-size:1rem;font-weight:500;
  }
  @media(min-width:1024px){.nav__mobile{display:none;}}

  /* ===== Hero ===== */
  .hero{
    position:relative;
    overflow:hidden;
    padding:9rem 0 5rem;
    background:
      radial-gradient(60% 50% at 12% 8%, rgba(167,139,250,0.22) 0%, rgba(167,139,250,0) 70%),
      radial-gradient(55% 50% at 88% 18%, rgba(129,140,248,0.28) 0%, rgba(129,140,248,0) 70%),
      radial-gradient(50% 45% at 50% 95%, rgba(125,211,252,0.18) 0%, rgba(125,211,252,0) 70%),
      linear-gradient(180deg, #FCFBFF 0%, #F7F8FA 55%, #F4F6F7 100%);
    text-align:center;
  }
  @media(min-width:768px){.hero{padding:12rem 0 6rem;}}

  /* ===== Hero floating background elements ===== */
  .hero__bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    transition:transform .2s ease-out;
    will-change:transform;
  }

  .hero__orb{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    opacity:0.8;
  }
  .hero__orb--a{
    width:440px;height:440px;
    left:-120px;top:20px;
    background:radial-gradient(circle, rgba(167,139,250,0.55) 0%, rgba(167,139,250,0) 70%);
    animation:floatA 10s ease-in-out infinite;
  }
  .hero__orb--b{
    width:360px;height:360px;
    right:-90px;top:180px;
    background:radial-gradient(circle, rgba(129,140,248,0.6) 0%, rgba(129,140,248,0) 70%);
    animation:floatB 12s ease-in-out infinite;
  }
  .hero__orb--c{
    width:320px;height:320px;
    left:40%;bottom:-110px;
    background:radial-gradient(circle, rgba(125,211,252,0.45) 0%, rgba(125,211,252,0) 70%);
    animation:floatA 13s ease-in-out infinite reverse;
  }

  .hero__dotgrid{
    position:absolute;
    width:200px;height:200px;
    opacity:0.85;
  }
  .hero__dotgrid--tl{top:6.5rem;left:3%;}
  .hero__dotgrid--br{bottom:1.5rem;right:4%;}
  .hero__dotgrid circle{fill:#9CA0A6;}
  .hero__dotgrid--tl circle, .hero__dotgrid--br circle{r:3.2;}

  .hero__float-icon{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 22px 44px -16px rgba(11,12,14,0.32);
    border-radius:16px;
    color:var(--signal);
    font-size:1.3rem;
    z-index:1;
    pointer-events:auto;
    cursor:pointer;
    text-decoration:none;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  }
  .hero__float-icon:hover{
    background:var(--ink);
    color:#fff;
    box-shadow:0 26px 50px -14px rgba(11,12,14,0.45);
    transform:scale(1.14) !important;
    animation-play-state:paused;
  }
  .hero__float-icon--1{
    width:64px;height:64px;
    top:8rem;left:4%;
    animation:floatA 6.5s ease-in-out infinite;
  }
  .hero__float-icon--2{
    width:56px;height:56px;
    top:13.5rem;right:5%;
    animation:floatB 7.5s ease-in-out infinite;
  }
  .hero__float-icon--3{
    width:58px;height:58px;
    bottom:2.5rem;left:7%;
    animation:floatA 8.5s ease-in-out infinite reverse;
  }
  @media(max-width:639px){
    .hero__float-icon--1{width:48px;height:48px;font-size:1.05rem;top:6.5rem;left:3%;}
    .hero__float-icon--2{width:44px;height:44px;font-size:0.95rem;top:10.5rem;right:3%;}
    .hero__float-icon--3{display:none;}
  }

  .hero__sparkline{
    position:absolute;
    top:4.5rem;
    right:2%;
    width:160px;
    opacity:0.95;
    display:none;
    animation:floatB 9s ease-in-out infinite;
  }
  @media(min-width:900px){.hero__sparkline{display:block;}}

  @keyframes floatA{
    0%, 100%{transform:translate(0, 0);}
    50%{transform:translate(26px, -34px);}
  }
  @keyframes floatB{
    0%, 100%{transform:translate(0, 0);}
    50%{transform:translate(-28px, 30px);}
  }
  @keyframes spinSlow{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }

  @media (prefers-reduced-motion: reduce){
    .hero__orb, .hero__float-icon, .hero__sparkline{animation:none;}
  }

  .hero__content{max-width:680px;position:relative;z-index:2;margin:0 auto;}

  .badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    border:1px solid var(--line);
    background:var(--fog);
    color:var(--ink-soft);
    border-radius:var(--radius-full);
    padding:0.4rem 1rem;
    font-size:0.78rem;
    font-weight:500;
    margin-bottom:1.75rem;
  }
  .badge__dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--signal);
  }

  .hero h1{
    font-size:2.5rem;
    line-height:1.08;
    margin-bottom:1.5rem;
  }
  .hero h1 .hero-word{
    display:inline-block;
    color:var(--signal);
    transition:opacity .3s ease, transform .3s ease;
  }
  .hero h1 .hero-word.is-swapping{
    opacity:0;
    transform:translateY(6px);
  }
  @media(min-width:768px){
    .hero h1{font-size:3.75rem;line-height:1.05;}
  }

  .hero p.lead{
    font-size:1.125rem;
    margin-bottom:2.5rem;
    max-width:540px;
    margin-left:auto;
    margin-right:auto;
  }
  @media(min-width:768px){.hero p.lead{font-size:1.25rem;}}

  .hero__actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.75rem;
    margin-bottom:3rem;
  }
  @media(min-width:600px){.hero__actions{flex-direction:row;justify-content:center;}}

  .trust-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.75rem;
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-soft);
  }
  .trust-list li{display:flex;align-items:center;gap:0.5rem;}
  .trust-list i{color:var(--signal);font-size:0.85rem;}

  /* ===== Hero image showcase (centered, multi-image) ===== */
  .hero__showcase{
    position:relative;
    z-index:2;
    margin:4rem auto 0;
    max-width:920px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1200px;
  }

  .browser-frame{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 40px 80px -30px rgba(11,12,14,0.28);
    overflow:hidden;
  }
  .browser-frame__bar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0.7rem 0.9rem;
    border-bottom:1px solid var(--line);
    background:var(--fog);
  }
  .browser-frame__dot{width:9px;height:9px;border-radius:50%;background:var(--line);}
  .browser-frame__img{width:100%;height:auto;aspect-ratio:900/620;object-fit:cover;display:block;}

  .hero__showcase-main{
    position:relative;
    z-index:3;
    width:62%;
    max-width:560px;
    transform-style:preserve-3d;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
    will-change:transform;
  }
  .hero__showcase-main .browser-frame{transition:box-shadow .25s var(--ease);}
  .hero__showcase-main:hover .browser-frame{box-shadow:0 50px 100px -28px rgba(11,12,14,0.4);}

  .hero__showcase-side{
    position:relative;
    width:30%;
    max-width:230px;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 30px 60px -28px rgba(11,12,14,0.25);
    display:none;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
    cursor:pointer;
  }
  .hero__showcase-side img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s var(--ease);
  }
  .hero__showcase-side:hover img{transform:scale(1.08);}
  .hero__showcase-side:hover{box-shadow:0 36px 70px -24px rgba(11,12,14,0.35);}
  @media(min-width:768px){
    .hero__showcase-side{display:block;}
  }

  .hero__showcase-side--left{
    margin-right:-2.5rem;
    transform:rotate(-6deg) translateY(1.5rem);
    aspect-ratio:3/4;
    z-index:1;
  }
  .hero__showcase-side--left:hover{transform:rotate(-3deg) translateY(0.5rem) scale(1.04);}
  .hero__showcase-side--right{
    margin-left:-2.5rem;
    transform:rotate(6deg) translateY(2.5rem);
    aspect-ratio:3/4;
    z-index:2;
  }
  .hero__showcase-side--right:hover{transform:rotate(3deg) translateY(1.5rem) scale(1.04);}

  .growth-line{stroke:var(--signal);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0.55;}
  .growth-dot{fill:var(--signal);}

  /* ===== Section header ===== */
  .section-head{max-width:640px;margin-bottom:4rem;}
  .section-head--center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head h2{font-size:2rem;margin-bottom:1rem;}
  @media(min-width:768px){.section-head h2{font-size:2.75rem;}}

  /* ===== Service cards ===== */
  .grid-3{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  @media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr);}}

  .card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  }
  .card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-card);
    border-color:#D9DBDE;
  }

  .card__media{
    width:100%;
    height:190px;
    overflow:hidden;
    background:var(--fog);
  }
  .card__media img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s var(--ease);
  }
  .card:hover .card__media img{transform:scale(1.06);}

  .card__body{padding:2.25rem;}

  .card__icon{
    width:44px;height:44px;
    border-radius:12px;
    background:var(--signal-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--signal);
    font-size:1.1rem;
    margin-bottom:1.75rem;
  }
  .card h3{font-size:1.25rem;margin-bottom:0.75rem;}
  .card p{color:var(--ink-soft);}

  /* ===== Why choose grid ===== */
  .why{background:var(--fog);}
  .why::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:radial-gradient(circle, #C9CBCE 1.4px, transparent 1.4px);
    background-size:26px 26px;
    opacity:0.55;
    mask-image:radial-gradient(ellipse 60% 70% at 50% 35%, #000 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 35%, #000 0%, transparent 75%);
  }
  .why::after{
    content:'';
    position:absolute;
    width:420px;height:420px;
    right:-140px;top:-140px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(129,140,248,0.30) 0%, rgba(129,140,248,0) 70%);
    filter:blur(50px);
    z-index:0;
    pointer-events:none;
  }

  .why__visual{
    position:relative;
    z-index:1;
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:2.5rem;
    border:1px solid var(--line);
    box-shadow:var(--shadow-card);
  }
  .why__visual img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
  }
  @media(min-width:768px){.why__visual img{height:340px;}}
  .why__visual figcaption{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:1.25rem 1.5rem;
    background:linear-gradient(180deg, rgba(11,12,14,0) 0%, rgba(11,12,14,0.75) 100%);
    color:#fff;
    font-size:0.875rem;
    font-weight:500;
  }
  .feature-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
  }
  @media(min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.feature-grid{grid-template-columns:repeat(3,1fr);}}

  .feature-grid__item{
    background:#fff;
    padding:2rem;
  }
  .feature-grid__item h3{font-size:1.05rem;margin-bottom:0.5rem;}
  .feature-grid__item p{font-size:0.9rem;color:var(--ink-soft);}

  /* ===== Portfolio ===== */
  .portfolio-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  @media(min-width:640px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.portfolio-grid{grid-template-columns:repeat(4,1fr);}}

  .portfolio-item{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--line);
    aspect-ratio:3/4;
    background:var(--fog);
  }
  .portfolio-item img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .5s var(--ease);
  }
  .portfolio-item:hover img{transform:scale(1.08);}
  .portfolio-item__overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(11,12,14,0) 40%, rgba(11,12,14,0.82) 100%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:1.5rem;
    opacity:0;
    transition:opacity .35s var(--ease);
  }
  .portfolio-item:hover .portfolio-item__overlay{opacity:1;}
  .portfolio-item__overlay span{
    color:#fff;
    font-weight:600;
    font-size:0.95rem;
  }
  .portfolio-item__overlay small{
    color:rgba(255,255,255,0.7);
    font-size:0.78rem;
  }

  /* ===== Areas Served ===== */
  .areas{background:var(--fog);}
  .areas__bg-photo{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .areas__bg-photo img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 35%;
    opacity:0.5;
    filter:grayscale(0.25);
  }
  .areas__bg-photo::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(246,247,248,0.94) 0%, rgba(246,247,248,0.88) 60%, var(--fog) 100%);
  }

  .pricing-bg::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(45% 40% at 15% 10%, rgba(167,139,250,0.12) 0%, rgba(167,139,250,0) 70%),
      radial-gradient(40% 35% at 85% 90%, rgba(129,140,248,0.16) 0%, rgba(129,140,248,0) 70%);
  }
  .areas-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0.75rem;
  }
  @media(min-width:640px){.areas-grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1024px){.areas-grid{grid-template-columns:repeat(5,1fr);}}

  .areas-grid__item{
    display:flex;
    align-items:center;
    gap:0.6rem;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:0.9rem 1.1rem;
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-soft);
  }
  .areas-grid__item i{color:var(--signal);font-size:0.85rem;}

  .areas__note{
    margin-top:2rem;
    font-size:0.9rem;
    color:var(--muted);
    max-width:760px;
  }

  /* ===== Pricing ===== */
  .pricing-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
    align-items:start;
  }
  @media(min-width:1024px){.pricing-grid{grid-template-columns:repeat(3,1fr);}}

  .price-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:2.25rem;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}

  .price-card h3{font-size:1.25rem;margin-bottom:0.25rem;}
  .price-card__desc{font-size:0.9rem;color:var(--ink-soft);margin-bottom:1.5rem;}
  .price-card__amount{margin-bottom:1.5rem;}
  .price-card__amount .num{font-size:1.85rem;font-weight:700;font-family:'Sora',sans-serif;}
  .price-card__amount .range{color:var(--ink-soft);}

  .price-card__features{
    display:flex;flex-direction:column;
    gap:0.75rem;
    font-size:0.875rem;
    flex:1;
    margin-top:1.75rem;
  }
  .price-card__features li{display:flex;align-items:flex-start;gap:0.6rem;}
  .price-card__features i{color:var(--signal);margin-top:0.2rem;font-size:0.8rem;flex-shrink:0;}

  .price-card--featured{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
    position:relative;
  }
  @media(min-width:1024px){.price-card--featured{transform:translateY(-1rem);}}
  .price-card--featured:hover{transform:translateY(-1.5rem);box-shadow:0 32px 64px -24px rgba(0,0,0,0.45);}
  .price-card--featured .price-card__desc{color:rgba(255,255,255,0.65);}
  .price-card--featured .price-card__amount .range{color:rgba(255,255,255,0.65);}
  .price-card--featured .price-card__features{color:rgba(255,255,255,0.85);}
  .price-card--featured .price-card__features i{color:#818CF8;}

  .price-card__badge{
    position:absolute;
    top:-0.9rem;left:50%;
    transform:translateX(-50%);
    background:var(--signal);
    color:#fff;
    font-size:0.75rem;
    font-weight:600;
    padding:0.4rem 1.1rem;
    border-radius:var(--radius-full);
    white-space:nowrap;
  }

  /* ===== FAQ ===== */
  .faq{background:var(--fog);}
  .faq::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:radial-gradient(circle, #C9CBCE 1.4px, transparent 1.4px);
    background-size:26px 26px;
    opacity:0.45;
    mask-image:radial-gradient(ellipse 55% 65% at 50% 65%, #000 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 55% 65% at 50% 65%, #000 0%, transparent 75%);
  }
  .faq::after{
    content:'';
    position:absolute;
    width:360px;height:360px;
    left:-120px;bottom:-140px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(167,139,250,0.22) 0%, rgba(167,139,250,0) 70%);
    filter:blur(50px);
    z-index:0;
    pointer-events:none;
  }
  .faq-list{display:flex;flex-direction:column;gap:0.75rem;max-width:720px;margin:0 auto;}

  .faq-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .faq-item:hover{box-shadow:var(--shadow-card);border-color:#D9DBDE;}

  .faq-item__q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    background:none;
    border:none;
    text-align:left;
    padding:1.5rem;
    font-weight:500;
    font-size:1rem;
    color:var(--ink-soft);
  }
  .faq-item__q:hover{color:var(--ink);}
  .faq-item__icon{
    flex-shrink:0;
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .3s var(--ease);
  }
  .faq-item.is-open .faq-item__icon{transform:rotate(45deg);}
  .faq-item.is-open .faq-item__q{color:var(--ink);}

  .faq-item__a{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .faq-item__a-inner{
    padding:0 1.5rem 1.5rem;
    font-size:0.9rem;
    line-height:1.65;
    color:var(--ink-soft);
  }

  /* ===== Blog / Resources ===== */
  .resources{background:var(--paper);}

  .resources-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
    margin-bottom:3rem;
  }
  @media(min-width:768px){.resources-grid{grid-template-columns:repeat(3,1fr);}}

  .resource-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:1.75rem;
    text-decoration:none;
    color:inherit;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .resource-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-card);
    border-color:#D9DBDE;
  }

  .resource-card__tag{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    align-self:flex-start;
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--signal);
    background:var(--signal-soft);
    border-radius:999px;
    padding:0.3rem 0.7rem;
    margin-bottom:1rem;
  }

  .resource-card h4{
    font-family:'Sora',system-ui,sans-serif;
    font-weight:600;
    font-size:1.05rem;
    line-height:1.35;
    margin-bottom:0.6rem;
  }

  .resource-card p{
    font-size:0.875rem;
    color:var(--ink-soft);
    line-height:1.6;
    flex:1;
    margin-bottom:1rem;
  }

  .resource-card__source{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.8rem;
    font-weight:500;
    color:var(--ink-soft);
    padding-top:1rem;
    border-top:1px solid var(--line);
  }
  .resource-card__source i{
    color:var(--ink-soft);
    transition:transform .25s var(--ease), color .25s var(--ease);
  }
  .resource-card:hover .resource-card__source i{
    transform:translate(3px, -3px);
    color:var(--signal);
  }

  .resources-group-title{
    font-size:0.95rem;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:1.25rem;
    display:flex;
    align-items:center;
    gap:0.6rem;
  }
  .resources-group-title i{color:var(--signal);}

  .resources__disclosure{
    font-size:0.8rem;
    color:var(--muted);
    max-width:680px;
  }

  /* ===== Stats Counter Strip ===== */
  .stats{
    background:var(--ink);
    padding:3rem 0;
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
    text-align:center;
  }
  @media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
  .stat-item__num{
    font-family:'Sora',system-ui,sans-serif;
    font-weight:700;
    font-size:2.25rem;
    color:#fff;
    line-height:1;
    margin-bottom:0.5rem;
  }
  .stat-item__num .stat-suffix{color:#818CF8;}
  .stat-item__label{
    font-size:0.8rem;
    color:rgba(255,255,255,0.55);
    font-weight:500;
  }


  /* ===== Card tilt (services / portfolio) ===== */
  .card, .price-card, .portfolio-item{transform-style:preserve-3d;}

  /* ===== Magnetic buttons ===== */
  .btn{will-change:transform;}

  /* ===== Confetti burst ===== */
  .confetti-piece{
    position:fixed;
    top:0;left:0;
    width:8px;height:8px;
    pointer-events:none;
    z-index:9998;
    border-radius:2px;
    opacity:0.95;
  }

  @media (prefers-reduced-motion: reduce){
    .confetti-piece{display:none;}
  }

  /* ===== Final CTA ===== */
  .cta{
    position:relative;
    overflow:hidden;
    background:var(--ink);
    color:#fff;
    text-align:center;
  }
  .cta__bg{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .cta__bg img{
    width:100%;height:100%;
    object-fit:cover;
    opacity:0.28;
  }
  .cta__bg::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(11,12,14,0.55) 0%, rgba(11,12,14,0.92) 100%);
  }
  .cta .container{position:relative;z-index:2;}
  .cta h2{color:#fff;font-size:2rem;margin-bottom:1.25rem;}
  @media(min-width:768px){.cta h2{font-size:3rem;}}
  .cta p{color:rgba(255,255,255,0.65);font-size:1.125rem;max-width:560px;margin:0 auto 2.5rem;}
  .cta__graphic{
    position:absolute;
    right:0;bottom:0;
    opacity:0.12;
    pointer-events:none;
  }

  /* ===== Footer ===== */
  .footer{background:var(--ink);color:#fff;padding:3.5rem 0;border-top:1px solid #1F2024;}
  .footer__top{
    display:flex;
    flex-direction:column;
    gap:2rem;
    margin-bottom:2.5rem;
  }
  @media(min-width:768px){
    .footer__top{flex-direction:row;align-items:center;justify-content:space-between;}
  }
  .footer__brand{display:flex;align-items:center;gap:0.5rem;font-weight:700;font-size:1.125rem;}
  .footer__nav{
    display:flex;flex-wrap:wrap;
    gap:1.75rem;
    font-size:0.875rem;
    color:rgba(255,255,255,0.6);
  }
  .footer__nav a:hover{color:#fff;}
  .footer__bottom{
    padding-top:2rem;
    border-top:1px solid #1F2024;
    display:flex;flex-direction:column;gap:0.75rem;
    font-size:0.78rem;
    color:rgba(255,255,255,0.45);
  }
  @media(min-width:768px){
    .footer__bottom{flex-direction:row;align-items:center;justify-content:space-between;}
  }
  .footer__copy{margin-top:1rem;font-size:0.75rem;color:rgba(255,255,255,0.35);}

  /* ===== Reveal animation ===== */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.in{opacity:1;transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    .card,.btn,.price-card,.faq-item{transition:none;}
  }

  /* ===== Page Loader ===== */
  .page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:#0D152E;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .6s var(--ease), visibility .6s var(--ease);
  }
  .page-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .page-loader__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
  }

  .page-loader__mark{
    width:88px;
    height:88px;
  }
  .page-loader__mark .pl-stroke{
    stroke:#FFFFFF;
    stroke-width:6.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
    stroke-dasharray:120;
    stroke-dashoffset:120;
    animation:plDraw 1.1s var(--ease) forwards;
  }
  .page-loader__mark .pl-stroke--leg{animation-delay:.15s;}
  .page-loader__mark .pl-stroke--arm{animation-delay:.3s; stroke-dasharray:60; stroke-dashoffset:60;}
  .page-loader__mark .pl-dot{
    fill:#818CF8;
    opacity:0;
    transform-origin:46px 14px;
    animation:plDot 0.5s ease-out .85s forwards, plPulse 1.6s ease-in-out 1.4s infinite;
  }

  .page-loader__bar{
    width:140px;
    height:3px;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    overflow:hidden;
  }
  .page-loader__bar-fill{
    height:100%;
    width:40%;
    border-radius:999px;
    background:linear-gradient(90deg, #818CF8, #A78BFA);
    animation:plBar 1.3s ease-in-out infinite;
  }

  .page-loader__text{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.45);
  }

  @keyframes plDraw{
    to{stroke-dashoffset:0;}
  }
  @keyframes plDot{
    from{opacity:0; transform:scale(0);}
    to{opacity:1; transform:scale(1);}
  }
  @keyframes plPulse{
    0%, 100%{transform:scale(1); opacity:1;}
    50%{transform:scale(1.35); opacity:0.7;}
  }
  @keyframes plBar{
    0%{transform:translateX(-100%);}
    100%{transform:translateX(350%);}
  }

  @media (prefers-reduced-motion: reduce){
    .page-loader__mark .pl-stroke{animation:none; stroke-dashoffset:0;}
    .page-loader__mark .pl-dot{animation:none; opacity:1; transform:scale(1);}
    .page-loader__bar-fill{animation:none; width:100%;}
    .page-loader{transition:opacity .3s ease, visibility .3s ease;}
  }

  /* ===== Floating WhatsApp Button ===== */
  .wa-float{
    position:fixed;
    right:1.5rem;
    bottom:1.5rem;
    z-index:500;
    display:flex;
    align-items:center;
  }

  .wa-float__btn{
    position:relative;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    box-shadow:0 16px 32px -10px rgba(37,211,102,0.55);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
    flex-shrink:0;
  }
  .wa-float__btn:hover{
    transform:scale(1.08);
    box-shadow:0 20px 40px -8px rgba(37,211,102,0.65);
  }
  .wa-float__btn:active{transform:scale(0.96);}

  .wa-float__ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    opacity:0.55;
    animation:waPulse 2.4s ease-out infinite;
    pointer-events:none;
  }

  .wa-float__tooltip{
    position:absolute;
    right:70px;
    top:50%;
    transform:translateY(-50%) translateX(8px);
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    box-shadow:0 16px 32px -16px rgba(11,12,14,0.3);
    border-radius:12px;
    padding:0.65rem 1rem;
    font-size:0.85rem;
    font-weight:500;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
    pointer-events:none;
  }
  .wa-float__tooltip::after{
    content:'';
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    border:6px solid transparent;
    border-left-color:#fff;
  }
  .wa-float:hover .wa-float__tooltip,
  .wa-float__btn:focus-visible ~ .wa-float__tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
  }

  @keyframes waPulse{
    0%{transform:scale(1); opacity:0.55;}
    100%{transform:scale(1.7); opacity:0;}
  }

  @media(max-width:639px){
    .wa-float{right:1rem;bottom:1rem;}
    .wa-float__btn{width:52px;height:52px;font-size:1.4rem;}
    .wa-float__tooltip{display:none;}
  }

  @media (prefers-reduced-motion: reduce){
    .wa-float__ring{animation:none; display:none;}
    .wa-float__btn{transition:none;}
  }

  /* ===== Scroll Progress Bar ===== */
  .scroll-progress{
    position:fixed;
    top:0;left:0;
    height:3px;
    width:0%;
    background:linear-gradient(90deg, var(--signal), #A78BFA);
    z-index:1100;
    transition:width .1s linear;
  }

  /* ===== Portfolio Filters ===== */
  .portfolio-filters{
    display:flex;
    flex-wrap:wrap;
    gap:0.6rem;
    margin-bottom:2.5rem;
  }
  .portfolio-filter{
    border:1.5px solid var(--line);
    background:#fff;
    color:var(--ink-soft);
    font-size:0.85rem;
    font-weight:500;
    padding:0.55rem 1.1rem;
    border-radius:999px;
    transition:all .25s var(--ease);
  }
  .portfolio-filter:hover{border-color:var(--ink);color:var(--ink);}
  .portfolio-filter.is-active{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
  }
  .portfolio-item{transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s ease;}
  .portfolio-item.is-hidden{
    display:none;
  }

  /* ===== Copy-to-clipboard ===== */
  .copy-trigger{
    cursor:pointer;
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
  }
  .copy-trigger i{font-size:0.75rem;opacity:0.7;}
  .copy-trigger__toast{
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    background:var(--signal);
    color:#fff;
    font-size:0.72rem;
    font-weight:600;
    padding:0.3rem 0.65rem;
    border-radius:6px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .copy-trigger.is-copied .copy-trigger__toast{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  /* =====================================================================
     MULTI-PAGE ADDITIONS (shared across the 7 pages)
     Reuses existing tokens: --ink, --signal, --line, --fog, radii, shadow.
     ===================================================================== */

  /* ----- Active navigation state (uses existing underline language) ----- */
  .nav__link.is-current{color:var(--ink);}
  .nav__link.is-current::after{width:100%;}
  .nav__mobile-link.is-current{color:var(--signal);font-weight:700;}
  .footer__nav a.is-current{color:#fff;}

  /* ----- Inner-page hero (shorter than the home hero, clears fixed nav) ----- */
  .page-hero{
    position:relative;
    overflow:hidden;
    padding:9rem 0 4rem;
    text-align:center;
    background:
      radial-gradient(55% 60% at 15% 10%, rgba(167,139,250,0.20) 0%, rgba(167,139,250,0) 70%),
      radial-gradient(55% 55% at 85% 15%, rgba(129,140,248,0.24) 0%, rgba(129,140,248,0) 70%),
      linear-gradient(180deg, #FCFBFF 0%, #F7F8FA 60%, #F4F6F7 100%);
    border-bottom:1px solid var(--line);
  }
  @media(min-width:768px){.page-hero{padding:12rem 0 5rem;}}
  .page-hero__inner{max-width:760px;margin:0 auto;}
  .page-hero h1{font-size:2.25rem;line-height:1.1;margin-bottom:1.1rem;}
  @media(min-width:768px){.page-hero h1{font-size:3.25rem;}}
  .page-hero .lead{margin:0 auto;max-width:640px;}
  .page-hero__actions{
    display:flex;flex-wrap:wrap;gap:0.9rem;justify-content:center;margin-top:2rem;
  }
  .breadcrumbs{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;letter-spacing:0.04em;color:var(--muted);
    margin-bottom:1.25rem;
  }
  .breadcrumbs a:hover{color:var(--signal);}
  .breadcrumbs span{color:var(--line);}

  /* ----- Generic two-column split (About, Services intro, Contact) ----- */
  .split{
    display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
  }
  @media(min-width:900px){
    .split{grid-template-columns:1fr 1fr;gap:4rem;}
    .split--wide-left{grid-template-columns:1.15fr 0.85fr;}
  }
  .split__media img{
    width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
    border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  }
  .prose-block h2{font-size:1.75rem;margin-bottom:1rem;}
  @media(min-width:768px){.prose-block h2{font-size:2.25rem;}}
  .prose-block p{color:var(--ink-soft);margin-bottom:1rem;line-height:1.7;}
  .prose-block p:last-child{margin-bottom:0;}
  .check-list{margin-top:1.25rem;display:grid;gap:0.75rem;}
  .check-list li{display:flex;gap:0.65rem;align-items:flex-start;color:var(--ink-soft);}
  .check-list i{color:var(--signal);margin-top:0.28rem;flex-shrink:0;}

  /* ----- Process / working-approach steps ----- */
  .process-grid{
    display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1rem;
  }
  @media(min-width:640px){.process-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.process-grid{grid-template-columns:repeat(4,1fr);}}
  .process-step{
    position:relative;padding:2rem 1.5rem;border:1px solid var(--line);
    border-radius:var(--radius-lg);background:var(--paper);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  }
  .process-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:transparent;}
  .process-step__num{
    font-family:'JetBrains Mono',monospace;font-size:0.85rem;font-weight:500;
    color:var(--signal);
    width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-full);background:var(--signal-soft);margin-bottom:1.1rem;
  }
  .process-step h3{font-size:1.1rem;margin-bottom:0.5rem;}
  .process-step p{color:var(--ink-soft);font-size:0.95rem;line-height:1.6;}

  /* ----- Detailed service blocks (Services page) ----- */
  .service-block{
    scroll-margin-top:6rem;
    padding:2.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);
    background:var(--paper);
  }
  .service-block + .service-block{margin-top:2rem;}
  .service-block__head{display:flex;gap:1rem;align-items:center;margin-bottom:1.25rem;}
  .service-block__icon{
    width:3.25rem;height:3.25rem;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-md);background:var(--signal-soft);color:var(--signal);
    font-size:1.35rem;
  }
  .service-block__head h2{font-size:1.6rem;}
  @media(min-width:768px){.service-block__head h2{font-size:1.9rem;}}
  .service-block__grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem;}
  @media(min-width:768px){.service-block__grid{grid-template-columns:1fr 1fr;}}
  .service-block__grid h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:0.75rem;}
  .service-block p{color:var(--ink-soft);line-height:1.7;}

  /* ----- Blog listing cards (extends the .card language) ----- */
  .post-card{display:flex;flex-direction:column;height:100%;}
  .post-card .card__body{display:flex;flex-direction:column;flex:1;}
  .post-meta{
    display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;
    font-size:0.78rem;color:var(--muted);margin-bottom:0.75rem;
  }
  .post-tag{
    display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.7rem;
    text-transform:uppercase;letter-spacing:0.05em;
    color:var(--signal-dark);background:var(--signal-soft);
    padding:0.3rem 0.7rem;border-radius:var(--radius-full);
  }
  .post-card h3{font-size:1.2rem;margin-bottom:0.6rem;line-height:1.3;}
  .post-card h3 a:hover{color:var(--signal);}
  .post-card__excerpt{color:var(--ink-soft);font-size:0.95rem;line-height:1.6;flex:1;}
  .post-card__more{
    margin-top:1.1rem;font-weight:600;font-size:0.9rem;color:var(--signal);
    display:inline-flex;align-items:center;gap:0.4rem;
  }
  .post-card__more i{transition:transform .25s var(--ease);}
  .post-card:hover .post-card__more i{transform:translateX(4px);}

  /* ----- Article (blog-detail) readable column ----- */
  .article{max-width:760px;margin:0 auto;}
  .article__figure{margin:0 0 2.5rem;}
  .article__figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
  .article__figure figcaption{font-size:0.85rem;color:var(--muted);margin-top:0.75rem;text-align:center;}
  .article__body{font-size:1.05rem;line-height:1.8;color:var(--ink-soft);}
  .article__body > * + *{margin-top:1.4rem;}
  .article__body h2{font-size:1.6rem;color:var(--ink);margin-top:2.5rem;}
  .article__body h3{font-size:1.25rem;color:var(--ink);margin-top:2rem;}
  .article__body a{color:var(--signal);text-decoration:underline;text-underline-offset:3px;}
  .article__body a:hover{color:var(--signal-dark);}
  .article__body ul,.article__body ol{padding-left:1.4rem;display:grid;gap:0.6rem;}
  .article__body ul{list-style:disc;}
  .article__body ol{list-style:decimal;}
  .article__body blockquote{
    border-left:3px solid var(--signal);padding:0.5rem 0 0.5rem 1.5rem;
    font-family:'Sora',system-ui,sans-serif;font-size:1.2rem;font-weight:500;
    color:var(--ink);font-style:italic;
  }
  .article__body img{border-radius:var(--radius-md);box-shadow:var(--shadow-card);}

  /* ----- Prev / next + related ----- */
  .article-nav{
    display:grid;grid-template-columns:1fr;gap:1rem;
    max-width:760px;margin:3rem auto 0;padding-top:2rem;border-top:1px solid var(--line);
  }
  @media(min-width:640px){.article-nav{grid-template-columns:1fr 1fr;}}
  .article-nav__link{
    display:block;padding:1.25rem 1.5rem;border:1px solid var(--line);
    border-radius:var(--radius-md);transition:border-color .25s var(--ease),background .25s var(--ease);
  }
  .article-nav__link:hover{border-color:var(--ink);background:var(--fog);}
  .article-nav__link span{font-size:0.75rem;color:var(--muted);font-family:'JetBrains Mono',monospace;}
  .article-nav__link strong{display:block;margin-top:0.35rem;font-family:'Sora',sans-serif;font-weight:600;color:var(--ink);}
  .article-nav__link--next{text-align:right;}

  /* ----- Contact form ----- */
  .contact-panel{
    padding:2.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);
    background:var(--paper);box-shadow:var(--shadow-card);
  }
  .form{display:grid;gap:1.25rem;}
  .form__row{display:grid;gap:1.25rem;}
  @media(min-width:600px){.form__row{grid-template-columns:1fr 1fr;}}
  .form__group{display:flex;flex-direction:column;gap:0.4rem;}
  .form__group label{font-size:0.85rem;font-weight:600;color:var(--ink);}
  .form__group input,.form__group select,.form__group textarea{
    font-family:inherit;font-size:0.95rem;color:var(--ink);
    padding:0.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-md);
    background:var(--fog);transition:border-color .2s var(--ease),background .2s var(--ease);
    width:100%;
  }
  .form__group textarea{resize:vertical;min-height:130px;}
  .form__group input:focus,.form__group select:focus,.form__group textarea:focus{
    outline:none;border-color:var(--signal);background:#fff;
  }
  .form__note{font-size:0.85rem;color:var(--muted);}
  .form__status{
    font-size:0.9rem;font-weight:600;padding:0.85rem 1rem;border-radius:var(--radius-md);
    display:none;
  }
  .form__status.is-visible{display:block;}
  .form__status--ok{background:var(--signal-soft);color:var(--signal-dark);}

  /* ----- Contact info list ----- */
  .contact-info{display:grid;gap:1.5rem;}
  .contact-info__item{display:flex;gap:1rem;align-items:flex-start;}
  .contact-info__icon{
    width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    background:var(--signal-soft);color:var(--signal);font-size:1.1rem;
  }
  .contact-info__item h3{font-size:1.05rem;margin-bottom:0.25rem;}
  .contact-info__item p{color:var(--ink-soft);font-size:0.95rem;line-height:1.6;}
  .contact-info__item a{color:var(--signal);}
  .contact-info__item a:hover{text-decoration:underline;}

  /* =====================================================================
     APPLE-STYLE MEGA MENU (desktop) + mobile accordion
     ===================================================================== */

  /* nav list is now a <ul>; items are <li> */
  .nav__links{list-style:none;}
  .nav__item{position:static;display:flex;align-items:center;}
  .nav__chev{
    font-size:0.6rem;margin-left:0.3rem;
    transition:transform .3s var(--ease);
    color:var(--muted);
  }
  .nav__item--has-menu.is-open .nav__chev{transform:rotate(180deg);color:var(--ink);}
  .nav__item--has-menu.is-open > .nav__link{color:var(--ink);}

  /* ----- Scrim that dims the page while a panel is open ----- */
  .nav__scrim{
    position:fixed;
    top:5rem;left:0;right:0;bottom:0;
    background:rgba(13,21,46,0.28);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease), visibility 0s linear .3s;
    z-index:990;
  }
  .nav__scrim.is-visible{opacity:1;visibility:visible;transition:opacity .3s var(--ease);}

  /* ----- Panel wrapper (fixed, drops from under the bar) ----- */
  .megawrap{
    position:fixed;
    top:5rem;left:0;right:0;
    z-index:995;
    opacity:0;visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
    display:none;
  }
  @media(min-width:1024px){.megawrap{display:block;}}
  .megawrap.is-open{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .3s var(--ease), transform .35s var(--ease);
  }

  .megamenu{
    display:none;
    background:rgba(255,255,255,0.98);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--line);
    box-shadow:0 32px 60px -30px rgba(11,12,14,0.35);
  }
  .megamenu.is-active{display:block;}
  .megamenu__inner{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:3rem;
    padding:2.5rem 3rem 3rem;
    align-items:stretch;
  }
  .megamenu__eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--muted);margin-bottom:1.25rem;
  }
  .megamenu__links{display:grid;gap:0.35rem;}
  .megamenu__link{
    display:flex;flex-direction:column;
    padding:0.85rem 1rem;border-radius:var(--radius-md);
    position:relative;
    transition:background .25s var(--ease), transform .25s var(--ease);
  }
  .megamenu__link:hover,.megamenu__link:focus-visible,.megamenu__link.is-active{
    background:var(--fog);
  }
  .megamenu__link-title{
    font-family:'Sora',system-ui,sans-serif;font-weight:600;
    font-size:1.05rem;color:var(--ink);
  }
  .megamenu__link-sub{font-size:0.85rem;color:var(--muted);margin-top:0.15rem;}
  .megamenu__link-arrow{
    position:absolute;right:1rem;top:50%;transform:translateY(-50%) translateX(-6px);
    color:var(--signal);opacity:0;font-size:0.8rem;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .megamenu__link:hover .megamenu__link-arrow,
  .megamenu__link.is-active .megamenu__link-arrow{opacity:1;transform:translateY(-50%) translateX(0);}
  .megamenu__all{
    display:inline-flex;align-items:center;gap:0.5rem;
    margin-top:1.5rem;padding:0 1rem;
    font-weight:600;font-size:0.9rem;color:var(--signal);
  }
  .megamenu__all i{transition:transform .25s var(--ease);}
  .megamenu__all:hover i{transform:translateX(4px);}

  /* ----- Preview image that cross-fades on link hover ----- */
  .megamenu__preview{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    min-height:260px;
    background:var(--fog);
  }
  .mm-media{
    position:absolute;inset:0;margin:0;
    opacity:0;visibility:hidden;
    transform:scale(1.04);
    transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .45s;
  }
  .mm-media.is-active{opacity:1;visibility:visible;transform:scale(1);transition:opacity .45s var(--ease), transform .6s var(--ease);}
  .mm-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .mm-media figcaption{
    position:absolute;left:0;right:0;bottom:0;
    padding:2.5rem 1.5rem 1.25rem;
    background:linear-gradient(180deg, rgba(13,21,46,0) 0%, rgba(13,21,46,0.72) 100%);
    color:#fff;font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:1.05rem;
  }
  .mm-media figcaption span{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:0.85rem;opacity:0.85;margin-top:0.15rem;}

  @media(prefers-reduced-motion:reduce){
    .megawrap,.mm-media,.nav__scrim,.nav__chev{transition:none;}
    .mm-media{transform:none;}
  }

  /* ----- Mobile accordion (parents with sub-menus) ----- */
  .nav__mobile-parent{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    background:none;border:none;padding:0;
    font-family:inherit;font-size:1rem;font-weight:500;color:var(--ink);
    text-align:left;
  }
  .nav__mobile-parent i{font-size:0.7rem;color:var(--muted);transition:transform .3s var(--ease);}
  .nav__mobile-item.is-open .nav__mobile-parent i{transform:rotate(180deg);}
  .nav__mobile-item.is-open .nav__mobile-parent{color:var(--signal);}
  .nav__mobile-sub{
    display:grid;gap:0.85rem;
    max-height:0;overflow:hidden;
    padding-left:0.9rem;
    border-left:2px solid var(--line);
    margin-left:0.1rem;
    transition:max-height .35s var(--ease), margin-top .35s var(--ease), padding-top .35s var(--ease);
  }
  .nav__mobile-item.is-open .nav__mobile-sub{margin-top:0.85rem;}
  .nav__mobile-sublink{
    font-size:0.9rem;font-weight:500;color:var(--ink-soft);
  }
  .nav__mobile-sublink:hover{color:var(--signal);}

  /* ----- Keep section headings from orphaning a word; let the portfolio
           title use the full width so it sits on one line on desktop ----- */
  .section-head h2{text-wrap:balance;}
  #work .section-head{max-width:none;}
  #work .section-head .lead{max-width:38rem;}