/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
  font-family:var(--font-body);
  background:var(--navy-900);
  color:var(--ink-100);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font:inherit;}
svg{display:block;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.08;
  color:var(--white);
}
.light-section h1,.light-section h2,.light-section h3,.light-section h4{color:var(--navy-900);}

h1{font-size:clamp(2.4rem,5vw,4rem);}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem);}
h3{font-size:clamp(1.25rem,2vw,1.6rem);}
p{color:var(--ink-300);}
.light-section p{color:#4b5470;}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.section{padding:clamp(64px,10vw,120px) 0;position:relative;}
.light-section{background:#f6f8fd;}
.dark-section{background:var(--navy-900);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-300);
  background:rgba(46,107,255,.1);
  border:1px solid rgba(91,139,255,.25);
  padding:6px 14px;border-radius:var(--r-pill);
  margin-bottom:18px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400);}
.light-section .eyebrow{color:var(--blue-500);background:rgba(46,107,255,.08);}

.section-head{max-width:680px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head p{margin-top:14px;font-size:1.05rem;}

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

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-pill);
  font-weight:600;font-size:.96rem;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  position:relative;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn:active{transform:scale(.97);}
.btn-wa{
  background:var(--wa-green);color:#062b16;
  box-shadow:var(--shadow-glow-wa);
}
.btn-wa:hover{background:#2fe073;transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(37,211,102,.6);}
.btn-primary{
  background:var(--grad-brand);color:var(--white);
  box-shadow:var(--shadow-glow-blue);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px -8px rgba(91,139,255,.55);}
.btn-outline{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.2);
  color:var(--white);
  backdrop-filter:blur(8px);
}
.btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.35);transform:translateY(-2px);}
.light-section .btn-outline{background:#fff;border-color:#dde3f3;color:var(--navy-900);}
.light-section .btn-outline:hover{border-color:var(--blue-400);}
.card-light .btn-outline{background:#fff;border-color:#dde3f3;color:var(--navy-900);}
.card-light .btn-outline:hover{background:#f3f6ff;border-color:var(--blue-400);}
.btn-sm{padding:10px 18px;font-size:.85rem;}
.btn-block{width:100%;}

/* ============ GLASS / CARD ============ */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-lg);
}
.card-light{
  background:var(--card-light);
  border:1px solid var(--card-light-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.card-light:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue-300);}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(46,107,255,.1);color:var(--blue-500);
  border:1px solid rgba(46,107,255,.2);
}
.badge svg{width:14px;height:14px;flex-shrink:0;}
.badge-violet{background:rgba(123,92,255,.1);color:var(--violet-500);border-color:rgba(123,92,255,.25);}
.badge-demo{background:rgba(123,92,255,.12);color:#6a4bff;border:1px solid rgba(123,92,255,.3);font-weight:700;}
.badge-wa{background:rgba(37,211,102,.12);color:var(--wa-green-dark);border-color:rgba(37,211,102,.3);}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}

/* ============ UTIL ============ */
.mono{font-family:var(--font-mono);}
.center{text-align:center;}
.mt-lg{margin-top:48px;}
.flex{display:flex;}
.gap-sm{gap:12px;}
.gap-md{gap:20px;}
.grid{display:grid;gap:24px;}
.hide-mobile{display:block;}
.show-mobile{display:none;}
@media (max-width:760px){
  .hide-mobile{display:none;}
  .show-mobile{display:block;}
}
.skip-link{position:absolute;left:-999px;top:0;background:var(--blue-500);color:#fff;padding:10px 16px;border-radius:8px;z-index:999;}
.skip-link:focus{left:12px;top:12px;}