/* ============================================================
     NEXARA — Design tokens
     ============================================================ */
  :root{
    --black:        #050507;
    --black-rgb:     5,5,7;
    --panel:         rgba(255,255,255,0.035);
    --panel-strong:  rgba(255,255,255,0.06);
    --border:        rgba(255,255,255,0.09);
    --border-soft:   rgba(255,255,255,0.06);

    --ink:           #F5F4F9;
    --ink-dim:       #ACAAB9;
    --ink-faint:     #716F80;

    --violet:        #7C6FF0;
    --violet-bright: #9C90FF;
    --violet-deep:   #2A2360;
    --silver:        #CFD0DC;
    --glow:          #C3B8FF;

    --grad-text:     linear-gradient(100deg, #E9E9F2 0%, #C9C2FA 45%, #8C7DF5 100%);
    --grad-violet:   linear-gradient(135deg, #8E7FF5 0%, #5C4CD6 100%);
    --grad-border:   linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.02));

    --container:     1200px;
    --pad:           clamp(20px, 5vw, 48px);
    --section-pad:   clamp(72px, 11vw, 152px);
    --radius-sm:     10px;
    --radius-md:     16px;
    --cut:           18px;
    --cut-sm:        10px;

    --ease:          cubic-bezier(.16,.84,.44,1);
    --dur:           .6s;

    --ff-display:    'Bricolage Grotesque', 'Inter', sans-serif;
    --ff-body:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-mono:       'JetBrains Mono', ui-monospace, monospace;
  }

  /* ============================================================
     Reset
     ============================================================ */
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
  }
  body{
    background:var(--black);
    color:var(--ink);
    font-family:var(--ff-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    position:relative;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  input,textarea{ font:inherit; color:inherit; }
  h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; }

  ::selection{ background:var(--violet); color:#fff; }

  :focus-visible{
    outline:2px solid var(--violet-bright);
    outline-offset:3px;
    border-radius:4px;
  }

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

  /* ============================================================
     Layout helpers
     ============================================================ */
  .container{ max-width:var(--container); margin:0 auto; padding-inline:var(--pad); }
  main section{ padding-block:var(--section-pad); position:relative; }
  .row{ display:flex; align-items:center; }
  .between{ justify-content:space-between; }
  .center{ text-align:center; }
  .v-line{ width:1px; background:var(--border); }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--violet-bright);
    margin-bottom:18px;
  }
  .eyebrow .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--glow);
    box-shadow:0 0 10px 2px rgba(156,144,255,.85);
    flex:none;
  }

  .section-head{ max-width:640px; margin-bottom:clamp(40px,6vw,72px); }
  .section-head.center{ margin-inline:auto; }
  .section-head h2{
    font-size:clamp(30px,4.2vw,48px);
    margin-bottom:18px;
  }
  .section-head p{
    color:var(--ink-dim);
    font-size:clamp(15px,1.6vw,17.5px);
    max-width:560px;
  }
  .section-head.center p{ margin-inline:auto; }

  .grad-text{
    background:var(--grad-text);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }

  /* ============================================================
     Reveal-on-scroll
     (scoped to html.js so content stays visible if JS fails)
     ============================================================ */
  .js .reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay:var(--rd,0ms);
  }
  .js .reveal.is-visible{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .js .reveal{ opacity:1; transform:none; }
  }

  /* Anchor scroll offset so the fixed nav never overlaps a target section */
  section[id], div#top{ scroll-margin-top:88px; }

  /* ============================================================
     Buttons
     ============================================================ */
  .btn{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    height:52px; padding-inline:26px;
    font-family:var(--ff-body); font-weight:600; font-size:15px;
    white-space:nowrap;
    clip-path:polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  }
  .btn:active{ transform:translateY(1px) scale(.99); }

  .btn-primary{
    background:var(--grad-violet);
    color:#fff;
    box-shadow:0 1px 0 0 rgba(255,255,255,.18) inset, 0 12px 30px -10px rgba(124,111,240,.65);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 1px 0 0 rgba(255,255,255,.25) inset, 0 18px 40px -8px rgba(124,111,240,.85);
  }

  .btn-ghost{
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--border);
    backdrop-filter:blur(8px);
  }
  .btn-ghost:hover{
    background:var(--panel-strong);
    border-color:rgba(255,255,255,.2);
    transform:translateY(-2px);
  }

  .btn-sm{ height:44px; padding-inline:20px; font-size:14px; }
  .btn-block{ width:100%; }

  .btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
  .btn:hover svg.arrow{ transform:translateX(3px); }

  /* ============================================================
     Glass panel / cut-corner card
     ============================================================ */
  .panel{
    position:relative;
    background:var(--panel);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    backdrop-filter:blur(14px);
  }
  .panel-cut{
    border-radius:0;
    clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  }

  /* ============================================================
     Ambient glow blobs
     ============================================================ */
  .glow-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .glow-blob{
    position:absolute; border-radius:50%;
    filter:blur(0px);
    opacity:.55;
  }

  .noise-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,0,0,.9), transparent 75%);
    mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,0,0,.9), transparent 75%);
    pointer-events:none;
  }

/* ============================================================
     Orb motif
     ============================================================ */
  .orb{
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #ffffff 0%, var(--glow) 28%, var(--violet) 62%, var(--violet-deep) 100%);
    box-shadow:0 0 18px 3px rgba(156,144,255,.65), 0 0 50px 10px rgba(124,111,240,.25);
  }

  /* ============================================================
     Navigation
     ============================================================ */
  .site-nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding-block:18px;
    transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  .site-nav.scrolled{
    padding-block:13px;
    background:rgba(5,5,7,.72);
    backdrop-filter:blur(16px);
    border-bottom-color:var(--border-soft);
  }
  .site-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

  .brand{ display:flex; align-items:center; gap:10px; flex:none; }
  .brand img{ height:30px; width:auto; }
  .brand span{
    font-family:var(--ff-display); font-weight:700; font-size:18.5px; letter-spacing:-.01em;
    color:var(--ink);
  }

  .nav-links{ display:none; align-items:center; gap:36px; }
  .nav-links a{
    font-size:14.5px; font-weight:500; color:var(--ink-dim);
    position:relative; padding-block:4px;
    transition:color .3s var(--ease);
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--violet-bright);
    transition:right .35s var(--ease);
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ right:0; }
  .nav-links a.active{ color:var(--ink); }
  .nav-links a.active::after{ right:0; }

  .nav-cta{ display:none; }
  .nav-burger{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; flex:none;
    border:1px solid var(--border); background:var(--panel);
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  }
  .nav-burger svg{ width:18px; height:18px; }
  .nav-burger .icon-close{ display:none; }
  .nav-burger.open .icon-menu{ display:none; }
  .nav-burger.open .icon-close{ display:block; }

  .mobile-menu{
    position:fixed; inset:0; z-index:99;
    background:rgba(5,5,7,.97);
    backdrop-filter:blur(20px);
    display:flex; flex-direction:column;
    padding:100px var(--pad) 40px;
    transform:translateY(-12px);
    opacity:0; visibility:hidden;
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  .mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .mobile-menu a{
    font-family:var(--ff-display); font-size:30px; font-weight:600;
    padding-block:16px; border-bottom:1px solid var(--border-soft);
    color:var(--ink);
  }
  .mobile-menu .btn{ margin-top:32px; }

  @media (min-width:900px){
    .nav-links{ display:flex; }
    .nav-cta{ display:inline-flex; }
    .nav-burger{ display:none; }
  }

  /* ============================================================
     Hero
     ============================================================ */
  .hero{
    position:relative;
    padding-top:clamp(150px, 22vw, 230px);
    padding-bottom:clamp(64px, 9vw, 120px);
    overflow:hidden;
    isolation:isolate;
  }
  .hero-spotlight{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,18%), rgba(124,111,240,.16), transparent 70%);
    transition:background .1s linear;
  }
  .hero .container{ position:relative; z-index:2; }
  .hero-inner{ max-width:760px; }

  .hero-mark{
    position:absolute; top:50%; right:clamp(-100px,-3vw,10px);
    width:clamp(380px,40vw,600px); height:auto;
    transform:translateY(-50%);
    opacity:.15; z-index:1; pointer-events:none;
    -webkit-mask-image:linear-gradient(120deg, transparent 0%, #000 38%, #000 72%, transparent 100%);
    mask-image:linear-gradient(120deg, transparent 0%, #000 38%, #000 72%, transparent 100%);
    animation:heroFloat 9s ease-in-out infinite;
    display:none;
  }
  @keyframes heroFloat{
    0%,100%{ transform:translateY(-50%) translateX(0); }
    50%{ transform:translateY(-52%) translateX(-10px); }
  }
  @media (prefers-reduced-motion: reduce){ .hero-mark{ animation:none; } }
  @media (min-width:1080px){ .hero-mark{ display:block; } }

  .hero h1{
    font-size:clamp(38px, 6.4vw, 76px);
    margin-bottom:24px;
  }
  .hero h1 span.line{ display:block; }

  .hero-sub{
    font-size:clamp(16px, 1.9vw, 19px);
    color:var(--ink-dim);
    max-width:560px;
    margin-bottom:36px;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:18px; }
  .hero-note{ font-size:13.5px; color:var(--ink-faint); margin-bottom:64px; }
  .hero-note b{ color:var(--ink-dim); font-weight:500; }

  .stat-row{
    display:grid; grid-template-columns:repeat(2,1fr); gap:28px 24px;
    padding-top:40px; border-top:1px solid var(--border-soft);
    max-width:680px;
  }
  .stat-row .stat-num{
    font-family:var(--ff-mono); font-size:clamp(24px,3vw,32px); font-weight:500;
    color:var(--ink);
    display:flex; align-items:baseline; gap:2px;
  }
  .stat-row .stat-label{ font-size:13px; color:var(--ink-faint); margin-top:6px; }

  .marquee-wrap{
    margin-top:clamp(56px,7vw,84px);
    border-top:1px solid var(--border-soft);
    padding-top:28px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-label{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
  .marquee{ display:flex; width:max-content; gap:56px; animation:marquee 32s linear infinite; }
  .marquee:hover{ animation-play-state:paused; }
  .marquee span{ font-family:var(--ff-display); font-size:18px; color:var(--ink-faint); white-space:nowrap; flex:none; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  @media (min-width:640px){
    .stat-row{ grid-template-columns:repeat(4,1fr); gap:20px; }
  }

/* ============================================================
     Services
     ============================================================ */
  .services-grid{
    display:grid; grid-template-columns:1fr; gap:1px;
    background:var(--border-soft);
    border:1px solid var(--border-soft);
  }
  .service-card{
    background:var(--black);
    padding:clamp(28px,3.5vw,40px);
    position:relative;
    transition:background .4s var(--ease);
  }
  .service-card:hover{ background:rgba(255,255,255,.02); }
  .service-card .icon-wrap{
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--panel);
    clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    margin-bottom:24px;
    position:relative;
  }
  .service-card .icon-wrap svg{ width:22px; height:22px; stroke:var(--violet-bright); }
  .service-card .num{
    position:absolute; top:28px; right:28px;
    font-family:var(--ff-mono); font-size:12px; color:var(--ink-faint);
  }
  .service-card h3{ font-size:21px; margin-bottom:10px; }
  .service-card p{ color:var(--ink-dim); font-size:14.5px; max-width:380px; }
  .service-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .service-card .tags span{
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.03em;
    color:var(--ink-faint); border:1px solid var(--border-soft);
    padding:5px 10px; border-radius:100px;
  }

  .service-card.cta-tile{
    display:flex; flex-direction:column; justify-content:space-between;
    background:linear-gradient(165deg, rgba(124,111,240,.13), rgba(124,111,240,.015) 65%);
  }
  .service-card.cta-tile:hover{ background:linear-gradient(165deg, rgba(124,111,240,.19), rgba(124,111,240,.02) 65%); }
  .service-card.cta-tile h3{ font-size:21px; margin-bottom:10px; }
  .service-card.cta-tile p{ color:var(--ink-dim); font-size:14.5px; }
  .service-card.cta-tile .eyebrow{ margin-bottom:14px; }
  .service-card.cta-tile .work-link{ display:inline-flex; }
  .service-card.cta-tile .work-link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
  .service-card.cta-tile:hover .work-link svg{ transform:translateX(3px); }

  @media (min-width:760px){
    .services-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (min-width:1080px){
    .services-grid{ grid-template-columns:repeat(3,1fr); }
    .service-card:nth-child(1),
    .service-card:nth-child(2){ grid-column:span 1; }
  }

  /* ============================================================
     Why Choose Nexara
     ============================================================ */
  .why-section{
    border-top:1px solid var(--border-soft);
  }
  .why-grid{
    display:grid; grid-template-columns:1fr; gap:1px;
  }
  .why-item{
    display:flex; gap:20px;
    padding-block:30px;
    border-top:1px solid var(--border-soft);
  }
  .why-item:first-child{ border-top:none; }
  .why-item .icon-wrap{
    flex:none; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(156,144,255,.35), rgba(124,111,240,.06) 70%);
    border:1px solid var(--border-soft);
  }
  .why-item .icon-wrap svg{ width:19px; height:19px; stroke:var(--violet-bright); }
  .why-item h3{ font-size:17.5px; margin-bottom:6px; font-family:var(--ff-body); font-weight:600; }
  .why-item p{ color:var(--ink-dim); font-size:14px; max-width:420px; }

  .why-layout{ display:grid; gap:48px; }

  @media (min-width:900px){
    .why-layout{ grid-template-columns:.85fr 1.15fr; align-items:start; }
    .why-grid{ grid-template-columns:1fr; }
    .why-item{ padding-block:26px; }
  }

/* ============================================================
     Portfolio
     ============================================================ */
  .work-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
  .work-card{
    background:var(--panel);
    border:1px solid var(--border-soft);
    clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
    overflow:hidden;
    transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  }
  .work-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.18); background:var(--panel-strong); }

  .work-visual{
    position:relative;
    aspect-ratio:16/10;
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(124,111,240,.25), transparent 55%),
      linear-gradient(155deg, #0c0c10 0%, #07070a 100%);
    border-bottom:1px solid var(--border-soft);
    overflow:hidden;
  }
  .work-visual svg{ position:absolute; inset:0; width:100%; height:100%; }
  .work-tag{
    position:absolute; top:16px; left:16px;
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    background:rgba(5,5,7,.6); border:1px solid var(--border);
    padding:6px 10px; backdrop-filter:blur(6px);
  }

  .work-body{ padding:clamp(22px,3vw,30px); }
  .work-body h3{ font-size:21px; margin-bottom:10px; }
  .work-body p{ color:var(--ink-dim); font-size:14.5px; margin-bottom:22px; }

  .work-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
  .work-stats div b{
    display:block; font-family:var(--ff-mono); color:var(--ink); font-size:18px; font-weight:500;
  }
  .work-stats div span{ font-size:11.5px; color:var(--ink-faint); }

  .work-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:14px; font-weight:600; color:var(--ink);
  }
  .work-link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
  .work-card:hover .work-link svg{ transform:translateX(3px); }

  @media (min-width:760px){
    .work-grid{ grid-template-columns:repeat(2,1fr); }
    .work-card:first-child{ grid-column:span 2; }
    .work-card:first-child .work-visual{ aspect-ratio:21/9; }
  }
  @media (min-width:1100px){
    .work-card:first-child{ grid-column:span 1; }
    .work-grid{ grid-template-columns:repeat(3,1fr); }
    .work-card:first-child .work-visual{ aspect-ratio:16/10; }
  }

.work-card--own{ border-color:rgba(156,144,255,.4); }
  .work-card--own:hover{ border-color:rgba(156,144,255,.75); box-shadow:0 0 0 1px rgba(156,144,255,.18), 0 28px 70px -20px rgba(124,111,240,.5); }
  @media (min-width:1100px){
    .work-card--own{ grid-column:1 / -1; }
    .work-card--own .work-visual{ aspect-ratio:21/9; }
    .work-card--own .work-body{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
    .work-card--own .work-body p{ grid-column:1; }
    .work-card--own .work-stats{ grid-column:1; margin-bottom:0; }
    .work-card--own .work-link{ grid-column:1; }
    .work-card--own .own-body-right{ grid-column:2; grid-row:1 / span 4; display:flex; flex-direction:column; justify-content:center; gap:14px; padding-left:32px; border-left:1px solid var(--border-soft); }
  }
  .own-badge{
    position:absolute; top:16px; left:16px;
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    background:linear-gradient(135deg,#8E7FF5,#5248CC); color:#fff;
    padding:7px 14px;
    display:inline-flex; align-items:center; gap:8px;
    z-index:2;
  }
  .own-badge .dot-live{
    width:7px; height:7px; border-radius:50%;
    background:#7FFF9E;
    box-shadow:0 0 8px 2px rgba(127,255,158,.85);
    flex:none;
    animation:pulse-live 2s ease-in-out infinite;
  }
  @keyframes pulse-live{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.8);} }
  .impact-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13.5px; color:var(--ink-dim);
    border:1px solid var(--border-soft);
    padding:10px 16px; border-radius:100px;
    background:var(--panel);
  }
  .impact-pill svg{ width:14px; height:14px; stroke:var(--violet-bright); flex:none; }

  /* ============================================================
     Testimonials
     ============================================================ */
  .testi-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
  .testi-card{
    background:var(--panel);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    padding:clamp(26px,3vw,32px);
    display:flex; flex-direction:column;
  }
  .testi-stars{ display:flex; gap:3px; margin-bottom:18px; }
  .testi-stars svg{ width:15px; height:15px; fill:var(--violet-bright); }
  .testi-card p.quote{ font-size:16px; color:var(--ink); margin-bottom:24px; flex:1; }
  .testi-person{ display:flex; align-items:center; gap:12px; }
  .testi-avatar{
    width:42px; height:42px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--ff-display); font-weight:700; font-size:14px; color:#fff;
    background:var(--grad-violet);
  }
  .testi-person h4{ font-size:14.5px; font-weight:600; font-family:var(--ff-body); }
  .testi-person span{ font-size:12.5px; color:var(--ink-faint); }

  @media (min-width:760px){ .testi-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1100px){ .testi-grid{ grid-template-columns:repeat(4,1fr); } }

/* ============================================================
     Process
     ============================================================ */
  .process-track{ position:relative; }
  .process-line{
    position:absolute; left:21px; top:8px; bottom:8px; width:1px;
    background:linear-gradient(to bottom, var(--border), transparent);
  }
  .process-list{ display:flex; flex-direction:column; gap:0; }
  .process-item{
    position:relative;
    display:grid; grid-template-columns:44px 1fr;
    gap:24px;
    padding-block:30px;
    border-top:1px solid var(--border-soft);
  }
  .process-item:first-child{ border-top:none; padding-top:0; }
  .process-node{
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#0a0a0d; border:1px solid var(--border);
    position:relative; z-index:1;
  }
  .process-node .orb-sm{
    width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #fff, var(--glow) 40%, var(--violet) 100%);
    box-shadow:0 0 14px 3px rgba(156,144,255,.7);
  }
  .process-body{ padding-top:2px; }
  .process-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
  .process-step{ font-family:var(--ff-mono); font-size:12.5px; color:var(--ink-faint); }
  .process-body h3{ font-size:21px; font-weight:600; }
  .process-body p{ color:var(--ink-dim); font-size:14.5px; max-width:480px; }

  @media (min-width:860px){
    .process-list{ flex-direction:row; gap:0; }
    .process-item{
      grid-template-columns:1fr; grid-template-rows:auto auto 1fr;
      border-top:none; border-left:1px solid var(--border-soft);
      padding:0 22px 0 22px;
      flex:1;
    }
    .process-item:first-child{ border-left:none; padding-left:0; }
    .process-node{ margin-bottom:24px; }
    .process-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  }

/* ============================================================
     Pricing
     ============================================================ */
  .pricing-grid{ display:grid; grid-template-columns:1fr; gap:20px; align-items:stretch; }
  .price-card{
    position:relative;
    background:var(--panel);
    border:1px solid var(--border-soft);
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
    padding:clamp(28px,3vw,36px);
    display:flex; flex-direction:column;
    transition:border-color .4s var(--ease), transform .4s var(--ease);
  }
  .price-card:hover{ transform:translateY(-4px); }
  .price-card.featured{
    background:linear-gradient(165deg, rgba(124,111,240,.14), rgba(124,111,240,.02) 60%);
    border-color:rgba(156,144,255,.45);
    box-shadow:0 0 0 1px rgba(156,144,255,.12), 0 30px 60px -30px rgba(124,111,240,.45);
  }
.price-badge{
  position:absolute; top:0; right:0; left:auto; transform:none;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--grad-violet); color:#fff;
  padding:9px 18px 9px 16px;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow:0 8px 20px -6px rgba(124,111,240,.6);
  display:flex; align-items:center; gap:6px;
  z-index:2;
}
.price-badge::before{
  content:'';
  width:5px; height:5px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.8);
}
.price-name{ font-family:var(--ff-display); font-size:22px; font-weight:600; margin-bottom:8px; }
  .price-desc{ color:var(--ink-dim); font-size:14px; margin-bottom:28px; min-height:42px; }
  .price-amount{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
  .price-amount .amt{ font-family:var(--ff-display); font-size:clamp(34px,4vw,42px); font-weight:700; }
  .price-amount .per{ font-size:13.5px; color:var(--ink-faint); }
  .price-note{ font-size:12.5px; color:var(--ink-faint); margin-bottom:28px; }

  .price-features{ display:flex; flex-direction:column; gap:13px; margin-bottom:32px; flex:1; }
  .price-features li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-dim); }
  .price-features svg{ width:15px; height:15px; flex:none; margin-top:2px; stroke:var(--violet-bright); }
  .price-features li b{ color:var(--ink); font-weight:500; }

  @media (min-width:760px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
     FAQ
     ============================================================ */
  .faq-list{ border-top:1px solid var(--border-soft); max-width:780px; }
  .faq-item{ border-bottom:1px solid var(--border-soft); }
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding-block:24px; text-align:left;
  }
  .faq-q h3{ font-size:17px; font-weight:600; font-family:var(--ff-body); }
  .faq-q .plus{
    flex:none; width:28px; height:28px; position:relative;
  }
  .faq-q .plus::before,.faq-q .plus::after{
    content:''; position:absolute; background:var(--ink-dim);
    transition:transform .4s var(--ease), background .4s var(--ease);
  }
  .faq-q .plus::before{ left:50%; top:4px; bottom:4px; width:1.5px; transform:translateX(-50%); }
  .faq-q .plus::after{ top:50%; left:4px; right:4px; height:1.5px; transform:translateY(-50%); }
  .faq-item.open .faq-q .plus::before{ transform:translateX(-50%) rotate(90deg); }
  .faq-item.open .faq-q h3, .faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{ background:var(--violet-bright); color:var(--ink); }

  .faq-a{
    height:0; overflow:hidden;
    transition:height .4s var(--ease);
  }
  .faq-a p{ color:var(--ink-dim); font-size:14.5px; padding-bottom:24px; max-width:620px; }

  /* ============================================================
     Final CTA
     ============================================================ */
  .final-cta{
    position:relative; overflow:hidden; isolation:isolate;
    text-align:center;
    border-top:1px solid var(--border-soft);
  }
  .final-cta h2{ font-size:clamp(32px,5.2vw,58px); max-width:820px; margin-inline:auto; margin-bottom:22px; }
  .final-cta p{ color:var(--ink-dim); font-size:clamp(15px,1.7vw,18px); max-width:540px; margin-inline:auto; margin-bottom:40px; }
  .final-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:20px; }
  .final-cta .small-note{ font-size:13.5px; color:var(--ink-faint); }
  .final-cta .small-note a{ color:var(--ink-dim); text-decoration:underline; text-decoration-color:var(--border); }

  /* ============================================================
     Footer
     ============================================================ */
  .site-footer{ border-top:1px solid var(--border-soft); padding-block:clamp(56px,7vw,88px) 32px; position:relative; overflow:hidden; }
  .footer-mark{
    position:absolute; right:clamp(-60px,-3vw,10px); bottom:-30px;
    width:clamp(240px,24vw,400px); height:auto;
    opacity:.07; z-index:0; pointer-events:none;
    display:none;
  }
  @media (min-width:760px){ .footer-mark{ display:block; } }
  .footer-grid{ display:grid; grid-template-columns:1fr; gap:48px; margin-bottom:56px; }
  .footer-brand p{ color:var(--ink-dim); font-size:14px; max-width:300px; margin-top:18px; margin-bottom:24px; }
  .footer-brand .brand{ margin-bottom:0; }
  .social-row{ display:flex; gap:10px; }
  .social-row a{
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-soft); background:var(--panel);
    border-radius:50%;
    transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  }
  .social-row a:hover{ border-color:rgba(255,255,255,.25); background:var(--panel-strong); transform:translateY(-2px); }
  .social-row svg{ width:16px; height:16px; }

  .footer-col h4{
    font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:18px; font-weight:500;
  }
  .footer-col ul{ display:flex; flex-direction:column; gap:12px; }
  .footer-col a, .footer-col p{ font-size:14.5px; color:var(--ink-dim); }
  .footer-col a:hover{ color:var(--ink); }

  .footer-bottom{
    display:flex; flex-direction:column; gap:16px;
    padding-top:28px; border-top:1px solid var(--border-soft);
    font-size:13px; color:var(--ink-faint);
  }
  .footer-bottom .legal{ display:flex; gap:20px; }
  .footer-bottom .legal a:hover{ color:var(--ink-dim); }

  @media (min-width:640px){
    .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
  }
  @media (min-width:860px){
    .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  }

  /* ============================================================
     Misc responsive container/section overrides
     ============================================================ */
  @media (min-width:760px){
    .hero-actions{ margin-bottom:24px; }
  }

/* ============================================================
     Contact form (final CTA)
     ============================================================ */
  .trust-row{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
    margin-bottom:44px;
  }
  .trust-row span{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13.5px; color:var(--ink-dim);
  }
  .trust-row svg{ width:15px; height:15px; stroke:var(--violet-bright); flex:none; }

  .form-panel{
    text-align:left;
    background:var(--panel);
    border:1px solid var(--border-soft);
    clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    padding:clamp(26px,3.4vw,40px);
    max-width:600px; margin-inline:auto;
  }
  .field{ margin-bottom:18px; }
  .field label{
    display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em;
    color:var(--ink-dim); margin-bottom:8px;
  }
  .field-row{ display:grid; grid-template-columns:1fr; gap:18px; }
  .field input, .field select, .field textarea{
    width:100%; height:48px; padding-inline:14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    color:var(--ink); font-size:14.5px;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .field select{ appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ACAAB9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  }
  .field textarea{ height:108px; padding-block:12px; resize:vertical; min-height:80px; }
  .field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--violet-bright);
    background:rgba(124,111,240,.06);
  }
  .field-note{ font-size:12px; color:var(--ink-faint); margin-top:16px; text-align:center; }

  .form-success{
    display:none; flex-direction:column; align-items:center; text-align:center;
    gap:14px; padding-block:28px;
  }
  .form-success.show{ display:flex; }
  .form-success .icon-wrap{
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%, rgba(156,144,255,.4), rgba(124,111,240,.08) 70%);
    border:1px solid var(--border-soft);
  }
  .form-success svg{ width:22px; height:22px; stroke:var(--violet-bright); }
  .form-success h3{ font-size:19px; }
  .form-success p{ color:var(--ink-dim); font-size:14px; max-width:300px; }
  #contactForm.hide{ display:none; }

  @media (min-width:560px){
    .field-row.cols-2{ grid-template-columns:1fr 1fr; }
  }

  /* 1. Base states for Scroll-Driven Reveal Animations - Optimized for Crisp Text */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
  }
  /* Snaps back to auto will-change to force the browser to discard the bitmap layer and render crisp vector text */
  .reveal.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 2. Dynamic Glassmorphism Nav Bar on Scroll */
  .site-nav.scrolled {
    background: rgba(5, 5, 7, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding-block: 14px !important;
  }

  /* 3. Slow Luxury Floating Animation for Background Ambient Orbs */
  @keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3%, -5%) scale(1.04); }
    100% { transform: translate(0, 0) scale(1); }
  }
  .orb, .glow-blob {
    animation: floatOrb 14s infinite alternate ease-in-out !important;
  }

  /* 4. High-End Portfolio Card Interaction - Removed scale() to guarantee text crispness */
  .work-card {
    transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease) !important;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0); /* Establishes clean vector baseline rendering */
  }
  .work-card:hover {
    transform: translateY(-6px) !important; /* Pure elegant translation, zero container scaling so text stays perfectly sharp */
    box-shadow: 0 20px 40px -20px rgba(124, 111, 240, 0.15);
  }
  /* Keep the zoom solely on the graphics/SVGs so your visuals pop without affecting text layers */
  .work-card:hover .work-visual svg, 
  .work-card:hover .work-visual img {
    transform: scale(1.03);
    transition: transform 0.6s var(--ease);
  }

  /* 5. Frictionless Forms & Accessibility Safety */
  .field select {
    padding-right: 44px !important;
  }
  button[disabled], button:disabled {
    cursor: not-allowed !important;
    opacity: 0.65 !important;
  }

  /* 6. Clean, Pure-CSS Enterprise Logo Marquee */
  .brand-marquee-section {
    padding-block: 32px 16px;
    overflow: hidden;
    width: 100%;
    opacity: 0.45;
    transition: opacity 0.3s ease;
  }
  .brand-marquee-section:hover {
    opacity: 0.75;
  }
  .marquee-wrapper {
    display: flex;
    width: max-content;
    animation: marqueeTrack 30s linear infinite;
    gap: 64px;
  }
  .marquee-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 64px;
  }
  .marquee-item {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-dim);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .marquee-item svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: 0.5;
  }
  @keyframes marqueeTrack {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }