/* ====================================================
   ALMINDS — PREMIUM BIG-TECH DESIGN SYSTEM v2
   ==================================================== */
:root {
  --navy:       #080F1E;
  --navy-mid:   #0A1F36;
  --navy-light: #0F2847;
  --teal:       #14B8A2;
  --teal-dark:  #0E8F7E;
  --teal-light: #5EEAD4;
  --orange:     #F2773F;
  --orange-dark:#D96030;
  --cream:      #F4F8F7;
  --ink:        #0F172A;
  --ink-mid:    #334155;
  --ink-soft:   #64748B;
  --border:     #E2E8F0;
  --white:      #FFFFFF;
  --max:        1200px;

  --grad-teal:   linear-gradient(135deg,#14B8A2 0%,#0E8F7E 100%);
  --grad-teal2:  linear-gradient(135deg,#5EEAD4 0%,#14B8A2 100%);
  --grad-navy:   linear-gradient(135deg,#080F1E 0%,#0A1F36 55%,#0C2540 100%);
  --grad-orange: linear-gradient(135deg,#F2773F,#D96030);
  --grad-glass:  linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));

  --shadow-xs:   0 1px 4px rgba(8,15,30,.08);
  --shadow-sm:   0 2px 10px rgba(8,15,30,.09);
  --shadow-md:   0 6px 28px rgba(8,15,30,.12);
  --shadow-lg:   0 16px 56px rgba(8,15,30,.18);
  --shadow-xl:   0 32px 80px rgba(8,15,30,.24);
  --shadow-teal: 0 6px 28px rgba(20,184,162,.3);
  --shadow-glow: 0 0 60px rgba(20,184,162,.18);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl:36px;
}

*  { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--white);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4 { font-weight:800; letter-spacing:-.025em; color:var(--navy); line-height:1.12; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 36px; }

/* ---- KEYFRAMES ---- */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes slideLeft  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(24px)}  to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes float      { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(2deg)} }
@keyframes floatR     { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-3deg)} }
@keyframes float2     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.55);opacity:0} }
@keyframes pulse-dot  { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes shimmer    { 0%{background-position:-400% center} 100%{background-position:400% center} }
@keyframes marquee    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes gradMove   {
  0%  {background-position:0% 50%}
  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes rotate360 { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes blob1     { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.1)} 66%{transform:translate(-25px,20px) scale(.92)} }
@keyframes blob2     { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-45px,35px) scale(1.12)} }
@keyframes blob3     { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(30px,22px) scale(.95)} 80%{transform:translate(-15px,-28px) scale(1.07)} }
@keyframes scanPulse { 0%{left:0%;opacity:.7} 100%{left:110%;opacity:0} }

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity .65s cubic-bezier(.25,.46,.45,.94),transform .65s cubic-bezier(.25,.46,.45,.94);
}
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s}
.reveal-d5{transition-delay:.40s} .reveal-d6{transition-delay:.48s}

/* ---- GRADIENT TEXT ---- */
.g-text {
  background:linear-gradient(135deg,#14B8A2 0%,#5EEAD4 50%,#14B8A2 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}
.g-text-warm {
  background:linear-gradient(135deg,#F2773F,#FBBF70,#F2773F);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}
.g-text-purple {
  background:linear-gradient(135deg,#A78BFA,#C4B5FD,#A78BFA);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 5s linear infinite;
}

/* ---- GRID PATTERNS ---- */
.grid-bg {
  background-image:
    linear-gradient(rgba(20,184,162,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,184,162,.045) 1px,transparent 1px);
  background-size:52px 52px;
}
.grid-bg-dark {
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:52px 52px;
}
.dot-bg {
  background-image: radial-gradient(rgba(20,184,162,.08) 1px, transparent 1px);
  background-size: 28px 28px;
}
.dot-bg-dark {
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---- GLASS CARD ---- */
.glass {
  background:var(--grad-glass);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
}

/* =================== NAV =================== */
.nav {
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(226,232,240,.8);
  transition:box-shadow .3s;
}
.nav.scrolled { box-shadow:0 4px 32px rgba(8,15,30,.1); }
.nav-inner {
  max-width:var(--max); margin:0 auto; padding:14px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.26rem; color:var(--navy); transition:opacity .15s; }
.logo:hover { opacity:.8; }
.logo-mark {
  width:38px; height:38px; flex-shrink:0; display:inline-block;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='44' height='21' rx='3' fill='%2314B8A2'/%3E%3Crect x='0' y='0' width='21' height='44' rx='3' fill='%2314B8A2'/%3E%3Crect x='27' y='27' width='17' height='17' rx='3' fill='%23F2773F'/%3E%3C/svg%3E") no-repeat center/contain;
}
.logo-mark::before,.logo-mark::after { display:none; }
.nav-links { display:flex; gap:28px; font-weight:600; font-size:.9rem; }
.nav-links a { color:var(--ink-mid); transition:color .15s; position:relative; padding-bottom:2px; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--teal); border-radius:1px; transition:width .22s; }
.nav-links a:hover,.nav-links a.active { color:var(--teal-dark); }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-links a.product-link { color:var(--teal-dark); font-weight:700; }
.nav-cta { background:var(--grad-teal); color:var(--white)!important; padding:10px 20px; border-radius:var(--r-sm); font-weight:700; font-size:.87rem; box-shadow:var(--shadow-teal); transition:all .2s; }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(20,184,162,.45); }
.nav-cta::after { display:none!important; }
.mobile-toggle { display:none; }

/* =================== HERO =================== */
.hero {
  position:relative; overflow:hidden;
  min-height:95vh; display:flex; align-items:center;
  background:var(--grad-navy);
  padding:80px 0 60px;
}
.hero-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:.7;
}
/* Aurora blobs */
.hero-blob { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); }
.hero-blob-1 { width:700px; height:700px; left:-200px; top:-200px; background:radial-gradient(circle,rgba(20,184,162,.18),transparent 65%); animation:blob1 18s ease-in-out infinite; }
.hero-blob-2 { width:600px; height:600px; right:-150px; bottom:-200px; background:radial-gradient(circle,rgba(242,119,63,.12),transparent 65%); animation:blob2 22s ease-in-out infinite; }
.hero-blob-3 { width:500px; height:500px; left:35%; top:20%; background:radial-gradient(circle,rgba(107,63,160,.1),transparent 65%); animation:blob3 16s ease-in-out infinite; }
.hero-wrap {
  max-width:var(--max); margin:0 auto; padding:0 36px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  position:relative; z-index:2;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(20,184,162,.14); border:1px solid rgba(20,184,162,.3);
  color:var(--teal-light); padding:7px 16px; border-radius:20px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  margin-bottom:26px; animation:fadeIn .5s ease both;
}
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse-dot 1.8s ease infinite; }
.hero-content h1 {
  font-size:clamp(2.8rem,4.8vw,4.4rem); color:var(--white);
  margin-bottom:22px; animation:fadeInUp .55s ease .05s both;
  line-height:1.06;
}
.hero-sub {
  font-size:1.1rem; color:rgba(255,255,255,.65); font-weight:400;
  max-width:500px; margin-bottom:40px; line-height:1.72;
  animation:fadeInUp .55s ease .12s both;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; animation:fadeInUp .55s ease .2s both; }
.hero-divider { width:100%; height:1px; background:rgba(255,255,255,.1); margin:44px 0 36px; }
.hero-stats { display:flex; gap:44px; animation:fadeInUp .55s ease .32s both; }
.hero-stat .num {
  font-size:2.4rem; font-weight:800;
  background:var(--grad-teal2); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1;
}
.hero-stat .lbl { font-size:.78rem; color:rgba(255,255,255,.45); margin-top:5px; }

/* SVG illustration panel */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; animation:scaleIn .7s ease .1s both; }
.hero-illustration { width:100%; max-width:520px; filter:drop-shadow(0 20px 60px rgba(20,184,162,.2)); }

/* Floating metric cards */
.hfc {
  position:absolute; z-index:10;
  background:rgba(14,30,58,.82);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  padding:14px 18px; box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 0 1px rgba(20,184,162,.12);
}
.hfc-1 { top:6%; right:-8%; animation:float 6s ease-in-out infinite; }
.hfc-2 { bottom:16%; right:-10%; animation:floatR 8s ease-in-out infinite; }
.hfc-3 { top:48%; left:-10%; animation:float2 7s ease-in-out infinite .5s; }
.hfc-num { font-size:1.9rem; font-weight:800; color:var(--teal); line-height:1; }
.hfc-label { font-size:.7rem; color:rgba(255,255,255,.55); margin-top:4px; font-weight:600; white-space:nowrap; }
.hfc-row { display:flex; align-items:center; gap:10px; }
.hfc-dot { width:28px; height:28px; border-radius:50%; background:var(--grad-teal); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; flex-shrink:0; }
.hfc-text { font-size:.8rem; color:rgba(255,255,255,.85); font-weight:700; white-space:nowrap; }
.hfc-sub  { font-size:.65rem; color:rgba(255,255,255,.4); margin-top:2px; }
.hfc-stars { color:#FBBF24; font-size:.95rem; margin-bottom:5px; letter-spacing:1px; }

/* Hero chips */
.hero-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; animation:fadeInUp .55s ease .28s both; }
.hero-chip {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.8); padding:8px 14px; border-radius:40px;
  font-size:.82rem; font-weight:600; transition:all .2s;
}
.hero-chip:hover { background:rgba(20,184,162,.15); border-color:rgba(20,184,162,.35); color:var(--teal-light); }
.hero-chip svg { width:14px; height:14px; flex-shrink:0; }

/* =================== BUTTONS =================== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:var(--r-sm); font-weight:700; font-size:.92rem; transition:all .22s; cursor:pointer; border:none; }
.btn-primary { background:var(--grad-teal); color:var(--white); box-shadow:var(--shadow-teal); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(20,184,162,.48); }
.btn-outline { border:1.5px solid rgba(255,255,255,.28); color:var(--white); background:transparent; }
.btn-outline:hover { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.07); transform:translateY(-1px); }
.btn-dark { background:rgba(255,255,255,.09); color:var(--white); border:1px solid rgba(255,255,255,.12); }
.btn-dark:hover { background:rgba(255,255,255,.15); transform:translateY(-1px); }
.btn-navy { background:var(--navy); color:var(--white); }
.btn-navy:hover { background:var(--navy-mid); transform:translateY(-1px); }
.btn-white { background:var(--white); color:var(--navy); box-shadow:var(--shadow-md); }
.btn-white:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-lg { padding:16px 34px; font-size:1rem; border-radius:var(--r-md); }
.btn-glow { background:var(--grad-teal); color:#fff; padding:18px 40px; border-radius:var(--r-md); font-weight:800; font-size:1.05rem; box-shadow:0 0 0 0 rgba(20,184,162,.5); animation:glowPulse 2.5s ease-in-out infinite; transition:transform .2s; }
.btn-glow:hover { transform:translateY(-3px) scale(1.02); }

/* =================== SECTIONS =================== */
section { padding:96px 0; }
.section-label {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,rgba(20,184,162,.12),rgba(20,184,162,.05));
  color:var(--teal-dark); font-weight:700; font-size:.75rem;
  letter-spacing:.09em; text-transform:uppercase;
  padding:6px 16px; border-radius:20px; margin-bottom:20px;
  border:1px solid rgba(20,184,162,.22);
}
.section-title { font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:16px; }
.section-sub { color:var(--ink-soft); font-size:1.05rem; max-width:620px; margin-bottom:56px; line-height:1.72; }
.bg-cream  { background:var(--cream); }
.bg-navy   { background:var(--navy); color:var(--white); }
.bg-navy .section-title,.bg-navy h3 { color:var(--white); }
.bg-navy .section-sub { color:rgba(255,255,255,.55); }
.bg-dark   { background:var(--navy-mid); }
.center    { text-align:center; }
.center .section-sub { margin-left:auto; margin-right:auto; }

/* =================== GRIDS =================== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* =================== CARDS =================== */
.card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:32px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  position:relative; overflow:hidden; --mx:50%; --my:50%;
}
.card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--grad-teal); transform:scaleX(0); transition:transform .32s;
  transform-origin:left;
}
.card::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(20,184,162,.07), transparent 65%);
  pointer-events:none; opacity:0; transition:opacity .25s; z-index:0;
}
.card:hover::before { transform:scaleX(1); }
.card:hover::after  { opacity:1; }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(20,184,162,.2); }
.card > * { position:relative; z-index:1; }
.card-icon {
  width:54px; height:54px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; font-size:1.4rem; transition:transform .22s;
}
.card:hover .card-icon { transform:scale(1.12) rotate(-5deg); }
.card h4 { font-size:1.1rem; margin-bottom:10px; }
.card p { color:var(--ink-soft); font-size:.92rem; line-height:1.65; }
.card ul { margin-top:16px; padding-left:18px; color:var(--ink-soft); font-size:.9rem; }
.card ul li { margin-bottom:7px; line-height:1.5; }

/* glass card variant */
.card-glass {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:32px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:all .25s;
}
.card-glass:hover { background:rgba(255,255,255,.07); border-color:rgba(20,184,162,.25); transform:translateY(-5px); box-shadow:0 16px 48px rgba(20,184,162,.15); }

/* =================== STAT CARDS =================== */
.stat-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg); padding:40px 28px; text-align:center;
  position:relative; overflow:hidden; transition:all .25s;
}
.stat-card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--grad-teal); transform:scaleX(0); transition:transform .35s;
}
.stat-card::after {
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(20,184,162,.12),transparent 70%);
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.stat-card:hover { border-color:rgba(20,184,162,.3); transform:translateY(-5px); box-shadow:0 12px 44px rgba(20,184,162,.2); }
.stat-card:hover::before { transform:scaleX(1); }
.stat-card:hover::after  { opacity:1; }
.stat-card .num { font-size:3.2rem; font-weight:800; color:var(--teal); line-height:1; position:relative; z-index:1; }
.stat-card .label { font-weight:700; margin:12px 0 4px; color:var(--white); font-size:1rem; }
.stat-card .sub { font-size:.82rem; color:rgba(255,255,255,.42); }

/* =================== MARQUEE STRIP =================== */
.marquee-wrap { overflow:hidden; position:relative; padding:20px 0; }
.marquee-wrap::before,.marquee-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2;
  pointer-events:none;
}
.marquee-wrap::before { left:0; background:linear-gradient(90deg,var(--white),transparent); }
.marquee-wrap::after  { right:0; background:linear-gradient(-90deg,var(--white),transparent); }
.marquee-track {
  display:flex; gap:0; width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee-item {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--border);
  padding:10px 20px; border-radius:8px; font-size:.84rem; font-weight:600;
  color:var(--ink-soft); margin-right:12px; white-space:nowrap;
  transition:all .18s;
}
.marquee-item:hover { border-color:var(--teal); color:var(--teal-dark); transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* =================== TESTIMONIALS =================== */
.quote-card {
  background:var(--white); border:1px solid var(--border); border-left:3px solid var(--teal);
  border-radius:var(--r-lg); padding:32px;
  font-size:.94rem; color:var(--ink-soft); font-style:italic;
  position:relative; transition:all .22s;
}
.quote-card::before { content:'\201C'; position:absolute; top:14px; left:22px; font-size:4.5rem; font-style:normal; color:var(--teal); opacity:.12; line-height:1; font-family:Georgia,serif; }
.quote-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.quote-card .stars { display:flex; gap:2px; margin-bottom:14px; }
.quote-card .stars span { color:#FBBF24; font-size:1rem; }
.quote-card .by { margin-top:18px; font-style:normal; font-weight:700; color:var(--navy); }
.quote-card .by .role { display:block; font-weight:500; color:var(--teal-dark); font-size:.82rem; margin-top:2px; }
.quote-card .avatar {
  width:40px; height:40px; border-radius:50%; background:var(--grad-teal);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--white); font-size:1rem; flex-shrink:0;
}
.by-row { display:flex; align-items:center; gap:12px; margin-top:20px; }

/* Large quote cards (dark bg) */
.quote-card-lg {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:44px 40px;
  position:relative; overflow:hidden; transition:all .25s;
}
.quote-card-lg::before {
  content:'\201C'; position:absolute; top:16px; left:28px;
  font-size:8rem; font-style:normal; color:var(--teal);
  opacity:.07; line-height:1; font-family:Georgia,serif; pointer-events:none;
}
.quote-card-lg:hover { border-color:rgba(20,184,162,.3); transform:translateY(-5px); box-shadow:0 16px 48px rgba(20,184,162,.15); }
.qlg-stars { display:flex; gap:3px; margin-bottom:18px; }
.qlg-stars span { color:#FBBF24; font-size:1.1rem; }
.qlg-text { font-size:1.05rem; color:rgba(255,255,255,.78); line-height:1.78; font-style:italic; margin-bottom:28px; position:relative; z-index:1; }
.qlg-by { display:flex; align-items:center; gap:16px; }
.qlg-avatar { width:52px; height:52px; border-radius:50%; background:var(--grad-teal); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:1.2rem; flex-shrink:0; }
.qlg-name { color:#fff; font-weight:800; font-size:1rem; }
.qlg-role { color:rgba(255,255,255,.42); font-size:.82rem; margin-top:3px; }

/* =================== FEATURE CARDS =================== */
.feature-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px;
  transition:all .25s; position:relative; overflow:hidden;
}
.feature-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-teal); transform:scaleX(0); transition:transform .3s; transform-origin:left; }
.feature-card:hover::before { transform:scaleX(1); }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(20,184,162,.18); }
.feature-icon { width:52px; height:52px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px; transition:transform .22s; }
.feature-card:hover .feature-icon { transform:scale(1.12) rotate(-6deg); }
.feature-card h4 { font-size:1.06rem; margin-bottom:8px; }
.feature-card p { font-size:.9rem; color:var(--ink-soft); line-height:1.64; }

/* =================== STEPS =================== */
.steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; }
.steps-row::before { content:''; position:absolute; top:28px; left:calc(16.67%+24px); right:calc(16.67%+24px); height:2px; background:linear-gradient(90deg,var(--teal),rgba(20,184,162,.2),var(--teal)); opacity:.3; }
.step-card { text-align:center; padding:40px 24px; background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); transition:all .25s; }
.step-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(20,184,162,.22); }
.step-num-large { width:58px; height:58px; background:var(--grad-teal); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.35rem; margin:0 auto 22px; box-shadow:var(--shadow-teal); position:relative; z-index:1; }
.step-num-large::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(20,184,162,.25); animation:pulse-ring 2.5s ease-out infinite; }
.step-card h4 { font-size:1.1rem; margin-bottom:10px; }
.step-card p { font-size:.91rem; color:var(--ink-soft); line-height:1.64; }

/* =================== PROCESS SECTION =================== */
.proc-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:64px; }
.proc-connector {
  position:absolute; top:43px; left:calc(12.5% + 22px); right:calc(12.5% + 22px);
  height:2px; background:linear-gradient(90deg,rgba(20,184,162,.15),rgba(20,184,162,.5),rgba(20,184,162,.15));
  overflow:hidden;
}
.proc-connector::after {
  content:''; position:absolute; top:-1px; height:4px; width:25%;
  background:linear-gradient(90deg,transparent,rgba(20,184,162,.9),transparent);
  border-radius:2px; animation:scanPulse 3s linear infinite;
}
.proc-step { text-align:center; padding:0 16px 40px; position:relative; }
.proc-circle {
  width:88px; height:88px; border-radius:50%;
  border:2px solid rgba(20,184,162,.25);
  background:var(--white); box-shadow:0 4px 24px rgba(20,184,162,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto 28px; position:relative; z-index:1;
  transition:all .3s;
}
.proc-circle:hover { border-color:var(--teal); box-shadow:0 8px 36px rgba(20,184,162,.3); transform:scale(1.08); }
.proc-circle .p-icon { font-size:1.7rem; line-height:1; }
.proc-circle .p-num { font-size:.62rem; font-weight:800; color:var(--teal); letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }
.proc-step h4 { font-size:1.05rem; margin-bottom:10px; color:var(--navy); }
.proc-step p { font-size:.87rem; color:var(--ink-soft); line-height:1.65; }
.proc-tag { display:inline-block; background:rgba(20,184,162,.1); border:1px solid rgba(20,184,162,.2); color:var(--teal-dark); padding:3px 10px; border-radius:20px; font-size:.7rem; font-weight:700; margin-bottom:12px; }

/* =================== INDUSTRY GRID =================== */
.ind-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.ind-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg); padding:28px 22px;
  transition:all .28s; display:block; cursor:pointer;
  position:relative; overflow:hidden;
}
.ind-card:hover {
  background:rgba(255,255,255,.08); border-color:rgba(20,184,162,.38);
  transform:translateY(-7px); box-shadow:0 20px 52px rgba(20,184,162,.2);
}
.ind-card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--grad-teal); transform:scaleX(0); transition:transform .3s; transform-origin:left;
}
.ind-card:hover::before { transform:scaleX(1); }
.ind-icon { font-size:2.2rem; display:block; margin-bottom:14px; filter:grayscale(0); transition:transform .25s; }
.ind-card:hover .ind-icon { transform:scale(1.15); }
.ind-card h4 { color:rgba(255,255,255,.9); font-size:.96rem; margin-bottom:8px; }
.ind-card p { color:rgba(255,255,255,.4); font-size:.77rem; line-height:1.6; }
.ind-arrow { margin-top:14px; color:var(--teal); font-size:.82rem; font-weight:700; opacity:0; transform:translateX(-4px); transition:all .22s; }
.ind-card:hover .ind-arrow { opacity:1; transform:translateX(0); }

/* =================== GLOBAL OFFICES =================== */
.globe-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.globe-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:40px 32px; text-align:center;
  position:relative; overflow:hidden; transition:all .25s;
}
.globe-card::before {
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at 50% 0%, rgba(20,184,162,.1), transparent 60%);
  transition:opacity .3s;
}
.globe-card:hover { background:rgba(255,255,255,.07); border-color:rgba(20,184,162,.3); transform:translateY(-6px); }
.globe-card:hover::before { opacity:1; }
.globe-ping-wrap { width:72px; height:72px; position:relative; margin:0 auto 24px; }
.globe-ping {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,rgba(20,184,162,.2),rgba(20,184,162,.08));
  border:2px solid rgba(20,184,162,.35);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
}
.globe-ping::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(20,184,162,.3); animation:pulse-ring 2.8s ease-out infinite;
}
.globe-ping::before {
  content:''; position:absolute; inset:-18px; border-radius:50%;
  border:1px solid rgba(20,184,162,.15); animation:pulse-ring 2.8s ease-out infinite .6s;
}
.globe-card h4 { color:#fff; font-size:1.35rem; margin-bottom:4px; }
.globe-country { color:var(--teal); font-size:.8rem; font-weight:700; margin-bottom:16px; text-transform:uppercase; letter-spacing:.07em; }
.globe-card p { color:rgba(255,255,255,.45); font-size:.85rem; line-height:1.65; }
.hq-badge { display:inline-block; background:var(--grad-teal); color:#fff; font-size:.65rem; font-weight:800; padding:3px 12px; border-radius:20px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; }

/* =================== PRICING =================== */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.pricing-card { background:var(--white); border:2px solid var(--border); border-radius:var(--r-xl); padding:36px; transition:all .25s; position:relative; overflow:hidden; }
.pricing-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pricing-card.featured { border-color:var(--teal); background:linear-gradient(165deg,#f0fdfb 0%,#fff 50%); box-shadow:0 8px 48px rgba(20,184,162,.22); }
.pricing-card.featured:hover { box-shadow:0 20px 64px rgba(20,184,162,.32); }
.pricing-badge { position:absolute; top:22px; right:22px; background:var(--grad-teal); color:var(--white); font-size:.68rem; font-weight:800; padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.05em; }
.pricing-name { font-size:.8rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.pricing-price { font-size:3.2rem; font-weight:800; color:var(--navy); line-height:1; margin-bottom:4px; }
.pricing-price sup { font-size:1.5rem; vertical-align:top; margin-top:8px; color:var(--teal); }
.pricing-price span { font-size:.95rem; font-weight:600; color:var(--ink-soft); vertical-align:top; margin-top:16px; display:inline-block; }
.pricing-period { font-size:.82rem; color:var(--ink-soft); margin-bottom:24px; }
.pricing-desc { font-size:.9rem; color:var(--ink-soft); margin-bottom:24px; line-height:1.64; border-bottom:1px solid var(--border); padding-bottom:24px; }
.pricing-features { list-style:none; margin-bottom:28px; }
.pricing-features li { padding:7px 0; font-size:.88rem; color:var(--ink-soft); display:flex; align-items:flex-start; gap:10px; border-bottom:1px solid rgba(0,0,0,.04); }
.pricing-features li:last-child { border-bottom:none; }
.pricing-features li::before { content:'✓'; color:var(--teal); font-weight:800; font-size:.85rem; flex-shrink:0; margin-top:1px; }
.pricing-features li.disabled { opacity:.38; }
.pricing-features li.disabled::before { content:'✗'; color:var(--ink-soft); }

/* =================== CASE STUDY CARDS =================== */
.case-card { display:grid; grid-template-columns:300px 1fr; gap:0; border-radius:var(--r-xl); overflow:hidden; margin-bottom:32px; box-shadow:var(--shadow-sm); transition:all .25s; }
.case-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.case-side { padding:36px 28px; color:var(--white); display:flex; flex-direction:column; }
.case-side h3 { color:var(--white); font-size:1.5rem; margin-bottom:4px; }
.case-side .industry { opacity:.82; font-size:.9rem; margin-bottom:20px; }
.case-meta { font-size:.83rem; margin-bottom:12px; }
.case-meta .k { opacity:.6; display:block; font-size:.74rem; margin-bottom:2px; }
.case-results { margin-top:auto; font-size:.83rem; background:rgba(255,255,255,.18); padding:12px 14px; border-radius:var(--r-sm); font-weight:600; line-height:1.55; }
.case-body { padding:36px 36px 36px 32px; background:#FAFCFC; }
.case-block { margin-bottom:20px; }
.case-block .tag { display:inline-block; font-size:.69rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:4px; margin-bottom:8px; }
.tag-challenge { background:#FCE8DE; color:var(--orange); }
.tag-solution  { background:#DBF5F0; color:var(--teal-dark); }
.tag-impact    { background:#E1F0E5; color:#2E8B57; }
.case-block p { font-size:.92rem; color:var(--ink-soft); line-height:1.68; }

/* =================== LOGO STRIP =================== */
.logo-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:44px; }
.logo-chip { background:var(--white); border:1px solid var(--border); padding:10px 18px; border-radius:8px; font-weight:600; font-size:.82rem; color:var(--ink-soft); transition:all .16s; }
.logo-chip:hover { border-color:var(--teal); color:var(--teal-dark); transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* =================== AWS BADGES =================== */
.aws-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.aws-badge { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--border); border-radius:8px; padding:10px 16px; font-size:.81rem; font-weight:600; color:var(--ink-soft); transition:all .16s; }
.aws-badge:hover { border-color:var(--teal); color:var(--teal-dark); transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* =================== CONTACT =================== */
.contact-card { background:var(--navy-light); border-radius:var(--r-lg); padding:32px; border-top:3px solid var(--teal); transition:all .22s; }
.contact-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.contact-card .office-tag { display:inline-block; background:var(--grad-orange); color:var(--white); font-size:.69rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:4px; margin-bottom:16px; }
.contact-card h3 { color:var(--white); margin-bottom:2px; }
.contact-card .country { color:rgba(255,255,255,.42); font-size:.82rem; margin-bottom:18px; }
.contact-line { display:flex; gap:10px; margin-bottom:12px; font-size:.87rem; color:rgba(255,255,255,.78); }
.contact-line .icn { color:var(--teal); flex-shrink:0; }
.contact-form { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:40px; box-shadow:var(--shadow-sm); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size:.82rem; font-weight:700; color:var(--navy); }
.form-field input,.form-field textarea,.form-field select { border:1.5px solid var(--border); border-radius:var(--r-sm); padding:11px 14px; font-family:inherit; font-size:.9rem; background:var(--cream); transition:all .15s; color:var(--ink); }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,184,162,.12); background:var(--white); }

/* =================== CLIENT LOGOS =================== */
.client-logos-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:36px 48px;
  align-items:center;
  margin-top:48px;
}
.client-logo {
  max-height:56px; width:auto; max-width:150px;
  object-fit:contain; display:block; margin:0 auto;
  filter:grayscale(1) opacity(.45);
  transition:filter .28s, transform .22s;
}
.client-logo:hover {
  filter:grayscale(0) opacity(1);
  transform:scale(1.07);
}
@media(max-width:900px){
  .client-logos-grid { grid-template-columns:repeat(4,1fr); gap:28px 32px; }
}
@media(max-width:600px){
  .client-logos-grid { grid-template-columns:repeat(3,1fr); gap:24px 20px; }
  .client-logo { max-height:40px; max-width:100px; }
}

/* =================== FOOTER =================== */
footer { background:var(--navy); color:rgba(255,255,255,.58); padding:72px 0 28px; position:relative; }
footer::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-teal); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px; }
.footer-grid h4 { color:var(--white); font-size:.9rem; margin-bottom:16px; }
.footer-grid ul { list-style:none; }
.footer-grid ul li { margin-bottom:10px; font-size:.86rem; }
.footer-grid ul li a { transition:color .15s; }
.footer-grid ul li a:hover { color:var(--teal); }
.footer-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; color:var(--white); margin-bottom:14px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding-top:24px; display:flex; justify-content:space-between; font-size:.8rem; }

/* =================== PAGE HEADER =================== */
.page-header { background:var(--grad-navy); color:var(--white); padding:80px 0 68px; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; right:-80px; top:-80px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(20,184,162,.12) 0%,transparent 68%); animation:float 11s ease-in-out infinite; }
.page-header::after  { content:''; position:absolute; left:30%; bottom:-40px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(242,119,63,.08) 0%,transparent 68%); }
.page-header .eyebrow { color:var(--teal); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:12px; }
.page-header h1 { color:var(--white); font-size:clamp(2.2rem,4vw,3rem); margin-bottom:16px; position:relative; z-index:1; animation:fadeInUp .5s ease both; }
.page-header p { color:rgba(255,255,255,.65); font-size:1.05rem; max-width:600px; position:relative; z-index:1; line-height:1.68; animation:fadeInUp .5s ease .1s both; }

/* =================== PRODUCT HERO =================== */
.product-hero { background:var(--grad-navy); color:var(--white); padding:96px 0 80px; position:relative; overflow:hidden; }
.product-hero::before { content:''; position:absolute; right:5%; top:50%; transform:translateY(-50%); width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(20,184,162,.13) 0%,transparent 65%); animation:float 12s ease-in-out infinite; pointer-events:none; }
.product-hero::after  { content:''; position:absolute; left:3%;  bottom:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(242,119,63,.08) 0%,transparent 65%); pointer-events:none; }
.product-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:2; }
.product-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(20,184,162,.14); border:1px solid rgba(20,184,162,.32); color:var(--teal-light); padding:7px 16px; border-radius:20px; font-size:.78rem; font-weight:700; margin-bottom:24px; letter-spacing:.05em; }
.product-hero h1 { color:var(--white); font-size:clamp(2.5rem,4vw,3.8rem); line-height:1.06; margin-bottom:22px; }
.product-hero h1 .accent { color:var(--teal); }
.product-hero .sub { font-size:1.08rem; color:rgba(255,255,255,.68); max-width:520px; line-height:1.7; margin-bottom:40px; }
.product-hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.dashboard-wrap { position:relative; }
.dashboard-svg { width:100%; border-radius:var(--r-xl); box-shadow:0 24px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); animation:float 8s ease-in-out infinite; }
.dashboard-glow { position:absolute; inset:-20px; border-radius:var(--r-2xl); background:radial-gradient(circle at 50% 50%,rgba(20,184,162,.18),transparent 65%); pointer-events:none; }

/* savings strip */
.savings-strip { background:var(--grad-teal); padding:22px 0; }
.savings-strip .wrap { display:flex; justify-content:center; flex-wrap:wrap; }
.savings-item { display:flex; align-items:center; gap:12px; color:var(--white); font-weight:700; font-size:.95rem; padding:10px 36px; }
.savings-item .big-num { font-size:2rem; font-weight:800; line-height:1; }
.savings-item .sep { width:1px; height:44px; background:rgba(255,255,255,.28); }

/* results grid */
.results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.result-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-lg); padding:36px; text-align:center; position:relative; overflow:hidden; transition:all .25s; }
.result-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-teal); }
.result-card:hover { transform:translateY(-5px); box-shadow:0 10px 44px rgba(20,184,162,.2); border-color:rgba(20,184,162,.28); }
.result-card .big-num { font-size:3.2rem; font-weight:800; color:var(--teal); line-height:1; margin-bottom:8px; }
.result-card .result-label { color:var(--white); font-weight:700; font-size:.97rem; margin-bottom:6px; }
.result-card .result-sub { color:rgba(255,255,255,.48); font-size:.82rem; }

/* CTA block */
.cta-block { background:var(--grad-navy); border-radius:var(--r-2xl); padding:80px 64px; text-align:center; position:relative; overflow:hidden; }
.cta-block::before { content:''; position:absolute; left:10%; top:-50%; width:80%; height:200%; background:radial-gradient(ellipse at center, rgba(20,184,162,.14) 0%, rgba(242,119,63,.06) 40%, transparent 70%); animation:blob2 20s ease-in-out infinite; pointer-events:none; }
.cta-block::after  { content:''; position:absolute; right:-100px; bottom:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(107,63,160,.08),transparent 65%); pointer-events:none; }
.cta-block h2 { color:var(--white); font-size:clamp(1.9rem,3.2vw,2.8rem); margin-bottom:16px; position:relative; z-index:1; }
.cta-block p { color:rgba(255,255,255,.65); font-size:1.05rem; max-width:520px; margin:0 auto 40px; line-height:1.68; position:relative; z-index:1; }
.cta-block .actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

/* =================== PRODUCT SPOTLIGHT =================== */
.product-spotlight {
  background:var(--grad-navy); border-radius:var(--r-2xl); padding:56px 60px;
  position:relative; overflow:hidden; color:var(--white);
  display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center;
}
.product-spotlight::before { content:''; position:absolute; right:-80px; top:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(20,184,162,.13) 0%,transparent 65%); animation:float 11s ease-in-out infinite; }
.ps-content { position:relative; z-index:1; }
.ps-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(20,184,162,.15); border:1px solid rgba(20,184,162,.3); color:var(--teal-light); padding:5px 13px; border-radius:20px; font-size:.76rem; font-weight:700; letter-spacing:.05em; margin-bottom:16px; }
.product-spotlight h3 { color:var(--white); font-size:2.1rem; margin-bottom:12px; }
.product-spotlight p { color:rgba(255,255,255,.68); font-size:1rem; max-width:500px; line-height:1.68; margin-bottom:28px; }
.ps-stats { display:flex; gap:36px; margin-bottom:32px; }
.ps-stat .num { font-size:1.9rem; font-weight:800; color:var(--teal); }
.ps-stat .lbl { font-size:.78rem; color:rgba(255,255,255,.48); margin-top:3px; }
.ps-cta { position:relative; z-index:1; flex-shrink:0; }
.ps-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:32px; text-align:center; min-width:220px; }
.ps-card-icon { font-size:3rem; margin-bottom:10px; }
.ps-card h4 { color:rgba(255,255,255,.9); font-size:1.1rem; margin-bottom:6px; }
.ps-card p { color:rgba(255,255,255,.5); font-size:.87rem; margin-bottom:20px; line-height:1.6; }

/* =================== STRENGTH PILLS =================== */
.strength-pill { background:var(--grad-teal); color:var(--white); font-weight:700; text-align:center; padding:18px 14px; border-radius:var(--r-sm); font-size:.92rem; box-shadow:var(--shadow-teal); transition:all .22s; }
.strength-pill:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(20,184,162,.4); }

/* =================== METHODOLOGY =================== */
.method-row { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.method-step { padding-top:20px; }
.method-step .step-num { width:42px; height:42px; background:var(--grad-teal); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:16px; box-shadow:var(--shadow-teal); font-size:.95rem; }
.method-step h4 { font-size:1rem; margin-bottom:10px; }
.method-step ul { list-style:none; font-size:.86rem; color:rgba(255,255,255,.58); }
.method-step ul li { padding:4px 0; border-top:1px dashed rgba(255,255,255,.1); }
.method-step ul li:first-child { border-top:none; }

/* =================== TYPING CURSOR =================== */
.cursor { display:inline-block; width:3px; height:1em; background:var(--teal); vertical-align:middle; margin-left:2px; animation:blink 1s step-end infinite; }

/* =================== NAV DROPDOWNS =================== */
.has-dropdown { position:relative; }
.has-dropdown > a { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.dd-caret { transition:transform .2s; flex-shrink:0; }
.has-dropdown:hover .dd-caret { transform:rotate(180deg); }
.dropdown-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:8px; min-width:240px; box-shadow:0 20px 60px rgba(8,15,30,.15);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s, transform .18s, visibility .18s;
  z-index:400;
  /* invisible top padding bridges the gap so hover doesn't drop */
  margin-top:0;
}
/* invisible bridge between nav link and dropdown — fills the gap */
.dropdown-menu::before {
  content:''; position:absolute; top:-12px; left:0; right:0; height:12px;
}
/* arrow indicator */
.dropdown-menu::after {
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:12px; height:6px; background:#fff; clip-path:polygon(50% 0%,0% 100%,100% 100%);
  pointer-events:none;
}
.has-dropdown:hover .dropdown-menu {
  opacity:1; visibility:visible; pointer-events:all; transform:translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:var(--r-sm);
  font-size:.875rem; font-weight:600; color:var(--ink-mid);
  transition:all .14s; white-space:nowrap;
}
.dropdown-menu a:hover { background:var(--cream); color:var(--teal-dark); }
.dropdown-menu a.active { color:var(--teal-dark); }
.dm-icon { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.dm-divider { height:1px; background:var(--border); margin:6px 4px; }
.dm-badge { display:inline-block; background:var(--grad-teal); color:#fff; font-size:.58rem; font-weight:800; padding:2px 7px; border-radius:20px; letter-spacing:.04em; margin-left:auto; flex-shrink:0; }
.dm-soon { display:inline-block; background:rgba(100,116,139,.1); color:var(--ink-soft); font-size:.58rem; font-weight:700; padding:2px 7px; border-radius:20px; margin-left:auto; flex-shrink:0; }
.dm-view-all { color:var(--teal-dark)!important; font-weight:700!important; font-size:.83rem!important; }
.dm-view-all:hover { background:rgba(20,184,162,.08)!important; }
.dropdown-menu.dm-wide { min-width:270px; }
.dropdown-menu.dm-wide a { padding:9px 12px; font-size:.84rem; }

/* =================== MOBILE NAV =================== */
.mobile-toggle {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; background:none; border:none; cursor:pointer;
  padding:8px; z-index:210; -webkit-tap-highlight-color:transparent;
}
.mobile-toggle span { display:block; width:24px; height:2.5px; background:var(--navy); border-radius:2px; transition:all .28s cubic-bezier(.4,0,.2,1); }
.nav.nav-open .mobile-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav.nav-open .mobile-toggle span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav.nav-open .mobile-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mobile-menu {
  position:fixed; inset:0; z-index:190;
  background:rgba(8,15,30,.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:90px 40px 40px; gap:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s, visibility .28s;
}
.mobile-menu.open{opacity:1; visibility:visible; pointer-events:all;}
.mobile-menu a { font-size:1.65rem; font-weight:800; color:rgba(255,255,255,.72); padding:16px 0; border-bottom:1px solid rgba(255,255,255,.07); width:100%; text-align:center; transition:color .15s; display:block; }
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--teal);}
.mobile-menu a.product-link{color:var(--teal-light);}
.mobile-menu .mob-cta { margin-top:28px; background:var(--grad-teal); color:var(--white)!important; padding:16px 44px; border-radius:var(--r-sm); border-bottom:none!important; font-size:1.05rem!important; box-shadow:var(--shadow-teal); }
.mobile-menu .mob-close { position:absolute; top:24px; right:28px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; transition:all .15s; line-height:1; }
.mobile-menu .mob-close:hover{background:rgba(255,255,255,.14);color:#fff;}

/* =================== TECH STACK =================== */
@keyframes techFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-6px) rotate(1deg)} 66%{transform:translateY(-3px) rotate(-1deg)} }
.tech-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:44px; }
.tech-pill {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:40px; padding:10px 18px; font-weight:700;
  font-size:.84rem; color:rgba(255,255,255,.8); box-shadow:none;
  transition:all .22s; cursor:default;
}
.tech-pill:hover { border-color:rgba(20,184,162,.5); color:var(--teal-light); transform:translateY(-4px) scale(1.04); box-shadow:0 8px 24px rgba(20,184,162,.2); background:rgba(20,184,162,.08); }
.tech-pill .tp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* =================== TERMINAL CARD =================== */
.terminal { background:#0D1117; border-radius:var(--r-xl); overflow:hidden; box-shadow:0 28px 72px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); }
.terminal-bar { background:#161B22; padding:14px 20px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.06); }
.terminal-dot{width:12px;height:12px;border-radius:50%;}
.td-red{background:#FF5F56;} .td-yellow{background:#FFBD2E;} .td-green{background:#27C93F;}
.terminal-bar .t-title{margin-left:10px;font-size:.78rem;color:rgba(255,255,255,.32);font-weight:600;font-family:'Courier New',monospace;}
.terminal-body {padding:24px 28px; font-family:'Courier New',Courier,monospace; font-size:.83rem; line-height:2;}
.tl {display:block;}
.tp{color:#14B8A2;font-weight:700;margin-right:10px;user-select:none;}
.tc{color:rgba(255,255,255,.85);}
.tco{color:rgba(255,255,255,.28);font-style:italic;}
.to{color:#5EEAD4;}
.tow{color:#FBBF70;}
.tog{color:#4ADE80;}
.tor{color:#F87171;}
.tb{height:10px;display:block;}
.tcur::after{content:'▌';color:var(--teal);animation:blink .9s step-end infinite;}

/* =================== BENTO GRID =================== */
.bento-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; grid-template-rows:auto; gap:20px; margin-top:8px; }
.bento-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:36px 32px;
  transition:all .25s; position:relative; overflow:hidden; --mx:50%; --my:50%;
}
.bento-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-teal);transform:scaleX(0);transition:transform .3s;transform-origin:left;}
.bento-card::after{ content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),rgba(20,184,162,.06),transparent 65%);pointer-events:none;opacity:0;transition:opacity .25s; }
.bento-card:hover::before{transform:scaleX(1);}
.bento-card:hover::after{opacity:1;}
.bento-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(20,184,162,.2);}
.bento-card > * { position:relative;z-index:1; }
.bento-card.span2{grid-column:span 2;}
.bento-card.dark{background:var(--grad-navy);border-color:rgba(255,255,255,.06);}
.bento-card.dark h3,.bento-card.dark h4{color:var(--white);}
.bento-card.dark p{color:rgba(255,255,255,.58);}
.bento-icon{font-size:2.2rem;margin-bottom:16px;display:block;}
.bento-num{font-size:3.4rem;font-weight:800;color:var(--teal);line-height:1;margin-bottom:6px;}
.bento-sub{font-size:.8rem;color:var(--ink-soft);}
.bento-sub-dark{font-size:.8rem;color:rgba(255,255,255,.45);}
.bento-tag{display:inline-block;background:rgba(20,184,162,.15);border:1px solid rgba(20,184,162,.3);color:var(--teal);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:14px;}

/* =================== GLOW EFFECTS =================== */
@keyframes glowPulse {0%,100%{box-shadow:0 0 20px rgba(20,184,162,.2),0 0 60px rgba(20,184,162,.06)} 50%{box-shadow:0 0 40px rgba(20,184,162,.35),0 0 80px rgba(20,184,162,.12)}}
.glow-border{animation:glowPulse 3s ease-in-out infinite;}
@keyframes scanline{0%{top:-100%} 100%{top:100%}}
.scan-wrap{position:relative;overflow:hidden;}
.scan-wrap::after{content:'';position:absolute;left:0;right:0;height:30%;background:linear-gradient(transparent,rgba(20,184,162,.04),transparent);animation:scanline 4s linear infinite;pointer-events:none;}

/* =================== PHONE MOCKUP =================== */
.phone-mockup { width:220px; height:420px; background:#111827; border-radius:36px; border:8px solid #1F2937; box-shadow:0 32px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); position:relative; overflow:hidden; flex-shrink:0; }
.phone-notch { width:80px; height:22px; background:#111827; border-radius:0 0 14px 14px; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2; }
.phone-screen{padding:32px 14px 14px;height:100%;display:flex;flex-direction:column;gap:10px;}
.phone-stat-row{display:flex;gap:8px;}
.phone-stat-box{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;text-align:center;}
.phone-stat-box .n{font-size:1.1rem;font-weight:800;color:var(--teal);}
.phone-stat-box .l{font-size:.6rem;color:rgba(255,255,255,.4);margin-top:2px;}
.phone-chart-bar{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin:4px 0;}
.phone-chart-fill{height:100%;background:var(--grad-teal);border-radius:3px;}
.phone-alert{background:rgba(20,184,162,.12);border:1px solid rgba(20,184,162,.3);border-radius:8px;padding:8px 10px;font-size:.65rem;color:var(--teal);font-weight:700;}

/* =================== RESPONSIVE =================== */
@media (max-width:1020px) {
  .hero { min-height:auto; padding:60px 0 50px; }
  .hero-wrap { grid-template-columns:1fr; gap:48px; }
  .hero-visual { display:none; }
  .product-hero-inner { grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .method-row { grid-template-columns:repeat(2,1fr); }
  .case-card { grid-template-columns:1fr; }
  .case-body { padding:28px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .nav-links { display:none; }
  .mobile-toggle { display:flex; }
  .nav-cta { display:none; }
  .form-row { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .steps-row { grid-template-columns:1fr; }
  .steps-row::before { display:none; }
  .product-spotlight { grid-template-columns:1fr; padding:36px 28px; }
  .cta-block { padding:48px 28px; }
  .results-grid { grid-template-columns:1fr; }
  .savings-strip .wrap { gap:0; }
  .savings-item { padding:10px 20px; }
  .wrap { padding:0 20px; }
  .bento-grid { grid-template-columns:1fr 1fr; }
  .bento-card.span2 { grid-column:span 2; }
  .ind-grid { grid-template-columns:repeat(2,1fr); }
  .proc-row { grid-template-columns:repeat(2,1fr); }
  .proc-connector { display:none; }
  .globe-row { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .bento-grid { grid-template-columns:1fr; }
  .bento-card.span2 { grid-column:span 1; }
  .tech-grid { gap:8px; }
  .tech-pill { font-size:.78rem; padding:8px 14px; }
  .hero-stats { gap:24px; }
  .hero-stat .num { font-size:1.8rem; }
  .footer-grid { grid-template-columns:1fr; }
  section { padding:64px 0; }
  .pricing-card { padding:28px; }
  .ind-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ind-card { padding:20px 16px; }
  .proc-row { grid-template-columns:1fr; }
  .globe-row { grid-template-columns:1fr; }
}