/* ============================================================
   AVALAN — MARKETING LANDING PAGE  ·  v2 design pass
   Brand tokens are locked (deep ink + mint pulse). The v2 pass
   sharpens type, adds the "pulse line" signature motif, gradient
   card borders, an insight ticker, and calmer, deeper surfaces.
   ============================================================ */
:root{
  --success-color: #00ffa6;
  --mint-deep: #0b6b47;
  --blue-color: #97cff3;
  --bg-primary: #ffffff;
  --bg-warm: #f7faf9;
  --text-dark: #0e1513;
  --text-muted: #6b7672;
  --brand-green: #c3f2df;
  --card-dark: #0b1210;      /* deepened ink */
  --card-dark-2: #101917;
  --card-dark-3: #16211d;
  --gray-light: #f3f6f5;

  --font-family: -apple-system, BlinkMacSystemFont, 'Onest', 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Onest', var(--font-family);
  --font-body: 'Inter', var(--font-family);
  --font-accent: 'Poppins', var(--font-family);

  --line: rgba(14,21,19,.10);
  --line-soft: rgba(14,21,19,.06);
  --line-dark: rgba(255,255,255,.09);
  --mint-06: rgba(0,255,166,.06);
  --mint-08: rgba(0,255,166,.08);
  --mint-14: rgba(0,255,166,.14);
  --mint-24: rgba(0,255,166,.24);
  --mint-40: rgba(0,255,166,.40);
  --amber: #f5b942;
  --red: #ff6a6a;

  --shadow-soft: 0 1px 2px rgba(11,18,16,.05), 0 6px 20px rgba(11,18,16,.05);
  --shadow-card: 0 1px 1px rgba(11,18,16,.04), 0 16px 40px rgba(11,18,16,.08);
  --shadow-lift: 0 30px 70px rgba(11,18,16,.20);
  --shadow-dark-card: 0 40px 90px rgba(0,0,0,.5);

  --radius-xs: 10px; --radius-sm: 14px; --radius-md: 18px; --radius-lg: 26px; --radius-xl: 34px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);
  --ink: var(--text-dark);
  --ink-deep: #0b1210;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ padding:0; margin:0; }
body{ font-family: var(--font-body), var(--font-family); color: var(--text-dark); background: var(--bg-primary); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
input{ font:inherit; }
::selection{ background:var(--success-color); color:var(--card-dark); }

.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{ position:absolute; left:1rem; top:-60px; z-index:999; background:var(--card-dark); color:#fff; padding:.75rem 1.25rem; border-radius:var(--radius-xs); transition:top .2s var(--ease); font-family:var(--font-accent); }
.skip-link:focus{ top:1rem; }
:focus-visible{ outline:2px solid var(--success-color); outline-offset:3px; border-radius:4px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }

/* ---- Eyebrow: pulse-line prefix (signature motif) ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-accent); font-weight:600; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep); }
.on-dark .eyebrow, .hero .eyebrow{ color:var(--success-color); }
.eyebrow::before{ content:""; width:26px; height:10px; flex:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10' fill='none'%3E%3Cpath d='M0 5h6l2.5-4 4 8 2.5-6 2 2h9' stroke='%2300cc85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.on-dark .eyebrow::before, .hero .eyebrow::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10' fill='none'%3E%3Cpath d='M0 5h6l2.5-4 4 8 2.5-6 2 2h9' stroke='%2300ffa6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

h2.h2, .h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.028em; font-size:clamp(1.95rem,3.6vw,2.85rem); line-height:1.1; color:var(--text-dark); text-wrap:balance; }
.on-dark .h2{ color:#fff; }
.h2 em{ font-style:normal; color:var(--mint-deep); position:relative; white-space:nowrap; }
.on-dark .h2 em{ color:var(--success-color); }
.lead{ font-family:var(--font-body); font-size:clamp(1rem,1.2vw,1.13rem); line-height:1.7; color:var(--text-muted); max-width:48ch; text-wrap:pretty; }
.on-dark .lead{ color:rgba(255,255,255,.6); }

/* ---- Buttons: sheen sweep + spring ---- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-accent); font-weight:600; font-size:.95rem; padding:.95rem 1.6rem; border-radius:999px; overflow:hidden; transition: transform .28s var(--ease-soft), box-shadow .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease; white-space:nowrap; }
.btn i{ font-size:.85em; transition: transform .3s var(--ease); }
.btn:hover i{ transform: translateX(3px); }
.btn::after{ content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); transition:left .6s var(--ease); pointer-events:none; }
.btn:hover::after{ left:130%; }
.btn-primary{ background:var(--success-color); color:var(--card-dark); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 12px 30px -10px rgba(0,255,166,.5); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 20px 42px -10px rgba(0,255,166,.6); }
.btn-ghost{ background:transparent; color:var(--text-dark); border:1.5px solid var(--line); }
.btn-ghost::after{ display:none; }
.btn-ghost:hover{ border-color:var(--text-dark); transform:translateY(-2px); }
.on-dark .btn-ghost, .hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.22); }
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover{ border-color:var(--success-color); color:var(--success-color); }
.btn-dark{ background:var(--card-dark); color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.btn-sm{ padding:.6rem 1.15rem; font-size:.85rem; }

/* ============================================================ NAV ============================================================ */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:200; padding:1.3rem 0; transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent; }
.site-header.scrolled{ padding:.75rem 0; background:rgba(255,255,255,.8); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); border-bottom:1px solid var(--line-soft); box-shadow:0 8px 30px rgba(11,18,16,.05); }
.site-header.scrolled .logo, .site-header.scrolled .nav-toggle{ color:var(--text-dark); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.logo{ color:#fff; display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; transition:color .3s ease; }
.logo img{ border-radius:9px; }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ font-family:var(--font-accent); font-weight:500; font-size:.9rem; color:var(--text-muted); position:relative; padding:.3rem 0; transition:color .25s ease; }
.site-header:not(.scrolled) .nav-links a{ color:rgba(255,255,255,.65); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--success-color); border-radius:2px; transition:width .3s var(--ease); }
.nav-links a:hover{ color:var(--text-dark); }
.site-header:not(.scrolled) .nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:1rem; }
.nav-actions .btn-login{ font-family:var(--font-accent); font-weight:600; font-size:.9rem; color:rgba(255,255,255,.85); transition:color .3s ease; }
.site-header.scrolled .btn-login{ color:var(--text-dark); }
.site-header:not(.scrolled) .nav-actions .btn-dark{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.site-header:not(.scrolled) .nav-actions .btn-dark:hover{ background:var(--success-color); color:var(--card-dark); border-color:var(--success-color); }
.nav-toggle{ display:none; width:42px; height:42px; border-radius:50%; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2); font-size:1.1rem; color:#fff; transition:color .3s ease, border-color .3s ease; }
.site-header.scrolled .nav-toggle{ border-color:var(--line); }

.mobile-panel{ position:fixed; inset:0; z-index:300; background:var(--card-dark); color:#fff; display:flex; flex-direction:column; padding:1.6rem clamp(1.25rem,5vw,2.5rem); transform:translateY(-100%); transition:transform .45s var(--ease-soft); }
.mobile-panel.open{ transform:translateY(0); }
.mobile-panel-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-close{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; }
.mobile-links{ display:flex; flex-direction:column; margin-top:2.6rem; max-height:60vh; overflow-y:auto; }
.mobile-links a{ font-family:var(--font-display); font-size:1.55rem; font-weight:600; padding:.75rem 0; border-bottom:1px solid var(--line-dark); color:#fff; display:flex; justify-content:space-between; align-items:center; }
.mobile-links a::after{ content:"→"; color:var(--mint-40); font-size:1.1rem; }
.mobile-cta{ margin-top:auto; display:flex; flex-direction:column; gap:.8rem; padding-top:1.6rem; }
.mobile-cta .btn{ width:100%; }

/* ============================================================ HERO ============================================================ */
.hero{ position:relative; background:var(--card-dark); color:#fff; padding:clamp(7.5rem,14vw,10.5rem) 0 clamp(4rem,7vw,5.5rem); overflow:hidden; isolation:isolate; }
/* dot grid texture */
.hero::before{ content:""; position:absolute; inset:0; z-index:-3;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%); }
/* mint aurora */
.hero::after{ content:""; position:absolute; top:-30%; left:-15%; width:70%; height:110%; z-index:-2;
  background:radial-gradient(closest-side, var(--mint-14), transparent 70%); filter:blur(30px); }
.hero-wave{ position:absolute; left:0; right:0; top:8%; width:100%; height:340px; opacity:.25; z-index:-1; pointer-events:none; }
.hero-wave path{ stroke-dasharray:14 10; animation: waveflow 5s linear infinite; }
@keyframes waveflow{ to{ stroke-dashoffset:-240; } }
.hero-spotlight{ position:absolute; top:0; left:0; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; background:radial-gradient(circle, var(--mint-14), transparent 68%); pointer-events:none; z-index:-1; opacity:0; transform:translate3d(-9999px,-9999px,0); transition:opacity .6s ease, transform .16s cubic-bezier(.22,1,.36,1); will-change:transform, opacity; }
.hero-spotlight.active{ opacity:1; }
.btn.is-tracking{ will-change:transform; transition:transform .12s cubic-bezier(.22,1,.36,1), box-shadow .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease; }
.btn.is-releasing{ transition:transform .6s var(--ease-spring), box-shadow .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease; }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hero-copy .eyebrow{ margin-bottom:1.4rem; }
.hero-copy h1{ font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(2.6rem,5vw,4.1rem); line-height:1.05; color:#fff; text-wrap:balance; }
.hero-copy h1 em{ font-style:normal; color:var(--success-color); position:relative; display:inline-block; }
/* signature: pulse underline drawn under the key word */
.hero-copy h1 em .pulse-underline{ position:absolute; left:0; right:0; bottom:-.18em; height:.32em; overflow:visible; }
.hero-copy h1 em .pulse-underline path{ stroke:var(--success-color); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:320; stroke-dashoffset:320; animation:pulseDraw 1.4s var(--ease-soft) .9s forwards; filter:drop-shadow(0 0 6px rgba(0,255,166,.55)); }
@keyframes pulseDraw{ to{ stroke-dashoffset:0; } }
.hero-copy .lead{ margin-top:1.5rem; color:rgba(255,255,255,.62); max-width:44ch; font-size:clamp(1.02rem,1.3vw,1.16rem); }
.hero-cta{ display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }
.hero-reassure{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem; font-family:var(--font-accent); font-size:.8rem; color:rgba(255,255,255,.55); }
.hero-reassure span{ display:inline-flex; align-items:center; gap:.4rem; }
.hero-reassure i{ color:var(--success-color); font-size:.85em; }

/* ---- Phone mockup ---- */
.hero-visual{ position:relative; height:100%; min-height:520px; display:flex; align-items:center; justify-content:center; }
.tilt-wrap{ perspective:1400px; position:relative; }
/* halo ring behind phone */
.tilt-wrap::before{ content:""; position:absolute; inset:-60px; border-radius:50%; border:1px solid var(--mint-14); z-index:-1; animation:haloSpin 30s linear infinite; background:radial-gradient(circle, transparent 55%, var(--mint-06) 100%); }
.tilt-wrap::after{ content:""; position:absolute; top:-60px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--success-color); box-shadow:0 0 12px 2px var(--mint-40); z-index:-1; animation:haloSpin 30s linear infinite; transform-origin:4px calc(50% + 60px + 260px); }
@keyframes haloSpin{ to{ transform:rotate(360deg); } }
.phone{ position:relative; width:292px; background:linear-gradient(160deg, #18241f, #0d1513); border:1px solid var(--line-dark); border-radius:42px; padding:.9rem; box-shadow:var(--shadow-dark-card), 0 0 0 1px rgba(0,255,166,.05); transform-style:preserve-3d; transition:transform .2s var(--ease-soft); animation:phoneBreathe 7s ease-in-out infinite; }
@keyframes phoneBreathe{ 0%,100%{ box-shadow:var(--shadow-dark-card), 0 0 0 0 rgba(0,255,166,0);} 50%{ box-shadow:var(--shadow-dark-card), 0 0 40px 5px rgba(0,255,166,.12);} }
.phone-notch{ width:90px; height:22px; background:var(--card-dark); border-radius:0 0 14px 14px; margin:0 auto .6rem; }
.phone-screen{ background:var(--card-dark); border-radius:28px; padding:1.3rem 1.1rem 1.5rem; }
.phone-status{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.phone-status .brand{ display:flex; align-items:center; gap:.45rem; font-family:var(--font-accent); font-weight:600; font-size:.78rem; color:rgba(255,255,255,.85); }
.pulse-mini{ width:14px; height:14px; }
.pulse-mini path{ stroke-dasharray:6 4; animation: waveflow 3s linear infinite; }
.thinking{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-accent); font-size:.66rem; color:var(--success-color); }
.thinking .wave{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.thinking .wave span{ width:2px; background:var(--success-color); border-radius:1px; animation:waveBar 1.3s ease-in-out infinite; }
.thinking .wave span:nth-child(1){ animation-delay:0s; } .thinking .wave span:nth-child(2){ animation-delay:.15s; }
.thinking .wave span:nth-child(3){ animation-delay:.3s; } .thinking .wave span:nth-child(4){ animation-delay:.45s; }
@keyframes waveBar{ 0%,100%{ height:3px;} 50%{ height:11px;} }

.score-row{ display:flex; align-items:center; gap:1rem; padding:1rem; background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:var(--radius-md); }
.score-ring{ width:64px; height:64px; flex:none; position:relative; }
.score-ring svg{ transform:rotate(-90deg); }
.score-ring::after{ content:""; position:absolute; inset:22px; border-radius:50%; background:var(--success-color); opacity:.5; filter:blur(3px); animation:orbBreathe 5s ease-in-out infinite; }
.score-ring-fg{ stroke-dasharray:175; stroke-dashoffset:175; transition: stroke-dashoffset 1.4s var(--ease-soft); }
.score-text b{ display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:#fff; }
.score-text span{ font-family:var(--font-accent); font-size:.7rem; color:rgba(255,255,255,.5); }

.phone-bubble{ margin-top:1rem; background:rgba(0,255,166,.08); border:1px solid var(--mint-24); border-radius:var(--radius-md); padding:.85rem .95rem; display:flex; gap:.6rem; }
.phone-bubble i{ color:var(--success-color); font-size:1rem; margin-top:.1rem; flex:none; }
.phone-bubble p{ font-family:var(--font-body); font-size:.8rem; line-height:1.5; color:rgba(255,255,255,.85); min-height:2.4em; }
.phone-bubble .cursor{ display:inline-block; width:2px; height:.9em; background:rgba(255,255,255,.6); vertical-align:middle; margin-left:2px; animation: blink 1s step-start infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.phone-goal{ margin-top:1rem; }
.phone-goal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.phone-goal-top span{ font-family:var(--font-accent); font-size:.72rem; color:rgba(255,255,255,.6); }
.phone-goal-top b{ font-family:var(--font-accent); font-size:.72rem; color:var(--success-color); }
.bar-track{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--mint-deep), var(--success-color)); width:0%; transition: width 1.2s var(--ease-soft); }

.floating-bubble{ position:absolute; top:0; right:-7%; width:212px; background:#fff; color:var(--text-dark); border-radius:var(--radius-lg); border-bottom-right-radius:8px; padding:1rem 1.1rem; box-shadow:var(--shadow-lift); font-family:var(--font-body); font-size:.82rem; line-height:1.45; animation: float-y 6s ease-in-out infinite; transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft); }
.floating-bubble .tag{ font-family:var(--font-accent); font-weight:600; font-size:.66rem; color:var(--mint-deep); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:.3rem; }
@keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.floating-tag{ position:absolute; bottom:6%; left:-10%; background:var(--brand-green); color:var(--card-dark); border-radius:var(--radius-md); padding:.75rem .95rem; box-shadow:var(--shadow-lift); display:flex; align-items:center; gap:.55rem; font-family:var(--font-accent); font-weight:600; font-size:.78rem; animation: float-y 7s ease-in-out infinite 1s; }
.floating-tag i{ color:var(--mint-deep); }

/* ============================================================ INSIGHT TICKER (new) ============================================================ */
.ticker{ position:relative; background:var(--card-dark); border-top:1px solid var(--line-dark); padding:1rem 0; overflow:hidden; }
.ticker::before, .ticker::after{ content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.ticker::before{ left:0; background:linear-gradient(90deg, var(--card-dark), transparent); }
.ticker::after{ right:0; background:linear-gradient(-90deg, var(--card-dark), transparent); }
.ticker-track{ display:flex; gap:3rem; width:max-content; animation:tickerMove 42s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tickerMove{ to{ transform:translateX(-50%); } }
.ticker-item{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-accent); font-size:.8rem; font-weight:500; color:rgba(255,255,255,.55); white-space:nowrap; }
.ticker-item i{ color:var(--success-color); font-size:.9rem; }
.ticker-item b{ color:#fff; font-weight:600; }

/* ============================================================ TRUST STRIP ============================================================ */
.trust-strip{ background:var(--bg-warm); border-bottom:1px solid var(--line-soft); padding:2.2rem 0; }
.trust-row{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.trust-label{ font-family:var(--font-accent); font-weight:600; font-size:.85rem; color:var(--text-muted); white-space:nowrap; }
.trust-items{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-accent); font-size:.86rem; color:var(--text-dark); font-weight:500; }
.trust-item i{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0; font-size:1.02rem; color:var(--mint-deep);
  background:linear-gradient(180deg, #fff, #f2fcf8); border:1px solid rgba(0,255,166,.16); border-radius:14px;
  box-shadow:0 4px 12px rgba(11,18,16,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .25s var(--ease-spring), box-shadow .25s ease, border-color .25s ease; }
.trust-item:hover i{ transform:translateY(-3px) rotate(-4deg); border-color:rgba(0,255,166,.4); box-shadow:0 10px 24px rgba(0,255,166,.16), 0 0 0 6px rgba(0,255,166,.06); }

/* ============================================================ SECTION SCAFFOLDING ============================================================ */
.section{ padding:clamp(5rem,9vw,7.5rem) 0; position:relative; }
.section.on-dark{ background:var(--card-dark); color:#fff; }
.section-head{ max-width:660px; margin-bottom:3.4rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:1rem; }
.section-head .h2{ margin-top:.3rem; }
.section-head .lead{ margin-top:1.15rem; }
.section-head.center .lead{ margin-left:auto; margin-right:auto; }
.section-head.center .eyebrow{ justify-content:center; }

.reveal{ opacity:0; transform:translateY(28px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ---- Why Avalan: problem cards with strike → solution ---- */
.ps-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.ps-card{ position:relative; background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:1.7rem 1.8rem; box-shadow:var(--shadow-soft); overflow:hidden; transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s ease; }
.ps-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--success-color), transparent); opacity:0; transition:opacity .35s ease; }
.ps-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--mint-24); }
.ps-card:hover::before{ opacity:1; }
.ps-problem{ font-family:var(--font-body); font-size:1rem; color:var(--text-muted); position:relative; display:inline; background-image:linear-gradient(var(--red), var(--red)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 58%; transition:background-size .7s var(--ease-soft) .1s; }
.ps-card.in-view .ps-problem{ background-size:100% 2px; }
.ps-problem::before{ content:"“"; } .ps-problem::after{ content:"”"; }
.ps-solution{ margin-top:1rem; font-family:var(--font-accent); font-weight:600; font-size:1rem; color:var(--text-dark); display:flex; align-items:flex-start; gap:.6rem; }
.ps-solution i{ color:var(--mint-deep); flex:none; width:24px; height:24px; border-radius:8px; background:var(--brand-green); display:flex; align-items:center; justify-content:center; font-size:.72rem; margin-top:.05rem; }

/* ---- Feature rows ---- */
.feature-row{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.feature-row.flip{ direction:rtl; }
.feature-row.flip > *{ direction:ltr; }
.feature-copy .eyebrow{ margin-bottom:1.1rem; }
.feature-copy .h2{ margin-top:.4rem; }
.feature-copy .lead{ margin-top:1rem; }
.feature-points{ margin-top:1.7rem; display:flex; flex-direction:column; gap:.9rem; }
.feature-points li{ display:flex; align-items:flex-start; gap:.75rem; font-family:var(--font-body); font-size:.95rem; color:var(--text-dark); }
.feature-points i{ color:var(--mint-deep); flex:none; width:24px; height:24px; border-radius:8px; background:var(--brand-green); display:flex; align-items:center; justify-content:center; font-size:.7rem; margin-top:.05rem; }
.on-dark .feature-points li{ color:rgba(255,255,255,.85); }

/* gradient-border dark panel utility */
.gborder{ position:relative; border-radius:var(--radius-xl); background:linear-gradient(160deg, rgba(0,255,166,.35), rgba(255,255,255,.06) 30%, rgba(255,255,255,.04) 70%, rgba(0,255,166,.18)); padding:1px; }
.gborder > .gborder-inner{ background:var(--card-dark); border-radius:calc(var(--radius-xl) - 1px); }

.chat-panel{ padding:1.7rem; position:relative; }
.chat-panel-top{ display:flex; align-items:center; gap:.6rem; padding-bottom:1rem; border-bottom:1px solid var(--line-dark); margin-bottom:1.2rem; }
.chat-avatar{ position:relative; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #eafff5, var(--success-color) 55%, var(--mint-deep) 100%); animation:orbBreathe 5.5s ease-in-out infinite; }
@keyframes orbBreathe{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,255,166,.35); transform:scale(1);} 50%{ box-shadow:0 0 14px 3px rgba(0,255,166,.3); transform:scale(1.08);} }
.chat-panel-top span{ font-family:var(--font-accent); font-weight:600; color:#fff; font-size:.92rem; }
.chat-live{ margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-accent); font-size:.68rem; color:var(--success-color); }
.chat-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--success-color); animation:pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:.3; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }
.chat-log{ display:flex; flex-direction:column; gap:.9rem; min-height:230px; }
.msg{ max-width:85%; padding:.8rem 1.05rem; border-radius:var(--radius-md); font-family:var(--font-body); font-size:.92rem; line-height:1.55; animation:msgIn .45s var(--ease-soft); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px) scale(.98);} to{ opacity:1; transform:none;} }
.msg.user{ align-self:flex-end; background:var(--success-color); color:var(--card-dark); border-bottom-right-radius:6px; font-weight:500; }
.msg.ai{ align-self:flex-start; background:rgba(255,255,255,.05); color:rgba(255,255,255,.88); border:1px solid var(--line-dark); border-bottom-left-radius:6px; }
.msg.ai .typing{ display:inline-flex; align-items:flex-end; gap:3px; height:13px; }
.msg.ai .typing span{ width:3px; background:var(--success-color); border-radius:1px; animation:waveBar 1.3s ease-in-out infinite; }
.msg.ai .typing span:nth-child(2){ animation-delay:.15s; }
.msg.ai .typing span:nth-child(3){ animation-delay:.3s; }
.prompt-chips{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }
.prompt-chip{ font-family:var(--font-accent); font-size:.8rem; font-weight:500; color:rgba(255,255,255,.75); border:1px solid var(--line-dark); padding:.55rem .95rem; border-radius:999px; transition: all .25s ease; }
.prompt-chip:hover{ border-color:var(--mint-40); color:#fff; }
.prompt-chip.active{ background:var(--success-color); color:var(--card-dark); border-color:var(--success-color); }
.chat-quiet-cta{ margin-top:1.15rem; text-align:center; font-family:var(--font-body); font-size:.78rem; color:rgba(255,255,255,.4); }
.chat-quiet-cta a{ color:var(--success-color); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--mint-24); transition:text-decoration-color .25s ease; }
.chat-quiet-cta a:hover{ text-decoration-color:var(--success-color); }

/* ---- Daily timeline ---- */
.timeline{ position:relative; margin-top:1rem; }
.timeline-line{ position:absolute; left:27px; top:10px; bottom:10px; width:2px; background: repeating-linear-gradient(180deg, var(--mint-24) 0 8px, transparent 8px 14px); }
.timeline-line-fill{ position:absolute; left:27px; top:10px; width:2px; height:0%; background:linear-gradient(180deg, var(--success-color), var(--mint-40)); box-shadow:0 0 10px rgba(0,255,166,.4); transition:height .1s linear; }
.timeline-row{ display:grid; grid-template-columns:56px 1fr; gap:1.4rem; padding:1.3rem 0; align-items:flex-start; }
.timeline-icon{ width:56px; height:56px; border-radius:18px; background:var(--mint-08); border:1px solid var(--mint-24); display:flex; align-items:center; justify-content:center; color:var(--success-color); font-size:1.3rem; position:relative; z-index:1; transition:box-shadow .4s ease, transform .4s var(--ease-spring), background .4s ease; }
.timeline-row.passed .timeline-icon{ box-shadow:0 0 0 6px var(--mint-08), 0 0 22px rgba(0,255,166,.25); transform:scale(1.06); background:var(--mint-14); }
.timeline-body{ padding-top:.4rem; }
.timeline-time{ font-family:var(--font-accent); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--success-color); opacity:.75; }
.timeline-body h3{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; color:#fff; margin-top:.4rem; letter-spacing:-.01em; }
.timeline-body p{ font-family:var(--font-body); font-size:.9rem; color:rgba(255,255,255,.55); margin-top:.5rem; line-height:1.65; max-width:52ch; }

/* ---- Product showcase (tabs) ---- */
.showcase-frame{ overflow:hidden; box-shadow:var(--shadow-lift); }
.showcase-frame .gborder-inner{ overflow:hidden; }
.showcase-tabbar{ display:flex; gap:.35rem; padding:1rem 1rem .9rem; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line-dark); }
.showcase-tabbar::-webkit-scrollbar{ display:none; }
.showcase-tab{ flex:none; font-family:var(--font-accent); font-weight:600; font-size:.82rem; color:rgba(255,255,255,.55); padding:.6rem 1.05rem; border-radius:999px; border:1px solid transparent; transition: all .25s ease; white-space:nowrap; }
.showcase-tab:hover{ color:#fff; border-color:var(--line-dark); }
.showcase-tab[aria-selected="true"]{ background:var(--success-color); color:var(--card-dark); }
.showcase-body{ padding:1.9rem; min-height:340px; color:#fff; }
.showcase-panel{ animation: panelIn .4s var(--ease-soft); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

.sc-balance .amount{ font-family:var(--font-display); font-weight:800; font-size:2.3rem; letter-spacing:-.02em; }
.sc-balance .delta{ font-family:var(--font-accent); font-size:.8rem; color:var(--success-color); margin-left:.5rem; }
.sc-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--line-dark); }
.sc-row:last-child{ border-bottom:none; }
.sc-row .name{ font-family:var(--font-accent); font-weight:600; font-size:.9rem; }
.sc-row .sub{ font-family:var(--font-body); font-size:.76rem; color:rgba(255,255,255,.5); margin-top:.2rem; }
.sc-row .val{ font-family:var(--font-display); font-weight:600; font-size:.95rem; }
.sc-bar-wrap{ margin-top:.5rem; }
.sc-bar-track{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.sc-bar-fill{ height:100%; border-radius:999px; width:0%; transition:width 1.1s var(--ease-soft); }
.sc-goal{ padding:1rem 0; border-bottom:1px solid var(--line-dark); }
.sc-goal:last-child{ border-bottom:none; }
.sc-goal-top{ display:flex; justify-content:space-between; gap:1rem; margin-bottom:.6rem; font-family:var(--font-accent); font-size:.86rem; font-weight:600; }
.sc-goal-top span{ font-weight:500; color:rgba(255,255,255,.5); }
.sc-limit-tag{ font-family:var(--font-accent); font-size:.68rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; }
.sc-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line-dark); font-family:var(--font-accent); font-size:.74rem; transition:border-color .25s ease, background .25s ease; }
.sc-chip:hover{ border-color:var(--mint-40); background:var(--mint-08); }
.sc-chip i{ color:var(--success-color); }
.sc-card-visual{ background:linear-gradient(135deg,#1c2b25,#0a120f); border:1px solid var(--line-dark); border-radius:var(--radius-lg); padding:1.4rem; max-width:340px; position:relative; overflow:hidden; transition:filter .4s ease; }
.sc-card-visual::before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:14px 14px; }
.sc-card-visual::after{ content:""; position:absolute; top:-40%; right:-20%; width:220px; height:220px; background: radial-gradient(circle, var(--mint-14), transparent 70%); }
.sc-card-visual .brand{ font-family:var(--font-accent); font-weight:700; font-size:.78rem; letter-spacing:.14em; color:rgba(255,255,255,.7); }
.sc-card-visual .num{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.14em; margin-top:1.6rem; }
.sc-card-visual .meta{ display:flex; justify-content:space-between; margin-top:1.4rem; font-family:var(--font-accent); font-size:.7rem; color:rgba(255,255,255,.5); }
.sc-freeze-row{ display:flex; align-items:center; justify-content:space-between; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line-dark); }
.sc-freeze-row span{ font-family:var(--font-accent); font-weight:600; font-size:.86rem; }
.sc-stat-chart{ width:100%; height:150px; }
.sc-stat-chart rect{ transform-box:fill-box; transform-origin:bottom; animation:statGrow .75s var(--ease-soft) backwards; }
.sc-stat-chart rect:nth-child(1){ animation-delay:.02s; } .sc-stat-chart rect:nth-child(2){ animation-delay:.08s; }
.sc-stat-chart rect:nth-child(3){ animation-delay:.14s; } .sc-stat-chart rect:nth-child(4){ animation-delay:.2s; }
.sc-stat-chart rect:nth-child(5){ animation-delay:.26s; } .sc-stat-chart rect:nth-child(6){ animation-delay:.32s; }
.sc-stat-chart rect:nth-child(7){ animation-delay:.38s; }
@keyframes statGrow{ from{ transform:scaleY(0); opacity:.4; } to{ transform:scaleY(1); opacity:1; } }
.sc-chat{ display:flex; flex-direction:column; gap:.7rem; }

.switch{ position:relative; width:44px; height:26px; flex:none; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.switch .track{ position:absolute; inset:0; background:#d5dbd9; border-radius:999px; transition: background .25s ease; }
.switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease-spring); }
.switch input:checked + .track{ background:var(--success-color); }
.switch input:checked ~ .thumb{ transform:translateX(18px); }
.switch input:focus-visible + .track{ outline:2px solid var(--success-color); outline-offset:2px; }
.on-dark .switch .track{ background:rgba(255,255,255,.14); }

/* ---- Privacy panel ---- */
.privacy-panel{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-xl); padding:1.9rem; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.privacy-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--success-color), transparent 70%); }
.privacy-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line-soft); }
.privacy-row:last-of-type{ border-bottom:none; }
.privacy-row .label b{ display:block; font-family:var(--font-accent); font-weight:600; font-size:.92rem; }
.privacy-row .label span{ font-family:var(--font-body); font-size:.8rem; color:var(--text-muted); }
.visibility-summary{ margin-top:1.4rem; background:var(--bg-warm); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:1rem 1.2rem; }
.visibility-summary span{ font-family:var(--font-accent); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mint-deep); }
.visibility-summary p{ margin-top:.45rem; font-family:var(--font-body); font-size:.9rem; line-height:1.55; color:var(--text-dark); }

/* ============================================================ CHART CARD ============================================================ */
.chart-card{ padding:clamp(1.6rem,4vw,2.4rem); }
.chart-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.6rem; }
.chart-top h3{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:#fff; }
.chart-toggle{ display:flex; background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:999px; padding:.25rem; gap:.2rem; }
.chart-toggle button{ font-family:var(--font-accent); font-weight:600; font-size:.78rem; padding:.45rem 1rem; border-radius:999px; color:rgba(255,255,255,.55); transition:all .25s ease; }
.chart-toggle button.active{ background:var(--success-color); color:var(--card-dark); }
.chart-plot{ position:relative; display:flex; align-items:flex-end; gap:clamp(.5rem,1.6vw,1.1rem); height:210px; padding-top:2.2rem; }
.chart-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.6rem; height:100%; justify-content:flex-end; cursor:pointer; }
.chart-bar{ width:100%; max-width:38px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg, var(--mint-24), var(--mint-08)); transition:height 1s var(--ease-soft), background .25s ease, box-shadow .25s ease; height:0%; position:relative; }
.chart-bar-wrap:hover .chart-bar, .chart-bar-wrap.active .chart-bar{ background:linear-gradient(180deg, var(--success-color), var(--mint-40)); box-shadow:0 0 18px rgba(0,255,166,.3); }
.chart-bar-wrap span{ font-family:var(--font-accent); font-size:.68rem; color:rgba(255,255,255,.45); }
.chart-tooltip{ position:absolute; top:-2px; left:50%; transform:translate(-50%,-100%) scale(.9); background:#fff; color:var(--text-dark); font-family:var(--font-accent); font-weight:600; font-size:.72rem; padding:.35rem .6rem; border-radius:8px; white-space:nowrap; opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none; box-shadow:var(--shadow-soft); }
.chart-bar-wrap:hover .chart-tooltip, .chart-bar-wrap.active .chart-tooltip{ opacity:1; transform:translate(-50%,-112%) scale(1); }

/* ============================================================ STREAM ============================================================ */
.stream-stage{ position:relative; max-width:480px; margin:0 auto; height:340px; }
.stream-toast{ position:absolute; left:0; right:0; background:#fff; border-radius:var(--radius-lg); padding:1.15rem 1.35rem; box-shadow:var(--shadow-lift); border:1px solid var(--line-soft); display:flex; gap:.9rem; align-items:flex-start; opacity:0; transform:translateY(18px) scale(.97); transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft); }
.stream-toast.show{ opacity:1; transform:translateY(0) scale(1); }
.stream-toast.leave{ opacity:0; transform:translateY(-14px) scale(.98); }
.stream-toast .icon{ width:40px; height:40px; border-radius:13px; background:var(--brand-green); color:var(--mint-deep); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:none; }
.stream-toast .tag{ display:block; font-family:var(--font-accent); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-deep); margin-bottom:.25rem; }
.stream-toast p{ font-family:var(--font-body); font-size:.9rem; line-height:1.5; color:var(--text-dark); }
.stream-toast time{ display:block; margin-top:.4rem; font-family:var(--font-accent); font-size:.7rem; color:var(--text-muted); }
.stream-dots{ display:flex; justify-content:center; gap:.4rem; margin-top:1.6rem; }
.stream-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(14,21,19,.15); transition:all .3s ease; }
.stream-dots span.active{ background:var(--success-color); transform:scale(1.35); box-shadow:0 0 0 4px var(--mint-14); }

/* ============================================================ SPARKLINE ============================================================ */
.phone-spark{ margin-top:1rem; background:rgba(255,255,255,.03); border:1px solid var(--line-dark); border-radius:var(--radius-md); padding:.7rem .8rem .5rem; }
.phone-spark-top{ display:flex; justify-content:space-between; margin-bottom:.4rem; }
.phone-spark-top span{ font-family:var(--font-accent); font-size:.68rem; color:rgba(255,255,255,.5); }
.phone-spark svg{ width:100%; height:36px; overflow:visible; }
.spark-path{ stroke-dasharray:220; stroke-dashoffset:220; animation:sparkDraw 2.2s var(--ease-soft) forwards; }
@keyframes sparkDraw{ to{ stroke-dashoffset:0; } }
.spark-dot{ animation:sparkDot 2.2s var(--ease-soft) forwards; opacity:0; }
@keyframes sparkDot{ 0%,80%{ opacity:0;} 100%{ opacity:1;} }

/* ============================================================ SOCIAL PROOF ============================================================ */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:3rem; }
.stat-card{ text-align:center; padding:2rem 1rem; border-radius:var(--radius-lg); background:var(--bg-warm); border:1px solid var(--line-soft); transition:transform .35s var(--ease-soft), border-color .35s ease; }
.stat-card:hover{ transform:translateY(-4px); border-color:var(--mint-24); }
.stat-card b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3vw,2.3rem); color:var(--text-dark); letter-spacing:-.02em; }
.stat-card span{ display:block; margin-top:.4rem; font-family:var(--font-accent); font-size:.8rem; color:var(--text-muted); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.testi-card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:1.7rem; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; transition:transform .35s var(--ease-soft), box-shadow .35s ease; }
.testi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.testi-card .stars{ color:var(--amber); font-size:.85rem; letter-spacing:.15em; }
.testi-card p{ margin-top:.9rem; font-family:var(--font-body); font-size:.92rem; line-height:1.6; color:var(--text-dark); flex:1; }
.testi-who{ display:flex; align-items:center; gap:.7rem; margin-top:1.3rem; }
.testi-avatar{ width:36px; height:36px; border-radius:12px; background:var(--brand-green); color:var(--mint-deep); display:flex; align-items:center; justify-content:center; font-family:var(--font-accent); font-weight:700; font-size:.8rem; flex:none; }
.testi-who b{ display:block; font-family:var(--font-accent); font-weight:600; font-size:.84rem; color:var(--text-dark); }
.testi-who span{ font-family:var(--font-body); font-size:.76rem; color:var(--text-muted); }

/* ============================================================ PRICING ============================================================ */
.price-toggle{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-bottom:1.2rem; }
.price-toggle span{ font-family:var(--font-accent); font-weight:500; font-size:.9rem; color:var(--text-muted); transition:color .25s ease; }
.price-toggle span.active{ color:var(--text-dark); font-weight:600; }
.price-note{ text-align:center; font-family:var(--font-body); font-size:.8rem; color:var(--text-muted); margin-bottom:2.4rem; }
.price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; max-width:800px; margin:0 auto; align-items:start; }
.price-card{ border:1px solid var(--line); border-radius:var(--radius-xl); padding:2.3rem; background:#fff; position:relative; transition:transform .35s var(--ease-soft), box-shadow .35s ease; }
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.price-card.featured{ background:var(--card-dark); color:#fff; border:1px solid var(--mint-24); box-shadow:var(--shadow-lift), 0 0 60px -20px rgba(0,255,166,.35); overflow:hidden; }
.price-card.featured::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 90% 50% at 50% -10%, var(--mint-14), transparent 70%); pointer-events:none; }
.price-card .badge{ position:absolute; top:-13px; right:2rem; background:var(--success-color); color:var(--card-dark); font-family:var(--font-accent); font-weight:700; font-size:.72rem; padding:.32rem .85rem; border-radius:999px; box-shadow:0 6px 16px -4px rgba(0,255,166,.5); }
.price-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.price-card .amount{ display:flex; align-items:baseline; gap:.4rem; margin-top:1rem; }
.price-card .amount b{ font-family:var(--font-display); font-size:2.2rem; font-weight:800; letter-spacing:-.02em; }
.price-card .amount span{ font-family:var(--font-accent); font-size:.85rem; color:var(--text-muted); }
.price-card.featured .amount span{ color:rgba(255,255,255,.55); }
.price-card .placeholder-tag{ display:inline-block; margin-top:.5rem; font-family:var(--font-accent); font-size:.68rem; font-weight:600; color:var(--text-muted); border:1px dashed var(--line); padding:.2rem .6rem; border-radius:999px; }
.price-card.featured .placeholder-tag{ color:rgba(255,255,255,.5); border-color:var(--line-dark); }
.price-card p.desc{ margin-top:.7rem; font-family:var(--font-body); font-size:.88rem; color:var(--text-muted); }
.price-card.featured p.desc{ color:rgba(255,255,255,.6); }
.price-feats{ margin-top:1.7rem; display:flex; flex-direction:column; gap:.75rem; }
.price-feats li{ display:flex; align-items:flex-start; gap:.6rem; font-family:var(--font-body); font-size:.87rem; }
.price-feats li.locked{ color:var(--text-muted); }
.price-feats i{ color:var(--mint-deep); margin-top:.15rem; }
.price-card.featured .price-feats i{ color:var(--success-color); }
.price-feats li.locked i{ color:var(--text-muted); }
.price-card .btn{ width:100%; margin-top:1.9rem; }
.price-fineprint{ margin-top:.9rem; font-family:var(--font-body); font-size:.76rem; color:var(--text-muted); text-align:center; }

/* ============================================================ FAQ ============================================================ */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:#fff; transition:border-color .3s ease, box-shadow .3s ease; }
.faq-item[open]{ border-color:var(--mint-24); box-shadow:var(--shadow-soft); }
.faq-item summary{ list-style:none; cursor:pointer; padding:1.25rem 1.4rem; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-accent); font-weight:600; font-size:.98rem; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary i{ transition: transform .3s var(--ease), color .3s ease; color:var(--text-muted); flex:none; }
.faq-item[open] summary i{ transform:rotate(180deg); color:var(--mint-deep); }
.faq-body{ padding:0 1.4rem 1.35rem; font-family:var(--font-body); font-size:.9rem; line-height:1.7; color:var(--text-muted); }

/* ============================================================ FINAL CTA ============================================================ */
.final-cta{ text-align:center; position:relative; overflow:hidden; }
.final-cta::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse 70% 80% at 50% 100%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 100%, #000 20%, transparent 75%); pointer-events:none; }
.final-cta::after{ content:""; position:absolute; left:50%; bottom:-40%; width:800px; height:500px; transform:translateX(-50%); background:radial-gradient(closest-side, var(--mint-14), transparent 70%); filter:blur(20px); pointer-events:none; }
.final-cta .container{ position:relative; z-index:1; }
.final-cta h2{ max-width:18ch; margin-left:auto; margin-right:auto; }
.cta-form{ display:flex; gap:.7rem; justify-content:center; margin-top:2.3rem; flex-wrap:wrap; }
.cta-form input[type="email"]{ background:rgba(255,255,255,.06); border:1.5px solid var(--line-dark); color:#fff; border-radius:999px; padding:.95rem 1.4rem; min-width:290px; font-family:var(--font-body); transition:border-color .3s ease, background .3s ease; }
.cta-form input[type="email"]:focus{ border-color:var(--mint-40); background:rgba(255,255,255,.09); outline:none; }
.cta-form input::placeholder{ color:rgba(255,255,255,.4); }
.cta-note{ margin-top:1.1rem; font-family:var(--font-accent); font-size:.78rem; color:rgba(255,255,255,.4); }
.cta-success{ display:none; align-items:center; justify-content:center; gap:.6rem; margin-top:2.2rem; font-family:var(--font-accent); color:var(--success-color); font-weight:600; }
.cta-success.show{ display:flex; animation:successIn .6s var(--ease-soft); }
.cta-success i{ position:relative; width:22px; height:22px; border-radius:50%; background:var(--mint-14); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.cta-success i::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--mint-24); animation:successRing .9s var(--ease-soft) .1s both; }
@keyframes successIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@keyframes successRing{ from{ opacity:1; transform:scale(.4);} to{ opacity:0; transform:scale(1.6);} }

/* ============================================================ FOOTER ============================================================ */
.site-footer{ background:var(--card-dark); color:rgba(255,255,255,.6); padding:3.8rem 0 2rem; border-top:1px solid var(--line-dark); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2rem; padding-bottom:2.6rem; border-bottom:1px solid var(--line-dark); }
.footer-brand p{ margin-top:1rem; font-family:var(--font-body); font-size:.86rem; max-width:28ch; line-height:1.6; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.3rem; }
.footer-social a{ width:38px; height:38px; border-radius:12px; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; transition: all .25s ease; }
.footer-social a:hover{ background:var(--success-color); color:var(--card-dark); border-color:var(--success-color); transform:translateY(-2px); }
.footer-col h4{ font-family:var(--font-accent); font-size:.76rem; font-weight:600; color:var(--success-color); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-family:var(--font-body); font-size:.86rem; transition:color .2s ease, padding-left .25s ease; }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:1.6rem; flex-wrap:wrap; gap:.8rem; }
.footer-bottom p{ font-family:var(--font-body); font-size:.8rem; }
.footer-powered{ font-family:var(--font-body); font-size:.78rem; color:rgba(255,255,255,.35); }
.footer-legal{ display:flex; gap:1.4rem; }
.footer-legal a{ font-family:var(--font-body); font-size:.8rem; transition:color .2s ease; }
.footer-legal a:hover{ color:#fff; }

/* ============================================================ LOADER ============================================================ */
.loader-screen{ position:fixed; inset:0; z-index:9999; background:var(--card-dark); display:flex; align-items:center; justify-content:center; transition:opacity .7s var(--ease-soft), visibility .7s var(--ease-soft); }
.loader-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ position:relative; width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
.loader-mark svg{ width:34px; height:34px; overflow:visible; }
.loader-mark path{ stroke-dasharray:46; stroke-dashoffset:46; animation:loaderDraw 1.3s var(--ease-soft) forwards; }
.loader-mark::after{ content:""; position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, var(--mint-14), transparent 72%); animation:loaderGlow 1.6s ease-in-out .4s infinite; }
@keyframes loaderDraw{ to{ stroke-dashoffset:0; } }
@keyframes loaderGlow{ 0%,100%{ opacity:.35; transform:scale(.9);} 50%{ opacity:.9; transform:scale(1.15);} }

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; min-height:auto; margin-bottom:1.5rem; }
  .floating-bubble{ display:none; }
  .tilt-wrap::before, .tilt-wrap::after{ display:none; }
  .feature-row{ grid-template-columns:1fr; }
  .feature-row.flip{ direction:ltr; }
  .feature-row .feature-visual{ order:-1; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .ps-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .nav-links, .nav-actions .btn-login{ display:none; }
  .nav-toggle{ display:flex; }
  .price-grid{ grid-template-columns:1fr; }
  .trust-row{ justify-content:flex-start; }
  .stat-row, .testi-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .cta-form input[type="email"]{ min-width:0; width:100%; }
  .phone{ width:100%; max-width:292px; }
  .stream-stage{ height:400px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }
}
/* ============================================================
   V3 — Ko'p sahifali sayt: yangi komponentlar
   ============================================================ */

/* ---- Nav active ---- */
.nav-links a.is-active{ color:var(--success-color); }
.site-header.scrolled .nav-links a.is-active{ color:var(--mint-deep); }
body.page-inner .site-header{ background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border-bottom:1px solid rgba(16,25,23,.08); }
body.page-inner .site-header .nav-links a{ color:rgba(16,25,23,.72); }
body.page-inner .site-header .nav-links a:hover{ color:var(--ink); }
body.page-inner .site-header .nav-links a.is-active{ color:var(--mint-deep); }
body.page-inner .site-header .btn-login{ color:rgba(16,25,23,.72); }
body.page-inner .site-header .logo{ color:var(--ink); }
body.page-inner .site-header .nav-toggle{ color:var(--ink); }

/* ---- Page hero (ichki sahifalar) ---- */
.page-hero{ padding:9.5rem 0 4rem; background:linear-gradient(180deg, var(--bg-warm), #fff); position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(16,25,23,.06) 1px, transparent 1px); background-size:26px 26px; mask-image:linear-gradient(180deg,#000 30%,transparent); pointer-events:none; }
.page-hero .container{ position:relative; }
.page-hero .h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.08; letter-spacing:-.02em; color:var(--ink); max-width:760px; margin:.9rem 0 1rem; }
.page-hero .h1 em{ font-style:normal; color:var(--mint-deep); position:relative; }
.page-hero .lead{ max-width:640px; }
.page-hero.dark-hero{ background:var(--ink-deep, #0b1210); }
.page-hero.dark-hero::before{ background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); }
.page-hero.dark-hero .h1{ color:#fff; }
.page-hero.dark-hero .h1 em{ color:var(--success-color); }
.page-hero.dark-hero .lead{ color:rgba(255,255,255,.66); }
.page-hero .cta-actions{ margin-top:1.6rem; display:flex; gap:.8rem; flex-wrap:wrap; }

/* ---- Section head split ---- */
.section-head.split{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.btn-ghost-dark{ background:transparent; color:var(--ink); border:1px solid rgba(16,25,23,.22); }
.btn-ghost-dark:hover{ border-color:var(--ink); }

/* ---- Words marquee (katta konturli so'zlar) ---- */
.words-marquee{ overflow:hidden; padding:2.6rem 0; background:#fff; border-block:1px solid rgba(16,25,23,.07); }
.words-track{ display:flex; align-items:center; gap:2.8rem; width:max-content; animation:tickerMove 36s linear infinite; }
.words-track span{ font-family:var(--font-display); font-weight:900; font-size:clamp(3rem,7vw,5.4rem); letter-spacing:-.02em; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(16,25,23,.28); white-space:nowrap; }
.words-track span.fill{ color:var(--ink); -webkit-text-stroke:0; }
.words-track i{ font-style:normal; color:var(--success-color); font-size:1rem; }
.words-marquee:hover .words-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .words-track{ animation:none; } }

/* ---- Showcase v3: vertikal rail + ekran ---- */
.showcase-split{ display:grid; grid-template-columns:320px 1fr; gap:1.4rem; align-items:stretch; }
.showcase-rail{ display:flex; flex-direction:column; gap:.4rem; }
.showcase-rail .showcase-tab{ display:flex; align-items:center; gap:.85rem; text-align:left; padding:.72rem .9rem; border-radius:16px; border:1px solid transparent; background:transparent; position:relative; overflow:hidden; transition:all .25s ease; color:inherit; white-space:normal; }
.showcase-rail .showcase-tab:hover{ background:rgba(16,25,23,.045); color:inherit; border-color:transparent; }
.sc-tab-ic{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(16,25,23,.06); color:var(--ink); font-size:1rem; transition:all .25s ease; }
.sc-tab-txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.sc-tab-txt b{ font-family:var(--font-accent); font-weight:600; font-size:.92rem; color:var(--ink); }
.sc-tab-txt small{ font-family:var(--font-body); font-size:.74rem; color:rgba(16,25,23,.5); line-height:1.35; }
.sc-tab-bar{ position:absolute; left:0; top:12%; bottom:12%; width:3px; border-radius:3px; background:var(--success-color); transform:scaleY(0); transition:transform .3s var(--ease-soft); }
.showcase-rail .showcase-tab[aria-selected="true"]{ background:#fff; border-color:rgba(16,25,23,.1); box-shadow:0 10px 26px rgba(16,25,23,.08); }
.showcase-rail .showcase-tab[aria-selected="true"] .sc-tab-ic{ background:var(--ink); color:var(--success-color); }
.showcase-rail .showcase-tab[aria-selected="true"] .sc-tab-bar{ transform:scaleY(1); }
.sc-chrome{ display:flex; align-items:center; gap:.45rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line-dark); }
.sc-chrome span:not(.sc-live){ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.16); }
.sc-chrome span:nth-child(1){ background:rgba(255,106,106,.75); }
.sc-chrome span:nth-child(2){ background:rgba(245,185,66,.75); }
.sc-chrome span:nth-child(3){ background:rgba(0,255,166,.7); }
.sc-chrome em{ font-style:normal; font-family:var(--font-body); font-size:.74rem; color:rgba(255,255,255,.45); margin-left:.5rem; }
.sc-live{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-accent); font-size:.66rem; font-weight:700; letter-spacing:.12em; color:var(--success-color); }
.sc-live i{ width:7px; height:7px; border-radius:50%; background:var(--success-color); animation:livePulse 1.6s ease infinite; }
@keyframes livePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,255,166,.5);} 55%{ box-shadow:0 0 0 6px rgba(0,255,166,0);} }
@media (max-width: 960px){
  .showcase-split{ grid-template-columns:1fr; }
  .showcase-rail{ flex-direction:row; overflow-x:auto; scrollbar-width:none; padding-bottom:.3rem; }
  .showcase-rail::-webkit-scrollbar{ display:none; }
  .showcase-rail .showcase-tab{ flex:none; width:230px; }
}

/* ---- Stats band ---- */
.stats-band{ background:var(--ink-deep, #0b1210); border-block:1px solid var(--line-dark); padding:3.2rem 0; }
.stats-band-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-big{ text-align:center; }
.stat-big .num{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,3rem); color:var(--success-color); letter-spacing:-.02em; }
.stat-big .lbl{ font-family:var(--font-body); font-size:.85rem; color:rgba(255,255,255,.55); }
@media (max-width: 800px){ .stats-band-grid{ grid-template-columns:repeat(2,1fr); gap:1.6rem; } }

/* ---- Compare ---- */
.compare-grid{ display:grid; grid-template-columns:1fr 70px 1fr; gap:1rem; align-items:stretch; max-width:960px; margin:0 auto; }
.compare-col{ border-radius:var(--radius-lg, 24px); padding:1.8rem; }
.compare-col.plain{ background:#fff; border:1px dashed rgba(16,25,23,.2); }
.compare-col.ava{ padding:0; }
.compare-col.ava .gborder-inner{ padding:1.8rem; height:100%; }
.compare-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.compare-head i{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:1rem; }
.compare-col.plain .compare-head i{ background:rgba(16,25,23,.07); color:rgba(16,25,23,.6); }
.compare-col.ava .compare-head i{ background:var(--mint-14); color:var(--success-color); }
.compare-head h3{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.compare-col.plain h3{ color:rgba(16,25,23,.75); }
.compare-col.ava h3{ color:#fff; }
.compare-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.compare-col li{ display:flex; gap:.6rem; align-items:flex-start; font-family:var(--font-body); font-size:.92rem; line-height:1.5; }
.compare-col.plain li{ color:rgba(16,25,23,.6); }
.compare-col.plain li i{ color:var(--red); margin-top:.15rem; }
.compare-col.ava li{ color:rgba(255,255,255,.82); }
.compare-col.ava li i{ color:var(--success-color); margin-top:.15rem; }
.compare-vs{ display:grid; place-items:center; }
.compare-vs span{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--success-color); font-family:var(--font-display); font-weight:800; font-size:.85rem; box-shadow:0 10px 24px rgba(16,25,23,.25); }
@media (max-width: 800px){ .compare-grid{ grid-template-columns:1fr; } .compare-vs{ padding:.2rem 0; } }

/* ---- Blog cards ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.blog-card{ display:flex; flex-direction:column; gap:.8rem; background:#fff; border:1px solid rgba(16,25,23,.09); border-radius:22px; padding:1.6rem; transition:all .3s var(--ease-soft); position:relative; overflow:hidden; }
.blog-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--success-color), transparent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-soft); }
.blog-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,25,23,.1); border-color:rgba(16,25,23,.14); }
.blog-card:hover::after{ transform:scaleX(1); }
.blog-tag{ align-self:flex-start; font-family:var(--font-accent); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-deep); background:var(--mint-14); padding:.3rem .65rem; border-radius:999px; }
.blog-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.3; color:var(--ink); }
.blog-card p{ font-family:var(--font-body); font-size:.9rem; line-height:1.55; color:rgba(16,25,23,.6); flex:1; }
.blog-meta{ display:flex; align-items:center; gap:.45rem; font-family:var(--font-body); font-size:.8rem; color:rgba(16,25,23,.5); }
.blog-meta em{ font-style:normal; margin-left:auto; color:var(--mint-deep); font-weight:600; transition:transform .25s ease; }
.blog-card:hover .blog-meta em{ transform:translateX(4px); }
@media (max-width: 900px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---- B2B band ---- */
.b2b-band{ background:var(--ink-deep, #0b1210); padding:4rem 0; position:relative; overflow:hidden; }
.b2b-band::before{ content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(0,255,166,.14), transparent 70%); }
.b2b-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; position:relative; }
.b2b-band .h2{ color:#fff; margin:.6rem 0; }
.b2b-band .h2 em{ color:var(--success-color); font-style:normal; }
.b2b-band .lead{ color:rgba(255,255,255,.62); max-width:520px; }
.b2b-band-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* ---- Product grid (ichki sahifa) ---- */
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.prod-card{ background:#fff; border:1px solid rgba(16,25,23,.09); border-radius:22px; padding:1.9rem 1.7rem; position:relative; overflow:hidden; transition:all .3s var(--ease-soft); }
.prod-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,25,23,.1); }
.prod-num{ position:absolute; top:1rem; right:1.2rem; font-family:var(--font-display); font-weight:900; font-size:2.2rem; color:transparent; -webkit-text-stroke:1px rgba(16,25,23,.14); }
.prod-ic{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--ink); color:var(--success-color); font-size:1.1rem; margin-bottom:1rem; }
.prod-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); margin-bottom:.5rem; }
.prod-card p{ font-family:var(--font-body); font-size:.9rem; line-height:1.55; color:rgba(16,25,23,.6); }
@media (max-width: 900px){ .prod-grid{ grid-template-columns:1fr; } }

/* ---- About ---- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.about-values{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.value-card{ background:var(--bg-warm); border:1px solid rgba(16,25,23,.07); border-radius:18px; padding:1.4rem 1.3rem; }
.value-card i{ color:var(--mint-deep); font-size:1.15rem; }
.value-card h3{ font-family:var(--font-display); font-weight:700; font-size:1rem; margin:.55rem 0 .3rem; color:var(--ink); }
.value-card p{ font-family:var(--font-body); font-size:.84rem; line-height:1.5; color:rgba(16,25,23,.6); }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } .about-values{ grid-template-columns:1fr; } }

/* ---- Roadmap ---- */
.roadmap{ position:relative; max-width:680px; margin:0 auto; padding-left:2rem; }
.roadmap::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, var(--success-color), rgba(255,255,255,.12)); }
.road-item{ position:relative; padding:0 0 2.1rem 1.4rem; }
.road-dot{ position:absolute; left:-2rem; top:4px; width:16px; height:16px; border-radius:50%; background:var(--card-dark); border:2px solid rgba(255,255,255,.25); }
.road-item.done .road-dot{ background:var(--success-color); border-color:var(--success-color); }
.road-item.now .road-dot{ border-color:var(--success-color); box-shadow:0 0 0 5px rgba(0,255,166,.15); animation:livePulse 2s ease infinite; }
.road-date{ font-family:var(--font-accent); font-weight:700; font-size:.72rem; letter-spacing:.1em; color:var(--success-color); }
.road-item h3{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:#fff; margin:.3rem 0 .25rem; }
.road-item p{ font-family:var(--font-body); font-size:.88rem; color:rgba(255,255,255,.6); }

/* ---- Steps (B2B) ---- */
.steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.step-card{ background:var(--card-dark); border:1px solid var(--line-dark); border-radius:20px; padding:1.8rem 1.5rem; }
.step-num{ display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--mint-14); color:var(--success-color); font-family:var(--font-display); font-weight:800; margin-bottom:1rem; }
.step-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:#fff; margin-bottom:.4rem; }
.step-card p{ font-family:var(--font-body); font-size:.88rem; line-height:1.55; color:rgba(255,255,255,.6); }
@media (max-width: 800px){ .steps-row{ grid-template-columns:1fr; } }

/* ---- Maqola ---- */
.article-narrow{ max-width:720px; }
.crumbs{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-size:.82rem; color:rgba(16,25,23,.5); margin-bottom:1rem; flex-wrap:wrap; }
.crumbs a{ color:rgba(16,25,23,.55); } .crumbs a:hover{ color:var(--mint-deep); }
.crumbs em{ font-style:normal; color:var(--ink); }
.article-hero .h1{ font-size:clamp(1.9rem,4vw,2.8rem); }
.article-meta{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-body); font-size:.85rem; color:rgba(16,25,23,.55); flex-wrap:wrap; }
.article-body p{ font-family:var(--font-body); font-size:1.04rem; line-height:1.8; color:rgba(16,25,23,.78); margin-bottom:1.3rem; }
.article-body p:first-child::first-letter{ font-family:var(--font-display); font-weight:800; font-size:3.1rem; float:left; line-height:.85; margin:.28rem .6rem 0 0; color:var(--mint-deep); }

/* ---- Ariza forma ---- */
.form-wrap{ max-width:680px; }
.gborder-light{ background:#fff; border:1px solid rgba(16,25,23,.1); border-radius:26px; box-shadow:0 20px 50px rgba(16,25,23,.08); }
.ariza-form{ padding:2.2rem; display:flex; flex-direction:column; gap:1.2rem; }
.form-type{ display:flex; gap:.6rem; flex-wrap:wrap; }
.type-pill input{ position:absolute; opacity:0; pointer-events:none; }
.type-pill span{ display:inline-flex; align-items:center; gap:.5rem; padding:.62rem 1.1rem; border-radius:999px; border:1px solid rgba(16,25,23,.16); font-family:var(--font-accent); font-weight:600; font-size:.88rem; color:rgba(16,25,23,.65); cursor:pointer; transition:all .22s ease; }
.type-pill input:checked + span{ background:var(--ink); color:var(--success-color); border-color:var(--ink); }
.type-pill input:focus-visible + span{ outline:2px solid var(--mint-deep); outline-offset:2px; }
.form-row{ display:flex; flex-direction:column; gap:.4rem; }
.form-row label{ font-family:var(--font-accent); font-weight:600; font-size:.86rem; color:var(--ink); }
.form-row label small{ font-weight:400; color:rgba(16,25,23,.45); }
.form-row input, .form-row textarea{ font-family:var(--font-body); font-size:.95rem; padding:.85rem 1rem; border-radius:14px; border:1px solid rgba(16,25,23,.16); background:var(--bg-warm); color:var(--ink); transition:all .22s ease; resize:vertical; }
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--mint-deep); background:#fff; box-shadow:0 0 0 3px rgba(0,255,166,.15); }
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-err{ font-family:var(--font-body); font-size:.8rem; color:var(--red); }
.form-note{ display:flex; align-items:center; gap:.45rem; justify-content:center; font-family:var(--font-body); font-size:.8rem; color:rgba(16,25,23,.5); }
.btn-block{ width:100%; justify-content:center; }
.hp{ position:absolute; left:-9999px; opacity:0; }
.form-success{ text-align:center; background:#fff; border:1px solid rgba(16,25,23,.1); border-radius:26px; padding:3rem 2rem; box-shadow:0 20px 50px rgba(16,25,23,.08); }
.ok-ic{ display:grid; place-items:center; width:64px; height:64px; border-radius:20px; background:var(--mint-14); color:var(--mint-deep); font-size:1.5rem; margin:0 auto 1.2rem; }
.form-success .cta-actions{ justify-content:center; margin-top:1.5rem; display:flex; gap:.8rem; flex-wrap:wrap; }
@media (max-width: 640px){ .form-grid2{ grid-template-columns:1fr; } .ariza-form{ padding:1.5rem; } }
.center{ text-align:center; }
.center .cta-actions{ justify-content:center; display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; }

/* ============================================================
   V4 — Onboarding, Kredit, Egizak, Trio, Persona
   ============================================================ */

/* ---- Onboarding demo ---- */
.onboard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.ob-points{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.4rem; }
.ob-points li{ display:flex; gap:.6rem; align-items:flex-start; font-family:var(--font-body); font-size:.95rem; color:rgba(16,25,23,.7); }
.ob-points li i{ color:var(--mint-deep); margin-top:.2rem; }
.ob-demo .gborder-inner{ padding:0; overflow:hidden; }
.ob-head{ display:flex; align-items:center; gap:.7rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line-dark); }
.ob-ava{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--mint-14); color:var(--success-color); }
.ob-head b{ font-family:var(--font-accent); font-weight:600; color:#fff; font-size:.95rem; display:block; }
.ob-head small{ font-family:var(--font-body); font-size:.74rem; color:rgba(255,255,255,.5); }
.ob-head .sc-live{ margin-left:auto; }
.ob-body{ padding:1.6rem 1.4rem; min-height:250px; }
.ob-q p{ font-family:var(--font-body); font-size:1rem; line-height:1.6; color:rgba(255,255,255,.85); background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:16px 16px 16px 4px; padding:1rem 1.15rem; animation:panelIn .4s var(--ease-soft); }
.ob-q p b{ color:var(--success-color); }
.ob-actions{ display:flex; gap:.6rem; margin-top:1rem; }
.ob-done{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-accent); font-weight:600; color:var(--success-color); margin-bottom:1rem; }
.ob-rows{ display:flex; flex-direction:column; gap:.55rem; }
.ob-row{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-body); font-size:.9rem; color:rgba(255,255,255,.8); background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:12px; padding:.65rem .9rem; animation:panelIn .4s var(--ease-soft) backwards; }
.ob-row b{ color:#fff; }
.ob-row small{ color:rgba(255,255,255,.45); }
.ob-total{ display:flex; justify-content:space-between; align-items:center; margin-top:.9rem; padding:.8rem .9rem; border-radius:12px; background:var(--mint-14); font-family:var(--font-accent); }
.ob-total span{ color:rgba(255,255,255,.7); font-size:.88rem; }
.ob-total b{ color:var(--success-color); font-size:1.05rem; }
.ob-result .btn{ margin-top:1rem; }
.ob-progress{ height:4px; background:rgba(255,255,255,.08); }
.ob-progress span{ display:block; height:100%; width:0; background:var(--success-color); transition:width .5s var(--ease-soft); }
@media (max-width: 900px){ .onboard-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ---- Kredit strategiya ---- */
.credit-card{ max-width:780px; margin:0 auto; }
.credit-card .gborder-inner{ padding:1.9rem; }
.credit-slider-row{ margin-top:1.5rem; }
.credit-slider-row label{ display:block; font-family:var(--font-body); font-size:.92rem; color:rgba(255,255,255,.7); margin-bottom:.7rem; }
.credit-slider-row label b{ color:var(--success-color); font-family:var(--font-accent); }
input[type="range"]#creditSlider{ width:100%; appearance:none; -webkit-appearance:none; height:6px; border-radius:6px; background:linear-gradient(90deg, var(--success-color) var(--fill,17%), rgba(255,255,255,.14) var(--fill,17%)); outline:none; cursor:pointer; }
#creditSlider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--success-color); border:3px solid var(--card-dark); box-shadow:0 0 0 2px var(--success-color), 0 4px 12px rgba(0,255,166,.4); cursor:grab; }
#creditSlider::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--success-color); border:3px solid var(--card-dark); box-shadow:0 0 0 2px var(--success-color); cursor:grab; }
.credit-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem; }
.cs-item{ text-align:center; background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:16px; padding:1.1rem .8rem; }
.cs-num{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.45rem; color:var(--success-color); }
.cs-lbl{ font-family:var(--font-body); font-size:.78rem; color:rgba(255,255,255,.55); }
.credit-strats{ display:flex; gap:.5rem; margin-top:1.5rem; flex-wrap:wrap; }
.strat-chip{ font-family:var(--font-accent); font-weight:600; font-size:.84rem; padding:.55rem 1rem; border-radius:999px; border:1px solid var(--line-dark); color:rgba(255,255,255,.6); transition:all .22s ease; }
.strat-chip:hover{ color:#fff; }
.strat-chip.active{ background:var(--success-color); color:var(--card-dark); border-color:var(--success-color); }
.strat-note{ margin-top:1rem; font-family:var(--font-body); font-size:.88rem; line-height:1.6; color:rgba(255,255,255,.6); }
@media (max-width: 640px){ .credit-stats{ grid-template-columns:1fr; } }

/* ---- Moliyaviy egizak ---- */
.twin-wrap{ max-width:880px; margin:0 auto; }
.twin-tabs{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.3rem; }
.twin-tab{ font-family:var(--font-accent); font-weight:600; font-size:.86rem; padding:.6rem 1.15rem; border-radius:999px; border:1px solid rgba(16,25,23,.16); color:rgba(16,25,23,.6); transition:all .22s ease; }
.twin-tab:hover{ color:var(--ink); border-color:rgba(16,25,23,.3); }
.twin-tab[aria-selected="true"]{ background:var(--ink); color:var(--success-color); border-color:var(--ink); }
.twin-panel .gborder-inner{ padding:1.7rem; }
.twin-chart-wrap svg{ width:100%; height:200px; display:block; }
#twLinePath{ transition:d .6s var(--ease-soft); }
.twin-timeline{ display:flex; justify-content:space-between; font-family:var(--font-body); font-size:.72rem; color:rgba(255,255,255,.4); margin-top:.4rem; }
.twin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.4rem; }
.tw-stat{ background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:16px; padding:1rem .9rem; }
.tw-lbl{ display:block; font-family:var(--font-body); font-size:.72rem; color:rgba(255,255,255,.5); margin-bottom:.3rem; }
.tw-stat b{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:#fff; display:block; }
.tw-stat small{ font-family:var(--font-body); font-size:.74rem; }
.tw-stat small.up{ color:var(--success-color); }
.tw-stat small.down{ color:var(--red); }
.tw-stat small.mid{ color:var(--amber); }
@media (max-width: 800px){ .twin-stats{ grid-template-columns:1fr 1fr; } }

/* ---- Trio ---- */
.trio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.trio-card{ background:#fff; border:1px solid rgba(16,25,23,.09); border-radius:22px; padding:1.9rem 1.7rem; display:flex; flex-direction:column; transition:all .3s var(--ease-soft); }
.trio-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,25,23,.1); }
.trio-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--ink); margin-bottom:.5rem; }
.trio-card p{ font-family:var(--font-body); font-size:.9rem; line-height:1.6; color:rgba(16,25,23,.6); flex:1; }
.trio-demo{ margin-top:1.3rem; padding-top:1.2rem; border-top:1px dashed rgba(16,25,23,.14); }
.memory-demo{ display:flex; flex-wrap:wrap; gap:.45rem; }
.mem-pill{ font-family:var(--font-body); font-size:.76rem; color:var(--mint-deep); background:var(--mint-14); border-radius:999px; padding:.35rem .7rem; }
.passport-demo{ display:flex; flex-direction:column; gap:.5rem; }
.pass-row{ display:flex; justify-content:space-between; font-family:var(--font-body); font-size:.84rem; color:rgba(16,25,23,.6); }
.pass-row b{ font-family:var(--font-accent); color:var(--ink); }
.pass-row b.ok{ color:var(--mint-deep); }
.family-demo{ display:flex; align-items:center; gap:.4rem; }
.fam-ava{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--success-color); font-family:var(--font-accent); font-weight:700; font-size:.82rem; border:2px solid #fff; }
.fam-ava + .fam-ava{ margin-left:-12px; }
.fam-plus{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1.5px dashed rgba(16,25,23,.3); color:rgba(16,25,23,.5); margin-left:-12px; background:#fff; font-weight:600; }
.family-demo em{ font-style:normal; margin-left:auto; font-family:var(--font-body); font-size:.8rem; color:var(--mint-deep); font-weight:600; }
@media (max-width: 900px){ .trio-grid{ grid-template-columns:1fr; } }

/* ---- Persona ---- */
.persona-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.persona-story{ margin-top:1.6rem; }
.persona-story .gborder-inner{ padding:1.5rem; }
.story-tag{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-accent); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--success-color); margin-bottom:.8rem; }
.story-text{ font-family:var(--font-body); font-size:.95rem; line-height:1.65; color:rgba(255,255,255,.75); }
.story-text b{ color:var(--success-color); }
.story-msg{ margin-top:1rem; max-width:100%; }
.story-sub{ margin-top:.8rem; font-family:var(--font-body); font-size:.8rem; color:rgba(255,255,255,.45); }
.persona-phone{ background:var(--card-dark-2); border:1px solid var(--line-dark); border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lift); }
.pp-top{ display:flex; align-items:center; gap:.65rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line-dark); }
.pp-top b{ font-family:var(--font-accent); font-weight:600; color:#fff; font-size:.95rem; }
.pp-top small{ font-family:var(--font-body); font-size:.72rem; color:var(--success-color); }
.pp-msgs{ padding:1.3rem 1.2rem; display:flex; flex-direction:column; gap:.9rem; }
.pp-msg{ max-width:100%; opacity:0; transform:translateY(12px); }
.persona-phone.in-view .pp-msg{ animation:msgIn .5s var(--ease-soft) forwards; animation-delay:calc(var(--i) * .55s); }
@keyframes msgIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .pp-msg{ opacity:1; transform:none; animation:none !important; } }
@media (max-width: 900px){ .persona-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ============================================================
   AVALAN — v3 REDESIGN LAYER
   Premium 2026 pass: larger hero type, aurora background,
   merged social-proof band, solution step rail, SmartPay queue.
   ============================================================ */

/* ---- Hero v3 ---- */
.hero{ padding:clamp(8rem,15vw,11.5rem) 0 clamp(5rem,8vw,6.5rem); }
.hero-copy h1{ font-size:clamp(2.9rem,5.6vw,4.6rem); line-height:1.03; letter-spacing:-.04em; }
.hero-copy .lead{ margin-top:1.5rem; max-width:44ch; font-size:clamp(1.05rem,1.3vw,1.19rem); }
.hero-copy .lead b{ color:#fff; font-weight:600; }
.hero-pill{ display:inline-flex; align-items:center; gap:.55rem; padding:.5rem 1rem; margin-bottom:1.6rem;
  border-radius:999px; border:1px solid rgba(0,255,166,.28); background:linear-gradient(120deg, rgba(0,255,166,.12), rgba(0,255,166,.04));
  font-family:var(--font-accent); font-weight:600; font-size:.78rem; letter-spacing:.04em; color:var(--success-color);
  box-shadow:0 0 0 1px rgba(0,255,166,.05), 0 8px 30px -12px rgba(0,255,166,.35); }
.hero-pill i{ font-size:.85em; animation:pillGlow 2.6s ease-in-out infinite; }
@keyframes pillGlow{ 0%,100%{ opacity:.7; } 50%{ opacity:1; filter:drop-shadow(0 0 6px rgba(0,255,166,.8)); } }
.hero-aurora{ position:absolute; inset:-20% -10% auto; height:80%; z-index:-1; pointer-events:none; filter:blur(70px); opacity:.55;
  background:
    radial-gradient(38% 42% at 18% 30%, rgba(0,255,166,.16), transparent 70%),
    radial-gradient(34% 40% at 82% 18%, rgba(151,207,243,.13), transparent 70%),
    radial-gradient(30% 36% at 60% 70%, rgba(0,255,166,.08), transparent 70%);
  animation:auroraDrift 16s ease-in-out infinite alternate; }
@keyframes auroraDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(0,3%,0) scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .hero-aurora, .hero-pill i{ animation:none; } }
.btn-lg{ padding:1.1rem 1.9rem; font-size:1.02rem; }

/* ---- Social proof band (merged trust + stats) ---- */
.proof-band{ background:var(--card-dark); color:#fff; padding:clamp(3.2rem,6vw,4.5rem) 0; border-top:1px solid var(--line-dark); }
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.proof-stat{ text-align:center; padding:1.4rem 1rem; border-radius:var(--radius-md); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid var(--line-dark); }
.proof-stat .num{ display:flex; align-items:baseline; justify-content:center; gap:.35rem; font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.03em; color:var(--success-color); }
.proof-stat .num i{ font-size:.55em; color:var(--success-color); }
.proof-stat .lbl{ display:block; margin-top:.45rem; font-family:var(--font-body); font-size:.82rem; color:rgba(255,255,255,.55); line-height:1.45; }
.proof-stat .lbl em{ font-style:normal; opacity:.6; }
.proof-trust{ display:flex; justify-content:center; gap:1.4rem 2.4rem; flex-wrap:wrap; margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--line-dark); }
.proof-trust .trust-item{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-accent); font-weight:500; font-size:.86rem; color:rgba(255,255,255,.7); }
.proof-trust .trust-item i{ color:var(--success-color); font-size:.95em; }

/* ---- Problem section: compare block spacing ---- */
#problem .compare-grid{ margin-top:clamp(3.5rem,7vw,5rem); }

/* ---- Solution step rail ---- */
#solution{ padding-bottom:clamp(3.5rem,6vw,5rem); }
.step-rail{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; position:relative; }
.step-card{ position:relative; padding:2rem 1.8rem 1.9rem; border-radius:var(--radius-lg); background:linear-gradient(180deg, var(--card-dark-2), var(--card-dark-3));
  border:1px solid var(--line-dark); transition:transform .35s var(--ease-soft), border-color .35s ease, box-shadow .35s ease; overflow:hidden; }
.step-card::after{ content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg, transparent, var(--mint-40), transparent); opacity:0; transition:opacity .35s ease; }
.step-card:hover{ transform:translateY(-4px); border-color:var(--mint-24); box-shadow:0 24px 60px -30px rgba(0,255,166,.25); }
.step-card:hover::after{ opacity:1; }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:12px;
  background:var(--mint-14); color:var(--success-color); font-family:var(--font-display); font-weight:800; font-size:1.05rem; margin-bottom:1.15rem;
  box-shadow:inset 0 0 0 1px rgba(0,255,166,.25); }
.step-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-.015em; color:#fff; }
.step-card p{ margin-top:.6rem; font-family:var(--font-body); font-size:.93rem; line-height:1.65; color:rgba(255,255,255,.58); }

/* ---- SmartPay ---- */
.sp-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.sp-queue .gborder-inner{ padding:1.5rem 1.5rem 1.3rem; }
.sp-queue-head{ display:flex; align-items:center; gap:.8rem; padding-bottom:1.1rem; margin-bottom:.4rem; border-bottom:1px solid var(--line-dark); }
.sp-queue-head b{ display:block; font-family:var(--font-accent); font-weight:600; font-size:.95rem; color:#fff; }
.sp-queue-head small{ font-family:var(--font-body); font-size:.76rem; color:rgba(255,255,255,.5); }
.sp-queue-head .sc-live{ margin-left:auto; }
.sp-row{ display:flex; align-items:center; gap:.9rem; padding:.95rem .35rem; border-bottom:1px solid rgba(255,255,255,.05);
  opacity:0; transform:translateY(10px); animation:spRowIn .6s var(--ease-soft) forwards; animation-delay:calc(.25s + var(--i,0) * .16s); }
.sp-row:last-of-type{ border-bottom:0; }
@keyframes spRowIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .sp-row{ animation:none; opacity:1; transform:none; } }
.sp-pri{ flex:none; width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:9px; font-family:var(--font-display); font-weight:800; font-size:.85rem; }
.sp-pri.high{ background:var(--mint-14); color:var(--success-color); box-shadow:inset 0 0 0 1px rgba(0,255,166,.3); }
.sp-pri.mid{ background:rgba(151,207,243,.14); color:var(--blue-color); box-shadow:inset 0 0 0 1px rgba(151,207,243,.3); }
.sp-pri.low{ background:rgba(245,185,66,.14); color:var(--amber); box-shadow:inset 0 0 0 1px rgba(245,185,66,.3); }
.sp-info{ min-width:0; flex:1; }
.sp-info b{ display:block; font-family:var(--font-accent); font-weight:600; font-size:.9rem; color:#fff; }
.sp-info small{ font-family:var(--font-body); font-size:.74rem; color:rgba(255,255,255,.45); }
.sp-sum{ font-family:var(--font-display); font-weight:700; font-size:.92rem; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.sp-state{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-accent); font-weight:500; font-size:.72rem; padding:.3rem .6rem; border-radius:999px; white-space:nowrap; }
.sp-state.ok{ background:var(--mint-08); color:var(--success-color); }
.sp-state.move{ background:rgba(245,185,66,.12); color:var(--amber); }
.sp-note{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1rem; padding:.95rem 1.05rem; border-radius:var(--radius-sm);
  background:var(--mint-06); border:1px solid rgba(0,255,166,.16); font-family:var(--font-body); font-size:.85rem; line-height:1.6; color:rgba(255,255,255,.75); }
.sp-note i{ color:var(--success-color); margin-top:.15rem; }
.sp-note b{ color:var(--success-color); font-weight:600; }
.sp-points{ display:flex; flex-direction:column; gap:1.6rem; }
.sp-points li{ display:flex; gap:1.1rem; align-items:flex-start; }
.sp-ic{ flex:none; width:2.9rem; height:2.9rem; display:grid; place-items:center; border-radius:14px; background:#fff; border:1px solid var(--line); color:var(--mint-deep); font-size:1.1rem; box-shadow:var(--shadow-soft); }
.sp-points b{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--text-dark); }
.sp-points p{ margin-top:.35rem; font-family:var(--font-body); font-size:.92rem; line-height:1.62; color:var(--text-muted); }

/* SmartPay queue lives on dark glass even inside a light section */
.sp-queue .gborder-inner{ background:linear-gradient(180deg, var(--card-dark-2), var(--card-dark)); }

/* ---- FAQ on light default (removed inline gray bg) ---- */
#faq{ background:var(--bg-warm); }

/* ---- Responsiveness for new components ---- */
@media (max-width: 1020px){
  .proof-grid{ grid-template-columns:repeat(2,1fr); }
  .sp-grid{ grid-template-columns:1fr; }
  .step-rail{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
}
@media (max-width: 620px){
  .proof-grid{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .proof-stat{ padding:1.1rem .7rem; }
  .sp-row{ flex-wrap:wrap; row-gap:.3rem; }
  .sp-state{ margin-left:calc(1.9rem + .9rem); }
  .hero-cta .btn-lg{ width:100%; }
}

/* ============================================================
   AVALAN — v4: THREE PLATFORMS (Telegram bot · app · web)
   ============================================================ */

/* ---- Hero platform badge row ---- */
.hero-platforms{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin-top:2rem;
  padding:.85rem 1.15rem; border-radius:var(--radius-md);
  background:linear-gradient(120deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-platforms .hp-label{ font-family:var(--font-accent); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.hero-platforms .hp-item{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-accent); font-weight:500; font-size:.87rem; color:rgba(255,255,255,.86); }
.hero-platforms .hp-item i{ color:var(--success-color); font-size:.95em; }
.hero-platforms .hp-dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.22); }

/* ---- Platform cards ---- */
.plat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; align-items:stretch; }
.plat-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:1.9rem 1.7rem 1.7rem; box-shadow:var(--shadow-soft); position:relative; overflow:hidden;
  transition:transform .38s var(--ease-soft), box-shadow .38s var(--ease-soft), border-color .38s ease; }
.plat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:var(--mint-24); }
.plat-card.featured{ border-color:var(--mint-24); box-shadow:0 1px 1px rgba(11,18,16,.04), 0 26px 60px -28px rgba(0,204,133,.35); }
.plat-card.featured::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--success-color), var(--blue-color)); }
.plat-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.05rem; }
.plat-ic{ flex:none; width:3rem; height:3rem; display:grid; place-items:center; border-radius:15px; font-size:1.25rem; color:#fff; }
.plat-ic.tg{ background:linear-gradient(140deg,#2ea6da,#1c88c4); box-shadow:0 10px 24px -10px rgba(46,166,218,.7); }
.plat-ic.app{ background:linear-gradient(140deg,#12352b,#0b1210); box-shadow:0 10px 24px -10px rgba(11,18,16,.6); }
.plat-ic.web{ background:linear-gradient(140deg,#00cc85,#0b6b47); box-shadow:0 10px 24px -10px rgba(0,204,133,.6); }
.plat-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.22rem; letter-spacing:-.02em; color:var(--text-dark); }
.plat-tag{ display:block; margin-top:.2rem; font-family:var(--font-body); font-size:.76rem; color:var(--text-muted); }
.plat-desc{ font-family:var(--font-body); font-size:.92rem; line-height:1.65; color:var(--text-muted); }
.plat-feats{ display:flex; flex-direction:column; gap:.55rem; margin-top:1.2rem; }
.plat-feats li{ display:flex; align-items:flex-start; gap:.55rem; font-family:var(--font-body); font-size:.87rem; line-height:1.5; color:var(--text-dark); }
.plat-feats i{ color:var(--mint-deep); font-size:.8em; margin-top:.25rem; }
.btn-block{ width:100%; margin-top:1.5rem; }
.plat-card .btn-block{ margin-top:auto; }
.plat-feats + .btn-block{ margin-top:1.5rem; }

/* ---- Telegram chat mock ---- */
.tg-chat{ margin-top:1.3rem; padding:.95rem; border-radius:var(--radius-md); background:linear-gradient(180deg,#eef5fa,#e6eff6); border:1px solid rgba(46,166,218,.16); }
.tg-bar{ display:flex; align-items:center; gap:.6rem; padding-bottom:.7rem; margin-bottom:.75rem; border-bottom:1px solid rgba(28,136,196,.14); }
.tg-ava{ width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; background:linear-gradient(140deg,#2ea6da,#1c88c4); color:#fff; font-size:.8rem; }
.tg-bar b{ display:block; font-family:var(--font-accent); font-weight:600; font-size:.82rem; color:#12313f; }
.tg-bar small{ font-family:var(--font-body); font-size:.68rem; color:#5b7a8a; }
.tg-msg{ max-width:88%; padding:.6rem .8rem; margin-bottom:.5rem; border-radius:14px; font-family:var(--font-body); font-size:.8rem; line-height:1.5;
  opacity:0; transform:translateY(8px); animation:tgIn .55s var(--ease-soft) forwards; animation-delay:calc(.2s + var(--i,0) * .5s); }
.tg-msg.out{ margin-left:auto; background:linear-gradient(140deg,#3aa9dd,#2b93c9); color:#fff; border-bottom-right-radius:5px; }
.tg-msg.in{ background:#fff; color:#17313d; border-bottom-left-radius:5px; box-shadow:0 2px 8px rgba(20,60,80,.07); }
.tg-msg.in b{ color:var(--mint-deep); font-weight:600; }
@keyframes tgIn{ to{ opacity:1; transform:none; } }
.tg-typing{ display:inline-flex; gap:.22rem; padding:.55rem .75rem; background:#fff; border-radius:14px; border-bottom-left-radius:5px;
  opacity:0; animation:tgIn .5s var(--ease-soft) forwards; animation-delay:calc(.2s + var(--i,0) * .5s); box-shadow:0 2px 8px rgba(20,60,80,.07); }
.tg-typing span{ width:5px; height:5px; border-radius:50%; background:#8fb4c6; animation:tgDot 1.3s ease-in-out infinite; }
.tg-typing span:nth-child(2){ animation-delay:.18s; } .tg-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes tgDot{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* ---- App mock ---- */
.plat-mock{ margin-top:1.3rem; border-radius:var(--radius-md); overflow:hidden; }
.app-mock{ padding:1.05rem; background:linear-gradient(180deg, var(--card-dark-2), var(--card-dark)); border:1px solid var(--line-dark); }
.am-top{ display:flex; justify-content:space-between; align-items:baseline; }
.am-top span{ font-family:var(--font-body); font-size:.7rem; color:rgba(255,255,255,.45); }
.am-top b{ font-family:var(--font-display); font-weight:800; font-size:1.02rem; color:#fff; letter-spacing:-.02em; }
.am-bars{ display:flex; align-items:flex-end; gap:.3rem; height:52px; margin-top:.85rem; }
.am-bars span{ flex:1; height:var(--h); border-radius:3px 3px 1px 1px; background:linear-gradient(180deg, var(--success-color), rgba(0,255,166,.25));
  transform-origin:bottom; animation:amGrow .8s var(--ease-soft) backwards; }
.am-bars span:nth-child(2n){ background:linear-gradient(180deg, var(--blue-color), rgba(151,207,243,.2)); }
.am-bars span:nth-child(1){ animation-delay:.05s } .am-bars span:nth-child(2){ animation-delay:.12s }
.am-bars span:nth-child(3){ animation-delay:.19s } .am-bars span:nth-child(4){ animation-delay:.26s }
.am-bars span:nth-child(5){ animation-delay:.33s } .am-bars span:nth-child(6){ animation-delay:.4s } .am-bars span:nth-child(7){ animation-delay:.47s }
@keyframes amGrow{ from{ transform:scaleY(.05); opacity:0; } to{ transform:scaleY(1); opacity:1; } }
.am-push{ display:flex; align-items:center; gap:.5rem; margin-top:.9rem; padding:.55rem .7rem; border-radius:10px;
  background:var(--mint-08); border:1px solid rgba(0,255,166,.16); font-family:var(--font-body); font-size:.73rem; color:rgba(255,255,255,.78); }
.am-push i{ color:var(--success-color); font-size:.85em; }

/* ---- Web mock ---- */
.web-mock{ background:#fff; border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
.wm-chrome{ display:flex; gap:.3rem; padding:.55rem .7rem; background:var(--gray-light); border-bottom:1px solid var(--line-soft); }
.wm-chrome span{ width:7px; height:7px; border-radius:50%; background:rgba(14,21,19,.16); }
.wm-body{ display:flex; min-height:118px; }
.wm-side{ flex:none; width:38px; padding:.7rem .5rem; display:flex; flex-direction:column; gap:.45rem; background:var(--bg-warm); border-right:1px solid var(--line-soft); }
.wm-side i{ height:6px; border-radius:3px; background:rgba(14,21,19,.12); }
.wm-side i:first-child{ background:var(--mint-deep); opacity:.55; }
.wm-main{ flex:1; padding:.85rem .9rem; }
.wm-line{ height:6px; border-radius:3px; background:rgba(14,21,19,.10); margin-bottom:.45rem; width:55%; }
.wm-line.long{ width:78%; background:rgba(14,21,19,.16); }
.wm-chart{ margin-top:.7rem; height:56px; border-radius:8px; background:linear-gradient(180deg, rgba(0,204,133,.09), transparent); padding:.35rem; }
.wm-chart svg{ width:100%; height:100%; }

/* ---- Sync note ---- */
.plat-sync{ display:flex; align-items:center; gap:1.1rem; max-width:760px; margin:clamp(2.2rem,4vw,3rem) auto 0;
  padding:1.25rem 1.5rem; border-radius:var(--radius-lg); background:#fff; border:1px solid var(--mint-24); box-shadow:var(--shadow-soft); }
.plat-sync .ps-ic{ flex:none; width:2.7rem; height:2.7rem; display:grid; place-items:center; border-radius:50%; background:var(--mint-14); color:var(--mint-deep); font-size:1.05rem; }
.plat-sync p{ font-family:var(--font-body); font-size:.93rem; line-height:1.6; color:var(--text-muted); }
.plat-sync b{ color:var(--text-dark); font-weight:600; }

/* ---- Final CTA channel row ---- */
.cta-channels{ margin-top:2.4rem; }
.cta-channels .cc-or{ display:block; font-family:var(--font-accent); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:1rem; }
.cc-row{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.cc-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.25rem; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.85);
  font-family:var(--font-accent); font-weight:500; font-size:.87rem; transition:border-color .3s ease, color .3s ease, transform .3s var(--ease-soft), background .3s ease; }
.cc-btn i{ color:var(--success-color); }
.cc-btn:hover{ border-color:var(--success-color); color:#fff; background:var(--mint-08); transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){
  .tg-msg, .tg-typing, .am-bars span{ animation:none; opacity:1; transform:none; }
  .tg-typing span{ animation:none; }
}
@media (max-width: 1020px){
  .plat-grid{ grid-template-columns:1fr; max-width:560px; margin:0 auto; }
}
@media (max-width: 620px){
  .hero-platforms{ gap:.55rem .7rem; padding:.8rem .9rem; }
  .hero-platforms .hp-label{ width:100%; }
  .hero-platforms .hp-dot{ display:none; }
  .plat-sync{ flex-direction:column; text-align:center; gap:.85rem; }
  .cc-row{ flex-direction:column; }
  .cc-btn{ justify-content:center; }
}

/* ---- Inline Telegram glyph (no external brands CDN dependency) ---- */
.ic-tg{ width:1em; height:1em; fill:currentColor; flex:none; display:inline-block; vertical-align:-.12em; }
.hero-cta .btn .ic-tg{ width:1.05em; height:1.05em; }
.hero-platforms .hp-item .ic-tg{ color:var(--success-color); }
.plat-ic .ic-tg{ width:1.25rem; height:1.25rem; }
.tg-ava .ic-tg{ width:.85rem; height:.85rem; }
.cc-btn .ic-tg{ color:var(--success-color); }