/* Nexa Codex — shared stylesheet (extracted so every page shares one source of truth) */
  :root{
    --page: #F3EADC;
    --cream: #F6EFE3;
    --cream-2: #EEE4D2;
    --ink: #141317;
    --ink-2: #1C1A20;
    --navy: #0B0F1A;
    --navy-2: #131A2B;
    --text: #17151A;
    --text-dim: #5C584E;
    --text-faint: #8B8677;
    --lime: #E9F158;
    --lime-2: #D6DE4A;
    --orange: #E7803F;
    --blue: #6C8CFF;
    --line: rgba(20,19,23,0.12);
    --line-dark: rgba(246,239,227,0.12);
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --ease: cubic-bezier(.16,.84,.32,1);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ background:var(--page); scroll-behavior:smooth; }
  body{ background:var(--page); color:var(--text); font-family:var(--font-body); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  img,svg{ max-width:100%; display:block; }
  button{ font-family:inherit; }
  ::selection{ background:var(--lime); color:var(--ink); }
  .wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

  /*
    ============================================================
    TECHNICAL DESIGN NOTE — Scroll-reveal system (global)
    Elements tagged .reveal / .reveal-zoom sit off-state (opacity
    0, translateY or scale) until a single page-wide
    IntersectionObserver adds .is-in the first time they cross
    15% into the viewport. One observer + a CSS transition beats
    per-element scroll listeners or keyframe restarts, and the
    "unobserve after firing" pattern means it never re-triggers
    on scroll-up, so the page never feels like it's replaying.
    ============================================================
  */
  .reveal{ opacity:0; transform:translateY(28px); will-change:opacity, transform; transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
  .reveal.is-in{ opacity:1; transform:translateY(0); }
  .reveal-zoom{ opacity:0; transform:scale(.94); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); }
  .reveal-zoom.is-in{ opacity:1; transform:scale(1); }
  @media (prefers-reduced-motion: reduce){ .reveal, .reveal-zoom{ transition:none; opacity:1; transform:none; } }


  /*
    TECHNICAL DESIGN NOTE — Floating glass 3D stat chip
    A glassmorphic card tilted in true 3D (rotateX/Y baked into
    the base transform, not just a drop-shadow), gently bobbing
    and re-tilting on a keyframe loop, layered above the laptop
    photo's bottom-left corner. transform-style:preserve-3d on
    the card lets its inner icon translateZ forward, so the icon
    visibly sits proud of the card surface rather than looking
    flat-printed on it.
  */
  .stat-chip{
    position:absolute; left:2%; bottom:9%; z-index:3; perspective:800px; pointer-events:none;
  }
  @media (max-width:760px){ .stat-chip{ display:none; } }
  .stat-chip-inner{
    display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:16px;
    background:linear-gradient(160deg, rgba(24,23,28,.92), rgba(11,15,26,.94));
    border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(14px);
    box-shadow:0 30px 60px rgba(11,15,26,.35), inset 0 1px 0 rgba(255,255,255,.1);
    transform-style:preserve-3d; transform:rotateX(8deg) rotateY(-14deg);
    animation:chipFloat 6s ease-in-out infinite;
  }
  @keyframes chipFloat{
    0%,100%{ transform:rotateX(8deg) rotateY(-14deg) translateY(0); }
    50%{ transform:rotateX(4deg) rotateY(-8deg) translateY(-10px); }
  }
  .stat-chip .chip-icon{
    width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--lime); color:var(--ink); transform:translateZ(24px);
    box-shadow:0 10px 18px rgba(233,241,88,.35);
  }
  .stat-chip .chip-icon svg{ width:17px; height:17px; }
  .stat-chip .chip-num{ font-family:var(--font-display); font-weight:800; font-size:17px; color:#fff; line-height:1.1; transform:translateZ(10px); }
  .stat-chip .chip-lbl{ font-size:11px; color:rgba(255,255,255,.65); transform:translateZ(10px); }
  @media (prefers-reduced-motion: reduce){ .stat-chip-inner{ animation:none; } }

  /* ================= HERO STAGE (laptop mockup, inspired by ref image) ================= */
  /*
    TECHNICAL DESIGN NOTE — Hero stage background
    Concentric ring arcs are plain SVG circles with a low-opacity
    stroke, absolutely positioned off the top-right corner. That's
    cheaper than a background-image and stays crisp at any zoom,
    and because they sit behind the laptop (z-index) they read as
    depth rather than clutter.
  */
  /*
    TECHNICAL DESIGN NOTE — .site-bar
    Real, static page header (see HTML note above). Sits on the
    same --page cream as the body so it reads as part of the page
    rather than a separate strip, with just enough padding + a
    hairline to anchor the logo before the laptop mockup begins.
  */
  .site-bar{ background:var(--page); padding:0 40px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:80; }
  .site-bar-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:28px; padding:16px 0; }
  .site-bar-brand{ display:block; line-height:0; flex:none; margin-right:auto; }
  .site-bar-brand img{ height:34px; width:auto; display:block; }
  .site-bar-links{ display:flex; align-items:center; gap:30px; }
  .site-bar-links a{ font-size:14px; font-weight:600; color:var(--text-dim); padding:6px 0; position:relative; transition:color .25s var(--ease); }
  .site-bar-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
  .site-bar-links a:hover{ color:var(--ink); }
  .site-bar-links a:hover::after{ transform:scaleX(1); }
  .site-bar-links a.is-active{ color:var(--ink); }
  .site-bar-links a.is-active::after{ transform:scaleX(1); }
  .site-bar-cta{ flex:none; display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--cream); font-weight:700; font-size:13.5px; padding:11px 20px; border-radius:100px; transition:transform .3s var(--ease), background .3s ease; }
  .site-bar-cta:hover{ transform:translateY(-2px); background:var(--lime); color:var(--ink); }
  .site-bar-toggle{ display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:transparent; align-items:center; justify-content:center; flex:none; cursor:pointer; }
  .site-bar-toggle span{ display:block; width:16px; height:1.6px; background:var(--ink); border-radius:2px; position:relative; }
  .site-bar-toggle span::before, .site-bar-toggle span::after{ content:''; position:absolute; left:0; width:16px; height:1.6px; background:var(--ink); border-radius:2px; }
  .site-bar-toggle span::before{ top:-5px; } .site-bar-toggle span::after{ top:5px; }
  @media (max-width:900px){ .site-bar-links{ display:none; } .site-bar-cta{ display:none; } .site-bar-toggle{ display:flex; } }
  @media (max-width:520px){ .site-bar{ padding:0 20px; } .site-bar-inner{ padding:14px 0; } .site-bar-brand img{ height:28px; } }

  .hero-stage{ position:relative; background:radial-gradient(120% 120% at 78% 8%, var(--cream-2), var(--page) 60%); padding:34px 20px 84px; perspective:1700px; }
  .hero-stage .rings{ position:absolute; top:-220px; right:-220px; width:900px; height:900px; opacity:.6; pointer-events:none; z-index:0; }
  .hero-stage .rings circle{ fill:none; stroke:rgba(20,19,23,0.08); }

  /*
    TECHNICAL DESIGN NOTE — Laptop mockup (v3: real product photo)
    The chassis is now the supplied MacBook photo itself, used as
    a plain <img> — no CSS-drawn bezel/keyboard. .screen-overlay
    sits on top at the exact percentage the display occupies in
    that photo (measured against the source pixels), holding the
    *real, functional* nav + hero markup — still ordinary anchors,
    still crawlable, never a flattened screenshot. Because the img
    keeps its natural aspect ratio, the overlay tracks the screen
    correctly at any width with no JS measuring.
  */
  .laptop-wrap{ max-width:min(1560px, 98.5vw, 148vh); margin:0 auto; position:relative; z-index:1; filter:drop-shadow(0 50px 60px rgba(11,15,26,0.28)) drop-shadow(0 12px 20px rgba(11,15,26,0.16)); transform-style:preserve-3d; will-change:transform; transition:transform .5s var(--ease); }
  @media (prefers-reduced-motion: reduce){ .laptop-wrap{ transition:none; } }
  .laptop-photo{ width:100%; height:auto; display:block; }
  /*
    TECHNICAL DESIGN NOTE — Photo-real laptop, screen swapped for live markup
    The chassis below is the supplied product photo, background-removed
    and cropped tight to the device so there's no baked-in black
    backdrop rectangle sitting on top of the page's cream background.
    .screen-overlay is positioned with the `inset` shorthand at the
    exact percentage the display occupies inside that photo, measured
    pixel-by-pixel against the actual 1333x941 laptop-photo.png (glass
    edges, not the outer bezel): left 167, right 1165, top 52, bottom
    618 -> top 5.53%, right 12.60%, bottom 34.33%, left 12.53%.
    Because the image keeps its natural aspect ratio (width:100%,
    height:auto) those percentages track perfectly at any viewport
    width without any JS measuring or resize listener.
  */
  .screen-overlay{
    position:absolute; inset:5.53% 12.60% 34.33% 12.53%;
    background:linear-gradient(165deg, var(--ink), var(--ink-2) 80%);
    display:flex; flex-direction:column; border-radius:6px;
    container-type:inline-size; container-name:screen;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .screen-overlay::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(155deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 22%),
               radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
  }
  .screen-overlay .hero-nav{ padding:3.2% 4.2% 0; margin-bottom:0; gap:8px; }
  .screen-overlay .hero-nav .brand{ font-size:14.5px; gap:6px; }
  .screen-overlay .hero-nav .brand-logo{ height:34px; }
  .screen-overlay .hero-nav .links{ gap:15px; }
  .screen-overlay .hero-nav .links a{ font-size:11.5px; }
  .screen-overlay .mega-panel{ width:min(72cqi, 440px); padding:16px; }
  .screen-overlay .hero-inner{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 4.2%; }
  .screen-overlay .hero-inner h1{ font-size:clamp(15px,2.5vw,26px); line-height:1.28; }
  .screen-overlay .hero-cta-row{ margin-top:16px; }
  .screen-overlay .hero-btn{ font-size:11.5px; padding:10px 18px; }
  .screen-overlay .scroll-cue{ padding:0 4.2% 3%; margin-top:0; font-size:10px; }
  .screen-overlay .scroll-cue .chev{ width:10px; height:10px; margin-top:5px; }

  .hero-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:34px; position:relative; z-index:20; }
  .hero-nav .brand{ display:flex; align-items:center; gap:9px; color:var(--cream); font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.01em; }
  .hero-nav .brand-logo{ height:48px; width:auto; display:block; overflow:visible; }
  .foot-brand .brand-logo{ height:44px; width:auto; display:block; }
  /*
    TECHNICAL DESIGN NOTE — Premium logo motion
    .brand gets perspective + a hover tilt (real 3D rotateY, not a
    skew fake) so the mark feels like a physical plaque catching
    the cursor. The ::after is a soft diagonal bar blended with
    mix-blend-mode:overlay (not plain opacity) so it reads as a
    light glint interacting with the letters' own gradient colors
    underneath, rather than a flat white stripe painted over them.
  */
  .hero-nav{ perspective:500px; }
  .hero-nav a.brand{ display:block; position:relative; overflow:hidden; border-radius:6px; transition:transform .5s var(--ease); transform-style:preserve-3d; }
  .hero-nav a.brand:hover{ transform:rotateY(8deg) scale(1.035); }
  a.brand::after{
    content:''; position:absolute; top:-20%; left:-45%; width:32%; height:140%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
    transform:skewX(-18deg); mix-blend-mode:overlay; pointer-events:none;
    animation:logoShine 4.2s ease-in-out infinite;
  }
  @keyframes logoShine{ 0%{ left:-45%; } 30%{ left:130%; } 100%{ left:130%; } }
  @media (prefers-reduced-motion: reduce){ a.brand::after{ animation:none; } .hero-nav a.brand:hover{ transform:none; } }
  .hero-nav .links{ display:flex; align-items:center; gap:24px; }
  .hero-nav .links a{ position:relative; color:#B7B2A2; font-size:14px; padding-bottom:3px; }
  .hero-nav .links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
  .hero-nav .links a:hover{ color:var(--cream); }
  .hero-nav .links a:hover::after{ transform:scaleX(1); }
  @media (max-width:760px){ .hero-nav .links{ display:none; } }

  /*
    ============================================================
    TECHNICAL DESIGN NOTE — Mobile navigation
    Below 760px the inline link row disappears (see rule above),
    so a hamburger toggle + fixed full-viewport drawer takes over.
    It's position:fixed rather than nested in .screen-overlay, so
    on a phone it covers the *entire* screen — not just the tiny
    laptop-photo "display" — which is what makes it actually
    usable rather than a miniature menu inside a miniature laptop.
    Pure CSS class toggle (.is-open) driven by one JS listener;
    no framework needed. Body scroll is locked via a class added
    to <html> while open so the drawer doesn't scroll the page
    underneath it.
    ============================================================
  */
  .nav-toggle{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); align-items:center; justify-content:center; flex:none; cursor:pointer; position:relative; z-index:60; }
  .nav-toggle span{ display:block; width:18px; height:1.6px; background:var(--cream); border-radius:2px; position:relative; transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:0; width:18px; height:1.6px; background:var(--cream); border-radius:2px; transition:transform .3s var(--ease), top .3s var(--ease); }
  .nav-toggle span::before{ top:-6px; }
  .nav-toggle span::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
  @media (max-width:760px){ .nav-toggle{ display:flex; } }

  .mobile-nav{
    position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
    background:linear-gradient(165deg, rgba(20,19,23,.99), rgba(11,15,26,.99));
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
    padding:22px 24px 40px;
  }
  .mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .35s var(--ease), transform .35s var(--ease); }
  .mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .mobile-nav-head .brand-logo{ height:38px; width:auto; }
  .mobile-nav-close{ width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .mobile-nav-links{ display:flex; flex-direction:column; margin-top:20px; }
  .mobile-nav-links a{ display:flex; align-items:center; justify-content:space-between; padding:18px 4px; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--cream); border-bottom:1px solid rgba(255,255,255,.1); opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
  .mobile-nav.is-open .mobile-nav-links a{ opacity:1; transform:translateY(0); }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(1){ transition-delay:.05s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(2){ transition-delay:.1s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(3){ transition-delay:.15s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(4){ transition-delay:.2s; }
  .mobile-nav-links a svg{ width:16px; height:16px; opacity:.5; }
  .mobile-nav-cta{ margin-top:auto; display:flex; flex-direction:column; gap:12px; opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease) .28s, transform .4s var(--ease) .28s; }
  .mobile-nav.is-open .mobile-nav-cta{ opacity:1; transform:translateY(0); }
  .mobile-nav-cta a{ text-align:center; padding:16px; border-radius:100px; font-weight:700; font-size:15px; }
  .mobile-nav-cta .primary{ background:var(--lime); color:#0B0A0D; }
  .mobile-nav-cta .secondary{ border:1px solid rgba(255,255,255,.25); color:var(--cream); }
  html.nav-locked, html.nav-locked body{ overflow:hidden; }
  @media (min-width:761px){ .mobile-nav{ display:none; } }

  /*
    ============================================================
    TECHNICAL DESIGN NOTE — Services mega-menu
    Pure CSS hover-driven panel: .nav-mega is position:relative,
    .mega-panel is position:absolute + opacity/scale transition,
    so no JS/state is needed to open/close it. .screen-overlay has
    no overflow:hidden, so the panel is free to spill past the
    photo's screen edges on hover rather than being clipped by it.
    Children get a staggered transition-delay via nth-child so the
    grid cascades in rather than popping as one flat block.
    ============================================================
  */
  .nav-mega{ position:relative; }
  .nav-mega > .mega-trigger{ display:flex; align-items:center; gap:6px; cursor:pointer; }
  .nav-mega .caret{ width:9px; height:9px; transition:transform .35s var(--ease); }
  .nav-mega:hover .caret{ transform:rotate(180deg); }
  /*
    FIX — hover "bridge": the trigger link and the panel sit 22px
    apart (panel top:calc(100% + 22px)). That gap has no element in
    it, so moving the mouse straight down through it drops :hover
    on .nav-mega, which instantly flips the panel's pointer-events
    back to none — the menu closed the moment you moved toward it,
    before you could reach or click anything in it. This invisible
    ::after exactly fills that gap (same left/width as the panel)
    so the hover chain never breaks between trigger and panel.
  */
  .nav-mega::after{
    content:''; position:absolute; top:100%; left:-24px;
    width:min(90vw, 560px); height:26px;
  }
  .mega-panel{
    position:absolute; top:calc(100% + 22px); left:-24px; transform:translateY(-10px) scale(.97);
    width:min(90vw, 560px); background:linear-gradient(165deg, rgba(28,26,32,.98), rgba(19,18,22,.98));
    border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:22px;
    box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .35s var(--ease); z-index:40;
    transform-origin:top left;
  }
  .mega-panel::before{
    content:''; position:absolute; top:-7px; left:34px; transform:rotate(45deg);
    width:14px; height:14px; background:rgba(28,26,32,.98); border-left:1px solid rgba(255,255,255,.1); border-top:1px solid rgba(255,255,255,.1);
  }
  .nav-mega:hover .mega-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .mega-item{
    display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:12px;
    opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease), background .2s ease;
    transition-delay:0s;
  }
  .nav-mega:hover .mega-item{ opacity:1; transform:translateY(0); }
  .nav-mega:hover .mega-item:nth-child(1){ transition-delay:.03s; }
  .nav-mega:hover .mega-item:nth-child(2){ transition-delay:.07s; }
  .nav-mega:hover .mega-item:nth-child(3){ transition-delay:.11s; }
  .nav-mega:hover .mega-item:nth-child(4){ transition-delay:.15s; }
  .nav-mega:hover .mega-item:nth-child(5){ transition-delay:.19s; }
  .nav-mega:hover .mega-item:nth-child(6){ transition-delay:.23s; }
  .mega-item:hover{ background:rgba(255,255,255,.06); }
  .mega-item .m-icon{ flex:none; width:36px; height:36px; border-radius:10px; background:rgba(233,241,88,.1); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s ease; }
  .mega-item:hover .m-icon{ background:var(--lime); transform:scale(1.08) rotate(-4deg); }
  .mega-item .m-icon svg{ width:18px; height:18px; stroke:var(--lime); transition:stroke .3s ease; }
  .mega-item .m-icon svg .dot{ fill:var(--lime); transition:fill .3s ease; }
  .mega-item:hover .m-icon svg{ stroke:var(--ink); }
  .mega-item:hover .m-icon svg .dot{ fill:var(--ink); }
  .mega-item h4{ font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--cream); margin-bottom:3px; letter-spacing:-0.01em; }
  .mega-item p{ font-size:12px; line-height:1.45; color:#8B8677; }
  .mega-foot{
    margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease) .27s, transform .4s var(--ease) .27s;
  }
  .nav-mega:hover .mega-foot{ opacity:1; transform:translateY(0); }
  .mega-foot span{ font-size:12px; color:#8B8677; }
  .mega-foot a{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:#fff; background:linear-gradient(115deg, #5B8CFF, #8B5CF6); padding:11px 18px; border-radius:100px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow:0 10px 22px rgba(91,140,255,.35); white-space:nowrap; }
  .mega-foot a:hover{ transform:translateX(3px); box-shadow:0 12px 26px rgba(139,92,246,.45); }
  @media (max-width:760px){ .mega-panel{ display:none; } }

  .hero-inner{ text-align:center; max-width:780px; margin:0 auto; perspective:1200px; }
  .hero-inner h1{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:clamp(28px,4.2vw,48px); line-height:1.26; letter-spacing:-0.01em; }
  /*
    TECHNICAL DESIGN NOTE — 3D headline entrance
    This overrides the generic .reveal (translateY-only) transform
    for the hero H1 specifically: it starts rotated back on its
    own X axis (a real 3D fold, via the perspective set on the
    parent .hero-inner) and un-rotates to flat as .is-in lands —
    still driven by the same page-wide IntersectionObserver, no
    extra JS. transform-origin at the bottom edge makes it read as
    hinging up off the laptop screen rather than sliding in.
  */
  .hero-inner h1.reveal{ transform:rotateX(-46deg) translateY(30px); transform-origin:50% 100%; }
  .hero-inner h1.reveal.is-in{ transform:rotateX(0deg) translateY(0); }
  .hero-inner h1 .accent{
    background:linear-gradient(100deg, var(--lime) 0%, #fff 45%, var(--lime) 100%);
    background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:accentShimmer 3.4s linear infinite;
  }
  @keyframes accentShimmer{ 0%{ background-position:0% 0; } 100%{ background-position:-220% 0; } }
  @media (prefers-reduced-motion: reduce){ .hero-inner h1 .accent{ animation:none; background-position:0 0; } }
  .hero-cta-row{ margin-top:26px; }
  .hero-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--cream); color:var(--ink); font-weight:600; font-size:14.5px; padding:15px 28px; border-radius:100px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
  .hero-btn:hover{ transform:translateY(-2px); background:var(--lime); box-shadow:0 14px 30px rgba(0,0,0,.4); }
  .scroll-cue{ margin-top:30px; text-align:center; color:#8890A0; font-size:12.5px; letter-spacing:.04em; }
  .scroll-cue .chev{ margin:8px auto 0; width:14px; height:14px; border-right:1.5px solid #8890A0; border-bottom:1.5px solid #8890A0; transform:rotate(45deg); animation:bob 1.8s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:rotate(45deg) translateY(0);} 50%{ transform:rotate(45deg) translateY(6px);} }


  /* ================= DARK PANEL: industries + services ================= */
  .panel-dark{ background:var(--ink); border-radius:32px; margin:0 22px 22px; padding:90px 56px; }
  @media (max-width:700px){ .panel-dark{ margin:0 12px 12px; border-radius:22px; padding:60px 24px; } }
  .panel-dark h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,42px); color:var(--cream); letter-spacing:-0.02em; }
  .panel-dark .rule{ height:1px; background:var(--line-dark); margin:26px 0 34px; }
  .panel-body{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; margin-bottom:52px; }
  .panel-body p{ max-width:560px; color:#B7B2A2; font-size:14.5px; line-height:1.7; }
  .panel-body .link-cta{ display:flex; align-items:center; gap:10px; color:var(--cream); font-size:14px; font-weight:600; white-space:nowrap; }
  .panel-body .dot-arrow{ width:22px; height:22px; border-radius:50%; background:var(--cream); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:11px; transition:transform .3s var(--ease); }
  .panel-body .link-cta:hover .dot-arrow{ transform:translateX(3px); }

  .logo-track{ overflow:hidden; }
  .logo-row{ display:flex; gap:20px; width:max-content; animation:logoScroll 26s linear infinite; }
  .logo-row:hover{ animation-play-state:paused; }
  @keyframes logoScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .logo-card{ width:220px; height:100px; border:1px solid var(--line-dark); border-radius:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--cream); flex-shrink:0; opacity:.55; filter:grayscale(1); transition:opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease); }
  .logo-card:hover{ opacity:1; filter:grayscale(0); transform:translateY(-6px); border-color:var(--lime); }

  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:1400px; }
  @media (max-width:900px){ .service-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .service-grid{ grid-template-columns:1fr; } }
  .service-card{
    position:relative; overflow:hidden; border:1px solid var(--line-dark); border-radius:18px; padding:26px; background:var(--ink-2);
    transition:background .3s ease, border-color .3s ease, transform .25s var(--ease), box-shadow .25s var(--ease);
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
    transform-style:preserve-3d;
  }
  .service-card:hover{ box-shadow:0 26px 54px rgba(0,0,0,.4); border-color:rgba(255,255,255,.2); }
  /*
    Glare sweep: a soft diagonal highlight fixed to the card's own
    3D layer (not the page), so as the card tilts toward the
    cursor the highlight reads as light hitting a glossy surface
    rather than a flat CSS gradient sitting on top of it.
  */
  .service-card::before{
    content:''; position:absolute; inset:-40%; z-index:1; pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 60%);
    transform:translateZ(1px) translateX(-120%); transition:transform .6s var(--ease);
  }
  .service-card:hover::before{ transform:translateZ(1px) translateX(20%); }
  .service-card .idx{ position:relative; z-index:2; font-size:12px; color:#8B8677; margin-bottom:18px; }
  .service-card .icon-wrap{ position:relative; z-index:2; width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; background:rgba(255,255,255,.06); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
  .service-card:hover .icon-wrap{ transform:scale(1.1) rotate(-4deg) translateZ(38px); box-shadow:0 18px 30px rgba(0,0,0,.35); }
  .service-card .icon-wrap svg{ width:26px; height:26px; }
  .service-card h3, .service-card p, .service-card a.more-link{ position:relative; z-index:2; }

  /*
    TECHNICAL DESIGN NOTE — Service card "drop-in" reveal
    Overrides the generic .reveal transform (which rises up from
    below) for service cards specifically: they start translated
    *above* their slot with a slight rotation and fall into place.
    The landing uses an overshoot cubic-bezier (>1 mid control
    point) instead of the page's standard ease, so each card
    visibly "drops" with a touch of bounce rather than just
    drifting in — still triggered by the same scroll observer via
    .is-in, still respects prefers-reduced-motion globally.
  */
  .service-card.reveal{
    transform:translateY(-90px) rotate(-2.5deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:opacity .6s var(--ease), transform .75s cubic-bezier(.34,1.56,.64,1);
    transition-delay:var(--d,0s);
  }
  .service-card.reveal.is-in{ transform:translateY(0) rotate(0deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
  .service-card h3{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--cream); letter-spacing:-0.01em; margin-bottom:10px; }
  .service-card p{ font-size:13.5px; line-height:1.6; color:#B7B2A2; }
  .service-card a.more-link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:600; font-size:13px; color:var(--lime); }

  /* ================= PLAIN SECTIONS ================= */
  section.plain{ padding:110px 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head.center{ margin:0 auto 56px; text-align:center; }
  .tag{ font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:14px; }
  .section-head h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4vw,44px); letter-spacing:-0.02em; line-height:1.1; }
  .section-head p{ color:var(--text-dim); margin-top:14px; font-size:15.5px; line-height:1.65; }

  /* -------- Domain search / referral -------- */
  .domain-box{ background:var(--ink); border-radius:24px; padding:50px 44px; display:flex; flex-wrap:wrap; gap:30px; align-items:center; justify-content:space-between; }
  .domain-copy{ max-width:420px; }
  .domain-copy h3{ font-family:var(--font-display); color:var(--cream); font-size:24px; font-weight:700; margin-bottom:10px; }
  .domain-copy p{ color:#B7B2A2; font-size:14px; line-height:1.6; }
  .domain-form{ display:flex; gap:10px; flex-wrap:wrap; flex:1; min-width:280px; }
  .domain-form input{ flex:1; min-width:180px; border:1px solid var(--line-dark); background:var(--ink-2); color:var(--cream); border-radius:100px; padding:14px 20px; font-size:14px; }
  .domain-form input:focus{ outline:2px solid var(--lime); outline-offset:2px; }
  .domain-form button{ border:none; background:var(--lime); color:var(--ink); font-weight:700; padding:14px 24px; border-radius:100px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
  .domain-form button:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(233,241,88,.35); }
  .domain-disclosure{ width:100%; font-size:11.5px; color:#8B8677; margin-top:14px; }

  /* -------- Metrics -------- */
  .metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
  .metrics-grid .cell{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 26px; transition:background .3s var(--ease); }
  .metrics-grid .cell:hover{ background:rgba(20,19,23,0.04); }
  .metrics-grid .num{ font-family:var(--font-display); font-weight:800; font-size:34px; }
  .metrics-grid .lbl{ font-size:12.5px; color:var(--text-faint); margin-top:6px; text-transform:uppercase; letter-spacing:.05em; }
  @media (max-width:800px){ .metrics-grid{ grid-template-columns:repeat(2,1fr); } }

  /* -------- Process steps -------- */
  .process-list{ display:flex; flex-direction:column; }
  .process-item{ display:grid; grid-template-columns:60px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line); align-items:start; }
  .process-item:last-child{ border-bottom:1px solid var(--line); }
  .process-item .pnum{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--text-faint); }
  .process-item h4{ font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:6px; }
  .process-item p{ color:var(--text-dim); font-size:14px; max-width:640px; line-height:1.6; }

  /* -------- Pricing -------- */
  .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
  .price-card{ border:1px solid var(--line); border-radius:20px; padding:34px; background:var(--cream); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
  .price-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(20,19,23,0.12); border-color:var(--orange); }
  .price-card.hi{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
  .price-card.hi:hover{ border-color:var(--lime); box-shadow:0 24px 48px rgba(0,0,0,0.4); }
  .price-card h3{ font-family:var(--font-display); font-weight:700; font-size:21px; margin-bottom:8px; }
  .price-card .desc{ font-size:13.5px; color:var(--text-dim); margin-bottom:22px; }
  .price-card.hi .desc{ color:#B7B2A2; }
  .price-card .amt{ font-family:var(--font-display); font-weight:800; font-size:34px; margin-bottom:6px; }
  .price-card .amt span{ font-size:13px; font-weight:400; color:var(--text-faint); }
  .price-card .amt-note{ font-size:12px; color:var(--text-faint); margin-bottom:22px; }
  .price-card.hi .amt-note{ color:#8B8677; }
  .price-card ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
  .price-card ul li{ font-size:13.5px; padding-left:18px; position:relative; color:var(--text-dim); }
  .price-card.hi ul li{ color:#D3CFC0; }
  .price-card ul li::before{ content:'—'; position:absolute; left:0; color:var(--orange); }
  .btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; padding:13px 22px; border-radius:100px; border:1px solid var(--text); cursor:pointer; transition:all .2s; }
  .btn-dark{ background:var(--text); color:var(--cream); }
  .btn-dark:hover{ background:var(--lime); color:var(--text); border-color:var(--lime); }
  .btn-outline:hover{ background:var(--text); color:var(--cream); }
  .price-card.hi .btn-outline{ border-color:var(--cream); color:var(--cream); }
  .price-card.hi .btn-outline:hover{ background:var(--cream); color:var(--ink); }
  .magnetic{ transition:transform .25s var(--ease); }

  .cta-final{ text-align:center; }
  .cta-final h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5vw,54px); letter-spacing:-0.02em; max-width:760px; margin:0 auto 18px; line-height:1.08; }
  .cta-final p{ color:var(--text-dim); max-width:460px; margin:0 auto 32px; font-size:15.5px; }

  footer{ background:var(--ink); color:#D8D4C8; padding:70px 0 26px; border-radius:32px; margin:0 22px 22px; }
  @media (max-width:700px){ footer{ margin:0 12px 12px; border-radius:22px; } }
  .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line-dark); }
  @media (max-width:700px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  .foot-brand p{ margin:16px 0 20px; max-width:300px; font-size:13.5px; line-height:1.7; color:#9C9788; }
  .foot-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#9C9788; margin-bottom:18px; }
  .foot-col ul{ display:flex; flex-direction:column; gap:11px; }
  .foot-col a{ position:relative; font-size:13.5px; transition:color .2s; }
  .foot-col a::after{ content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
  .foot-col a:hover{ color:var(--lime); }
  .foot-col a:hover::after{ transform:scaleX(1); }
  .foot-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-size:12px; color:#736E60; flex-wrap:wrap; gap:8px; }

  /* ================= CHATBOT DEMO WIDGET ================= */
  /*
    TECHNICAL DESIGN NOTE — Chatbot widget
    A fixed-position launcher + panel, entirely self-contained: it
    doesn't call any external API, it plays back a short canned
    exchange so visitors can *feel* what a Nexa Codex chatbot
    interaction looks like without wiring a real backend into a
    static demo file. Swap the CANNED_REPLIES array and the
    fetch-based sendMessage() stub (commented) for a real endpoint
    when you deploy your own bot.
  */
  .chat-launcher{ position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%; background:var(--ink); color:var(--lime); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 32px rgba(0,0,0,.3); cursor:pointer; z-index:50; transition:transform .3s var(--ease); }
  .chat-launcher:hover{ transform:scale(1.08) rotate(-6deg); }
  .chat-panel{ position:fixed; right:22px; bottom:90px; width:320px; max-height:420px; background:var(--cream); border-radius:18px; box-shadow:0 30px 60px rgba(0,0,0,.35); z-index:50; display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(16px) scale(.98); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); }
  .chat-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .chat-head{ background:var(--ink); color:var(--cream); padding:14px 16px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
  .chat-head .dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); }
  .chat-body{ padding:14px 16px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; font-size:13px; }
  .chat-msg{ max-width:82%; padding:9px 13px; border-radius:14px; line-height:1.5; }
  .chat-msg.bot{ background:var(--cream-2); align-self:flex-start; border-bottom-left-radius:4px; }
  .chat-msg.user{ background:var(--ink); color:var(--cream); align-self:flex-end; border-bottom-right-radius:4px; }
  .chat-foot{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
  .chat-foot input{ flex:1; border:1px solid var(--line); border-radius:100px; padding:9px 14px; font-size:13px; }
  .chat-foot button{ border:none; background:var(--ink); color:var(--lime); border-radius:100px; padding:9px 16px; font-weight:600; cursor:pointer; font-size:12.5px; }

  /* -------- Feature grid (service detail pages) -------- */
  .feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  @media (max-width:700px){ .feature-grid{ grid-template-columns:1fr; } }
  .feature-card{ border:1px solid var(--line); border-radius:18px; padding:28px; background:var(--cream); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
  .feature-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(20,19,23,0.1); border-color:var(--orange); }
  .feature-card .ico{ width:42px; height:42px; border-radius:11px; background:rgba(20,19,23,0.06); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--ink); }
  .feature-card .ico svg{ width:21px; height:21px; }
  .feature-card h4{ font-family:var(--font-display); font-weight:700; font-size:16.5px; margin-bottom:8px; letter-spacing:-0.01em; }
  .feature-card p{ font-size:13.5px; color:var(--text-dim); line-height:1.65; }

  /* -------- FAQ accordion -------- */
  .faq-list{ max-width:760px; }
  .faq-item{ border-top:1px solid var(--line); padding:22px 0; }
  .faq-item:last-child{ border-bottom:1px solid var(--line); }
  .faq-item summary{ cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:'+'; font-size:20px; color:var(--text-faint); flex:none; transition:transform .25s var(--ease); }
  .faq-item[open] summary::after{ content:'–'; }
  .faq-item p{ margin-top:14px; color:var(--text-dim); font-size:14px; line-height:1.7; max-width:680px; }

  /* -------- Two-column intro (icon panel + copy), used on service detail pages -------- */
  .intro-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
  @media (max-width:860px){ .intro-split{ grid-template-columns:1fr; gap:32px; } }
  .intro-split .copy p{ color:var(--text-dim); font-size:15px; line-height:1.75; margin-bottom:16px; }
  .intro-split .copy p:last-child{ margin-bottom:0; }
  .side-card{ border:1px solid var(--line); border-radius:20px; padding:30px; background:var(--ink); color:var(--cream); }
  .side-card h5{ font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#9C9788; margin-bottom:18px; }
  .side-card ul{ display:flex; flex-direction:column; gap:13px; }
  .side-card ul li{ font-size:14px; padding-left:20px; position:relative; color:#D3CFC0; line-height:1.5; }
  .side-card ul li::before{ content:'—'; position:absolute; left:0; color:var(--lime); }

  /* ================= PORTFOLIO / PROJECTS ================= */
  /*
    TECHNICAL DESIGN NOTE — Portfolio grid + case-study modal
    Cards are rendered client-side from a PROJECTS array in main.js
    (kept in one place so swapping in real work later is a data
    edit, not a markup edit). Cover art is a CSS gradient + dot-grid
    texture rather than an image file, so the grid looks finished
    with zero broken <img> tags until real screenshots are dropped
    in. The card treatment intentionally mirrors .service-card (dark
    ink surface, glass icon badge, 3D tilt, glare sweep) so the
    portfolio section reads as part of the same premium system, not
    a bolted-on afterthought. Clicking a card opens a centered modal
    — one shared instance reused for the homepage teaser and the
    full /portfolio.html grid — and the open project's slug is
    pushed into the URL hash so a direct link (e.g.
    portfolio.html#project-aurora-retail) reopens that same popup
    automatically on page load. Nothing here ever navigates away.
  */
  .panel-portfolio .panel-body p{ color:#B7B2A2; }

  .portfolio-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
  .filter-pill{ border:1px solid var(--line); background:transparent; color:var(--text-dim); font-size:13px; font-weight:600; padding:10px 18px; border-radius:100px; cursor:pointer; transition:all .25s var(--ease); }
  .filter-pill:hover{ border-color:var(--ink); color:var(--ink); }
  .filter-pill.is-active{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
  .portfolio-filters.on-dark .filter-pill{ border-color:var(--line-dark); color:#8B8677; }
  .portfolio-filters.on-dark .filter-pill:hover{ border-color:rgba(255,255,255,.4); color:var(--cream); }
  .portfolio-filters.on-dark .filter-pill.is-active{ background:var(--lime); border-color:var(--lime); color:var(--ink); }

  .portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; perspective:1400px; }
  @media (max-width:900px){ .portfolio-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .portfolio-grid{ grid-template-columns:1fr; } }

  .portfolio-card{
    position:relative; display:block; text-align:left; width:100%; padding:22px; overflow:hidden;
    border:1px solid var(--line-dark); border-radius:20px; background:var(--ink-2); cursor:pointer; font-family:inherit; color:inherit;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transform-style:preserve-3d;
    transition:background .3s ease, border-color .3s ease, transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .portfolio-card:hover{ box-shadow:0 30px 60px rgba(0,0,0,.45); border-color:rgba(255,255,255,.22); }
  /* Same glossy diagonal glare used on .service-card, reused here for a consistent premium surface */
  .portfolio-card::before{
    content:''; position:absolute; inset:-40%; z-index:1; pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 60%);
    transform:translateZ(1px) translateX(-120%); transition:transform .6s var(--ease);
  }
  .portfolio-card:hover::before{ transform:translateZ(1px) translateX(20%); }
  .portfolio-card .idx{ position:relative; z-index:2; font-size:12px; color:#8B8677; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
  .portfolio-card .idx .yr{ color:#8B8677; }

  .portfolio-card .cover{
    position:relative; z-index:2; aspect-ratio:16/11; border-radius:14px; overflow:hidden; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    transform:translateZ(0); transition:transform .5s var(--ease);
  }
  .portfolio-card:hover .cover{ transform:translateZ(30px) scale(1.02); }
  /* Faint dot-grid texture over the gradient cover for a less "flat CSS box" feel */
  .portfolio-card .cover::before{
    content:''; position:absolute; inset:0; opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
    background-size:14px 14px;
  }
  .portfolio-card .cover::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); pointer-events:none; }

  /*
    Mini laptop mockup — same bezel/screen/base language as the homepage
    hero laptop, scaled down to live inside a portfolio card cover.
    Pure CSS + real text, no screenshot images.
  */
  .mini-laptop-wrap{ position:relative; z-index:2; width:80%; perspective:600px; }
  .mini-laptop{ transform:rotateX(6deg); transform-style:preserve-3d; transition:transform .5s var(--ease); }
  .portfolio-card:hover .mini-laptop{ transform:rotateX(2deg) rotateY(-3deg); }
  .mini-screen{
    background:linear-gradient(165deg, #ffffff, #f2efe6 75%);
    border:3px solid #262b35; border-bottom-width:6px; border-radius:7px 7px 2px 2px;
    padding:11px 12px 16px; position:relative; box-shadow:0 18px 32px rgba(0,0,0,.35);
  }
  .mini-screen::before{ content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#0c1220; }
  .mini-base{ width:112%; margin-left:-6%; height:5px; background:linear-gradient(180deg,#e7e9ec,#aeb3ba); border-radius:0 0 4px 4px; box-shadow:0 12px 18px rgba(0,0,0,.4); position:relative; }
  .mini-nav{ display:flex; align-items:center; gap:5px; margin-bottom:9px; }
  .mini-nav .dot{ width:7px; height:7px; border-radius:2.5px; background:var(--mini-accent, var(--lime)); flex:none; }
  .mini-nav .brand{ font-family:var(--font-display); font-size:6.5px; font-weight:800; letter-spacing:.04em; color:#20241D; text-transform:uppercase; }
  .mini-headline{ font-family:var(--font-display); font-weight:800; font-size:10.5px; line-height:1.28; color:#17151A; margin-bottom:5px; }
  .mini-headline em{ font-style:normal; color:var(--mini-accent, var(--orange)); }
  .mini-sub{ font-size:6px; line-height:1.5; color:#8B8677; margin-bottom:8px; }
  .mini-cta{ display:inline-block; background:var(--mini-accent, var(--ink)); color:#fff; font-size:6.5px; font-weight:700; padding:4.5px 9px; border-radius:100px; }
  .portfolio-card .cover img{ position:relative; z-index:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  .portfolio-card .cover .icon-badge{
    position:relative; z-index:2; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:rgba(20,19,23,.28); backdrop-filter:blur(6px); box-shadow:0 14px 26px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.25);
    transition:transform .4s var(--ease);
  }
  .portfolio-card:hover .cover .icon-badge{ transform:scale(1.08) rotate(-4deg); }
  .portfolio-card .cover .icon-badge svg{ width:24px; height:24px; stroke:#fff; }

  .portfolio-card .cat{ position:relative; z-index:2; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--lime); margin-bottom:8px; }
  .portfolio-card h3{ position:relative; z-index:2; font-family:var(--font-display); font-weight:700; font-size:17.5px; color:var(--cream); letter-spacing:-0.01em; margin-bottom:9px; }
  .portfolio-card p{ position:relative; z-index:2; font-size:13.5px; line-height:1.6; color:#B7B2A2; }
  .portfolio-card .view-row{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
  .portfolio-card .view-link{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:12.5px; color:var(--cream); }
  .portfolio-card .view-arrow{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex:none; transition:background .3s ease, transform .3s var(--ease); }
  .portfolio-card:hover .view-arrow{ background:var(--lime); transform:translateX(2px); }
  .portfolio-card .view-arrow svg{ width:13px; height:13px; stroke:var(--cream); transition:stroke .3s ease; }
  .portfolio-card:hover .view-arrow svg{ stroke:var(--ink); }
  .portfolio-card.is-hidden{ display:none; }

  .portfolio-card.reveal{
    transform:translateY(-70px) rotate(-2deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:opacity .6s var(--ease), transform .75s cubic-bezier(.34,1.56,.64,1);
    transition-delay:var(--d,0s);
  }
  .portfolio-card.reveal.is-in{ transform:translateY(0) rotate(0deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }

  /* -------- Portfolio carousel (homepage teaser) -------- */
  /* Shows a full window of cards at once — 3 on desktop, 2 on tablet,
     1 on mobile (sizes computed in JS to fill the viewport exactly).
     Nothing is clipped to a sliver: cards either sit fully inside the
     visible window or are hidden, never half-shown. */
  .portfolio-grid.pf-carousel{ display:block; }
  .pf-carousel{
    position:relative; max-width:1160px; margin:0 auto; padding:0 64px;
  }
  .pf-carousel:focus-visible{ outline:none; }
  .pf-viewport{ overflow:hidden; width:100%; }
  .pf-track{
    display:flex; align-items:stretch;
    transition:transform .55s var(--ease);
    will-change:transform;
    touch-action:pan-y;
  }
  .pf-track.is-dragging{ transition:none; }
  .pf-slide{
    cursor:grab;
    transition:transform .5s var(--ease), opacity .5s var(--ease), flex-basis .3s ease, width .3s ease;
  }
  .pf-slide:active{ cursor:grabbing; }
  .pf-slide .portfolio-card{ width:100%; height:100%; user-select:none; -webkit-user-select:none; }
  .pf-slide:not(.is-active) .portfolio-card{ pointer-events:none; }
  .pf-slide:not(.is-active) .portfolio-card:hover{ box-shadow:none; }

  .pf-arrow{
    position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; z-index:20;
    display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06);
    border:1px solid var(--line-dark); backdrop-filter:blur(6px); cursor:pointer;
    transition:background .3s ease, border-color .3s ease, transform .3s var(--ease);
  }
  .pf-arrow:hover{ background:var(--lime); border-color:var(--lime); transform:translateY(-50%) scale(1.06); }
  .pf-arrow svg{ width:18px; height:18px; stroke:var(--cream); transition:stroke .3s ease; }
  .pf-arrow:hover svg{ stroke:var(--ink); }
  .pf-prev{ left:0; }
  .pf-next{ right:0; }
  @media (max-width:760px){
    .pf-carousel{ padding:0 8px; }
    .pf-arrow{ width:42px; height:42px; top:auto; bottom:-58px; transform:none; }
    .pf-arrow:hover{ transform:scale(1.06); }
    .pf-prev{ left:calc(50% - 54px); }
    .pf-next{ right:calc(50% - 54px); }
  }

  .pf-dots{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:38px; flex-wrap:wrap; max-width:520px; margin-left:auto; margin-right:auto; }
  @media (max-width:760px){ .pf-dots{ margin-top:78px; } }
  .pf-dots button{ width:8px; height:8px; border-radius:50%; background:var(--line-dark); border:none; padding:0; cursor:pointer; transition:background .3s ease, width .3s var(--ease); }
  .pf-dots button.is-active{ width:22px; border-radius:5px; background:var(--lime); }

  /* -------- Case-study modal (popup — never a page navigation) -------- */
  .project-modal-overlay{
    position:fixed; inset:0; z-index:110; background:rgba(11,15,26,.78); backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
  }
  .project-modal-overlay.open{ opacity:1; pointer-events:auto; }
  .project-modal{
    position:relative; width:100%; max-width:760px; max-height:88vh; overflow-y:auto;
    background:linear-gradient(180deg, var(--ink-2), var(--ink) 65%);
    border:1px solid rgba(255,255,255,.08); border-radius:26px;
    box-shadow:0 70px 140px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    transform:translateY(28px) scale(.95); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
  }
  .project-modal-overlay.open .project-modal{ transform:translateY(0) scale(1); opacity:1; }
  .project-modal-hero{ position:relative; height:340px; display:flex; align-items:center; justify-content:center; padding:26px; overflow:hidden; background-color:var(--ink-2); }
  .project-modal-hero .mini-laptop-wrap{ width:44%; max-width:300px; }
  .project-modal-hero .mini-screen{ padding:20px 22px 30px; border-width:5px; border-bottom-width:10px; }
  .project-modal-hero .mini-nav{ margin-bottom:16px; gap:8px; }
  .project-modal-hero .mini-nav .dot{ width:11px; height:11px; border-radius:4px; }
  .project-modal-hero .mini-nav .brand{ font-size:11px; }
  .project-modal-hero .mini-headline{ font-size:18px; margin-bottom:9px; }
  .project-modal-hero .mini-sub{ font-size:10.5px; margin-bottom:14px; }
  .project-modal-hero .mini-cta{ font-size:11px; padding:8px 16px; }
  .project-modal-hero .mini-base{ height:9px; }
  .project-modal-hero::before{
    content:''; position:absolute; inset:0; opacity:.45;
    background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
    background-size:16px 16px;
  }
  .project-modal-hero::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%); }

  /* Live preview: a mini browser-chrome frame with the real site loaded in
     an iframe, scaled down so a full desktop layout fits the panel. Sites
     that disallow embedding (X-Frame-Options / CSP) will render blank
     inside the frame — the domain bar and the "View live project" link
     below still make the real site reachable either way. */
  .pm-preview{ position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
  .pm-browser{
    width:min(560px, 100%); height:100%; max-height:288px; border-radius:12px; overflow:hidden;
    background:#fff; box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
    display:flex; flex-direction:column;
  }
  .pm-browser-bar{
    flex:none; display:flex; align-items:center; gap:6px; padding:9px 12px; background:#e7e9ec; border-bottom:1px solid #d3d6da;
  }
  .pm-browser-bar .pm-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
  .pm-browser-bar .pm-url{
    margin-left:8px; flex:1; min-width:0; font-size:11px; font-weight:600; color:#5b5f66; background:#fff; border:1px solid #d3d6da;
    border-radius:100px; padding:4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pm-frame-wrap{ position:relative; flex:1; overflow:hidden; background:#fff; }
  .pm-frame{ position:absolute; top:0; left:0; border:0; background:#fff; transform-origin:top left; }
  .pm-noembed{
    position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    gap:10px; padding:20px; background:#f4f4f5; color:#5b5f66;
  }
  .pm-noembed svg{ width:30px; height:30px; stroke:#9a9fa6; }
  .pm-noembed p{ font-size:12px; line-height:1.6; max-width:220px; }
  .project-modal-hero .icon-badge{
    position:relative; z-index:2; width:66px; height:66px; border-radius:18px; display:flex; align-items:center; justify-content:center;
    background:rgba(20,19,23,.3); backdrop-filter:blur(6px); box-shadow:0 18px 34px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.28);
  }
  .project-modal-hero .icon-badge svg{ width:30px; height:30px; stroke:#fff; }
  .project-modal-close{
    position:absolute; top:18px; right:18px; z-index:3; width:40px; height:40px; border-radius:50%; border:none;
    background:rgba(20,19,23,.55); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .25s ease, transform .25s var(--ease);
  }
  .project-modal-close:hover{ background:rgba(20,19,23,.85); transform:rotate(90deg); }
  .project-modal-hero .thumb-tag{ position:absolute; top:18px; left:18px; z-index:3; background:rgba(20,19,23,.55); backdrop-filter:blur(6px); color:#fff; font-size:11px; font-weight:600; letter-spacing:.03em; padding:6px 12px; border-radius:100px; }
  .project-modal-body{ position:relative; padding:34px 36px 36px; }
  .project-modal-eyebrow{ font-size:12px; color:var(--lime); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; display:block; }
  .project-modal-body h3{ font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--cream); letter-spacing:-0.02em; margin-bottom:10px; }
  .project-modal-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#8B8677; margin-bottom:22px; }
  .project-modal-body p.desc{ font-size:14.5px; line-height:1.75; color:#B7B2A2; margin-bottom:26px; }
  .project-modal-stack{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
  .project-modal-stack span{ background:rgba(255,255,255,.06); border:1px solid var(--line-dark); font-size:12px; font-weight:600; color:var(--cream); padding:7px 14px; border-radius:100px; }
  .project-modal-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding-top:6px; border-top:1px solid rgba(255,255,255,.08); padding-top:24px; }
  /* Gradient CTA reused from .mega-foot a for a consistent premium accent color across the site */
  .project-modal-actions .btn-gradient{
    display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:800; color:#fff;
    background:linear-gradient(115deg, #5B8CFF, #8B5CF6); padding:13px 24px; border-radius:100px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow:0 14px 28px rgba(91,140,255,.35);
  }
  .project-modal-actions .btn-gradient:hover{ transform:translateX(3px); box-shadow:0 16px 32px rgba(139,92,246,.45); }
  .project-modal-actions .btn-gradient[aria-disabled="true"]{ opacity:.4; pointer-events:none; box-shadow:none; }
  .project-modal-actions .btn-ghost{ display:inline-flex; align-items:center; font-size:13.5px; font-weight:600; color:#B7B2A2; background:transparent; border:1px solid var(--line-dark); padding:13px 22px; border-radius:100px; cursor:pointer; transition:all .25s ease; }
  .project-modal-actions .btn-ghost:hover{ border-color:rgba(255,255,255,.4); color:var(--cream); }
  .project-modal-hint{ font-size:11.5px; color:#8B8677; margin-top:16px; }
  @media (max-width:560px){ .project-modal-body{ padding:28px 24px 30px; } .project-modal-body h3{ font-size:23px; } .project-modal-hero{ height:230px; } .pm-browser{ max-height:178px; } }

  /* Premium "view all" button used on cream backgrounds against the dark panel above */
  .btn-cream{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
  .btn-cream:hover{ background:var(--lime); border-color:var(--lime); }

  /* ================= Sub-page hero banner (Services / Domains / Pricing / Contact) ================= */
  .page-hero{ background:radial-gradient(120% 160% at 82% 0%, var(--cream-2), var(--page) 60%); padding:64px 0 10px; border-bottom:1px solid var(--line); }
  .page-hero-inner{ max-width:1240px; margin:0 auto; padding:0 40px; }
  .page-hero .crumb{ font-size:13px; color:var(--text-faint); }
  .page-hero .crumb a{ color:var(--text-dim); }
  .page-hero .crumb a:hover{ color:var(--ink); }
  .page-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4.6vw,52px); letter-spacing:-0.02em; line-height:1.1; margin-top:16px; }
  .page-hero p{ color:var(--text-dim); font-size:16px; line-height:1.65; margin-top:16px; max-width:620px; }
  @media (max-width:520px){ .page-hero{ padding:44px 0 4px; } .page-hero-inner{ padding:0 20px; } }

  /* ================= Footer contact block (address / phone / emails) ================= */
  .foot-grid{ grid-template-columns:1.5fr .8fr .8fr 1.35fr; }
  .foot-contact-list{ display:flex; flex-direction:column; gap:14px; margin-top:2px; }
  .foot-contact-item{ display:flex; align-items:flex-start; gap:11px; font-size:13px; line-height:1.6; color:#B7B2A2; }
  .foot-contact-item svg{ flex-shrink:0; margin-top:2px; width:16px; height:16px; color:var(--lime); }
  .foot-contact-item a{ position:relative; color:#D8D4C8; transition:color .2s; word-break:break-word; }
  .foot-contact-item a:hover{ color:var(--lime); }
  .foot-contact-item span{ word-break:break-word; }
  @media (max-width:700px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-contact{ grid-column:1 / -1; } }

  /* ================= Premium Contact Page ================= */
  .contact-strip{ padding:0 0 90px; }
  .contact-grid{ display:grid; grid-template-columns:.92fr 1.18fr; gap:34px; align-items:start; }
  @media (max-width:940px){ .contact-grid{ grid-template-columns:1fr; } }

  .contact-info-stack{ display:flex; flex-direction:column; gap:16px; }
  .info-card{ border:1px solid var(--line); border-radius:22px; padding:28px; background:var(--cream); display:flex; gap:16px; align-items:flex-start; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
  .info-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(20,19,23,0.1); border-color:var(--orange); }
  .info-card .info-icon{ flex-shrink:0; width:46px; height:46px; border-radius:14px; background:var(--ink); color:var(--lime); display:flex; align-items:center; justify-content:center; }
  .info-card .info-icon svg{ width:20px; height:20px; }
  .info-card h4{ font-family:var(--font-display); font-weight:700; font-size:15.5px; margin-bottom:6px; }
  .info-card p, .info-card a{ font-size:13.5px; color:var(--text-dim); line-height:1.6; display:block; }
  .info-card a:hover{ color:var(--ink); text-decoration:underline; }
  .info-card.dark{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
  .info-card.dark h4{ color:var(--cream); }
  .info-card.dark p, .info-card.dark a{ color:#B7B2A2; }
  .info-card.dark .info-icon{ background:var(--lime); color:var(--ink); }

  .contact-map{ margin-top:4px; border-radius:22px; overflow:hidden; border:1px solid var(--line); height:220px; filter:grayscale(.15); }
  .contact-map iframe{ width:100%; height:100%; border:0; display:block; }

  .contact-form-card{ border:1px solid var(--line); border-radius:26px; padding:40px; background:var(--cream); box-shadow:0 30px 70px rgba(20,19,23,0.08); }
  .contact-form-card h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(21px,2.4vw,26px); letter-spacing:-0.02em; margin-bottom:8px; }
  .contact-form-card > p{ color:var(--text-dim); font-size:14px; margin-bottom:28px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
  .field{ position:relative; margin-bottom:20px; }
  .field label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:8px; }
  .field input, .field textarea, .field select{
    width:100%; font-family:var(--font-body); font-size:14.5px; color:var(--text); background:#fff;
    border:1.5px solid var(--line); border-radius:13px; padding:14px 16px; transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field textarea{ resize:vertical; min-height:130px; }
  .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(20,19,23,0.08); }
  .field input:invalid:not(:placeholder-shown){ border-color:#D9534F; }
  .field .hint{ font-size:11.5px; color:var(--text-faint); margin-top:6px; }
  .form-consent{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--text-dim); margin-bottom:24px; line-height:1.55; }
  .form-consent input{ margin-top:3px; accent-color:var(--ink); }
  .contact-form-card .btn{ width:100%; justify-content:center; padding:15px 22px; font-size:14.5px; }
  .form-note{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-faint); margin-top:16px; justify-content:center; }
  .form-note svg{ width:14px; height:14px; color:var(--lime-2); }
  .form-success{ display:none; text-align:center; padding:50px 20px; }
  .form-success.is-active{ display:block; }
  .form-success .info-icon{ margin:0 auto 18px; }
  .form-success h3{ font-family:var(--font-display); font-weight:800; font-size:22px; margin-bottom:10px; }
  .form-success p{ color:var(--text-dim); font-size:14px; max-width:360px; margin:0 auto; }
  .contact-form-card form.is-hidden{ display:none; }

  .trust-strip{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }
  .trust-strip span{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-dim); background:var(--cream-2); border:1px solid var(--line); padding:9px 16px; border-radius:100px; }
  .trust-strip span svg{ width:14px; height:14px; color:var(--orange); }

  .faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
  .faq-item{ border:1px solid var(--line); border-radius:18px; background:var(--cream); overflow:hidden; }
  .faq-item summary{ list-style:none; cursor:pointer; padding:22px 26px; font-family:var(--font-display); font-weight:700; font-size:15.5px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .plus{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s ease; }
  .faq-item[open] summary .plus{ transform:rotate(45deg); background:var(--ink); color:var(--lime); border-color:var(--ink); }
  .faq-item .faq-a{ padding:0 26px 24px; color:var(--text-dim); font-size:14px; line-height:1.7; max-width:640px; }