/* ================================================================
   Jirehnexus — Design System
   Supabase-inspired typography + clean minimal UI
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --bg:       #090909;
  --bg-2:     #111111;
  --bg-3:     #171717;
  --bg-card:  #171717;
  --border:   rgba(255,255,255,0.06);
  --border-h: rgba(255,255,255,0.12);
  --border-g: rgba(62,207,142,0.18);
  --text:     #ededed;
  --text-2:   #888888;
  --text-3:   rgba(136,136,136,0.5);
  --green:    #3ecf8e;
  --green-dim:rgba(62,207,142,0.08);
  --cyan:     #2d74ff;
  --red:      #ff4757;
  --orange:   #ff8c42;
  --font-d:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-b:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-m:   'Inter', monospace;
  --radius:   6px;
  --radius-lg:8px;
  --nav-h:    68px;
  --max-w:    1100px;
  --t:        0.2s ease;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:14px;line-height:1.7;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{cursor:pointer;font-family:var(--font-b)}
input,textarea,select{font-family:var(--font-b)}

/* ── Subtle grid overlay ───────────────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.012) 1px,transparent 1px);
  background-size:80px 80px;
}
body>*{position:relative;z-index:1}

/* ── Reading Progress ──────────────────────────────────────────── */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  z-index:9999;transition:width 0.1s linear;
}

/* ── Navigation ────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;
  transition:background 0.3s,backdrop-filter 0.3s,border-bottom 0.3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(18,18,20,0.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nav-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 24px;width:100%;
  display:flex;align-items:center;position:relative;
}
.nav-logo{
  font-family:var(--font-d);font-size:18px;font-weight:700;letter-spacing:-0.3px;
  white-space:nowrap;display:flex;align-items:center;gap:8px;
}
.nav-logo .accent{color:var(--green)}
.nav-logo-img{height:28px;width:auto;min-width:140px}

/* Hexon-style: nav links inside a grouped pill container, centred absolutely */
.nav-links{
  display:flex;align-items:center;gap:2px;
  background:var(--bg-3);border-radius:var(--radius-lg);
  padding:6px 8px;
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-links a{
  padding:6px 14px;font-size:14px;font-weight:500;color:var(--text-2);
  border-radius:6px;transition:color var(--t),background var(--t);
}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,0.07)}
.nav-dropdown{position:relative}
.nav-dropdown>a::after{content:' ▾';font-size:10px;opacity:0.5}
.nav-dropdown-btn{
  padding:6px 14px;font-size:14px;font-weight:500;color:var(--text-2);
  border-radius:6px;transition:color var(--t),background var(--t);
  background:none;border:none;
}
.nav-dropdown-btn:hover{color:var(--text);background:rgba(255,255,255,0.07)}
.dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:6px;opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity 0.2s,transform 0.2s;box-shadow:0 20px 60px rgba(0,0,0,0.5);
  z-index:200;
}
/* Bridge the 8px gap so moving mouse from trigger to menu doesn't close it */
.dropdown-menu::before{
  content:'';position:absolute;top:-10px;left:0;right:0;height:10px;
}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{
  opacity:1;pointer-events:all;transform:translateY(0);
}
.dropdown-menu a{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;font-size:14px;color:#fff;
  border-radius:var(--radius);transition:color var(--t),background var(--t);
}
.dropdown-menu a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.dropdown-item-icon svg{flex-shrink:0;color:var(--green)}
.dropdown-item-icon:hover svg{color:var(--green)}
.nav-cta{margin-left:auto}
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:6px;margin-left:auto;
}
.nav-hamburger span{
  display:block;width:22px;height:2px;background:var(--text);
  border-radius:2px;transition:transform 0.3s,opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav-mobile{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:rgba(10,10,11,0.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:20px 20px 32px;border-top:1px solid var(--border);
  z-index:99;flex-direction:column;gap:2px;overflow-y:auto;
}
.nav-mobile.open{display:flex}
.nav-mobile a{
  padding:13px 14px;font-size:15px;font-weight:500;color:var(--text-2);
  border-radius:var(--radius);transition:color var(--t),background var(--t);
  display:flex;align-items:center;gap:8px;
}
.nav-mobile a:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.nav-mobile .m-divider{height:1px;background:var(--border);margin:10px 0}
.nav-mobile .m-cta{
  margin-top:16px;padding:14px;text-align:center;
  background:linear-gradient(180deg,#1a7a42 0%,#155e34 100%);
  color:#fff !important;font-weight:600 !important;
  border:1px solid #2a9d5a;
  border-radius:10px;font-size:15px !important;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 1px 3px rgba(0,0,0,0.3);
  transition:background 0.2s,border-color 0.2s !important;
}
.nav-mobile .m-cta:hover{background:linear-gradient(180deg,#1f8c4d 0%,#1a7a42 100%) !important;border-color:#36b068 !important;color:#fff !important;}

/* ── Buttons (Supabase) ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;font-size:14px;font-weight:500;
  border-radius:6px;border:1px solid transparent;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
  white-space:nowrap;line-height:1.5;letter-spacing:-0.01em;
  position:relative;
}
.btn:active{transform:scale(0.98)}

.btn-primary,
.btn-green{
  background:linear-gradient(180deg,#1a7a42 0%,#155e34 100%);
  color:#fff;
  border-color:#2a9d5a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 1px 3px rgba(0,0,0,0.3),0 0 0 0 transparent;
}
.btn-primary:hover,
.btn-green:hover{
  background:linear-gradient(180deg,#1f8c4d 0%,#1a7a42 100%);
  border-color:#36b068;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 2px 6px rgba(0,0,0,0.35),0 0 12px rgba(62,207,142,0.08);
}

.btn-outline{
  background:rgba(255,255,255,0.03);color:var(--text);
  border-color:rgba(255,255,255,0.1);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.btn-ghost{background:transparent;color:var(--text-2);border-color:transparent}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-lg{padding:10px 20px;font-size:15px}

/* ── Layout ────────────────────────────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px;width:100%}
.section{padding:80px 0}
.section-sm{padding:56px 0}
.section-lg{padding:100px 0}
.page-top{padding-top:var(--nav-h)}

/* ── Typography ────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--font-d);line-height:1.2;letter-spacing:-0.03em;color:var(--text)}
.display-1{font-size:clamp(32px,5vw,56px);font-weight:700;line-height:1.1;letter-spacing:-0.04em}
.display-2{font-size:clamp(24px,3.5vw,40px);font-weight:600;letter-spacing:-0.03em}
.display-3{font-size:clamp(20px,2.5vw,28px);font-weight:600;letter-spacing:-0.02em}

/* Section label */
.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-b);font-size:12px;font-weight:600;
  color:var(--green);letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:16px;
}
.section-title{margin-bottom:16px}
.section-sub{font-size:15px;color:var(--text-2);max-width:520px;line-height:1.7}
.text-green{color:var(--green)}
.text-cyan{color:var(--cyan)}
.text-red{color:var(--red)}
.text-orange{color:var(--orange)}
.text-dim{color:var(--text-2)}

/* ── Cards ─────────────────────────────────────────────────────── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:border-color var(--t),transform var(--t);
}
.card:hover{border-color:var(--border-h);transform:translateY(-1px)}
.card-green{background:rgba(62,207,142,0.05)}
.card-green:hover{background:rgba(62,207,142,0.09)}

/* ── Grid Layouts ──────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}

/* ── Tags & Badges ─────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;padding:3px 10px;font-size:12px;font-weight:600;border-radius:4px;letter-spacing:0.04em}
.tag-green{background:rgba(62,207,142,0.1);color:var(--green)}
.tag-cyan{background:rgba(45,116,255,0.1);color:var(--cyan)}
.tag-red{background:rgba(255,71,87,0.1);color:var(--red)}
.tag-orange{background:rgba(255,140,66,0.1);color:var(--orange)}
.tag-yellow{background:rgba(245,200,66,0.1);color:#f5c842}

/* ── Icon Box ──────────────────────────────────────────────────── */
.icon-box{
  width:48px;height:48px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:var(--green-dim);
  margin-bottom:20px;flex-shrink:0;
}

/* ── Semicircle Arc Section ─────────────────────────────────────── */
/* ── Arc / Radar Section ────────────────────────────────────────── */
.arc-section{
  position:relative;background:var(--bg);overflow:hidden;
}
.arc-inner{
  position:relative;width:100%;
  /* Maintain 1440:500 aspect ratio so node % positions always match SVG */
  aspect-ratio:1440/500;
}
.arc-svg{
  position:absolute;inset:0;width:100%;height:100%;
}
/* SVG arc rings */
.arc-ring-svg{
  fill:none;
  stroke:rgba(255,255,255,0.07);
  stroke-width:1;
}
.arc-ring-outer{
  stroke:rgba(255,255,255,0.05);
}
/* Sweep line rotation around center (720,500) of viewBox */
.arc-sweep-group{
  transform-box:view-box;
  transform-origin:720px 500px;
  animation:arc-sweep-rot 8s linear infinite;
}
@keyframes arc-sweep-rot{
  0%{transform:rotate(-90deg)}
  100%{transform:rotate(90deg)}
}
/* Service nodes overlaid on SVG */
.arc-node{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transform:translate(-50%,-50%);
  animation:arc-float 4s ease-in-out infinite;
  z-index:2;
}
.arc-node:nth-child(2){animation-delay:0.4s}
.arc-node:nth-child(3){animation-delay:0.8s}
.arc-node:nth-child(4){animation-delay:1.2s}
.arc-node:nth-child(5){animation-delay:1.6s}
.arc-node:nth-child(6){animation-delay:2.0s}
@keyframes arc-float{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-6px)}
}
.arc-icon-box{
  width:52px;height:52px;
  background:rgba(18,20,26,0.85);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(14px);
  box-shadow:0 2px 16px rgba(0,0,0,0.5);
  transition:background 0.2s,border-color 0.2s,color 0.2s;
}
.arc-node:hover .arc-icon-box{
  background:rgba(62,207,142,0.1);
  border-color:rgba(62,207,142,0.3);
  color:var(--green);
}
.arc-label{
  font-size:11px;font-weight:600;letter-spacing:0.01em;
  color:rgba(180,195,220,0.6);
  white-space:nowrap;text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,0.8);
}

/* ── Comet Hero ────────────────────────────────────────────────── */
.comet-bg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:0;
}
.comet-bg svg{
  width:min(1100px,140vw);height:min(1100px,140vw);
  perspective:800px;
}
.comet-orbit{transform-origin:400px 400px}
.comet-orbit.c1{animation:comet-spin-1 10s linear infinite}
.comet-orbit.c2{animation:comet-spin-2 14s linear infinite reverse}
.comet-orbit.c3{animation:comet-spin-3 18s linear infinite}
.comet-orbit.c4{animation:comet-spin-4 12s linear infinite reverse}
@keyframes comet-spin-1{
  from{transform:rotateX(55deg) rotateZ(0deg)}
  to{transform:rotateX(55deg) rotateZ(360deg)}
}
@keyframes comet-spin-2{
  from{transform:rotateX(50deg) rotateZ(120deg)}
  to{transform:rotateX(50deg) rotateZ(480deg)}
}
@keyframes comet-spin-3{
  from{transform:rotateX(60deg) rotateZ(60deg)}
  to{transform:rotateX(60deg) rotateZ(420deg)}
}
@keyframes comet-spin-4{
  from{transform:rotateX(45deg) rotateZ(200deg)}
  to{transform:rotateX(45deg) rotateZ(560deg)}
}
.comet-orbit circle{
  animation:comet-dash 5s linear infinite;
}
.comet-orbit.c2 circle{animation-duration:6s}
.comet-orbit.c3 circle{animation-duration:8s}
.comet-orbit.c4 circle{animation-duration:5.5s}
@keyframes comet-dash{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-1884}
}

/* ── Glow Blobs ────────────────────────────────────────────────── */
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px)}
.glow-green{width:500px;height:500px;background:radial-gradient(circle,rgba(62,207,142,0.1) 0%,transparent 70%)}
.glow-cyan{width:400px;height:400px;background:radial-gradient(circle,rgba(45,116,255,0.07) 0%,transparent 70%)}

/* ── Stat Cards ────────────────────────────────────────────────── */
.stat-num{
  font-family:var(--font-d);font-size:clamp(24px,3.5vw,40px);
  font-weight:700;line-height:1.1;display:block;letter-spacing:-0.03em;text-align:center;
}
.stat-label{font-size:13px;color:var(--text-2);margin-top:8px;line-height:1.5;text-align:center}
.stat-source{font-size:11px;color:var(--text-3);margin-top:4px;letter-spacing:0.04em}

/* ── Ticker ────────────────────────────────────────────────────── */
.ticker-wrap{
  overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:14px 0;
  mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
}
.ticker-track{
  display:flex;gap:48px;animation:ticker 32s linear infinite;width:max-content;
}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--text-2);white-space:nowrap;
}
.ticker-item::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);opacity:0.7}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Dividers ──────────────────────────────────────────────────── */
.divider{height:1px;background:var(--border)}
.divider-g{height:1px;background:linear-gradient(90deg,transparent,var(--border-g),transparent)}

/* ── FAQ Accordion ─────────────────────────────────────────────── */
.faq-item{
  background:var(--bg-card);border-radius:var(--radius-lg);
  overflow:hidden;margin-bottom:8px;transition:background var(--t);
}
.faq-item.open{background:#252527}
.faq-q{
  width:100%;background:none;border:none;color:var(--text);font-family:var(--font-b);
  font-size:15px;font-weight:600;padding:20px 24px;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q:hover{background:rgba(255,255,255,0.02)}
.faq-icon{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--border-h);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
  transition:transform 0.3s,background 0.3s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--green-dim)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 24px 20px;color:var(--text-2);line-height:1.75}

/* ── Process Steps ─────────────────────────────────────────────── */
.process-steps{display:flex;gap:0;position:relative}
.process-step{flex:1;text-align:center;padding:28px 16px;position:relative}
.process-step:not(:last-child)::after{
  content:'';position:absolute;top:36px;right:-1px;width:50%;height:1px;
  background:linear-gradient(90deg,var(--green),transparent);z-index:1;
}
.process-step:not(:first-child)::before{
  content:'';position:absolute;top:36px;left:-1px;width:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--green));z-index:1;
}
.step-num{
  width:48px;height:48px;border-radius:50%;
  background:var(--green-dim);border:1px solid var(--border-g);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--green);
  margin:0 auto 16px;position:relative;z-index:2;
}
.step-title{font-weight:600;margin-bottom:8px;font-size:15px}
.step-desc{font-size:13px;color:var(--text-2);line-height:1.5}

/* ── Stars & Avatar ────────────────────────────────────────────── */
.stars{color:#fbbf24;letter-spacing:2px;font-size:14px}
.avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--green-dim);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--green);flex-shrink:0;
}

/* ── Form Elements ─────────────────────────────────────────────── */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:7px;letter-spacing:0.01em}
.form-input,.form-select,.form-textarea{
  width:100%;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 14px;color:var(--text);font-size:14px;
  transition:border-color var(--t),box-shadow var(--t);outline:none;
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-3)}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--green);box-shadow:0 0 0 3px rgba(62,207,142,0.1);
}
.form-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(146,146,149,0.6)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;
}
.form-select option{background:var(--bg-2)}
.form-textarea{resize:vertical;min-height:110px;line-height:1.65}

/* ── Page Hero ─────────────────────────────────────────────────── */
.page-hero{padding:calc(var(--nav-h) + 96px) 0 80px;text-align:center;position:relative;overflow:hidden}
.page-hero .glow{top:-100px;left:50%;transform:translateX(-50%)}

/* ── About Us Stats ────────────────────────────────────────────── */
.about-stat-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:24px;
  transition:border-color 0.2s;
}
.about-stat-card:hover{border-color:var(--border-h)}
.about-stat-num{font-size:32px;font-weight:700;color:var(--green);letter-spacing:-0.03em;line-height:1}
.about-stat-label{font-size:13px;color:var(--text-2);margin-top:6px}

/* ── Core Values (How It Works style) ──────────────────────────── */
.cv-wrap{
  position:sticky;
  padding-top:0;
}
.cv-wrap:nth-child(1){top:calc(var(--nav-h) + 20px);z-index:1}
.cv-wrap:nth-child(2){top:calc(var(--nav-h) + 40px);z-index:2}
.cv-wrap:nth-child(3){top:calc(var(--nav-h) + 60px);z-index:3}
.cv-wrap:nth-child(4){top:calc(var(--nav-h) + 80px);z-index:4}
.cv-wrap:nth-child(5){top:calc(var(--nav-h) + 100px);z-index:5}
.cv-wrap:nth-child(6){top:calc(var(--nav-h) + 120px);z-index:6}
.cv-val-card{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--bg-card);
  border:1px solid rgba(239,239,239,0.08);
  border-radius:8px;
  padding:28px;
  box-shadow:0 -8px 30px rgba(0,0,0,0.5);
  opacity:0;
  transform:translateX(52px);
  transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.cv-wrap.cv-in .cv-val-card{opacity:1;transform:translateX(0)}
.cv-val-card{
  display:flex;align-items:flex-start;gap:16px;
}
.cv-val-icon{
  width:40px;height:40px;border-radius:50%;
  background:rgba(62,207,142,0.08);border:1px solid rgba(62,207,142,0.2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--green);
}
.cv-val-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:8px;letter-spacing:-0.01em}
.cv-val-desc{font-size:14px;color:var(--text-2);line-height:1.75}

/* ── Core Values ────────────────────────────────────────────────── */
.cv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.cv-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:28px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color 0.2s,transform 0.2s;
}
.cv-card:hover{border-color:var(--border-h);transform:translateY(-2px)}
.cv-icon{
  width:44px;height:44px;border-radius:10px;border:1px solid;
  display:flex;align-items:center;justify-content:center;
}
.cv-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.cv-desc{font-size:13px;color:var(--text-2);line-height:1.7}
@media(max-width:900px){.cv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cv-grid{grid-template-columns:1fr}.about-stat-card .about-stat-num{font-size:26px}}

/* ── About Bio Layout ──────────────────────────────────────────── */
.about-bio-grid{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:64px;
  align-items:start;
}
.about-photo-outer{
  position:relative;
  display:inline-block;
  width:100%;
}
.about-photo-outer::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(0,220,130,0.5),rgba(0,180,255,0.3),rgba(100,80,255,0.2));
  z-index:0;
  filter:blur(6px);
  opacity:0.7;
}
.about-photo-wrap{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:3/4;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(0,220,130,0.25);
  background:#0a0f0a;
}
.about-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.about-photo-badge{
  position:absolute;
  bottom:20px;
  left:16px;
  right:16px;
  z-index:2;
  background:rgba(10,15,10,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(0,220,130,0.2);
  border-radius:12px;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.about-photo-badge-name{
  font-family:var(--font-d);
  font-size:16px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
}
.about-photo-badge-title{
  font-size:12px;
  color:var(--green);
  letter-spacing:0.04em;
  font-weight:500;
}
@media(max-width:860px){
  .about-bio-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .about-photo-outer{
    max-width:360px;
    margin:0 auto;
    display:block;
  }
  .about-photo-wrap{
    aspect-ratio:3/4;
  }
}

/* ── CTA Section ───────────────────────────────────────────────── */
.cta-section{
  background:rgba(62,207,142,0.04);
  border-top:1px solid rgba(62,207,142,0.12);border-bottom:1px solid rgba(62,207,142,0.12);
  text-align:center;padding:80px 24px;
}

/* ── Reveal Animations ─────────────────────────────────────────── */
.reveal{transition:opacity 0.6s ease,transform 0.6s ease}
html.js .reveal{opacity:0;transform:translateY(20px)}
html.js .reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:0.08s}.d2{transition-delay:0.16s}.d3{transition-delay:0.24s}
.d4{transition-delay:0.32s}.d5{transition-delay:0.40s}

/* ── Hexon card animations ─────────────────────────────────────── */
/* anim-up: whole card fades up (services grid) */
.anim-up{transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1),transform 0.65s cubic-bezier(0.22,1,0.36,1);transition-delay:var(--delay,0ms)}
html.js .anim-up{opacity:0;transform:translateY(40px)}
html.js .anim-up.in{opacity:1;transform:translateY(0)}

/* anim-right: step cards slide from right (how it works) */
.anim-right{transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1),transform 0.65s cubic-bezier(0.22,1,0.36,1)}
html.js .anim-right{opacity:0;transform:translateX(60px)}
html.js .anim-right.in{opacity:1;transform:translateX(0)}
/* On mobile, translateX causes body overflow — use fade-up instead */
@media(max-width:768px){
  html.js .anim-right{transform:translateY(24px)}
  html.js .anim-right.in{transform:translateY(0)}
}

/* ── How It Works — Hexon style ─────────────────────────────────── */
.hiw-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:start;
}
.hiw-left{position:sticky;top:calc(var(--nav-h) + 40px)}
.hiw-right{display:flex;flex-direction:column;gap:32px;padding-top:10px}

/* Each step wrapper — sticky stacking on scroll */
.hiw-wrap{position:sticky;padding-top:48px;z-index:1}
.hiw-wrap:nth-child(1){top:calc(var(--nav-h) + 20px);z-index:1}
.hiw-wrap:nth-child(2){top:calc(var(--nav-h) + 50px);z-index:2}
.hiw-wrap:nth-child(3){top:calc(var(--nav-h) + 80px);z-index:3}
.hiw-right{display:flex;flex-direction:column;gap:40px;padding-top:10px}

/* Folder-tab step number */
.hiw-tab{
  position:absolute;top:0;z-index:3;
  width:160px;height:52px;
  display:flex;align-items:center;justify-content:center;
  padding-top:10px;
  font-size:12px;font-weight:700;letter-spacing:0.13em;
  color:var(--red);font-family:var(--font-m);
  text-transform:uppercase;white-space:nowrap;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.hiw-wrap:nth-child(1) .hiw-tab{left:8px}
.hiw-wrap:nth-child(2) .hiw-tab{left:50%;margin-left:-80px}
.hiw-wrap:nth-child(3) .hiw-tab{right:8px}
.hiw-tab svg{position:absolute;inset:0;width:100%;height:100%}
.hiw-tab span{position:relative;z-index:1}
.hiw-wrap.hiw-in .hiw-tab{opacity:1;transform:translateY(0)}

/* Step card */
.hiw-card{
  background:var(--bg-card);
  border:1px solid rgba(239,239,239,0.08);
  border-radius:8px;
  padding:32px 48px 36px 52px;
  position:relative;
  opacity:0;
  transform:translateX(52px);
  transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1),
             transform 0.65s cubic-bezier(0.22,1,0.36,1),
             background 0.2s ease;
}
.hiw-card::after{
  content:'';position:absolute;
  left:28px;top:28px;bottom:28px;
  width:2.5px;
  background:var(--red);
  border-radius:2px;
}
.hiw-wrap.hiw-in .hiw-card{opacity:1;transform:translateX(0)}
.hiw-card{box-shadow:0 -8px 30px rgba(0,0,0,0.5)}
.hiw-card:hover{background:#1e2124}
.hiw-card h3{font-size:22px;font-weight:600;margin-bottom:8px;font-family:var(--font-d);color:#fff;letter-spacing:-0.02em}
.hiw-card p{font-size:14px;color:var(--text-2);line-height:1.75}

/* Stagger delays */
.hiw-wrap:nth-child(2) .hiw-tab,
.hiw-wrap:nth-child(2) .hiw-card{transition-delay:0.12s}
.hiw-wrap:nth-child(3) .hiw-tab,
.hiw-wrap:nth-child(3) .hiw-card{transition-delay:0.24s}

/* Mobile: single column, keep sticky overlap */
@media(max-width:860px){
  .hiw-grid{grid-template-columns:1fr;gap:0}
  /* Left panel: not sticky on mobile — scrolls away naturally */
  .hiw-left{position:relative;top:auto;padding-bottom:48px}
  /* Wrap: keep position:sticky so cards overlap on scroll */
  .hiw-wrap{padding-top:40px}
  .hiw-wrap:nth-child(1){top:calc(var(--nav-h) + 16px)}
  .hiw-wrap:nth-child(2){top:calc(var(--nav-h) + 32px)}
  .hiw-wrap:nth-child(3){top:calc(var(--nav-h) + 48px)}
  /* Use vertical fade-in instead of horizontal to prevent body overflow */
  .hiw-card{transform:translateY(24px) !important}
  .hiw-wrap.hiw-in .hiw-card{transform:translateY(0) !important}
}

/* Core Values: keep sticky overlap on all screen sizes */
@media(max-width:600px){
  /* Tighten stagger on small screens */
  .cv-wrap:nth-child(1){top:calc(var(--nav-h) + 12px)}
  .cv-wrap:nth-child(2){top:calc(var(--nav-h) + 24px)}
  .cv-wrap:nth-child(3){top:calc(var(--nav-h) + 36px)}
  .cv-wrap:nth-child(4){top:calc(var(--nav-h) + 48px)}
  .cv-wrap:nth-child(5){top:calc(var(--nav-h) + 60px)}
  .cv-wrap:nth-child(6){top:calc(var(--nav-h) + 72px)}
}

/* ── Frameworks We Support (Supabase trusted-by style) ─────────── */
.fw-strip{text-align:center;max-width:100%;overflow:hidden}
.fw-scroll{
  overflow:hidden;
  max-width:100%;
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  margin-bottom:24px;
}
.fw-row{
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  animation:fw-scroll 20s linear infinite;
}
.fw-row:hover{animation-play-state:paused}
@keyframes fw-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.fw-item{
  font-size:16px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.01em;
  opacity:0.35;
  transition:opacity 0.3s ease;
  white-space:nowrap;
  flex-shrink:0;
}
.fw-item:hover{opacity:0.7}
.fw-caption{
  font-size:14px;
  color:#fff;
  margin:0;
}
@media(max-width:768px){
  .fw-item{font-size:14px}
  .fw-row{gap:40px}
}

/* ── Testimonials — Marquee (21st.dev style) ──────────────────── */
.tst-marquee{
  position:relative;
  overflow:hidden;
}
.tst-fade{
  position:absolute;top:0;bottom:0;width:200px;z-index:2;pointer-events:none;
}
.tst-fade-left{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tst-fade-right{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
@media(max-width:768px){.tst-fade{width:80px}}

.tst-track{
  display:flex;gap:16px;width:max-content;
  animation:tst-scroll 18s linear infinite;
}
.tst-track:hover{animation-play-state:paused}
.tst-track-reverse{animation-name:tst-scroll-reverse}

@keyframes tst-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes tst-scroll-reverse{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}

.tst-card{
  width:320px;flex-shrink:0;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  display:flex;flex-direction:column;gap:16px;
  transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.2s ease;
}
.tst-card:hover{
  border-color:var(--border-h);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  transform:translateY(-2px);
}
.tst-card-top{
  display:flex;align-items:center;gap:12px;
}
.tst-avatar{
  width:40px;height:40px;border-radius:50%;
  background:rgba(62,207,142,0.08);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--green);flex-shrink:0;
}
.tst-avatar-img{
  width:40px;height:40px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
}
.tst-name{font-weight:600;font-size:14px;color:var(--text)}
.tst-role{font-size:12px;color:var(--text-2);margin-top:1px}
.tst-quote{
  font-size:14px;line-height:1.7;color:var(--text-2);
}

/* ── Why Choose Us (21st.dev bento) ────────────────────────────── */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.why-card{
  background:var(--bg);
  padding:32px;
  display:flex;flex-direction:column;gap:12px;
  transition:background 0.2s ease;
}
.why-card:hover{background:var(--bg-2)}
.why-icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(62,207,142,0.06);
  border:1px solid rgba(62,207,142,0.12);
  display:flex;align-items:center;justify-content:center;
}
.why-title{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.why-desc{font-size:13px;color:var(--text-2);line-height:1.65}
@media(max-width:768px){
  .why-grid{grid-template-columns:1fr}
}

/* ── Service Page Banners ───────────────────────────────────────── */
.svc-banner{
  border-radius:12px;padding:32px;
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--border-h);
}
.svc-banner-green{background:rgba(62,207,142,0.05);border-color:rgba(62,207,142,0.15)}
.svc-banner-blue{background:rgba(45,116,255,0.05);border-color:rgba(45,116,255,0.15)}
.svc-banner-cyan{background:rgba(45,116,255,0.05);border-color:rgba(45,116,255,0.15)}
.svc-banner-orange{background:rgba(255,140,66,0.05);border-color:rgba(255,140,66,0.15)}

.svc-banner-label{
  font-size:11px;font-weight:700;letter-spacing:0.1em;
  color:var(--text-2);text-transform:uppercase;margin-bottom:24px;
}
.svc-banner-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.svc-banner-fw{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  font-size:14px;font-weight:600;color:var(--text);
}
.svc-fw-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.svc-fw-tag{
  margin-left:auto;font-size:11px;font-weight:500;
  color:var(--text-2);letter-spacing:0.04em;
}
.svc-banner-stat{
  padding-top:20px;border-top:1px solid rgba(255,255,255,0.06);
  display:flex;flex-direction:column;gap:4px;
}
.svc-banner-num{font-size:32px;font-weight:700;letter-spacing:-0.03em;line-height:1}
.svc-banner-sub{font-size:13px;color:var(--text-2);margin-top:4px}

.svc-tier-row,.svc-metric-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  font-size:14px;font-weight:600;color:var(--text);
}
.svc-tier-active{
  background:rgba(62,207,142,0.06);
  border-color:rgba(62,207,142,0.2);
}
.svc-risk-row{
  display:flex;align-items:center;gap:12px;
  font-size:13px;font-weight:500;color:var(--text);
}
.svc-risk-row span:first-child{min-width:90px}
.svc-risk-bar{
  flex:1;height:8px;background:rgba(255,255,255,0.06);
  border-radius:4px;overflow:hidden;
}
.svc-risk-bar div{height:100%;border-radius:4px;transition:width 0.8s ease}

/* ── Framework Cards (service-grc redesign) ─────────────────────── */
.fw-cards-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.fw-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px 24px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color 0.2s,transform 0.2s;
}
.fw-card:hover{border-color:var(--border-h);transform:translateY(-2px)}
.fw-card-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.fw-card-name{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.fw-card-desc{font-size:13px;color:var(--text-2);line-height:1.6;flex:1}
.fw-card-badge{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  border:1px solid;border-radius:4px;padding:3px 10px;
  width:fit-content;margin-top:4px;
}
@media(max-width:900px){.fw-cards-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fw-cards-grid{grid-template-columns:1fr}}

/* ── Framework Tiles ───────────────────────────────────────────── */
.framework-tile{
  padding:14px 20px;background:var(--bg-card);
  border-radius:var(--radius);font-size:13px;color:var(--text-2);
  text-align:center;transition:background var(--t),color var(--t);
}
.framework-tile:hover{background:#252527;color:var(--green)}

/* ── Risk Matrix ───────────────────────────────────────────────── */
.risk-bar{height:8px;border-radius:4px;margin-top:6px}
.risk-critical{background:var(--red)}.risk-high{background:var(--orange)}
.risk-medium{background:#f5e642}.risk-low{background:var(--green)}

/* ── Service Tier Cards ────────────────────────────────────────── */
.tier-card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:32px;position:relative;
  transition:background var(--t),transform var(--t);
}
.tier-card:hover{background:#252527;transform:translateY(-3px)}
.tier-card.featured{background:rgba(62,207,142,0.06)}
.tier-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#000;font-size:11px;font-weight:700;
  padding:3px 14px;border-radius:4px;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;
}

/* ── Case Study Cards ──────────────────────────────────────────── */
.cs-card{
  background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;
  transition:background var(--t),transform var(--t);
}
.cs-card:hover{background:#252527;transform:translateY(-2px)}
.cs-header{padding:24px 28px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cs-body{padding:24px 28px}
.cs-result{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--text-2);padding:5px 0}
.cs-result::before{content:'✓';color:var(--green);font-weight:700;font-size:13px;flex-shrink:0;margin-top:1px}

/* ── Contact Form (21st.dev style) ─────────────────────────────── */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start;
}
.contact-info{padding-top:8px}
.contact-details{display:flex;flex-direction:column;gap:20px;margin-bottom:36px}
.contact-detail-item{display:flex;align-items:flex-start;gap:14px}
.contact-detail-icon{
  width:36px;height:36px;border-radius:8px;
  background:rgba(62,207,142,0.08);border:1px solid rgba(62,207,142,0.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-detail-label{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px}
.contact-detail-value{font-size:14px;font-weight:500;color:var(--text)}
.contact-trust{display:flex;flex-direction:column;gap:10px}
.contact-trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}

.contact-form-wrap{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:16px;padding:36px;
}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}
.cf-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.cf-label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:0.02em;text-transform:uppercase}
.cf-input{
  width:100%;background:var(--bg-card);border:1px solid var(--border-h);
  border-radius:8px;padding:11px 14px;color:var(--text);font-size:14px;
  font-family:var(--font-b);outline:none;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.cf-input::placeholder{color:var(--text-3)}
.cf-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(62,207,142,0.08)}
.cf-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(136,136,136,0.6)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;
}
.cf-select option{background:var(--bg-2)}
.cf-textarea{resize:vertical;min-height:120px;line-height:1.65}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .cf-row{grid-template-columns:1fr}
}

/* ── Contact Items ─────────────────────────────────────────────── */
.contact-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.contact-item:last-child{border-bottom:none}
.contact-icon{font-size:20px;flex-shrink:0;margin-top:2px}
.contact-item h4{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:3px}
.contact-item p{font-size:14px;color:var(--text)}

/* ── Book Demo Wizard ──────────────────────────────────────────── */
.wizard-progress{display:flex;align-items:center;gap:0;margin-bottom:48px}
.wizard-step-dot{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative}
.wizard-step-dot:not(:last-child)::after{
  content:'';position:absolute;top:16px;left:50%;width:100%;height:1px;
  background:var(--border);z-index:0;transition:background 0.3s;
}
.wizard-step-dot.completed:not(:last-child)::after{background:var(--green)}
.dot-circle{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  color:var(--text-3);position:relative;z-index:1;transition:border-color 0.3s,background 0.3s,color 0.3s;
}
.wizard-step-dot.active .dot-circle{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.wizard-step-dot.completed .dot-circle{border-color:var(--green);background:var(--green);color:#000}
.dot-label{font-size:12px;color:var(--text-3);font-weight:500;transition:color 0.3s}
.wizard-step-dot.active .dot-label{color:var(--green)}
.wizard-step-dot.completed .dot-label{color:var(--text-2)}
.wizard-panel{display:none}
.wizard-panel.active{display:block}

.session-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.session-card{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;
  cursor:pointer;transition:background 0.2s,transform 0.2s,outline 0.2s;text-align:center;
  outline:2px solid transparent;outline-offset:0px;
}
.session-card:hover{background:#252527;transform:translateY(-2px)}
.session-card.selected{outline-color:var(--green);background:rgba(62,207,142,0.06)}
.session-icon{font-size:32px;margin-bottom:12px}
.session-name{font-weight:700;font-family:var(--font-d);margin-bottom:6px;font-size:16px}
.session-duration{font-size:12px;color:var(--green);margin-bottom:8px;letter-spacing:0.04em}
.session-desc{font-size:13px;color:var(--text-2);line-height:1.5}

.cal-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.mini-cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:600;font-family:var(--font-d)}
.mini-cal-header button{
  background:var(--bg-card);border:none;color:var(--text-2);
  width:28px;height:28px;border-radius:4px;font-size:14px;
  transition:color var(--t),background var(--t);
}
.mini-cal-header button:hover{color:var(--text);background:#252527}
.mini-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-name{text-align:center;font-size:11px;color:var(--text-3);padding-bottom:6px;letter-spacing:0.04em}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;border-radius:6px;cursor:pointer;
  transition:background 0.15s,color 0.15s;
}
.cal-day.empty{pointer-events:none}
.cal-day.available:hover{background:var(--green-dim);color:var(--green)}
.cal-day.selected{background:var(--green);color:#000;font-weight:700}
.cal-day.unavailable{color:var(--text-3);pointer-events:none}
.cal-day.today{outline:1px solid var(--border-g);color:var(--green)}
.time-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.time-slot{
  padding:10px;background:var(--bg-card);border-radius:var(--radius);
  font-size:13px;text-align:center;cursor:pointer;
  transition:background 0.15s,color 0.15s;
}
.time-slot:hover{background:#252527;color:var(--green)}
.time-slot.selected{background:var(--green);color:#000;font-weight:600}

/* ── Confirmation ──────────────────────────────────────────────── */
.checkmark-circle{
  width:72px;height:72px;border-radius:50%;background:rgba(62,207,142,0.1);
  border:2px solid var(--green);display:flex;align-items:center;justify-content:center;
  font-size:36px;margin:0 auto 20px;
}

/* ── Trust Bar (above footer) ──────────────────────────────────── */
.trust-bar{
  border-top:1px solid var(--border);
  background:var(--bg-2);
  padding:16px 0;
}
.trust-bar-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 24px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.trust-left{font-size:13px;color:var(--text-2)}
.trust-link{color:var(--green);font-weight:500;margin-left:4px;transition:opacity 0.2s}
.trust-link:hover{opacity:0.8}
.trust-right{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.trust-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;
}
.trust-badge svg{flex-shrink:0}
.trust-label{font-weight:400;color:var(--text-2);margin-left:2px}
@media(max-width:768px){
  .trust-bar-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .trust-right{gap:16px}
}

/* ── Footer (21st.dev minimal) ─────────────────────────────────── */
.site-footer{border-top:1px solid var(--border-h);background:var(--bg)}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;padding:40px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.footer-left{display:flex;align-items:center;gap:20px}
.footer-left .nav-logo{font-size:16px}
.footer-links-row{display:flex;gap:24px;flex-wrap:wrap}
.footer-links-row a{font-size:13px;color:var(--text-2);transition:color var(--t)}
.footer-links-row a:hover{color:var(--text)}
.footer-copy{font-size:13px;color:var(--text-2)}
.footer-credit{
  display:block;width:100%;text-align:center;
  font-size:14px;font-weight:500;color:#fff !important;
  padding:16px 24px;
  background:var(--bg);
  border-top:1px solid var(--border);
  position:relative;z-index:2;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .process-steps{flex-wrap:wrap}
}
@media(max-width:768px){
  :root{--nav-h:60px}
  .section{padding:64px 0}
  .section-lg{padding:80px 0}
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-hamburger{display:flex}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-auto{grid-template-columns:1fr}
  .cal-grid{grid-template-columns:1fr}
  .wizard-progress{display:none}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:20px}
  .footer-left{flex-direction:column;align-items:flex-start;gap:12px}
  .session-type-grid{grid-template-columns:1fr}
  .process-steps{flex-direction:column}
  .process-step::after,.process-step::before{display:none}
}
@media(max-width:520px){
  .container{padding:0 16px}
  .display-1{font-size:30px}
  .time-slots{grid-template-columns:repeat(3,1fr)}
}


/* ── Use Cases section ─────────────────────────────────────────── */
.uc-tabs {
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px;
  justify-content:center;
}
.uc-tab {
  padding:10px 20px;border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.04);
  color:var(--text);font-size:14px;font-weight:600;
  font-family:var(--font-d);cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.uc-tab:hover { background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.25); }
.uc-tab.active {
  background:var(--green-dim);color:var(--green);
  border-color:var(--border-g);
}
.uc-panel { display:none; }
.uc-panel.active { display:block; }

.uc-card-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media(max-width:900px){
  .uc-card-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .uc-card-grid{grid-template-columns:1fr;}
  .uc-tabs{gap:6px;}
  .uc-tab{padding:8px 14px;font-size:13px;}
}

.uc-item {
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:24px;border:1px solid var(--border);
  opacity:0;transform:translateY(20px) scale(0.97);
  transition:opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1),
             background var(--t);
}
.uc-item.visible {
  opacity:1;transform:translateY(0) scale(1);
}
.uc-item:hover{background:#252527;}
.uc-item-icon {
  font-size:22px;margin-bottom:12px;
}
.uc-item h4 {
  font-size:15px;font-weight:700;margin-bottom:6px;
  font-family:var(--font-d);
}
.uc-item p {
  font-size:13px;color:var(--text-2);line-height:1.6;
}

/* ═══════════════════════════════════════════════════════════════
   HEXON-STYLE SCROLL ACCORDION  (hxa-*)
   Section is tall (4×100vh). Inner .hxa-sticky is position:sticky.
   JS maps scroll progress → active card index → pixel widths.
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer scroll container ─────────────────────────────────────*/
.hxa-section {
  position: relative;
  height: calc(var(--nav-h) + 100vh * 4.5);
}

/* ── Sticky viewport ────────────────────────────────────────────*/
.hxa-sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.hxa-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Header ─────────────────────────────────────────────────────*/
.hxa-head { max-width: 640px; }
.hxa-head h2 { line-height: 1.15; }
.hxa-pips {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  justify-content: center;
}
.hxa-pip {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--bg-3);
  transition: width 0.4s ease, background 0.4s ease;
}
.hxa-pip.active {
  width: 40px;
  background: var(--green);
}

/* ── Card row ───────────────────────────────────────────────────*/
.hxa-row {
  display: flex;
  gap: 10px;
  height: 420px;
  overflow: hidden;
}

/* ── Individual card ────────────────────────────────────────────*/
.hxa-card {
  position: relative;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s ease, width 0.5s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
  will-change: width;
}
.hxa-card.active {
  border-color: rgba(62,207,142,0.2);
  flex-shrink: 1;
  flex-grow: 1;
  box-shadow: 0 0 40px rgba(62,207,142,0.04);
}

/* ── Collapsed tab (number + rotated title) ─────────────────────*/
.hxa-tab {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 24px 0 20px;
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.hxa-card.active .hxa-tab {
  opacity: 0;
}
.hxa-tab-num {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-m);
  letter-spacing: 0.06em;
}
/* Per-card number colors matching reference */
.hxa-card[data-idx="0"] .hxa-tab-num { color: #ff4757; }
.hxa-card[data-idx="1"] .hxa-tab-num { color: #2d74ff; }
.hxa-card[data-idx="2"] .hxa-tab-num { color: #3ecf8e; }
.hxa-card[data-idx="3"] .hxa-tab-num { color: #f5c842; }
/* Active card num in hxa-num */
.hxa-card[data-idx="0"] .hxa-num { color: #ff4757; }
.hxa-card[data-idx="1"] .hxa-num { color: #2d74ff; }
.hxa-card[data-idx="2"] .hxa-num { color: #3ecf8e; }
.hxa-card[data-idx="3"] .hxa-num { color: #f5c842; }

.hxa-tab-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-d);
  color: #fff;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.02em;
}

/* ── Expanded content ───────────────────────────────────────────*/
.hxa-content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
  pointer-events: none;
  min-width: 600px;
}
.hxa-card.active .hxa-content {
  opacity: 1;
  pointer-events: auto;
}
.hxa-text {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}
.hxa-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: var(--font-m);
  margin-bottom: 16px;
}
.hxa-text h3 {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-d);
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.hxa-text p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 20px;
}
.hxa-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hxa-visual {
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hxa-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(62,207,142,0.08) 0%, transparent 60%);
}
.hxa-icon-wrap {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hxa-icon-wrap svg {
  width: 100%;
  height: 100%;
}
/* Radar animation */
.hxa-radar{
  position:relative;width:260px;height:260px;
}
.hxa-radar-rings{position:absolute;inset:0}
.hxa-radar-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.hxa-radar-ring:nth-child(1){width:100%;height:100%}
.hxa-radar-ring:nth-child(2){width:75%;height:75%}
.hxa-radar-ring:nth-child(3){width:50%;height:50%}
.hxa-radar-ring:nth-child(4){width:25%;height:25%}
.hxa-radar-ring:nth-child(5){width:8%;height:8%;border-color:rgba(255,255,255,0.2)}
.hxa-radar-cross{position:absolute;inset:0}
.hxa-radar-cross::before,.hxa-radar-cross::after{
  content:'';position:absolute;background:rgba(255,255,255,0.08);
}
.hxa-radar-cross::before{width:1px;height:100%;left:50%;top:0}
.hxa-radar-cross::after{height:1px;width:100%;top:50%;left:0}
.hxa-radar-sectors{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
}
.hxa-radar-sector{
  position:absolute;top:0;left:0;width:100%;height:100%;
  border-radius:50%;
}
.hxa-radar-sector.s-red{
  background:conic-gradient(from -70deg at 50% 50%,transparent 0deg,rgba(255,71,87,0.35) 20deg,rgba(255,71,87,0.15) 45deg,transparent 50deg);
}
.hxa-radar-sector.s-blue{
  background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(45,116,255,0.35) 25deg,rgba(45,116,255,0.15) 60deg,transparent 65deg);
}
.hxa-radar-sector.s-yellow{
  background:conic-gradient(from 100deg at 50% 50%,transparent 0deg,rgba(255,200,50,0.35) 20deg,rgba(255,200,50,0.15) 50deg,transparent 55deg);
}
.hxa-radar-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(62,207,142,0.4) 15deg,rgba(62,207,142,0.1) 40deg,transparent 50deg);
  animation:radar-sweep 4s linear infinite;
}
.hxa-radar-dot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.5);
  box-shadow:0 0 8px rgba(255,255,255,0.3);
}
@keyframes radar-sweep{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.hxa-gif{
  width:100%;height:100%;
  object-fit:contain;
  opacity:0.85;
}

/* Legacy icon animations */
.hxa-card.active .hxa-icon-wrap svg .pulse-ring {
  animation: hxa-pulse 2s ease-in-out infinite;
}
.hxa-card.active .hxa-icon-wrap svg .rotate-el {
  animation: hxa-rotate 8s linear infinite;
}
.hxa-card.active .hxa-icon-wrap svg .float-el {
  animation: hxa-float 3s ease-in-out infinite;
}
@keyframes hxa-pulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.1); }
}
@keyframes hxa-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hxa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Mobile fallback: stack vertically, no sticky ───────────────*/
@media(max-width: 900px) {
  .hxa-section {
    height: auto;
  }
  .hxa-sticky {
    position: relative;
    top: auto;
    height: auto;
    padding: 64px 0;
  }
  .hxa-row {
    flex-direction: column;
    height: auto;
  }
  .hxa-card {
    width: 100% !important;
    min-height: 320px;
    border-color: rgba(62,207,142,0.2);
  }
  .hxa-tab { display: none; }
  .hxa-content {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    grid-template-columns: 1fr;
    min-width: 0;
    min-height: 320px;
  }
  .hxa-visual { min-height: 140px; border-left: none; border-top: 1px solid var(--border); }
  .hxa-pips { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE UX AUDIT — MOBILE-FIRST OVERRIDES
   ══════════════════════════════════════════════════════════════ */

/* ── Shared horizontal carousel pattern ─────────────────────── */
.h-carousel {
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  gap:12px;
  padding-bottom:12px;
}
.h-carousel::-webkit-scrollbar { display:none; }
.h-carousel > * {
  flex:0 0 min(280px,78vw);
  scroll-snap-align:start;
}

/* ── 768px: card grids → carousels ─────────────────────────── */
@media(max-width:768px) {
  /* grid-3 and grid-4 become horizontal carousels */
  .grid-3,.grid-4 {
    display:flex !important;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding-top:20px;
    padding-bottom:12px;
    grid-template-columns:unset !important;
    align-items:stretch;
  }
  .grid-3::-webkit-scrollbar,
  .grid-4::-webkit-scrollbar { display:none; }
  .grid-3 > *,.grid-4 > * {
    flex:0 0 min(280px,78vw);
    scroll-snap-align:start;
    min-width:0;
  }

  /* Why grid → carousel */
  .why-grid {
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    background:none;
    border:none;
    border-radius:0;
    gap:12px;
    padding-bottom:12px;
  }
  .why-grid::-webkit-scrollbar { display:none; }
  .why-grid .why-card {
    flex:0 0 min(260px,78vw);
    scroll-snap-align:start;
    border:1px solid var(--border);
    border-radius:12px;
  }

  /* About page mission + stats */
  .about-mission-grid {
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .about-stats-grid {
    grid-template-columns:1fr 1fr !important;
  }

  /* Services detail panels */
  .svc-detail-grid {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  /* Flip order for image-first panels on mobile */
  .svc-detail-grid.img-first { direction:ltr; }
  .svc-detail-grid.img-first > *:first-child { order:2; }
  .svc-detail-grid.img-first > *:last-child { order:1; }

  /* Service page stats */
  .svc-stats-grid {
    grid-template-columns:1fr 1fr !important;
    gap:16px !important;
  }

  /* Home stats bar — 2×2 grid, not carousel */
  .home-stats-grid {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    overflow-x:unset !important;
    scroll-snap-type:unset !important;
    padding-bottom:0 !important;
  }
  .home-stats-grid > * {
    flex:unset !important;
    scroll-snap-align:unset !important;
  }

  /* Contact process grid → 2 col */
  .whats-next-grid {
    grid-template-columns:1fr 1fr !important;
    gap:20px !important;
  }

  /* 2-col service page grids (risk matrix, etc.) */
  .svc-2col-grid {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  /* Hero button row — stack on narrow */
  .hero-cta-row {
    flex-direction:column;
    align-items:center;
  }

  /* Arc section: scale down icon boxes, hide labels */
  .arc-icon-box {
    width:36px;
    height:36px;
    border-radius:9px;
  }
  .arc-icon-box svg { width:16px; height:16px; }
  .arc-label { display:none; }
}

/* ── 600px: fw-cards, uc-card carousels ─────────────────────── */
@media(max-width:600px) {

  .fw-cards-grid {
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding-bottom:12px;
    grid-template-columns:unset !important;
  }
  .fw-cards-grid::-webkit-scrollbar { display:none; }
  .fw-cards-grid > * {
    flex:0 0 min(240px,80vw);
    scroll-snap-align:start;
  }

  .uc-card-grid {
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding-bottom:12px;
    grid-template-columns:unset !important;
  }
  .uc-card-grid::-webkit-scrollbar { display:none; }
  .uc-card-grid > * {
    flex:0 0 min(250px,80vw);
    scroll-snap-align:start;
  }

  /* Contact process → 1 col */
  .whats-next-grid {
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  /* HXA cards on mobile: reduce min-height */
  .hxa-content { min-height:240px; }
  .hxa-text { padding:24px 20px; }
  .hxa-text h3 { font-size:22px; }
  .hxa-visual { min-height:100px; }
}

/* ── 480px: arc section hide, misc tightening ────────────────── */
@media(max-width:480px) {
  /* Arc section nodes overlap badly — hide the whole section */
  .arc-section { display:none; }

  /* About stats: keep 2×2 */
  .about-stats-grid { grid-template-columns:1fr 1fr !important; }

  /* Reduce grid-3/4 card preview width */
  .grid-3 > *,.grid-4 > * { flex:0 0 min(240px,84vw); }

  /* Section spacing */
  .section { padding:48px 0; }
  .section-sm { padding:32px 0; }

  /* Footer left alignment tweak */
  .footer-links-row { gap:16px; }

  /* Trust badges — allow wrap */
  .trust-right { flex-wrap:wrap; gap:12px; }
}

/* ══════════════════════════════════════════════════════════════
   HERO + NAV MOBILE RESPONSIVE (v2 — overflow fix)
   ══════════════════════════════════════════════════════════════ */

/* ── Hero section class ─────────────────────────────────────── */
.hero-section {
  max-width:100vw;
  overflow:hidden;
}

/* ── 1024px ─────────────────────────────────────────────────── */
@media(max-width:1024px) {
  .hero-section .container { padding-top:60px; }
  .hero-sub-text { font-size:17px !important; }
}

/* ── 768px ──────────────────────────────────────────────────── */
@media(max-width:768px) {
  .hero-section .container { padding-top:40px !important; }
  .hero-sub-text { font-size:16px !important; max-width:100% !important; }
  .hero-fw-strip { margin-top:40px !important; }
  /* Mask shorter on mobile so it doesn't eat content */
  .fw-scroll {
    mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
  }
}

/* ── 430px ──────────────────────────────────────────────────── */
@media(max-width:430px) {
  .hero-section .container { padding-top:28px !important; }
  .hero-sub-text { font-size:15px !important; }
  .hero-fw-strip { margin-top:32px !important; }
  .fw-row { gap:32px; }
  .fw-item { font-size:13px; }
  .fw-caption { font-size:12px; }
  /* Hamburger touch target */
  .nav-hamburger { padding:10px; }
}

/* ── 375px ──────────────────────────────────────────────────── */
@media(max-width:375px) {
  .hero-sub-text { font-size:14px !important; }
  .btn-lg { padding:12px 24px; font-size:14px; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION CAROUSEL MOBILE — What We Do / Use Cases / Credentials
   ══════════════════════════════════════════════════════════════ */

@media(max-width:768px) {

  /* ── What We Do (hxa-*) ──────────────────────────────────── */

  /* Disable sticky scroll behaviour — normal flow on mobile */
  .hxa-section {
    height: auto !important;
  }
  .hxa-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 48px 0 !important;
  }
  .hxa-inner {
    gap: 16px !important;
  }
  .hxa-head {
    max-width: 100% !important;
    text-align: center;
    padding: 0 16px;
  }

  /* Hide progress pips — not meaningful on a carousel */
  .hxa-pips { display: none; }

  /* Horizontal scroll carousel */
  .hxa-row {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    height: auto !important;
    padding: 4px 16px 16px !important;
  }
  .hxa-row::-webkit-scrollbar { display: none; }

  /* Every card is a full-width snap target */
  .hxa-card {
    flex: 0 0 min(320px, 84vw) !important;
    width: min(320px, 84vw) !important;
    height: auto !important;
    min-height: 380px;
    cursor: default !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
  }

  /* Show all cards fully expanded — no collapsed tab */
  .hxa-card .hxa-tab { display: none !important; }
  .hxa-card .hxa-content {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 0 !important;
    height: 100%;
  }
  .hxa-card.active .hxa-content,
  .hxa-card .hxa-content { opacity: 1 !important; pointer-events: auto !important; }

  /* Hide the visual pane — keep text only on mobile */
  .hxa-visual { display: none !important; }

  .hxa-text {
    padding: 28px 24px !important;
    flex: 1;
  }
  .hxa-text h3 { font-size: 22px !important; }

  /* Active border on cards that snap into view */
  .hxa-card:nth-child(1) { border-color: rgba(255,71,87,0.3) !important; }
  .hxa-card:nth-child(2) { border-color: rgba(45,116,255,0.3) !important; }
  .hxa-card:nth-child(3) { border-color: rgba(62,207,142,0.3) !important; }
  .hxa-card:nth-child(4) { border-color: rgba(245,200,66,0.3) !important; }

  /* ── Use Cases tabs — horizontal scroll ──────────────────── */
  .uc-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    padding: 4px 16px 12px !important;
    margin: 0 -16px 32px !important;
    justify-content: flex-start !important;
  }
  .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  /* Use Cases card grid — horizontal scroll carousel */
  .uc-panel.active { display: block !important; }
  .uc-card-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    padding: 4px 4px 16px !important;
    grid-template-columns: unset !important;
  }
  .uc-card-grid::-webkit-scrollbar { display: none; }
  .uc-item {
    flex: 0 0 min(260px, 78vw) !important;
    scroll-snap-align: start;
    /* Reset stagger animation — all visible in carousel */
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Credentials — horizontal scroll carousel ────────────── */
  .cred-carousel-wrap {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 4px 16px;
    margin: 0;
  }
  .cred-carousel-wrap::-webkit-scrollbar { display: none; }
  .cred-carousel-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    width: max-content;
  }
  .cred-carousel-inner > div {
    flex: 0 0 160px !important;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* ── About page: cv-val-card — swap translateX for translateY ── */
  .cv-val-card {
    transform: translateY(24px) !important;
  }
  .cv-wrap.cv-in .cv-val-card {
    transform: translateY(0) !important;
  }
}