:root{
  --bg: #0a0b10;
  --panel: #12141d;
  --panel-2: #171a25;
  --border: rgba(157,166,255,0.10);
  --text: #f3f1ec;
  --muted: #8f92a8;
  --muted-2: #6f7288;
  --accent-red: #3b82f6;
  --accent-red-deep: #8b5cf6;
  --accent-yellow: #38bdf8;
  --accent-yellow-deep: #0ea5e9;
  --edge-neutral: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14));
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --serif: "Instrument Serif", serif;
  --sans: "Bricolage Grotesque", sans-serif;

  /* Global spacing scale — every margin/padding/gap in this file is
     built from this 4px/8px base grid so whitespace stays mathematically
     consistent across sections, cards and headers. Half-steps (0.5, 1.5)
     exist only for fine UI chrome like pills and form controls. */
  --space-0-5: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-14: 112px;
  --space-20: 160px;

  /* Glassmorphism tokens — reused across every frosted surface
     (header, pills, cards, panels, modal) so the "depth" of the
     glass stays consistent instead of every element inventing
     its own blur radius / border / shadow combo. */
  --glass-border: 1px solid rgba(255,255,255,0.08);
  --glass-border-strong: 1px solid rgba(255,255,255,0.14);
  --glass-blur-sm: blur(8px);
  --glass-blur-md: blur(14px);
  --glass-blur-lg: blur(22px);
  --glass-sheen: inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-sheen-soft: inset 0 1px 0 rgba(255,255,255,0.05);

  /* Layered shadows: a tight inner sheen for edge definition +
     a wide diffused outer shadow so glass elements read as
     physically floating above the background rather than flat. */
  --shadow-sm: var(--glass-sheen-soft), 0 2px 6px rgba(0,0,0,0.22), 0 14px 30px rgba(0,0,0,0.28);
  --shadow-md: var(--glass-sheen), 0 4px 12px rgba(0,0,0,0.28), 0 24px 50px rgba(0,0,0,0.35);
  --shadow-lg: var(--glass-sheen), 0 6px 18px rgba(0,0,0,0.32), 0 36px 80px rgba(0,0,0,0.45);
  --shadow-hover: var(--glass-sheen), 0 8px 22px rgba(0,0,0,0.35), 0 44px 90px rgba(0,0,0,0.5);

  /* ----------------------------------------------------------
     PREMIUM GLASS UPGRADE TOKENS
     ------------------------------------------------------------
     Deeper, Apple-style frosted blur (blur + saturate), a shared
     tactile grain texture (inline base64 SVG feTurbulence, kept
     at an extremely low opacity so it reads as physical frosted
     glass rather than a visible digital pattern), and one premium
     deceleration easing curve reused across every interactive
     element so all motion on the site feels like it belongs to
     the same physical material.
  ---------------------------------------------------------- */
  --glass-blur-sm: blur(12px) saturate(180%);
  --glass-blur-md: blur(20px) saturate(180%);
  --glass-blur-lg: blur(28px) saturate(180%);

  --ease-premium: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Grain: feTurbulence noise baked into a tiny tiled SVG, rendered
     at ~5% opacity through mix-blend-mode:overlay via the
     .grain-layer utility so it never reads as a printed pattern —
     just a faint physical texture sitting on top of the frost. */
  --grain-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* Precision edge lighting: light catches the top-left of glass,
     fades toward the bottom-right, simulating a real light source. */
  --edge-light: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.01) 100%);
}

/* ----------------------------------------------------------
   Shared grain overlay — attach to any element that already
   has `position:relative; isolation:isolate;`. Sits as a
   negative-stack-level pseudo-layer so it paints on top of the
   glass background but underneath all real content, at a barely
   perceptible opacity via mix-blend-mode:overlay.
---------------------------------------------------------- */
.grain-layer{position:relative;isolation:isolate;}
.grain-layer::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.05;
  mix-blend-mode:overlay;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--space-4);
}

em{font-family:var(--serif);font-style:italic;font-weight:400;}

.muted{color:var(--muted);}

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

ul{list-style:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1-5) var(--space-3);
  border-radius:100px;
  font-weight:600;
  font-size:14px;
  font-family:var(--sans);
  border:none;
  cursor:pointer;
  transition:transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium), opacity .4s var(--ease-premium);
}
.btn-light{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,#fff,#dcdcdc);
  color:#0a0a0a;
  box-shadow:0 8px 20px rgba(255,255,255,0.06);
}
.btn-light::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55) 45%, transparent 70%);
  transform:skewX(-18deg);
  transition:left .6s var(--ease-premium);
  pointer-events:none;
}
.btn-light:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 34px rgba(255,255,255,0.14);}
.btn-light:hover::after{left:130%;}
.btn.full{width:100%;justify-content:center;margin:var(--space-2) 0;}
.arrow{display:inline-block;}

/* Accessibility: visible keyboard focus across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2px solid rgba(255,255,255,0.6);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Header ---------- */
/* FIX: the navbar was scrolling away with the page because a later,
   equal-specificity ".site-header{position:relative;...}" rule further
   down this file was silently overriding the sticky positioning set
   here. That duplicate rule has been removed and folded into this
   single declaration block. The header now uses position:fixed (locked
   to the viewport at all times, immune to any ancestor's overflow
   setting) with a very high z-index so it always sits above every
   other element, including modals and the hero glow. Because fixed
   elements are pulled out of normal document flow, script.js measures
   the header's real height on load/resize and pads <body> to match,
   so page content never jumps underneath it. */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  isolation:isolate;
  padding:var(--space-3) 0;
  background:rgba(9,10,16,0.72);
  backdrop-filter:blur(15px) saturate(180%);
  -webkit-backdrop-filter:blur(15px) saturate(180%);
  transition:background .45s var(--ease-premium), box-shadow .45s var(--ease-premium), border-color .45s var(--ease-premium), backdrop-filter .45s var(--ease-premium);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
/* Modern touch: header gains a slightly deeper glass + soft elevation once the page is scrolled (see script.js) */
.site-header.scrolled{
  background:rgba(7,8,13,0.86);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 16px 40px rgba(0,0,0,0.4);
}
.site-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  mix-blend-mode:overlay;
  transition:opacity .45s var(--ease-premium);
}
.site-header.scrolled::after{opacity:.035;}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  letter-spacing:.5px;
}
.logo .dot{font-size:12px;vertical-align:super;}
.nav-pill{
  display:flex;
  gap:var(--space-4);
  padding:var(--space-1-5) var(--space-4);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:100px;
  background:rgba(255,255,255,0.03);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
  box-shadow:var(--glass-sheen-soft), inset 1px 1px 0 rgba(255,255,255,0.06);
  font-size:14px;
  transition:border-color .4s var(--ease-premium), box-shadow .4s var(--ease-premium);
}
.nav-pill a{color:#cfcfcf;transition:color .3s var(--ease-premium);}
.nav-pill a:hover{color:var(--accent-red);}

.logo-image img {
  height: 40px;      /* Adjust this height to match your header size */
  width: auto;       /* Keeps the aspect ratio correct */
  display: block;
  filter: drop-shadow(0 0 15px rgba(205, 163, 73, 0.35));
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top:var(--space-8);
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  top:-200px;left:50%;
  transform:translateX(-50%);
  width:900px;height:900px;
  background:radial-gradient(circle, rgba(120,120,140,0.10), transparent 50%);
  pointer-events:none;
}

.hero-right,
.hero-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-5);
  position:relative;
  z-index:2;
}
.hero-right{
  flex:1 1 0%;
  min-width:0;
  width:100%;
}

.hero-left p{
  width: 500px;
  max-width:100%;
}
.hero-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:96px;
  line-height:0.95;
  letter-spacing:-1px;
}
.hero-title-group{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.hero-title-label{
  display:block;
  font-size:18px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.hero-cta-row{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap:var(--space-1);
  flex-wrap:wrap;
}
.availability-pill{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1-5);
  border-radius:100px;
  border:var(--glass-border);
  background:rgba(255,255,255,0.03);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
  box-shadow:var(--glass-sheen-soft), inset 1px 1px 0 rgba(255,255,255,0.06);
  font-size:12px;
  font-weight:600;
  color:#cfcfcf;
}
.pulse-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent-yellow);
  box-shadow:0 0 0 0 rgba(56,189,248,0.6);
  animation:pulse-glow 2.2s infinite;
  flex-shrink:0;
}
@keyframes pulse-glow{
  0%{box-shadow:0 0 0 0 rgba(56,189,248,0.55);}
  70%{box-shadow:0 0 0 10px rgba(56,189,248,0);}
  100%{box-shadow:0 0 0 0 rgba(56,189,248,0);}
}
/* Glassmorphism CTA button — deep liquid-glass orb, tactile grain,
   ambient bloom glow that matches the accent gradient, and a
   light-sweep sheen that runs across the surface on hover. */
.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-6);
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--sans);
  color: #fff;

  /* Initial background and border */
  background: linear-gradient(135deg, rgba(59,130,246,0.24), rgba(139,92,246,0.14));
  border: var(--glass-border-strong);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);

  /* Ambient bloom — a soft, diffused glow matching the accent gradient,
     layered under the standard elevation shadow so the button reads as
     a glowing glass orb rather than a flat pill. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 6px 18px rgba(59,130,246,0.18),
    0 2px 40px rgba(139,92,246,0.10),
    var(--shadow-md);

  /* Optimization: Tell the browser to prepare for these changes */
  will-change: transform, box-shadow;
  transition: transform 0.45s var(--ease-premium),
              box-shadow 0.45s var(--ease-premium),
              border-color 0.45s var(--ease-premium),
              backdrop-filter 0.45s var(--ease-premium);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

/* Tactile grain — the same feTurbulence texture used across every
   glass surface, sitting under the border glow and above the tint. */
.btn-glow::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.06;
  mix-blend-mode:overlay;
}

/* The Border Glow */
.btn-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-deep));
  
  /* Keep these constant so the browser doesn't have to recalculate the shape */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  /* Only animate opacity for a smooth fade */
  opacity: 0.45;
  transition: opacity 0.4s var(--ease-premium);
  z-index: -1;
}

/* Light-sweep sheen — a soft diagonal highlight that glides across
   the glass surface on hover, on its own layer so it never fights
   with the border-glow or grain pseudo-elements. */
.btn-glow span.sweep,
.btn-glow{
  --sweep-pos: -200%;
}
.btn-glow{
  background-repeat:no-repeat;
  background-image:
    linear-gradient(135deg, rgba(59,130,246,0.24), rgba(139,92,246,0.14)),
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0.20) 35%, rgba(255,255,255,0) 50%, transparent 100%);
  background-position: 0 0, var(--sweep-pos) 0;
  background-size: 100% 100%, 80% 100%;
  transition: transform 0.45s var(--ease-premium),
              box-shadow 0.45s var(--ease-premium),
              border-color 0.45s var(--ease-premium),
              backdrop-filter 0.45s var(--ease-premium),
              background-position 0.9s var(--ease-premium);
}

/* Hover States */
.btn-glow:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 10px 28px rgba(59,130,246,0.32),
    0 2px 60px rgba(139,92,246,0.18),
    var(--shadow-hover);
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  background-position: 0 0, 500% 0;
}
.btn-glow:hover::before{opacity:1;}
.btn-glow:active{transform:translateY(-1px) scale(1.01);}

/* ----------------------------------------------------------
   BLACK GLASS PREMIUM HOVER — "Hire Me" (navbar) + "Let's Build
   Yours" (AI Agents CTA). Both start life as .btn-light (solid
   white pill) but on hover dissolve into a deep, translucent
   black glass surface: strong backdrop blur, an edge-light rim
   pulled from the same mask trick used on .btn-glow, a diagonal
   light-sweep reflection gliding across the glass, and a tactile
   dimensional press on :active. The glassmorphism texture (blur +
   saturation + border sheen) stays intact through every frame —
   only the tint and depth shift.
---------------------------------------------------------- */
.btn-black-glass{
  position:relative;
  isolation:isolate;
  transition:background .55s var(--ease-premium), color .5s var(--ease-premium),
              border-color .55s var(--ease-premium), box-shadow .55s var(--ease-premium),
              backdrop-filter .55s var(--ease-premium), transform .45s var(--ease-premium);
}
/* Edge-light rim: a soft gradient ring that fades in only on the
   1px border (masked to exclude the fill), simulating light
   catching the beveled edge of physical glass. */
.btn-black-glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s var(--ease-premium);
  pointer-events:none;
  z-index:2;
}
.btn-black-glass:hover{
  background:rgba(0,0,0,0.6);
  color:#fff;
  border-color:rgba(255,255,255,0.14);
  backdrop-filter:blur(26px) saturate(200%);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2), /* Subtle top highlight */
    0 10px 20px rgba(0,0,0,0.15),        /* Main soft shadow */
    0 3px 6px rgba(0,0,0,0.1);
  transform:translateY(-3px) scale(1.035);
}
/* Reuse the .btn-light sweep (::after) as the sweeping light
   reflection — a white diagonal streak reads just as premium
   gliding across dark glass as it does across the light pill. */
.btn-black-glass:hover::before{opacity:1;}
/* Dimensional press: on click, the glass "compresses" — shadow
   flips to an inset dent and the sweep + rim settle instantly so
   the surface reads as physically depressed rather than faded. */
.btn-black-glass:active{
  transform:translateY(-1px) scale(0.985);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 16px rgba(0,0,0,0.4);
}
.hero-title em{font-size:96px;}
.hero-side{
  max-width:320px;
  padding-top:var(--space-2);
  text-align:right;
}
.hero-side p{
  font-size:15px;
  line-height:1.55;
}
.copy-mark{opacity:.6;margin-right:2px;}
.hero-contact{
  margin-top:var(--space-3);
  padding-top:var(--space-2);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.contact-label{font-size:13px;font-weight:600;}
.social-row{display:flex;gap:var(--space-1);}
.social-row a{
  width:30px;height:30px;
  border:var(--glass-border);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  color:#ccc;
  background:rgba(255,255,255,0.02);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  transition:background .35s var(--ease-premium), border-color .35s var(--ease-premium), transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
.social-row a:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.22);transform:translateY(-2px) scale(1.08);box-shadow:0 8px 18px rgba(0,0,0,0.3);}

.hero-section{
  display:flex;
  padding:0 var(--space-20);
  gap: 40px;
}

.hero-bottom{
  position:relative;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  align-items:end;
  gap:var(--space-3);
  min-height:420px;
}
.hero-info{align-self:start;padding-top:var(--space-1);}
.hero-info-label{
  display:block;
  font-size:30px;
  font-weight: 500;
  color:#fff;
  margin-bottom:var(--space-1);
}
.hero-info p{font-size:14px;line-height:1.6;color:#d8d8d8;}

.hero-sphere{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  position:relative;
}
.scroll-down{
  margin-top:calc(var(--space-3) * -1);
  width:44px;height:44px;
  border-radius:50%;
  border:var(--glass-border);
  background:rgba(16,18,27,0.8);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
  color:#fff;
  font-size:16px;
  cursor:pointer;
  transition:transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium), border-color .4s var(--ease-premium);
}
.scroll-down:hover{transform:translateY(4px) scale(1.06);box-shadow:0 10px 24px rgba(0,0,0,0.35);border-color:rgba(255,255,255,0.2);}
.hero-featured{
  align-self:start;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--space-2);
}
.featured-label{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
  margin-bottom:var(--space-2);
}
/* Title sitting directly above the hero video — centered over the
   player and styled to match the site's serif/sans mixed hierarchy. */
.hero-video-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:28px;
  line-height:1.2;
  color:var(--text);
  width:100%;
  max-width:900px;
  margin:0 auto;
}
.hero-video-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:900px;
  margin:0 auto;
  border-radius:var(--radius-sm);
  overflow:hidden;
  aspect-ratio:16/9;
  border:var(--glass-border);
  box-shadow:var(--shadow-lg);
}
.hero-video-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  border:none;
}
/* Dark gradient "poster" shown before the visitor presses play — no
   iframe exists in the DOM at all until heroPlayBtn is clicked, so
   there's zero unnecessary network/JS cost from YouTube on load. */
.hero-video-placeholder{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(59,130,246,0.14), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(139,92,246,0.08), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--panel) 60%, #06070a);
}
.hero-video-placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.05;
  mix-blend-mode:overlay;
}

/* ----------------------------------------------------------
   HERO PLAY BUTTON — glassmorphic overlay trigger for the
   YouTube embed. At rest it's a frosted glass circle; on hover
   it dissolves into the EXACT same deep black-glass surface,
   edge-light rim and diagonal light-sweep used by
   .btn-black-glass (Hire Me / Send Message), so the hover
   language reads as one unified system across the whole site.
---------------------------------------------------------- */
.hero-play-btn{
  position:absolute;
  inset:0;
  margin:auto;
  width:76px;
  height:76px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(59,130,246,0.45);
  background:linear-gradient(160deg, rgba(59,130,246,0.34), rgba(124,58,237,0.30));
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
  box-shadow:var(--shadow-md), 0 0 22px rgba(59,130,246,0.28), 0 0 46px rgba(139,92,246,0.16);
  color:#fff;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  z-index:2;
  transition:background .55s var(--ease-premium), color .5s var(--ease-premium),
              border-color .55s var(--ease-premium), box-shadow .55s var(--ease-premium),
              backdrop-filter .55s var(--ease-premium), transform .45s var(--ease-premium),
              opacity .4s var(--ease-premium);
}
.hero-play-btn svg{width:26px;height:26px;fill:#fff;margin-left:3px;position:relative;z-index:1;}

/* Edge-light rim: identical mask trick to .btn-black-glass::before,
   a soft gradient ring that fades in only on the 1px border. */
.hero-play-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.85), rgba(59,130,246,0.25) 55%, rgba(255,255,255,0.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s var(--ease-premium);
  pointer-events:none;
  z-index:2;
}
/* Light-sweep sheen: identical diagonal streak to .btn-light::after,
   gliding across the glass surface on hover. */
.hero-play-btn::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55) 45%, transparent 70%);
  transform:skewX(-18deg);
  transition:left .6s var(--ease-premium);
  pointer-events:none;
  z-index:1;
}
.hero-play-btn:hover,
.hero-play-btn:focus-visible{
  background:linear-gradient(160deg, rgba(59,130,246,0.5), rgba(124,58,237,0.42));
  color:#fff;
  border-color:rgba(59,130,246,0.65);
  backdrop-filter:blur(26px) saturate(200%);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 10px 20px rgba(0,0,0,0.25),
    0 0 30px rgba(59,130,246,0.4),
    0 3px 6px rgba(0,0,0,0.1);
  transform:scale(1.08);
}
.hero-play-btn:hover::before,
.hero-play-btn:focus-visible::before{opacity:1;}
.hero-play-btn:hover::after,
.hero-play-btn:focus-visible::after{left:130%;}
.hero-play-btn:active{
  transform:scale(0.96);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 16px rgba(0,0,0,0.4);
}
/* Click state — JS adds this once the embed starts playing, fading
   the overlay out and lifting it out of the click path entirely. */
.hero-play-btn.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:scale(0.9);
}

.brand-strip{
  display:flex;
  align-items:center;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-4);
  padding:var(--space-3) var(--space-4);
  margin-top:var(--space-12);
  margin-bottom:var(--space-12);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.brand-mark{font-size:18px;color:#9c9c9c;font-weight:600;}

/* ---------- Sections (shared) ---------- */
.section{padding:var(--space-14) 0;}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--space-5);
  margin-bottom:var(--space-8);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  border:var(--glass-border);
  border-radius:100px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:#cfcfcf;
  margin-bottom:var(--space-2);
  background:rgba(255,255,255,0.02);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
}
.eyebrow.center{display:flex;width:max-content;margin-left:auto;margin-right:auto;}
.section-title{
  font-family:var(--sans);
  font-weight:500;
  font-size:44px;
  line-height:1.15;
}
.section-title em{font-size:44px;font-weight:400;}
.section-title.center{text-align:center;}
.section-desc{
  max-width:320px;
  font-size:15px;
  color:var(--muted);
  text-align:left;
}
.section-desc.center{max-width:520px;margin:var(--space-2) auto 0;text-align:center;}
.center-cta{text-align:center;margin:var(--space-6) 0;}

/* ---------- Section divider ----------
   A subtle glassmorphism transition between sections: a hairline
   gradient that fades to transparent at both ends, with a soft
   blurred glow sitting behind its center. Pure CSS gradients —
   no SVG, no extra markup beyond a single empty div. */
.section-divider{
  position:relative;
  height:1px;
  max-width:1180px;
  margin:0 auto;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
}
.section-divider::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:300px;height:46px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.10), transparent 72%);
  filter:blur(10px);
  pointer-events:none;
}

/* ---------- Services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
}

/* services — each card is its own premium glass surface (not a
   shared bordered strip) so its hover bloom/glow can breathe
   without being clipped by a parent's overflow:hidden. */
.service-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  color:#cfcfcf;
  margin-bottom:var(--space-4);
  position:relative;
  z-index:2;
  transition:color .5s var(--ease-premium);
}
.card-index{display:block;font-size:13px;color:var(--muted-2);margin-bottom:var(--space-1);position:relative;z-index:2;}
.service-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(160deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 60%);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium),
              border-color .5s var(--ease-premium), backdrop-filter .5s var(--ease-premium),
              background .5s var(--ease-premium);
}
/* Tactile grain, consistent with every other glass surface on the page */
.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.035;
  mix-blend-mode:overlay;
}
/* Edge-lighting gradient ring, masked to the 1px border only —
   invisible at rest, fades in on hover so the card's edge reads
   as catching light like a real pane of glass. */
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--edge-neutral);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s var(--ease-premium);
  pointer-events:none;
  z-index:1;
}
.service-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:rgba(255,255,255,0.2);
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01) 60%);
  backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  /* Tight, low-emission edge-light — a thin, closely-hugging glow
     rather than a wide spotlight, so the card reads as a refined
     LED-lit edge instead of an overpowering bloom. */
  box-shadow:
    var(--shadow-hover),
    0 0 16px rgba(59,130,246,0.16),
    0 0 30px rgba(139,92,246,0.14);
}
.service-card:hover::before{opacity:.6;}
.service-card:hover .service-icon{color:#fff;}
.service-card h3{font-size:19px;font-weight:600;margin-bottom:10px;position:relative;z-index:2;}
.service-card p{font-size:14px;color:var(--muted);line-height:1.6;position:relative;z-index:2;}

/* ---------- About panel ---------- */
.about-panel{
  position:relative;
  isolation:isolate;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  margin:0 var(--space-4);
  width:calc(100% - 64px);
  padding:var(--space-12) 0;
  box-shadow:var(--shadow-md), inset 1px 1px 0 rgba(255,255,255,0.05);
}
.about-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.035;
  mix-blend-mode:overlay;
}
.about-inner{text-align:center;}
.about-statement{
  font-family:var(--sans);
  font-weight:600;
  font-size:28px;
  line-height:1.5;
  max-width:760px;
  margin:0 auto var(--space-8);
}
.about-statement .muted{font-weight:400;}
.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
}
.stat{
  border-top:1px solid var(--border);
  padding-top:var(--space-2);
  text-align:left;
}
.stat-label{display:block;font-size:13px;color:var(--muted);margin-bottom:var(--space-2);}
.stat-number{
  font-family:var(--serif);
  font-size:64px;
  font-weight:400;
  background:linear-gradient(180deg,#fff,#7d7d7d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Portfolio ---------- */
.portfolio-filters{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
  margin-bottom:var(--space-5);
}
.filter-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  border-radius:100px;
  border:var(--glass-border);
  background:rgba(255,255,255,0.02);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
  color:#cfcfcf;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .4s var(--ease-premium), border-color .4s var(--ease-premium), color .4s var(--ease-premium), box-shadow .4s var(--ease-premium), transform .4s var(--ease-premium);
}
.filter-btn span{
  font-size:11px;
  color:var(--muted-2);
  background:rgba(255,255,255,0.06);
  padding:2px var(--space-1);
  border-radius:100px;
  transition:background .3s var(--ease-premium), color .3s var(--ease-premium);
}
.filter-btn:hover{border-color:rgba(255,255,255,0.22);color:#fff;box-shadow:var(--glass-sheen-soft);transform:translateY(-2px);}
.filter-btn.is-active{background:#fff;color:#0a0a0a;border-color:#fff;box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.filter-btn.is-active span{background:rgba(10,10,10,0.12);color:#0a0a0a;}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-3);
  /* Gives every card's 3D tilt a shared, believable vanishing point
     instead of each card rotating around its own flat plane. */
  perspective:1400px;
}
/* Email Marketing view: 5 items per row on desktop (JS toggles this
   class on #portfolioGrid when the "email" filter is active). Keeps
   the 3-column Funnel/Automation layout completely untouched. */
.portfolio-grid.is-email-view{
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-2);
}
.portfolio-card{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md);
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-md);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium), opacity .35s var(--ease-premium), border-color .5s var(--ease-premium);
}
.portfolio-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.03;
  mix-blend-mode:overlay;
}
/* Gradient border-glow ring: a 1px gold-to-emerald edge masked down
   to just the border, faded in on hover for a soft colored halo
   instead of a flat box-shadow. */
.portfolio-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  padding:1px;
  background:var(--edge-neutral);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease-premium);
}
/* Subtle upward lift + 3D tilt, smoothed with the shared premium
   deceleration curve so it never feels snappy or mechanical. */
.portfolio-card:hover{
  transform:translateY(-10px) scale(1.02) rotateX(3deg) rotateY(-2deg);
  box-shadow:var(--shadow-hover), 0 0 36px rgba(59,130,246,0.16), 0 0 60px rgba(139,92,246,0.14);
  border-color:rgba(255,255,255,0.24);
}
.portfolio-card:hover::before{opacity:.7;}
.portfolio-card.is-hidden{opacity:0;transform:scale(.94);pointer-events:none;}
.portfolio-image{position:relative;aspect-ratio:3/2;overflow:hidden;background:#12141d;}
.portfolio-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-premium), filter .6s var(--ease-premium);}
.portfolio-card:hover .portfolio-image img{transform:scale(1.09);filter:saturate(1.08) contrast(1.04);}

/* Text reveal: on devices with a real hover (mouse/trackpad), the
   description and stack pills sit slightly faded and lowered, then
   rise + fade in fully once the card is hovered — a soft "reveal"
   rather than the details being always-on. Touch devices (no true
   hover) are excluded so the content just stays fully visible. */
@media (hover:hover) and (pointer:fine){
  /* Default (non-hover) state: the description stays visible but
     dimmed, so the card always reads as a complete piece of content
     — title, category tag and a summary — rather than empty space.
     The secondary stack pills stay tucked away until hover, which is
     when both fully brighten/rise into their "revealed" state. */
  .portfolio-body p{
    opacity:.62;
    transform:translateY(0);
    transition:opacity .5s var(--ease-premium), transform .5s var(--ease-premium), color .5s var(--ease-premium);
  }
  .portfolio-stack{
    opacity:0;
    transform:translateY(10px);
    transition:opacity .5s var(--ease-premium), transform .5s var(--ease-premium);
  }
  .portfolio-card:hover .portfolio-body p{transition-delay:.05s;}
  .portfolio-card:hover .portfolio-stack{transition-delay:.12s;}
  .portfolio-card:hover .portfolio-body p{
    opacity:1;
    color:var(--text);
  }
  .portfolio-card:hover .portfolio-stack{
    opacity:1;
    transform:translateY(0);
  }
}

/* Email Marketing thumbnails: portrait aspect ratio only, scoped with a
   highly specific selector so Funnel/Automation/AI cards are untouched. */
.portfolio-grid .portfolio-card[data-category="email"] .portfolio-image{
  aspect-ratio:4/5;
}
.portfolio-grid .portfolio-card[data-category="email"] .portfolio-body p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.portfolio-cat-tag{
  position:absolute;
  top:var(--space-2);left:var(--space-2);
  padding:var(--space-1) var(--space-2);
  border-radius:100px;
  background:rgba(9,10,16,0.55);
  border:var(--glass-border-strong);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--glass-sheen-soft);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.portfolio-body{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.portfolio-body h3{font-size:18px;font-weight:600;line-height:1.3;}
.portfolio-body p{font-size:13px;color:var(--muted);line-height:1.6;flex:1;}
.portfolio-stack{display:flex;flex-wrap:wrap;gap:var(--space-1);}
.stack-pill{
  font-size:11px;
  padding:var(--space-1) var(--space-1-5);
  border-radius:100px;
  border:var(--glass-border);
  background:rgba(255,255,255,0.03);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  color:#cfcfcf;
}

/* ---------- AI Agents sub-section ---------- */
.ai-agents-subsection{
  margin-top:var(--space-10);
  padding-top:var(--space-8);
  border-top:1px solid var(--border);
}
.ai-agents-head{
  max-width:640px;
  margin:0 auto var(--space-6);
  text-align:center;
}
.ai-agents-title{font-size:36px;font-weight:500;margin:0 0 var(--space-2);}
.ai-agents-title em{font-size:36px;}
.ai-agents-desc{font-size:15px;color:var(--muted);line-height:1.6;}
.ai-agents-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
.ai-agent-stage{
  position:relative;
  isolation:isolate;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  border:var(--glass-border-strong);
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02) 60%, rgba(139,92,246,0.06));
  backdrop-filter:var(--glass-blur-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transition:transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium), border-color .45s var(--ease-premium);
}
.ai-agent-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.04;
  mix-blend-mode:overlay;
}
.ai-agent-stage::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--edge-neutral);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.22;
  pointer-events:none;
}
.ai-agent-stage:hover{
  transform:translateY(-6px) scale(1.008);
  box-shadow:var(--shadow-hover), 0 0 40px rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.22);
}
.ai-agent-stage-head{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
  position:relative;
  z-index:1;
}
.ai-agent-icon{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  background:rgba(255,255,255,0.06);
  border:var(--glass-border);
  flex-shrink:0;
}
.ai-agent-stage-head h4{font-size:19px;font-weight:600;margin-bottom:4px;}
.ai-agent-stage-head p{font-size:13px;color:var(--muted);}
.ai-agent-embed-area{
  position:relative;
  z-index:1;
  min-height:300px;
  border-radius:var(--radius-md);
  border:1px dashed rgba(255,255,255,0.18);
  background:rgba(8,9,15,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--space-3);
}
.ai-agent-placeholder{font-size:13px;color:var(--muted-2);}

/* ---------- Tech Stack ---------- */
.tech-panel{
  position:relative;
  isolation:isolate;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  margin:0 var(--space-4);
  width:calc(100% - 64px);
  padding:var(--space-12) 0;
  box-shadow:var(--shadow-md), inset 1px 1px 0 rgba(255,255,255,0.05);
}
.tech-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.035;
  mix-blend-mode:overlay;
}
/* ----------------------------------------------------------
   TOOLS MARQUEE — endless horizontal scroll
   ------------------------------------------------------------
   .tech-marquee is the fixed-height viewport; a soft mask fades
   the cards to transparent at both edges so they don't hard-cut.
   Inside it, two identical .tech-marquee-track rows sit side by
   side in a flex row and both animate left together on one
   keyframe (translateX(0) -> translateX(-100%)) — because the
   second track is the first track's mirror image, the instant
   the first track finishes exiting, the second is sitting in the
   exact start position, so the loop reads as perfectly seamless.
   Hovering the marquee pauses the animation entirely; hovering an
   individual card on top of that pops it with scale + glow.
---------------------------------------------------------- */
.tech-marquee{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.tech-marquee-track{
  display:flex;
  align-items:stretch;
  gap:var(--space-3);
  width:max-content;
  flex-shrink:0;
  /* BUG FIX: the two tracks sit flush against each other in the outer
     flex row with zero space between them, while every card-to-card
     gap *inside* a track is --space-3 — that mismatch is exactly what
     made "Google Sheets" (end of track 1) and "GoHighLevel" (start of
     track 2) visually collide at the loop seam. Adding that same gap
     as trailing padding-right makes each track's own rendered width
     (what translateX(-100%) measures itself against) include one
     extra seam gap, so the animated track lands precisely where the
     next track begins, with identical spacing the whole way through —
     a perfectly seamless loop. */
  padding:var(--space-1) var(--space-3) var(--space-2) 0;
  animation:tech-marquee-scroll 32s linear infinite;
}
/* The two tracks are laid side-by-side by the shared flex row on
   .tech-marquee above. Because each track's own width now includes
   the trailing seam gap (see padding-right above), translateX(-100%)
   moves it exactly one full track-width — including that gap — to
   the left, landing precisely in the neighbor's vacated start
   position with no jump and no overlap. */
@keyframes tech-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}
/* Pausing: hovering or focusing anywhere in the marquee freezes
   both tracks in place so a visitor can read/interact with a card
   without it sliding away underneath the pointer. */
.tech-marquee:hover .tech-marquee-track,
.tech-marquee:focus-within .tech-marquee-track{
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce){
  .tech-marquee-track{animation:none;}
}

/* Tech cards reuse the exact glass-glow hover language established
   on the Services cards — same bloom, same edge-light ring, same
   backdrop-filter shift — so the two sections feel like one system. */
.tech-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-1);
  padding:var(--space-4);
  width:200px;
  flex:0 0 auto;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(160deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 60%);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium),
              border-color .4s var(--ease-premium), backdrop-filter .4s var(--ease-premium),
              background .4s var(--ease-premium);
}
.tech-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.035;
  mix-blend-mode:overlay;
}
.tech-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--edge-neutral);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s var(--ease-premium);
  pointer-events:none;
  z-index:1;
}
.tech-card-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:var(--glass-border);
  margin-bottom:var(--space-1);
  position:relative;
  z-index:2;
  transition:background .5s var(--ease-premium), border-color .5s var(--ease-premium);
}
.tech-card-icon img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;}
.tech-card h3{font-size:16px;font-weight:600;position:relative;z-index:2;}
.tech-card p{font-size:12px;color:var(--muted);position:relative;z-index:2;}
.tech-card:hover{
  transform:translateY(-6px) scale(1.08);
  z-index:3;
  border-color:rgba(255,255,255,0.28);
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01) 60%);
  backdrop-filter:blur(30px) saturate(200%);
  -webkit-backdrop-filter:blur(30px) saturate(200%);
  /* Same tight, low-emission edge-light as the Services cards, so
     the two grids continue to feel like one unified glass system —
     just a touch stronger here since this is the card's whole "pop". */
  box-shadow:
    var(--shadow-hover),
    0 0 20px rgba(59,130,246,0.18),
    0 0 36px rgba(139,92,246,0.16);
}
.tech-card:hover::before{opacity:.5;}
.tech-card:hover .tech-card-icon{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.24);}

/* ---------- Testimonials ----------
   Staggered, multi-card layout (5 cards) instead of the old single-row
   pair. Each card carries its own continuous, gentle floating/bobbing
   keyframe (varied duration + delay per card so the cluster never
   moves in unison). Hovering pauses the bob and hands control to the
   existing hover lift/glow further below, so the two motions never
   fight over the same `transform` property at once. */
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-4) var(--space-3);
  align-items:start;
}
.testi-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--shadow-md);
  animation:testi-float 6s ease-in-out infinite;
  transition:transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium),
              border-color .5s var(--ease-premium), backdrop-filter .5s var(--ease-premium),
              background .5s var(--ease-premium);
}
/* Staggered vertical offsets so the 5 cards read as an organic,
   uneven cluster rather than a rigid grid — cards 2 and 4 sit lower,
   card 3 sits higher, echoing a natural "floating" arrangement. */
.testi-float-1{margin-top:0;}
.testi-float-2{margin-top:var(--space-6);}
.testi-float-3{margin-top:0;}
/* Each card bobs on its own timing/offset so the cluster never moves
   as one rigid block — small, continuous, hardware-accelerated
   (transform-only) motion. */
.testi-float-1{animation-duration:6.5s;animation-delay:0s;}
.testi-float-2{animation-duration:7.5s;animation-delay:.6s;}
.testi-float-3{animation-duration:6s;animation-delay:1.1s;}
@keyframes testi-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
/* Pausing the bob while hovered keeps the existing hover lift
   (translateY(-6px) scale(1.015) below) fully in control instead of
   fighting the keyframe for the same property. */
.testi-card:hover{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .testi-card{animation:none;}
}
.testi-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.03;
  mix-blend-mode:overlay;
}
/* Edge-lighting gradient ring — identical mask trick to the Services
   and Tech Stack cards, masked to the 1px border only, invisible at
   rest and fading in on hover so the card's edge catches light like
   a real pane of glass, matching the rest of the site's card system. */
.testi-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--edge-neutral);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s var(--ease-premium);
  pointer-events:none;
  z-index:1;
}
.testi-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:rgba(255,255,255,0.2);
  /* Same tight, low-emission ambient glow as the Services and Tech
     Stack cards, so all three grids read as one unified glass system. */
  box-shadow:
    var(--shadow-hover),
    0 0 16px rgba(59,130,246,0.16),
    0 0 30px rgba(139,92,246,0.14);
}
.testi-card:hover::before{opacity:.6;}
.testi-card p{font-size:14px;color:#d8d8d8;line-height:1.6;margin-bottom:var(--space-3);}
.testi-person{display:flex;align-items:center;gap:var(--space-1-5);}
.avatar{width:34px;height:34px;border-radius:50%;background:#2a2d3b;display:block;}
.testi-person strong{display:block;font-size:13px;}
.testi-person small{color:var(--muted);font-size:12px;}

/* ---------- FAQ ---------- */
.faq-panel{
  position:relative;
  isolation:isolate;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  margin:0 var(--space-4);
  width:calc(100% - 64px);
  padding:var(--space-12) 0;
  box-shadow:var(--shadow-md), inset 1px 1px 0 rgba(255,255,255,0.05);
}
.faq-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.035;
  mix-blend-mode:overlay;
}
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{
  border-bottom:1px solid var(--border);
  padding:var(--space-3) 0;
}
.faq-question{
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  font-family:var(--sans);
  color:var(--text);
  background:none;
  border:none;
  text-align:left;
  padding:0;
}
.faq-toggle{
  width:30px;height:30px;
  border-radius:50%;
  background:#1c1f2b;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
  transition:background .4s var(--ease-premium), color .4s var(--ease-premium), transform .4s var(--ease-elastic);
}
.faq-item.is-open .faq-toggle{background:#fff;color:#111;transform:rotate(180deg);}

/* Smooth grid-template-rows accordion animation — avoids abrupt
   max-height snapping and works regardless of content length. */
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.16,.84,.44,1);
}
.faq-item.is-open .faq-answer{grid-template-rows:1fr;}
.faq-answer-inner{
  overflow:hidden;
  min-height:0;
}
.faq-item p{
  margin-top:var(--space-2);
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  max-width:600px;
}

/* ---------- Contact ---------- */
.contact-panel{padding-bottom:var(--space-8);}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}
.contact-left{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  display:flex;
  align-items:flex-end;
  min-height:340px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 60%);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
  box-shadow:var(--shadow-md), inset 1px 1px 0 rgba(255,255,255,0.05);
  transition:transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
}
.contact-left::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.03;
  mix-blend-mode:overlay;
}
.contact-left h3, .contact-left .section-title{font-size:38px;font-weight:600;line-height:1.2;}
.contact-left-inner{display:flex;flex-direction:column;gap:var(--space-2);}
.contact-direct{font-size:14px;color:var(--muted);}
.contact-direct a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.contact-direct a:hover{color:var(--accent-red);}
/* Reuses the exact .modal-info-block / .modal-social-row / .modal-social-link
   glassmorphism styling from the "Start a Project" modal so the social icons
   look identical wherever they appear on the site. */
.contact-social-block{margin-top:var(--space-2);}
.contact-right{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  background:rgba(255,255,255,0.015);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
  box-shadow:var(--shadow-md), inset 1px 1px 0 rgba(255,255,255,0.05);
}
.contact-right::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.03;
  mix-blend-mode:overlay;
}
.contact-right h3{font-size:22px;font-weight:600;margin-bottom:var(--space-3);}
.contact-form{display:flex;flex-direction:column;}
.contact-form label{font-size:13px;color:var(--muted);margin-top:var(--space-2);margin-bottom:var(--space-1);}
.contact-form input, .contact-form textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  color:#fff;
  font-family:var(--sans);
  font-size:14px;
  padding:var(--space-1) 0;
  resize:vertical;
  transition:border-color .4s var(--ease-premium);
}
.contact-form input:focus, .contact-form textarea:focus{outline:none;border-color:rgba(59,130,246,0.7);}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#666;}

/* ---------- Start a Project Modal ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:10000; /* must stay above .site-header's z-index:9999 so the modal never renders beneath the fixed navbar */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-3);
  background:rgba(7,8,13,0.65);
  backdrop-filter:var(--glass-blur-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease-premium), visibility .4s var(--ease-premium);
}
.modal-overlay[hidden]{display:flex;} /* keep display:flex while toggling via class, see JS */
.modal-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.modal-card{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:760px;
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  border-radius:var(--radius-lg);
  border-top:1px solid rgba(255,255,255,0.18);
  border-left:1px solid rgba(255,255,255,0.14);
  border-right:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(160deg, rgba(19,21,31,0.92), rgba(12,13,20,0.96));
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  box-shadow:var(--shadow-lg);
  transform:translateY(18px) scale(.97);
  opacity:0;
  transition:transform .45s var(--ease-premium), opacity .45s var(--ease-premium);
}
.modal-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.04;
  mix-blend-mode:overlay;
}
.modal-overlay.is-open .modal-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.modal-card h3{font-size:24px;font-weight:700;margin-bottom:var(--space-1-5);}
.modal-sub{font-size:14px;color:var(--muted);line-height:1.6;}
.modal-close{
  position:absolute;
  top:var(--space-2);right:var(--space-2);
  width:36px;height:36px;
  border-radius:50%;
  border:var(--glass-border);
  background:rgba(255,255,255,0.04);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease-premium), transform .35s var(--ease-premium);
  z-index:2;
}
.modal-close:hover{background:rgba(255,255,255,0.14);transform:rotate(90deg) scale(1.08);}
.modal-form label:first-of-type{margin-top:var(--space-3);}

/* ---------- Modal interior layout: form + contact-info sidebar ---------- */
.modal-body{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  align-items:stretch;
}
.modal-form-col{
  padding:var(--space-6);
}
.modal-info-col{
  position:relative;
  isolation:isolate;
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-5);
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02) 60%, rgba(139,92,246,0.07));
  border-left:1px solid rgba(255,255,255,0.08);
}
.modal-info-col::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.05;
  mix-blend-mode:overlay;
}
.modal-info-block{display:flex;flex-direction:column;gap:var(--space-1-5);}
.modal-info-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.modal-email-link{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.3;
  color:#fff;
  word-break:break-word;
  transition:color .35s var(--ease-premium);
}
.modal-email-link:hover{color:var(--accent-red);}
.modal-info-note{font-size:13px;color:var(--muted);line-height:1.6;}
.modal-social-row{
  display:flex;
  gap:var(--space-1-5);
}
.modal-social-link{
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:var(--glass-border);
  background:rgba(255,255,255,0.04);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  color:#cfcfcf;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  transition:background .35s var(--ease-premium), border-color .35s var(--ease-premium), transform .35s var(--ease-premium), color .35s var(--ease-premium);
}
.modal-social-link:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.28);
  color:#fff;
  transform:translateY(-3px);
}
.modal-social-link svg{width:16px;height:16px;fill:currentColor;}

/* ---------- Footer ---------- */
.site-footer{padding:0 0 0;position:relative;}
.footer-divider{
  position:relative;
  height:1px;
  margin:0 var(--space-4);
  background:linear-gradient(90deg, transparent, rgba(59,130,246,0.35) 35%, rgba(139,92,246,0.3) 65%, transparent);
  box-shadow:0 0 14px rgba(59,130,246,0.15);
}
.footer-top{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:var(--space-4);
  padding:var(--space-8) var(--space-4) var(--space-8);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.015);
  backdrop-filter:var(--glass-blur-md);
  -webkit-backdrop-filter:var(--glass-blur-md);
}
.footer-top::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.03;
  mix-blend-mode:overlay;
}
.footer-label{display:block;font-size:13px;color:var(--muted);margin-bottom:var(--space-2);}
.footer-col p{font-size:14px;color:#d8d8d8;margin-bottom:var(--space-2);line-height:1.6;}
.footer-col a{display:block;font-size:18px;font-weight:600;margin-bottom:var(--space-2);}
.footer-wordmark img {
  height: 50px;      /* Adjust this to control how big the logo is */
  width: auto;       /* Maintains your logo's aspect ratio */
  opacity: 0.8;
  filter: drop-shadow(0 0 15px rgba(205, 163, 73, 0.35));
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1-5);
  justify-content:space-between;
  align-items:center;
  padding:var(--space-3) var(--space-4);
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--border);
  background:rgba(6,7,12,0.45);
}
.back-to-top{
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--space-0-5) var(--space-0-5);
  transition:color .35s var(--ease-premium), transform .35s var(--ease-premium);
}
.back-to-top:hover{color:#fff;transform:translateY(-3px);}

/* ---------- Global background: ambient mesh + noise ----------
   Two layers, both fixed and non-interactive, sitting behind all
   page content:
     1. .bg-mesh — three large, heavily blurred gradient orbs in
        the site's accent colors, each drifting on its own slow
        keyframe loop. Reads as a deep, living mesh gradient
        rather than a flat radial.
     2. .bg-noise — the original soft top radial glow plus a
        faint tiled grain overlay, painted on top of the orbs so
        the whole background still reads as frosted dark glass
        rather than a bright gradient poster.
   Kept deliberately subtle (low opacity, heavy blur) so it never
   competes with foreground glass cards. -------------------------------------------------------------- */
.bg-mesh{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
}
.bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(105px);
  opacity:.2;
  will-change:transform;
}
.bg-orb-1{
  width:640px;height:640px;
  top:-200px;left:-140px;
  background:radial-gradient(circle, rgba(120,124,140,0.45), transparent 70%);
  opacity:.22;
  animation:orb-float-1 13s ease-in-out infinite;
}
.bg-orb-2{
  width:560px;height:560px;
  top:28%;right:-200px;
  background:radial-gradient(circle, rgba(200,40,55,0.4), transparent 70%);
  opacity:.16;
  animation:orb-float-2 15s ease-in-out infinite;
}
.bg-orb-3{
  width:520px;height:520px;
  bottom:-220px;left:28%;
  background:radial-gradient(circle, rgba(90,95,115,0.4), transparent 70%);
  opacity:.20;
  animation:orb-float-3 12s ease-in-out infinite;
}
.bg-orb-4{
  width:420px;height:420px;
  top:52%;left:8%;
  background:radial-gradient(circle, rgba(60,62,75,0.5), transparent 70%);
  opacity:.18;
  animation:orb-float-4 17s ease-in-out infinite;
}
@keyframes orb-float-1{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(130px,90px) scale(1.2);}
  66%{transform:translate(-60px,150px) scale(0.92);}
}
@keyframes orb-float-2{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(-150px,70px) scale(0.86);}
  66%{transform:translate(-70px,-100px) scale(1.16);}
}
@keyframes orb-float-3{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(110px,-130px) scale(1.14);}
  66%{transform:translate(160px,30px) scale(0.9);}
}
@keyframes orb-float-4{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(-90px,-60px) scale(1.1);}
  66%{transform:translate(70px,90px) scale(0.94);}
}
@media (prefers-reduced-motion: reduce){
  .bg-orb{animation:none;}
}

/* ---------- Background noise ---------- */
.bg-noise{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:-2;
  background:radial-gradient(circle at 20% 0%, rgba(80,80,90,0.05), transparent 50%);
}
.bg-noise::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grain-texture);
  background-size:160px 160px;
  opacity:.03;
  mix-blend-mode:overlay;
}

/* ===========================================================
   RESPONSIVE
   -----------------------------------------------------------
   Full audit: typography scales down, grids collapse to a
   single column, padding/margins tighten (still on the shared
   spacing scale), and the hero stacks the profile image below
   the text + CTA on small screens.
   =========================================================== */

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px){
  .hero-section{padding:0 var(--space-8);gap:var(--space-6);}
  .hero-title{font-size:64px;}
  .hero-title em{font-size:64px;}
  .hero-left p{width:100%;max-width:460px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .tech-card{width:170px;padding:var(--space-3);}
  .stat {text-align:center;}
  .stats-row{grid-template-columns:1fr;gap:var(--space-3);}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid.is-email-view{grid-template-columns:repeat(3,1fr);}
  .ai-agents-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:var(--space-4);}
  .testi-grid{grid-template-columns:1fr 1fr;}
  .testi-float-1,.testi-float-2,.testi-float-3{margin-top:0;}
  .section{padding:var(--space-12) 0;}
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px){
  .container{padding:0 var(--space-3);}
  .nav-pill{display:none;}

  /* Hero: stack text/CTA above the profile image */
  .hero{padding-top:var(--space-4);}
  .hero-section{
    flex-direction:column;
    padding:0 var(--space-3);
    gap:var(--space-4);
  }
  .hero-left, .hero-right{padding-left:0;padding-right:0;width:100%;}
  .hero-right{order:2;}
  .hero-left{order:1;align-items:flex-start;}
  .hero-title-group{gap:var(--space-3);}
  .hero-left p{font-size:14px;}
  .hero-info-label{font-size:22px;}
  .hero-cta-row{width:100%;}
  .btn-glow{width:70%;justify-content:center;padding:var(--space-2) var(--space-4);}
  .hero-video-wrapper{width:100%;max-width:100%;border-radius:var(--radius-sm);}
  .hero-play-btn{width:56px;height:56px;}
  .hero-play-btn svg{width:20px;height:20px;}
  .hero-video-title{font-size:20px;margin-bottom:var(--space-1);}
  .hero-featured{justify-content: center; align-items: center; width:100%;}
  .hero-title {
    font-size: 72px; /* Reduced from 42px */
    line-height: 1;  /* Keeps it tight so it doesn't take up too much vertical space */
  }
  .brand-strip {
    flex-wrap: wrap;             /* Change from nowrap to wrap */
    justify-content: center;     /* Centers the items nicely on mobile */
    overflow-x: visible;         /* Ensures nothing is hidden */
    gap: 20px 12px;; /* Adjust gaps as needed */
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-2); /* Slightly tighter padding */
  }
  .brand-mark {
    font-size: 10px;             /* Slightly smaller font to help it fit */
    flex: 0 0 auto;              /* Keep original size, but let it wrap */
  }
  .section{padding:var(--space-8) 0;}
  .section-head{flex-direction:column;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-4);}
  .section-desc{max-width:100%;}
  .section-title{font-size:30px;}
  .section-title em{font-size:30px;}

  .about-panel, .tech-panel, .faq-panel{margin:0 var(--space-2);width:calc(100% - 32px);padding:var(--space-8) 0;}
  .about-statement{font-size:20px;margin-bottom:var(--space-6);}
  .stat-number{font-size:42px;}
  .services-grid{grid-template-columns:1fr;}
  .tech-card{width:130px;padding:var(--space-2) var(--space-1-5);}
  .tech-card-icon{width:44px;height:44px;}
  .tech-card-icon img{width:22px;height:22px;}
  .tech-card h3{font-size:14px;}
  .tech-card p{font-size:11px;}
  .tech-marquee-track{gap:var(--space-1-5);}

  .portfolio-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--space-1);-webkit-overflow-scrolling:touch;margin-bottom:var(--space-4);}
  .filter-btn{flex-shrink:0;}
  .portfolio-grid{grid-template-columns:1fr;gap:var(--space-2);}
  .portfolio-grid.is-email-view{grid-template-columns:1fr;}
  .portfolio-body{padding:var(--space-3);}

  .ai-agents-subsection{margin-top:var(--space-8);padding-top:var(--space-6);}
  .ai-agents-head{margin-bottom:var(--space-4);}
  .ai-agents-title{font-size:26px;}
  .ai-agents-title em{font-size:26px;}
  .ai-agent-stage{padding:var(--space-3);}
  .ai-agent-embed-area{min-height:220px;}

  .testi-grid{grid-template-columns:1fr;gap:var(--space-2);}
  .testi-card{padding:var(--space-3);}

  .faq-list{max-width:100%;}
  .faq-item{padding:var(--space-2) 0;}
  .faq-question{font-size:14px;gap:var(--space-1-5);}

  .contact-left, .contact-right{padding:var(--space-4);}
  .contact-left{min-height:auto;align-items:flex-start;padding-top:var(--space-5);}
  .contact-left h3, .contact-left .section-title{font-size:28px;}

  .modal-card{padding:0;max-width:100%;}
  .modal-card h3{font-size:20px;}
  .modal-body{grid-template-columns:1fr;}
  .modal-form-col{padding:var(--space-4) var(--space-3);}
  .modal-info-col{
    padding:var(--space-4) var(--space-3);
    border-left:none;
    border-top:1px solid rgba(255,255,255,0.08);
  }

  .footer-top{padding:var(--space-6) var(--space-3) var(--space-5);gap:var(--space-4);}
  .footer-wordmark{padding:var(--space-2) 0;}
  .footer-bottom{padding:var(--space-3);flex-direction:column;align-items:flex-start;gap:var(--space-1-5);}

  .sphere{width:220px;height:220px;}
}

/* ---------- Small mobile (≤480px) ---------- */
@media (max-width: 480px){
  .hero-title{font-size:72px;}
  .section-title{font-size:26px;}
  .section-title em{font-size:26px;}
  .about-statement{font-size:18px;}
  .stat-number{font-size:36px;}

  /* Hero video: shrink the play trigger and title further so nothing
     crowds the frame on narrow phones. */
  .hero-video-wrapper{border-radius:var(--radius-sm);}
  .hero-play-btn{width:48px;height:48px;}
  .hero-play-btn svg{width:18px;height:18px;margin-left:2px;}
  .hero-video-title{font-size:17px;}

  /* Tools marquee: small enough that 3-4 cards are visible on screen
     at once as they scroll, instead of just 1-2. */
  .tech-card{width:104px;padding:10px 8px;gap:4px;}
  .tech-card-icon{width:36px;height:36px;margin-bottom:2px;}
  .tech-card-icon img{width:18px;height:18px;}
  .tech-card h3{font-size:11px;}
  .tech-card p{font-size:9px;line-height:1.3;}
  .tech-marquee-track{gap:8px;padding:6px 8px 8px 0;}
}

/* ===========================================================
   SCROLL REVEAL ANIMATIONS
   -----------------------------------------------------------
   How it works:
   1. Any element with class ".reveal" starts hidden (opacity 0)
      and shifted down 28px.
   2. script.js uses an IntersectionObserver to watch every
      ".reveal" element. The moment it enters the viewport,
      JS adds the ".is-visible" class.
   3. ".reveal.is-visible" animates opacity + transform back to
      their natural state using a smooth easing curve, giving a
      one-time fade-in + slide-up reveal as the user scrolls.
   4. ".reveal-row" is an optional helper added to grid/flex
      *containers* (e.g. the 4-up services grid, the portfolio
      grid, the footer columns) so their direct ".reveal"
      children animate in with a staggered delay instead of all
      at once — purely a transition-delay trick, it does not
      touch layout, grid-template, or positioning.
   5. Respects prefers-reduced-motion: motion-sensitive users see
      content immediately, with no animation.
   =========================================================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Staggered reveal for direct children inside a ".reveal-row" container */
.reveal-row .reveal:nth-child(1){transition-delay:0s;}
.reveal-row .reveal:nth-child(2){transition-delay:.12s;}
.reveal-row .reveal:nth-child(3){transition-delay:.24s;}
.reveal-row .reveal:nth-child(4){transition-delay:.36s;}
.reveal-row .reveal:nth-child(5){transition-delay:.48s;}

/* ----------------------------------------------------------
   REVEAL VARIANTS — every element still carries the base
   ".reveal" class (so the IntersectionObserver in script.js and
   the stagger-delay rules above keep working untouched); these
   modifier classes just override the *shape* of the entrance so
   different sections of the page don't all animate identically.
   Add one modifier alongside ".reveal", e.g. class="reveal reveal--scale".
---------------------------------------------------------- */

/* Side-slide from the left — used for grid items that should
   feel like they're sliding into a row from off-screen. */
.reveal--left{transform:translateX(-52px);}
.reveal--left.is-visible{transform:translateX(0);}

/* Side-slide from the right — pairs with .reveal--left so two
   columns/stages can converge toward the center. */
.reveal--right{transform:translateX(52px);}
.reveal--right.is-visible{transform:translateX(0);}

/* Subtle scale-up — cards grow into place rather than sliding,
   good for tighter grids (stats, portfolio). */
.reveal--scale{transform:scale(.9);}
.reveal--scale.is-visible{transform:scale(1);}

/* Soft 3D flip — tips forward on a top-anchored hinge, giving a
   "card being laid down" feel. Needs its own perspective. */
.reveal--flip{
  transform:perspective(1000px) rotateX(-28deg) translateY(10px);
  transform-origin:top center;
}
.reveal--flip.is-visible{transform:perspective(1000px) rotateX(0deg) translateY(0);}

/* Floating entrance — rises further with a gentle blur-to-focus
   for a dreamier, softer arrival than the standard fade-up. */
.reveal--float{
  transform:translateY(46px);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,.84,.44,1),
              transform .9s cubic-bezier(.16,.84,.44,1),
              filter .9s cubic-bezier(.16,.84,.44,1);
}
.reveal--float.is-visible{transform:translateY(0);filter:blur(0);}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--flip,
  .reveal--float{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}