/* ═══════════════════════════════════════════════════════════════
   DOOBLIA LANDING — LIQUID GLASS REDESIGN
   Hero: dark with animated blobs
   Sections: alternating light/dark with glass effects
   ═══════════════════════════════════════════════════════════════ */

:root{
  --teal:#159A9C;--tl:#1AB8BA;--td:#0E7A7C;
  --dk:#0b101e;--dk2:#0f1629;--dk3:#161d33;
  --light-bg:#f0f4f8;--light-bg2:#e8edf3;--white:#ffffff;
  --text-dark:#0f172a;--text-muted:#475569;--text-subtle:#94a3b8;
  --mint:#DEEFE7;
  --fd:'Sora',sans-serif;--fb:'Plus Jakarta Sans',sans-serif;--fa:'Outfit',sans-serif;
  /* Glass tokens */
  --glass-blur:blur(20px);
  --glass-bg:rgba(255,255,255,.65);
  --glass-border:rgba(15,23,42,.08);
  --glass-shadow:0 8px 32px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9);
  --glass-dark-bg:rgba(255,255,255,.06);
  --glass-dark-border:rgba(255,255,255,.1);
  --glass-dark-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
  /* Easing */
  --ease-liquid:cubic-bezier(.22,.68,0,1.2);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--fb);color:var(--text-dark);overflow-x:hidden;background:var(--light-bg)}
a{text-decoration:none;color:inherit}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes morphBlob{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{transform:scale(.95);opacity:.5}50%{transform:scale(1.05);opacity:.3}}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes chatMsg{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes blob-drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.08)}66%{transform:translate(-40px,60px) scale(.94)}100%{transform:translate(30px,30px) scale(1.04)}}
@keyframes cascade-in{0%{opacity:0;transform:translateY(24px) scale(.97);filter:blur(6px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes glow-pulse{0%,100%{opacity:.3}50%{opacity:.7}}
.fu{animation:fadeUp .9s ease-out both}.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;transition:all .4s;background:rgba(11,16,30,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.04)}
.nav.scrolled{padding:12px 48px;background:rgba(11,16,30,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.04);box-shadow:0 4px 30px rgba(0,0,0,.15)}
.nl{display:flex;gap:36px;align-items:center}.nl a{font-size:14px;font-weight:400;color:rgba(255,255,255,.6);transition:color .3s;letter-spacing:.3px}.nl a:hover{color:#fff}
.ncta{padding:10px 24px!important;border-radius:12px;font-weight:600!important;background:rgba(255,255,255,.08)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,.12)!important;transition:all .3s!important}
.ncta:hover{background:rgba(255,255,255,.15)!important;transform:translateY(-2px)!important}
.nm{display:none;cursor:pointer}.nm span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}

/* Primary button — liquid glass glow */
.btn-glow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:15px;font-weight:600;padding:14px 30px;border-radius:14px;border:none;cursor:pointer;transition:all .3s var(--ease-smooth);position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,rgba(94,231,223,.5) 0%,rgba(21,154,156,.7) 50%,rgba(59,130,246,.4) 100%);border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-glow::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 50%);pointer-events:none;border-radius:inherit}
.btn-glow:hover{transform:translateY(-3px);box-shadow:0 8px 40px rgba(21,154,156,.45),0 0 60px rgba(94,231,223,.15),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-glow:active{transform:scale(.97)}

/* Ghost button */
.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:var(--fb);font-size:15px;font-weight:500;padding:14px 28px;border-radius:14px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 8px rgba(0,0,0,.1);transition:all .3s}
.btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}

/* Light button variants */
.btn-glow-light{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:15px;font-weight:600;padding:14px 30px;border-radius:14px;border:none;cursor:pointer;transition:all .3s;color:#fff;background:linear-gradient(135deg,var(--teal),var(--td));box-shadow:0 4px 20px rgba(21,154,156,.25);position:relative;overflow:hidden}
.btn-glow-light::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 50%);pointer-events:none}
.btn-glow-light:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(21,154,156,.35)}

.btn-ghost-light{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:14px;font-weight:600;padding:13px 26px;border-radius:14px;border:1px solid rgba(21,154,156,.2);color:var(--teal);background:rgba(21,154,156,.04);backdrop-filter:blur(10px);transition:all .3s;cursor:pointer}
.btn-ghost-light:hover{background:rgba(21,154,156,.08);border-color:rgba(21,154,156,.3);transform:translateY(-2px)}

.hero-stats{display:flex;gap:40px;margin-top:48px}
.h-stat .num{font-family:var(--fd);font-size:32px;font-weight:800;background:linear-gradient(135deg,#fff,var(--tl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h-stat .lbl{font-size:13px;color:rgba(255,255,255,.4);margin-top:2px}

/* ═══ SECTION BASE ═══ */
.sec{padding:80px 48px;position:relative}.sc{max-width:1200px;margin:0 auto}
.sh{text-align:center;margin-bottom:56px}
.slbl{font-family:var(--fa);font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:14px;display:block}
.stl{font-family:var(--fd);font-size:44px;font-weight:800;margin-bottom:16px;letter-spacing:-.5px}
.sst{font-size:17px;color:var(--text-muted);max-width:560px;margin:0 auto;line-height:1.7}
.seo-block{max-width:780px;margin:32px auto 0;text-align:center}.seo-block p{font-size:14px;color:var(--text-muted);line-height:1.8;opacity:.65}

/* ═══ LIGHT SECTION ═══ */
.sec-light{background:var(--light-bg);color:var(--text-dark)}
.sec-light .stl{color:var(--text-dark)}
.sec-light .sst{color:var(--text-muted)}

/* ═══ WHITE SECTION ═══ */
.sec-white{background:var(--white);color:var(--text-dark);position:relative;overflow:hidden}
.sec-white .stl{color:var(--text-dark)}
.sec-white .sst{color:var(--text-muted)}
.sec-dark{background:var(--dk2);color:#fff}
.sec-dark .stl{color:#fff}
.sec-dark .sst{color:rgba(255,255,255,.55)}
.ag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
.ag-card{position:relative;padding:36px 28px;border-radius:24px;overflow:hidden;transition:all .5s var(--ease-liquid);cursor:default;background:rgba(11,16,30,.88);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(26,184,186,.12);box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08),0 0 15px rgba(26,184,186,.04)}
.ag-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 20%,rgba(21,154,156,.06) 0%,transparent 60%);pointer-events:none;transition:all .5s}
.ag-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1),0 0 40px rgba(21,154,156,.06);border-color:rgba(21,154,156,.2)}
.ag-card:hover::after{background:radial-gradient(ellipse at 30% 20%,rgba(21,154,156,.1) 0%,transparent 50%)}
.ag-ico{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:rgba(21,154,156,.1);border:1px solid rgba(21,154,156,.15);position:relative;z-index:1}
.ag-ico svg{width:24px;height:24px;stroke:var(--tl);fill:none;stroke-width:1.5}
.ag-card h3{font-family:var(--fd);font-size:18px;font-weight:700;margin-bottom:10px;color:#fff;position:relative;z-index:1}
.ag-card p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:14px;position:relative;z-index:1}
.ag-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--fa);font-size:10px;font-weight:600;letter-spacing:1px;padding:4px 12px;border-radius:20px;position:relative;z-index:1}
.ag-badge.live{background:linear-gradient(135deg,rgba(94,231,223,.25),rgba(21,154,156,.35));color:#fff;border:1px solid rgba(94,231,223,.35);box-shadow:0 0 12px rgba(21,154,156,.2)}.ag-badge.live::before{content:'';width:5px;height:5px;background:var(--tl);border-radius:50%;animation:pulse 2s infinite}
.ag-badge.soon{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}

/* ═══ STEPS — DARK GLASS CARDS ═══ */
.steps-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.step{text-align:center;position:relative;padding:32px 20px;border-radius:20px;background:rgba(15,22,40,.82);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);transition:all .4s var(--ease-liquid);overflow:hidden}
.step::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 50%);pointer-events:none;border-radius:inherit}
.step:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.1);border-color:rgba(21,154,156,.15)}
.step-n{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:20px;font-weight:800;color:var(--tl);margin:0 auto 20px;background:rgba(21,154,156,.1);border:1px solid rgba(21,154,156,.15)}
.step h3{font-family:var(--fd);font-size:16px;font-weight:700;margin-bottom:8px;color:#fff}.step p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7}

/* ═══ PRICING — DARK GLASS ═══ */
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.pr-card{border-radius:24px;padding:40px 32px;transition:all .4s var(--ease-liquid);position:relative;background:var(--glass-dark-bg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--glass-dark-border);box-shadow:var(--glass-dark-shadow)}
.pr-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 50%);pointer-events:none;border-radius:inherit}
.pr-card.pop{border-color:rgba(21,154,156,.3);background:rgba(21,154,156,.08);transform:scale(1.03);box-shadow:0 12px 48px rgba(21,154,156,.15),inset 0 1px 0 rgba(255,255,255,.1)}
.pr-card.pop::after{content:'POPULAR';position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--teal),var(--tl));color:#fff;font-family:var(--fa);font-size:10px;font-weight:700;letter-spacing:1.5px;padding:5px 18px;border-radius:20px}
.pr-card:hover{border-color:rgba(21,154,156,.25);transform:translateY(-6px)}.pr-card.pop:hover{transform:scale(1.03) translateY(-6px)}
.pr-name{font-family:var(--fd);font-size:20px;font-weight:700;margin-bottom:6px;color:#fff}.pr-desc{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:20px;line-height:1.6}
.pr-price{display:flex;align-items:baseline;gap:3px;margin-bottom:6px}.pr-price .c{font-family:var(--fd);font-size:18px;font-weight:600;color:var(--tl)}.pr-price .v{font-family:var(--fd);font-size:48px;font-weight:800;line-height:1;color:#fff}.pr-price .p{font-size:15px;color:rgba(255,255,255,.4)}
.pr-bill{font-size:12px;color:rgba(255,255,255,.35);margin-bottom:28px}
.pr-list{list-style:none;margin-bottom:28px}.pr-list li{font-size:13px;color:rgba(255,255,255,.6);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:9px}
.pr-list li::before{content:'';width:18px;height:18px;border-radius:50%;flex-shrink:0;background:rgba(21,154,156,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231AB8BA' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center}
.pr-btn{display:block;width:100%;padding:14px;border-radius:14px;font-family:var(--fb);font-size:14px;font-weight:600;text-align:center;cursor:pointer;transition:all .3s;border:none}
.pr-btn.fill{color:#fff;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 20px rgba(21,154,156,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.pr-btn.fill:hover{box-shadow:0 8px 36px rgba(21,154,156,.45);transform:translateY(-2px)}
.pr-btn.outline{color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.pr-btn.outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}

/* ═══ FAQ — GLASS ON LIGHT ═══ */
.faq-w{max-width:720px;margin:0 auto}
.faq-i{margin-bottom:12px;border-radius:16px;overflow:hidden;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:0 2px 12px rgba(0,0,0,.04);transition:all .3s}
.faq-i:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.faq-q{font-family:var(--fd);font-size:16px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .3s;user-select:none;padding:20px 24px;color:var(--text-dark)}
.faq-q:hover{color:var(--teal)}
.faq-t{width:28px;height:28px;border-radius:50%;border:1px solid rgba(21,154,156,.15);background:rgba(21,154,156,.04);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:var(--teal);transition:all .3s var(--ease-liquid)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}.faq-ai{padding:0 24px 20px;font-size:14px;color:var(--text-muted);line-height:1.8}
.faq-i.on{border-color:rgba(21,154,156,.15)}.faq-i.on .faq-a{max-height:400px}.faq-i.on .faq-t{transform:rotate(45deg);border-color:var(--teal);background:rgba(21,154,156,.1)}

/* ═══ CONTACT — GLASS ON DARK ═══ */
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;text-align:left;max-width:580px;margin-left:auto;margin-right:auto}
.fg{display:flex;flex-direction:column;gap:5px}.fg.fw{grid-column:1/-1}
.fg label{font-size:12px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.5px}
.fg input,.fg select,.fg textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;color:#fff;font-family:var(--fb);font-size:14px;transition:all .3s;outline:none;backdrop-filter:blur(10px)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:rgba(94,231,223,.5);box-shadow:0 0 0 3px rgba(94,231,223,.1),0 0 20px rgba(94,231,223,.06)}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.18)}.fg textarea{resize:vertical;min-height:90px}.fg select{cursor:pointer}.fg select option{background:var(--dk2)}

/* ═══ FOOTER — CLEAN ═══ */






/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){

.ag-grid{grid-template-columns:repeat(2,1fr)}.steps-wrap{grid-template-columns:repeat(2,1fr)}.pr-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}.pr-card.pop{transform:none}.pr-card.pop:hover{transform:translateY(-6px)}}
@media(max-width:768px){


.sec{padding:60px 20px}.stl{font-size:32px}.ag-grid{grid-template-columns:1fr}.steps-wrap{grid-template-columns:1fr}.ct-form{grid-template-columns:1fr}.foot-c{flex-direction:column;text-align:center}}



.dch-bubble{position:fixed;bottom:24px;right:24px;z-index:9999;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.dch-bubble:hover{transform:scale(1.08);box-shadow:0 8px 40px rgba(21,154,156,.45)}
.dch-bubble svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2}
.dch-bubble .dch-dot{position:absolute;top:2px;right:2px;width:12px;height:12px;background:#1AB8BA;border-radius:50%;border:2px solid #0b101e;animation:dchPulse 2s infinite}
@keyframes dchPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.dch-win{position:fixed;bottom:96px;right:24px;z-index:9999;width:380px;max-height:520px;border-radius:20px;overflow:hidden;display:none;flex-direction:column;background:#fff;border:1px solid #e8eef1;box-shadow:0 20px 60px rgba(0,0,0,.15),0 0 30px rgba(21,154,156,.06)}
.dch-win.open{display:flex}
.dch-head{padding:16px 20px;background:linear-gradient(135deg,var(--dk2),var(--dk));border-bottom:1px solid rgba(26,184,186,.15);display:flex;align-items:center;gap:12px}
.dch-avatar{width:36px;height:36px;border-radius:50%;background:rgba(26,184,186,.12);border:1px solid rgba(26,184,186,.2);display:flex;align-items:center;justify-content:center}
.dch-hinfo h4{font-family:Sora,sans-serif;font-size:14px;font-weight:700;color:#fff;margin:0}
.dch-hinfo p{font-size:11px;color:#1AB8BA;margin:2px 0 0}
.dch-close{margin-left:auto;cursor:pointer;padding:4px;border-radius:8px;background:none;border:none;color:rgba(255,255,255,.4)}
.dch-close:hover{color:#fff;background:rgba(255,255,255,.05)}
.dch-msgs{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:280px;max-height:340px;background:#fff}
.dch-msgs::-webkit-scrollbar{width:4px}.dch-msgs::-webkit-scrollbar-thumb{background:rgba(21,154,156,.15);border-radius:2px}
.dch-m{max-width:85%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.6;font-family:'Plus Jakarta Sans',sans-serif}
.dch-m.bot{align-self:flex-start;background:rgba(21,154,156,.06);border:1px solid rgba(21,154,156,.1);color:#334155;border-bottom-left-radius:4px}
.dch-m.usr{align-self:flex-end;background:#f1f5f9;border:1px solid #e2e8f0;color:#334155;border-bottom-right-radius:4px}
.dch-m.typ{align-self:flex-start;background:rgba(21,154,156,.06);border:1px solid rgba(21,154,156,.1);padding:12px 18px}
.dch-m.typ span{display:inline-block;width:6px;height:6px;background:rgba(26,184,186,.5);border-radius:50%;margin:0 2px;animation:dchDot 1.4s infinite}
.dch-m.typ span:nth-child(2){animation-delay:.2s}
.dch-m.typ span:nth-child(3){animation-delay:.4s}
@keyframes dchDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
.dch-inp{padding:12px 16px;border-top:none;display:flex;gap:8px;align-items:center;background:linear-gradient(135deg,var(--dk2),var(--dk))}
.dch-inp input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 14px;color:#fff;font-size:13px;outline:none;font-family:'Plus Jakarta Sans',sans-serif}
.dch-inp input::placeholder{color:rgba(255,255,255,.25)}
.dch-inp input:focus{border-color:rgba(26,184,186,.3)}
.dch-inp button{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));background-size:300% 100%;animation:dchBtn 6s ease infinite;border:1px solid rgba(94,231,223,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
@keyframes dchBtn{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.dch-inp button:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(21,154,156,.3)}
.dch-inp button:disabled{opacity:.4;cursor:not-allowed;transform:none}
@media(max-width:768px){.dch-win{right:10px;left:10px;bottom:80px;width:auto!important;max-width:calc(100vw - 20px);max-height:65vh;border-radius:16px;box-sizing:border-box}.dch-bubble{bottom:16px;right:16px;width:52px;height:52px}.dch-msgs{min-height:200px;max-height:calc(65vh - 140px)}.dch-head{padding:12px 16px}.dch-inp{padding:10px 12px;padding-bottom:env(safe-area-inset-bottom,10px)}.dch-inp input{font-size:16px}}

/* ═══ VIDEO PANELS ═══ */
.panels-wrapper{position:relative;max-width:1200px;margin:0 auto;border-radius:28px;overflow:hidden;height:520px}
.panels-video{position:absolute;inset:0;z-index:0}
.panels-video video{width:100%;height:100%;object-fit:cover;transform:scale(1)}
.panels-video::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(21,154,156,.15) 0%,rgba(11,16,30,.2) 100%)}
.panels-container{position:relative;z-index:1;display:flex;width:100%;height:100%;gap:4px;padding:4px}
.panel{flex:0.5;border-radius:24px;position:relative;overflow:hidden;cursor:pointer;transition:all 700ms cubic-bezier(.22,.68,0,1.1)}
.panel-glass2{position:absolute;inset:0;background:linear-gradient(135deg,rgba(94,231,223,.12) 0%,rgba(21,154,156,.2) 50%,rgba(59,130,246,.1) 100%);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(94,231,223,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:all 700ms ease}
.panel.active .panel-glass2{background:rgba(11,16,30,.5);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);border:1px solid rgba(26,184,186,.4)}
.panel:hover:not(.active) .panel-glass2{background:rgba(11,16,30,.65)}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--tl));opacity:0;transition:opacity 400ms;z-index:3;border-radius:24px 24px 0 0}
.panel.active::before{opacity:1}
.panel.active::after{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:24px;border:1px solid rgba(26,184,186,.2);box-shadow:0 0 30px rgba(26,184,186,.08),inset 0 0 30px rgba(26,184,186,.03);pointer-events:none;z-index:2}
.panel-content{position:absolute;bottom:0;left:0;right:0;padding:28px;z-index:2}
.panel-ico2{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(26,184,186,.1);border:1px solid rgba(26,184,186,.15);margin-bottom:14px;opacity:0;transform:translateY(10px);transition:all 500ms ease 250ms}
.panel.active .panel-ico2{opacity:1;transform:translateY(0)}
.panel-ico2 svg{width:22px;height:22px;stroke:var(--tl);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.panel-ttl{font-family:var(--fd);font-size:16px;font-weight:700;color:#fff;margin-bottom:0;transition:all 500ms ease;white-space:nowrap}
.panel:not(.active) .panel-ttl{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);position:absolute;bottom:28px;left:50%;margin-left:-10px;font-size:14px;letter-spacing:1px;color:rgba(255,255,255,.7)}
.panel.active .panel-ttl{font-size:22px;margin-bottom:12px}
.panel-dsc{font-size:14px;color:rgba(255,255,255,.65);line-height:1.7;opacity:0;max-height:0;overflow:hidden;transition:opacity 400ms ease 300ms,max-height 400ms ease}
.panel.active .panel-dsc{opacity:1;max-height:200px}
.panel-fts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;opacity:0;transition:opacity 400ms ease 400ms}
.panel.active .panel-fts{opacity:1}
.panel-ft{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tl);padding:6px 14px;border-radius:100px;background:rgba(26,184,186,.08);border:1px solid rgba(26,184,186,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.panel.active{flex:5}
/* Compare two columns */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1200px;margin:60px auto 0;align-items:center}

.cmp-text h2{font-family:var(--fd);font-size:34px;font-weight:800;color:var(--text-dark);line-height:1.15;letter-spacing:-.5px;margin-bottom:20px}
.cmp-text p{font-size:16px;color:#64748b;line-height:1.8;margin-bottom:24px}
.cmp-stats{display:flex;gap:32px;margin-top:28px}
.cmp-stat-n{font-family:var(--fd);font-size:36px;font-weight:800;background:linear-gradient(135deg,var(--teal),var(--tl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cmp-stat-l{font-size:13px;color:var(--text-subtle);font-weight:600;margin-top:2px}
.cmp-table{padding:32px;border-radius:24px;background:linear-gradient(145deg,rgba(11,16,30,.96),rgba(15,22,40,.98));border:1px solid rgba(26,184,186,.1);box-shadow:0 20px 60px rgba(0,0,0,.15),0 0 30px rgba(21,154,156,.05)}
.cmp-table-t{font-family:var(--fd);font-size:18px;font-weight:700;color:#fff;text-align:center;margin-bottom:24px}
.cmp-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;font-size:13px}
.cmp-hd{padding:10px 16px;font-weight:700;border-bottom:2px solid rgba(26,184,186,.15)}
.cmp-hd:nth-child(1){color:rgba(255,255,255,.4)}.cmp-hd:nth-child(2){color:rgba(255,255,255,.5);text-align:center}.cmp-hd:nth-child(3){color:var(--tl);text-align:center}
.cmp-cl{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.cmp-cl:nth-child(3n+1){color:rgba(255,255,255,.6)}.cmp-cl:nth-child(3n+2){text-align:center;color:rgba(255,255,255,.4)}.cmp-cl:nth-child(3n){text-align:center;color:var(--tl);font-weight:700}
.cmp-cl:last-child,.cmp-cl:nth-last-child(2),.cmp-cl:nth-last-child(3){border-bottom:none}
.cmp-win{margin-top:20px;padding:14px 20px;border-radius:14px;background:rgba(26,184,186,.08);border:1px solid rgba(26,184,186,.12);display:flex;align-items:center;justify-content:center;gap:10px}
.cmp-win span{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--tl)}
@media(max-width:768px){.panels-wrapper{height:auto;border-radius:20px}.panels-container{flex-direction:column;padding:4px}.panel{height:70px;flex:none;border-radius:16px}.panel.active{height:360px;flex:none}.panel:not(.active) .panel-ttl{writing-mode:horizontal-tb;transform:none;position:static;font-size:14px;padding:22px}.cmp-grid{grid-template-columns:1fr;gap:32px}.cmp-text h2{font-size:26px}.cmp-stats{gap:24px}.cmp-stat-n{font-size:28px}}


/* ═══ HOW IT WORKS STEPS ═══ */
.steps-wrapper{position:relative;width:100%;overflow:hidden;height:520px}
.steps-video{position:absolute;inset:0;z-index:0}
.steps-video video{width:100%;height:100%;object-fit:cover;background:#000}
.steps-video::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(21,154,156,.08) 0%,rgba(11,16,30,.15) 100%)}
.steps-container{position:relative;z-index:1;display:flex;width:100%;height:100%;gap:4px;padding:4px}
.step-panel{flex:0.4;border-radius:24px;position:relative;overflow:hidden;cursor:pointer;transition:all 700ms cubic-bezier(.22,.68,0,1.1)}
.step-panel.active{flex:5}
.step-glass{position:absolute;inset:0;background:linear-gradient(135deg,rgba(94,231,223,.12) 0%,rgba(21,154,156,.2) 50%,rgba(59,130,246,.1) 100%);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(94,231,223,.3);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:all 700ms ease}
.step-panel.active .step-glass{background:rgba(11,16,30,.5);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);border:1px solid rgba(26,184,186,.4);border-radius:24px}
.step-panel:hover:not(.active) .step-glass{background:linear-gradient(135deg,rgba(94,231,223,.18) 0%,rgba(21,154,156,.25) 50%,rgba(59,130,246,.15) 100%)}
.step-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--tl));opacity:0;transition:opacity 400ms;z-index:3;border-radius:24px 24px 0 0}
.step-panel.active::before{opacity:1}
.step-panel.active::after{content:'';position:absolute;inset:-1px;border-radius:24px;border:1px solid rgba(26,184,186,.2);box-shadow:0 0 30px rgba(26,184,186,.08),inset 0 0 30px rgba(26,184,186,.03);pointer-events:none;z-index:2}
.step-content{position:absolute;bottom:0;left:0;right:0;padding:28px;z-index:2}
.step-num{font-family:var(--fd);font-weight:800;color:rgba(26,184,186,.3);line-height:1;transition:all 500ms ease}
.step-panel:not(.active) .step-num{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-size:28px}
.step-panel.active .step-num{font-size:56px;color:rgba(26,184,186,.12);position:absolute;top:24px;left:28px;z-index:1}
.step-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(26,184,186,.1);border:1px solid rgba(26,184,186,.15);margin-bottom:14px;opacity:0;transform:translateY(10px);transition:all 500ms ease 250ms}
.step-panel.active .step-ico{opacity:1;transform:translateY(0)}
.step-ico svg{width:22px;height:22px;stroke:var(--tl);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.step-title{font-family:var(--fd);font-size:14px;font-weight:700;color:#fff;transition:all 500ms ease;white-space:nowrap}
.step-panel:not(.active) .step-title{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);position:absolute;bottom:28px;left:50%;margin-left:-10px;font-size:13px;letter-spacing:1px;color:rgba(255,255,255,.7)}
.step-panel.active .step-title{font-size:22px;margin-bottom:12px}
.step-sub{font-family:var(--fd);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(26,184,186,.5);margin-bottom:8px;opacity:0;transition:opacity 400ms ease 200ms}
.step-panel.active .step-sub{opacity:1}
.step-desc{font-size:14px;color:rgba(255,255,255,.6);line-height:1.7;opacity:0;max-height:0;overflow:hidden;transition:opacity 400ms ease 300ms,max-height 400ms ease}
.step-panel.active .step-desc{opacity:1;max-height:200px}
.how-info{max-width:1200px;margin:60px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.how-info-left h3{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--navy);margin-bottom:16px;line-height:1.2}
.how-info-left p{font-size:15px;color:#64748b;line-height:1.8;margin-bottom:16px}
.how-cta{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:14px 30px;border-radius:14px;border:none;cursor:pointer;color:#fff;background:linear-gradient(135deg,rgba(94,231,223,.5) 0%,rgba(21,154,156,.7) 50%,rgba(59,130,246,.4) 100%);border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3),inset 0 1px 0 rgba(255,255,255,.2);text-decoration:none;transition:all .3s;margin-top:8px}
.how-cta:hover{transform:translateY(-3px);box-shadow:0 8px 40px rgba(21,154,156,.45)}
.how-info-right{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.how-stat{padding:20px;border-radius:16px;background:rgba(21,154,156,.04);border:1px solid rgba(21,154,156,.1)}
.how-stat-n{font-family:var(--fd);font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--teal),var(--tl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.how-stat-l{font-size:12px;color:#64748b;margin-top:4px}
@media(max-width:768px){.steps-wrapper{height:auto}.steps-container{flex-direction:column;padding:4px}.step-panel{height:60px;flex:none;border-radius:16px}.step-panel.active{height:300px;flex:none}.step-glass{border-radius:16px!important}.step-panel:not(.active) .step-title{writing-mode:horizontal-tb;transform:none;position:static;font-size:13px}.step-panel:not(.active) .step-num{position:static;transform:none;font-size:20px}.step-panel:not(.active) .step-content{display:flex;flex-direction:row;align-items:center;gap:12px;padding:0 20px;height:100%}.how-info{grid-template-columns:1fr;gap:32px;padding:0 20px}.how-info-left h3{font-size:22px}}


/* ═══ NEW HERO + NAV ═══ */





/* NAV */
nav{position:fixed;top:22px;left:0;right:0;z-index:50;display:flex;justify-content:center}
.nav-pill{display:flex;align-items:center;gap:32px;background:rgba(11,16,30,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:999px;padding:8px 10px 8px 22px;box-shadow:0 14px 36px -12px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06)}
.nav-brand{display:flex;align-items:center;text-decoration:none}
.nav-brand svg{width:110px;height:26px}
.nav-mid{display:flex;gap:28px}
.nav-mid a{font-family:Sora,sans-serif;font-size:13px;color:rgba(255,255,255,.5);font-weight:500;text-decoration:none;transition:color .2s}
.nav-mid a:hover{color:#fff}
.nav-btns{display:flex;gap:6px;align-items:center}
.nav-btn-acc{padding:9px 18px;border-radius:999px;font-family:Sora,sans-serif;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all .2s}
.nav-btn-acc:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-btn{padding:9px 18px;border-radius:999px;font-family:Sora,sans-serif;font-size:12.5px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);transition:all .2s}
.nav-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(21,154,156,.3)}
/* Hamburger mobile */
.nav-ham{display:none;cursor:pointer;padding:8px}
.nav-ham span{display:block;width:20px;height:2px;background:#fff;margin:4px 0;border-radius:2px}

/* HERO */
.hero-outer{position:relative;padding:10px 10px 0}
.hero8{position:relative;border-radius:28px;min-height:720px;overflow:hidden;padding:120px 40px 100px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,var(--dk2) 0%,var(--dk) 100%)}

/* Clip the hero content but let tab overflow */

.hero8-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;z-index:0}
.hero8-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,30,.4),rgba(11,16,30,.7));z-index:0}
.hero8-clip{position:absolute;inset:0;border-radius:28px;overflow:hidden;z-index:0}

.hero8-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.hero8-blob1{width:500px;height:500px;top:10%;right:-10%;background:radial-gradient(circle at 40% 40%,rgba(94,231,223,.12),rgba(21,154,156,.08) 40%,rgba(59,130,246,.05) 70%,transparent)}
.hero8-blob2{width:350px;height:350px;bottom:10%;left:5%;background:radial-gradient(circle,rgba(59,130,246,.06),transparent 70%)}
.hero8-dither{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.03) .5px,transparent 0);background-size:4px 4px;pointer-events:none}

/* Content */
.hero8-content{position:relative;z-index:2;max-width:860px}

.h8-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;background:rgba(26,184,186,.08);border:1px solid rgba(26,184,186,.15);margin-bottom:28px;animation:fu8 .7s ease both}
.h8-tag::before{content:'✦';color:var(--tl);font-size:12px}
.h8-tag span{font-family:Sora,sans-serif;font-size:11px;font-weight:600;color:var(--tl);letter-spacing:1.5px;text-transform:uppercase}

.h8-title{font-family:Sora,sans-serif;font-size:clamp(36px,5vw,58px);font-weight:800;line-height:1.08;letter-spacing:-2px;color:#fff;margin-bottom:28px;animation:fu8 .7s ease .1s both}
.h8-title .gr-anim{background:linear-gradient(90deg,#5ee7df,var(--tl),#3b82f6,var(--tl),#5ee7df);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientMove 6s ease infinite}

.social-pill{display:inline-flex;vertical-align:-0.05em;margin-left:12px;gap:5px;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,rgba(94,231,223,.15),rgba(21,154,156,.25),rgba(59,130,246,.15));border:1px solid rgba(94,231,223,.2);box-shadow:0 8px 24px -6px rgba(21,154,156,.3)}
.sp-i{width:clamp(30px,4vw,42px);height:clamp(30px,4vw,42px);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.sp-i.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.sp-i.fb{background:#1877F2}
.sp-i.li{background:#0A66C2}
.sp-i svg{width:55%;height:55%;fill:#fff}

.h8-desc{font-size:16px;color:rgba(255,255,255,.45);line-height:1.65;max-width:540px;margin:0 auto 36px;animation:fu8 .7s ease .2s both}

.h8-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;animation:fu8 .7s ease .3s both}
.btn-g8{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-family:Sora,sans-serif;font-size:14px;font-weight:600;color:#fff;text-decoration:none;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3),inset 0 1px 0 rgba(255,255,255,.15);transition:all .2s}
.btn-g8:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(21,154,156,.4)}
.btn-l8{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-family:Sora,sans-serif;font-size:14px;font-weight:500;color:rgba(255,255,255,.6);text-decoration:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px -8px rgba(0,0,0,.15);transition:all .2s}
.btn-l8:hover{background:rgba(255,255,255,.08);color:#fff}

.h8-stats{display:flex;justify-content:center;gap:48px;animation:fu8 .7s ease .4s both}
.h8s{text-align:center}
.h8s-n{font-family:Sora,sans-serif;font-size:28px;font-weight:800;color:var(--tl)}
.h8s-l{font-size:12px;color:rgba(255,255,255,.25);margin-top:4px;font-weight:500}

/* ═══ DASHBOARD — bottom left with animated charts ═══ */
.hero-dash8{position:absolute;bottom:20px;left:2%;z-index:3;width:280px;animation:fu8 .8s ease .6s both}
.hd8-inner{background:rgba(11,16,30,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(26,184,186,.15);border-radius:20px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 30px rgba(26,184,186,.05)}
.hd8-top{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.hd8-dot{width:8px;height:8px;border-radius:50%}
.hd8-dot.r{background:#ff5f57}.hd8-dot.y{background:#febc2e}.hd8-dot.g{background:#28c840}
.hd8-url{margin-left:auto;font-size:9px;color:rgba(255,255,255,.2);padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.04)}
.hd8-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.hd8-stat{padding:8px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04)}
.hd8-stat-l{font-size:8px;color:rgba(255,255,255,.3);margin-bottom:4px}
.hd8-stat-v{font-family:Sora,sans-serif;font-size:14px;font-weight:800;color:#fff}
.hd8-stat-c{font-size:8px;color:var(--tl);margin-top:2px}
.hd8-chart{padding:10px;border-radius:10px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.03);margin-bottom:10px}
.hd8-chart-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.hd8-chart-t{font-family:Sora,sans-serif;font-size:9px;font-weight:700;color:rgba(255,255,255,.5)}
.hd8-chart-p{font-size:8px;color:rgba(255,255,255,.2);padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.04)}

/* Animated chart line drawing */
.hd8-line-anim{stroke-dasharray:500;stroke-dashoffset:500;animation:drawLine 3s ease 1s forwards,drawLine 3s ease 11s forwards}
.hd8-dot-anim1{opacity:0;animation:dotPop .3s ease 2.5s forwards,dotPop .3s ease 12.5s forwards}
.hd8-dot-anim2{opacity:0;animation:dotPop .3s ease 3s forwards,dotPop .3s ease 13s forwards}

/* Animated bars */
.hd8-bars{display:flex;flex-direction:column;gap:6px}
.hd8-bar-row{display:flex;align-items:center;gap:6px}
.hd8-bar-l{font-size:8px;color:rgba(255,255,255,.35);width:55px;flex-shrink:0}
.hd8-bar-track{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.04);overflow:hidden}
.hd8-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--tl));width:0;transition:width 1s ease}
.hd8-bar-v{font-family:Sora,sans-serif;font-size:9px;font-weight:700;color:var(--tl);width:28px;text-align:right}

.hd8-bar-anim1{animation:barGrow 2s ease 1.5s forwards,barGrow 2s ease 11.5s forwards}
.hd8-bar-anim2{animation:barGrow 2s ease 2s forwards,barGrow 2s ease 12s forwards}
.hd8-bar-anim3{animation:barGrow 2s ease 2.5s forwards,barGrow 2s ease 12.5s forwards}

@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes dotPop{to{opacity:1}}
@keyframes barGrow{to{width:var(--w,78%)}}

/* ═══ AI ACTIVITY — left side notifications ═══ */
.hero-activity{position:absolute;bottom:30px;left:2%;z-index:3;width:230px;display:flex;flex-direction:column;gap:8px;animation:fu8 .8s ease .6s both}
.ha-card{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(11,16,30,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transform:translateX(-20px)}
.ha-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ha-text{font-family:Sora,sans-serif;font-size:10px;font-weight:600;color:rgba(255,255,255,.8)}
.ha-sub{font-size:9px;color:rgba(255,255,255,.3);margin-top:2px}

/* Staggered loop — each card slides in, stays, slides out */
.ha-loop1{animation:actLoop 12s ease 0s infinite}
.ha-loop2{animation:actLoop 12s ease 2s infinite}
.ha-loop3{animation:actLoop 12s ease 4s infinite}
.ha-loop4{animation:actLoop 12s ease 6s infinite}
.ha-loop5{animation:actLoop 12s ease 8s infinite}
.ha-loop6{animation:actLoop 12s ease 10s infinite}

@keyframes actLoop{
  0%{opacity:0;transform:translateX(-20px)}
  5%{opacity:1;transform:translateX(0)}
  14%{opacity:1;transform:translateX(0)}
  19%{opacity:0;transform:translateX(10px)}
  100%{opacity:0;transform:translateX(-20px)}
}

/* ═══ PHONE — bottom right with animated chat ═══ */
.hero-phone{position:absolute;bottom:20px;right:2%;z-index:3;width:240px;animation:fu8 .8s ease .5s both}
.hp-inner{background:rgba(11,16,30,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(26,184,186,.15);border-radius:28px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 30px rgba(26,184,186,.05)}
.hp-notch{width:60px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin:4px auto 12px}
.hp-header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);margin-bottom:12px}
.hp-avatar{width:28px;height:28px;border-radius:8px;background:rgba(26,184,186,.1);border:1px solid rgba(26,184,186,.15);display:flex;align-items:center;justify-content:center}
.hp-name{font-family:Sora,sans-serif;font-size:11px;font-weight:700;color:#fff}
.hp-status{font-size:9px;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:4px}
.hp-dot{width:5px;height:5px;border-radius:50%;background:#10b981;box-shadow:0 0 6px #10b981}
.hp-chat{display:flex;flex-direction:column;gap:6px;min-height:200px;padding:4px 2px}
.hp-msg{padding:8px 12px;border-radius:14px;font-size:11px;line-height:1.5;max-width:85%;opacity:0;transform:translateY(10px)}
.hp-bot{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.7);align-self:flex-start;border-bottom-left-radius:4px}
.hp-user{background:rgba(26,184,186,.12);border:1px solid rgba(26,184,186,.15);color:rgba(255,255,255,.8);align-self:flex-end;border-bottom-right-radius:4px}
.hp-sender{font-family:Sora,sans-serif;font-size:9px;font-weight:700;color:var(--tl);margin-bottom:3px}
.hp-input-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.hp-input-bar span{font-size:10px;color:rgba(255,255,255,.2)}
.hp-send{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--tl));display:flex;align-items:center;justify-content:center}

/* Chat bubble animations — infinite loop like a video */
.hp-anim1{animation:msgLoop 10s ease infinite}
.hp-anim2{animation:msgLoop 10s ease 1.5s infinite}
.hp-anim3{animation:msgLoop 10s ease 3s infinite}
.hp-anim4{animation:msgLoop 10s ease 4.5s infinite}
.hp-anim5{animation:msgLoop 10s ease 6s infinite}

@keyframes msgLoop{
  0%{opacity:0;transform:translateY(10px)}
  8%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(0)}
  85%{opacity:0;transform:translateY(-5px)}
  100%{opacity:0;transform:translateY(10px)}
}

/* ═══ TAB — sharper inner curves ═══ */
.hero8-tab{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:260px;height:44px;z-index:10}
.hero8-tab svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 -4px 8px rgba(0,0,0,.08))}
.hero8-tab-text{position:absolute;top:14px;left:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;z-index:11}



/* ═══ HERO + NAV RESPONSIVE ═══ */
@media(max-width:1024px){
  .hero-phone{width:210px;bottom:15px;right:1.5%}
  .hero-activity{width:200px;bottom:25px;left:1.5%}
  .ha-card{padding:8px 10px}
  .ha-text{font-size:9px}
  .ha-sub{font-size:8px}
  .h8-title{font-size:clamp(32px,4.5vw,50px)}
  .h8-desc{font-size:15px;max-width:480px}
}
@media(max-width:900px){
  .hero-phone{display:none!important}
  .hero-activity{display:none!important}
  .hero8{min-height:auto;padding:130px 32px 100px}
  .h8-title{font-size:clamp(30px,5vw,46px);letter-spacing:-2px}
  .hero8-content{max-width:640px}
}
@media(max-width:768px){
  .nav-pill{width:calc(100% - 24px)!important;gap:0!important;padding:8px 12px 8px 16px!important;justify-content:space-between!important}
  .nav-mid{display:none!important;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;background:rgba(11,16,30,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px 20px 0 0;padding:16px 16px 8px;gap:2px;border:1px solid rgba(255,255,255,.06);border-bottom:none;box-shadow:0 14px 40px rgba(0,0,0,.3)}
  .nav-mid.on{display:flex!important}
  .nav-mid a{padding:12px 16px;border-radius:12px;font-size:14px;color:rgba(255,255,255,.7);text-align:left}
  .nav-btns{display:none!important}
  .nav-btns.on{display:flex!important;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;margin-top:248px;background:rgba(11,16,30,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:0 0 20px 20px;padding:8px 16px 16px;gap:8px;border:1px solid rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 14px 40px rgba(0,0,0,.3)}
  .nav-btns.on .nav-btn-acc,.nav-btns.on .nav-btn{width:100%;text-align:center;padding:12px 20px;font-size:14px;display:block;border-radius:12px}
  .nav-ham{display:block!important}
  .hero-outer{padding:6px 6px 0!important}
  .hero8{min-height:auto!important;padding:110px 20px 90px!important;border-radius:20px!important}
  .hero8-content{max-width:100%}
  .h8-tag{margin-bottom:20px}
  .h8-tag span{font-size:10px;letter-spacing:1px}
  .h8-title{font-size:clamp(28px,8vw,40px)!important;letter-spacing:-1.5px;line-height:1.1;margin-bottom:20px}
  .h8-desc{font-size:15px;margin-bottom:28px;line-height:1.7;max-width:100%}
  .h8-btns{flex-direction:column;gap:10px;margin-bottom:36px}
  .btn-g8,.btn-l8{width:100%;justify-content:center;padding:14px 24px;font-size:14px}
  .h8-stats{gap:24px;flex-wrap:nowrap;justify-content:center}
  .h8s-n{font-size:22px}
  .h8s-l{font-size:10px}
  .hero-phone{display:none!important}
  .hero-activity{display:none!important}
  .hero8-blob1{width:300px;height:300px;right:-20%}
  .hero8-blob2{width:200px;height:200px}
  .sec{padding:60px 20px}.stl{font-size:32px}.ag-grid{grid-template-columns:1fr}.steps-wrap{grid-template-columns:1fr}.ct-form{grid-template-columns:1fr}.foot-c{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .nav-pill{width:calc(100% - 16px)!important;padding:6px 10px 6px 14px!important}
  .hero-outer{padding:4px 4px 0!important}
  .hero8{padding:100px 16px 80px!important;border-radius:16px!important}
  .h8-tag{padding:5px 14px}
  .h8-title{font-size:clamp(24px,9vw,34px)!important;letter-spacing:-1px}
  .h8-desc{font-size:14px;line-height:1.7}
  .h8-stats{gap:16px}
  .h8s-n{font-size:18px}
  .h8s-l{font-size:9px}
  .btn-g8,.btn-l8{padding:12px 20px;font-size:13px}
}
@media(max-width:360px){
  .hero8{padding:90px 14px 70px!important}
  .h8-title{font-size:24px!important}
  .h8-desc{font-size:13px}
  .h8-stats{flex-direction:column;gap:12px;align-items:center}
}


/* ═══ NEW BENEFITS BENTO ═══ */





.ben-sec{padding:80px 48px 80px;background:#fff;overflow:hidden}
.ben-inner{max-width:90%;margin:0 auto}

/* ═══ TAG — small pill top left ═══ */
.ben-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:100px;background:rgba(21,154,156,.06);border:1px solid rgba(21,154,156,.08);margin-bottom:28px}
.ben-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--tl)}
.ben-tag span{font-family:Sora,sans-serif;font-size:10px;font-weight:600;color:var(--teal);letter-spacing:1.5px;text-transform:uppercase}

/* ═══ TITLE — editorial with ghost second line + SEO text right ═══ */
.ben-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:44px}
.ben-title{font-family:Sora,sans-serif;font-size:clamp(34px,5vw,52px);font-weight:800;line-height:1.05;letter-spacing:-2px;flex:1}
.ben-title-l1{color:var(--navy);display:block}
.ben-title-l2{color:rgba(180,190,201,.5);display:block}
.ben-sub{font-size:15px;color:#64748b;line-height:1.8;max-width:460px;flex-shrink:0}

/* ═══ BENTO GRID ═══ */
.bento3{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:500px}

/* ═══ MAIN CARD — dark, left, spans all rows ═══ */
.b3-main{grid-row:1/3;position:relative;border-radius:24px;overflow:hidden;background:var(--dk)}
.b3-main-video{position:absolute;inset:0;z-index:0}
.b3-main-video video{width:100%;height:100%;object-fit:cover;opacity:.5}
.b3-main-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,16,30,.15) 0%,rgba(11,16,30,.6) 50%,rgba(11,16,30,.9) 100%)}
.b3-main-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:28px}

/* Main top */
.b3-top{display:flex;align-items:center;gap:6px}
.b3-top-dot{width:6px;height:6px;border-radius:50%;background:var(--tl);box-shadow:0 0 8px var(--tl);animation:pulse3 2s infinite}
.b3-top-label{font-size:11px;font-weight:500;color:rgba(255,255,255,.45);letter-spacing:.5px}
@keyframes pulse3{0%,100%{opacity:1}50%{opacity:.4}}

/* Main center + bottom */
.b3-center{text-align:left;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.b3-m-title{font-family:Sora,sans-serif;font-size:28px;font-weight:800;color:#fff;margin-bottom:6px;transition:all .35s ease}
.b3-m-sub{font-size:16px;color:var(--tl);font-weight:600;margin-bottom:14px;transition:all .35s ease}
.b3-m-desc{font-size:14px;color:rgba(255,255,255,.5);line-height:1.7;max-width:480px;margin:0 0 14px;transition:all .35s ease}
.b3-m-feats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;transition:all .35s ease}
.b3-m-feat{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--tl);padding:5px 12px;border-radius:100px;background:rgba(26,184,186,.08);border:1px solid rgba(26,184,186,.12);backdrop-filter:blur(10px)}
.b3-m-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:100px;font-family:Sora,sans-serif;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);text-decoration:none;transition:all .25s;cursor:pointer}
.b3-m-btn:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}

/* Dots */
.b3-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.b3-d{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer;transition:all .3s}
.b3-d.on{background:var(--tl);box-shadow:0 0 8px var(--tl)}

/* ═══ RIGHT CARDS — white with bottom blur/fade ═══ */
.b3-card{position:relative;border-radius:18px;background:#fff;padding:20px;cursor:pointer;transition:all .3s;overflow:hidden;border:1px solid #e8eef1;box-shadow:0 4px 20px rgba(180,190,201,.25);display:flex;flex-direction:column}
.b3-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(180,190,201,.3),0 8px 0 -4px rgba(235,235,235,.8),0 12px 0 -6px rgba(225,225,225,.5)}
.b3-card.on{box-shadow:0 8px 28px rgba(21,154,156,.1),0 8px 0 -4px rgba(220,239,231,.8),0 12px 0 -6px rgba(210,235,225,.5);border:1px solid rgba(21,154,156,.2)}

/* Bottom rounded border effect on cards — like reference */
.b3-card::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:4px;background:rgba(0,0,0,.04);border-radius:4px 4px 0 0;pointer-events:none}
.b3-card::before{content:'';position:absolute;bottom:-2px;left:24px;right:24px;height:4px;background:rgba(0,0,0,.02);border-radius:0 0 8px 8px;pointer-events:none;z-index:-1}
.b3-card{box-shadow:0 4px 20px rgba(180,190,201,.2),0 8px 0 -4px rgba(240,240,240,.8),0 12px 0 -6px rgba(230,230,230,.5);border-radius:18px 18px 20px 20px}

/* Card 1 — text top, stars + ghost number bottom */
.b3-card .b3-c1-top{margin-bottom:auto}
.b3-c1-title{font-family:Sora,sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.b3-c1-title .c-dot{width:5px;height:5px;border-radius:50%;background:var(--tl);flex-shrink:0}
.b3-c1-text{font-size:13px;color:#64748b;line-height:1.65;margin-bottom:12px}
.b3-c1-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid #eef1f5}
.b3-c1-left{}
.b3-c1-logo{font-family:Sora,sans-serif;font-size:12px;font-weight:700;color:var(--teal);display:block;margin-bottom:6px}
.b3-c1-stars{display:flex;gap:2px}
.b3-c1-star{width:16px;height:16px;border-radius:3px;background:var(--tl);display:flex;align-items:center;justify-content:center}
.b3-c1-star svg{width:9px;height:9px}
.b3-c1-num{font-family:Sora,sans-serif;font-size:64px;font-weight:900;color:rgba(180,190,201,.18);line-height:1;letter-spacing:-3px}
.b3-c1-num span{font-size:40px}

/* Card 2 — testimonial with avatar */
.b3-c3-wrap{display:flex;gap:16px;align-items:center;height:100%}
.b3-c3-img{width:140px;height:100%;min-height:160px;border-radius:16px;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--teal),var(--tl));position:relative}
.b3-c3-img::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(21,154,156,.8),rgba(59,130,246,.6));mix-blend-mode:multiply}
.b3-c3-img svg{position:relative;z-index:1;width:100%;height:100%;padding:18px;fill:rgba(255,255,255,.4)}
.b3-c3-right{}
.b3-c3-quote{font-size:13px;color:#334155;line-height:1.55;margin-bottom:8px}
.b3-c3-quote::before{content:'"';font-family:Georgia,serif;font-size:20px;color:var(--tl);margin-right:2px}
.b3-c3-author{font-size:11px;color:#94a3b8}
.b3-c3-author b{color:var(--navy);font-weight:600}

/* ═══ COMPARE SECTION ═══ */
.cmp-wrap{margin:60px 0 0;display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start;padding:0}
.cmp-text h3{font-family:Sora,sans-serif;font-size:28px;font-weight:800;color:var(--navy);margin-bottom:16px;line-height:1.2}
.cmp-text p{font-size:15px;color:#64748b;line-height:1.8;margin-bottom:16px}
.cmp-text .slbl{margin-bottom:16px}
.cmp-seo{font-size:13px;color:#94a3b8;line-height:1.8;margin-top:20px;padding-top:16px;border-top:1px solid #e8eef1}
.slbl{display:inline-flex;align-items:center;gap:8px;font-family:Sora,sans-serif;font-size:12px;font-weight:700;color:var(--teal);letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:100px;background:rgba(21,154,156,.06);border:1px solid rgba(21,154,156,.12)}
.cmp-stats2{display:flex;gap:32px;margin-top:24px}
.cmp-s-n{font-family:Sora,sans-serif;font-size:32px;font-weight:800;background:linear-gradient(90deg,#5ee7df,var(--tl),#3b82f6,var(--tl),#5ee7df);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradMove 6s ease infinite}
@keyframes gradMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.cmp-s-l{font-size:12px;color:#94a3b8;margin-top:2px}

.cmp-table2{padding:28px;border-radius:20px;background:linear-gradient(145deg,rgba(11,16,30,.96),rgba(15,22,40,.98));border:1px solid rgba(26,184,186,.1);box-shadow:0 16px 48px rgba(0,0,0,.12)}
.cmp-table2-t{font-family:Sora,sans-serif;font-size:16px;font-weight:700;color:#fff;text-align:center;margin-bottom:20px}
.ct-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;font-size:13px}
.ct-hd{padding:8px 14px;font-weight:700;border-bottom:2px solid rgba(26,184,186,.15)}
.ct-hd:nth-child(1){color:rgba(255,255,255,.4)}.ct-hd:nth-child(2){color:rgba(255,255,255,.5);text-align:center}.ct-hd:nth-child(3){color:var(--tl);text-align:center}
.ct-cl{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.ct-cl:nth-child(3n+1){color:rgba(255,255,255,.5)}.ct-cl:nth-child(3n+2){text-align:center;color:rgba(255,255,255,.35)}.ct-cl:nth-child(3n){text-align:center;color:var(--tl);font-weight:700}
.ct-cl:last-child,.ct-cl:nth-last-child(2),.ct-cl:nth-last-child(3){border-bottom:none}
.ct-win{margin-top:16px;padding:12px;border-radius:12px;background:rgba(26,184,186,.06);border:1px solid rgba(26,184,186,.1);display:flex;align-items:center;justify-content:center;gap:8px}
.ct-win span{font-family:Sora,sans-serif;font-size:13px;font-weight:700;color:var(--tl)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .ben-header-row{flex-direction:column;gap:16px}
  .ben-sub{max-width:100%}
  .bento3{grid-template-columns:1fr;grid-template-rows:auto;height:auto;gap:12px}
  .b3-main{grid-row:auto;min-height:360px}
  .cmp-wrap{grid-template-columns:1fr;gap:32px}
}
@media(max-width:600px){
  .ben-sec{padding:60px 20px}
  .ben-title{font-size:30px;letter-spacing:-1px}
  .b3-main{min-height:300px}
  .b3-c2-num{font-size:42px}
  .b3-c3-wrap{flex-direction:column;align-items:flex-start}.b3-c3-img{width:100%;height:140px;min-height:auto}
  .cmp-stats2{flex-wrap:wrap;gap:20px}
  .cmp-s-n{font-size:26px}
}


/* ═══ NEW PRICING ═══ */





.pr-sec{padding:0;background:transparent;overflow:hidden}
.pr-outer{padding:10px 10px;background:#fff}
.pr-sec-inner-bg{padding:80px 48px;background:linear-gradient(180deg,var(--dk2),var(--dk));border-radius:28px;overflow:hidden}
.pr-inner{max-width:90%;margin:0 auto}

/* ═══ TAG ═══ */
.pr-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:100px;background:rgba(26,184,186,.06);border:1px solid rgba(26,184,186,.1);margin-bottom:28px}
.pr-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--tl)}
.pr-tag span{font-family:Sora,sans-serif;font-size:10px;font-weight:600;color:var(--tl);letter-spacing:1.5px;text-transform:uppercase}

/* ═══ TITLE — editorial with ghost line ═══ */
.pr-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:48px}
.pr-title{font-family:Sora,sans-serif;font-size:clamp(34px,5vw,52px);font-weight:800;line-height:1.05;letter-spacing:-2px;flex:1}
.pr-title-l1{color:#fff;display:block}
.pr-title-l2{color:rgba(180,190,201,.3);display:block}
.pr-subtitle{font-size:15px;color:rgba(255,255,255,.4);line-height:1.8;max-width:460px;flex-shrink:0}

/* ═══ TRIAL BANNER ═══ */
.pr-trial{max-width:100%;margin:0 0 40px;padding:24px 32px;border-radius:20px;background:linear-gradient(135deg,rgba(21,154,156,.1),rgba(59,130,246,.06));border:1.5px solid rgba(26,184,186,.2);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;backdrop-filter:blur(10px)}
.pr-trial-left{}
.pr-trial-title{font-family:Sora,sans-serif;font-size:20px;font-weight:800;color:#fff;margin-bottom:4px}
.pr-trial-sub{font-size:13px;color:rgba(255,255,255,.4)}
.pr-trial-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:100px;color:#fff;font-family:Sora,sans-serif;font-size:13px;font-weight:700;text-decoration:none;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3);transition:all .3s;flex-shrink:0}
.pr-trial-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(21,154,156,.4)}

/* ═══ CARDS GRID ═══ */
.pr-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Card base */
.pr-card2{border-radius:22px;padding:32px;position:relative;overflow:hidden;display:flex;flex-direction:column}

/* Card light (CM Orgánico) */
.pr-card2.light{background:#fff;color:var(--navy);box-shadow:0 4px 20px rgba(180,190,201,.2),0 8px 0 -4px rgba(240,240,240,.8),0 12px 0 -6px rgba(230,230,230,.5)}

/* Card dark (CM + Ads) */
.pr-card2.dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.pr-card2.dark::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 50%);pointer-events:none;border-radius:inherit}

/* Card header */
.pr-card2-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.pr-card2-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.light .pr-card2-icon{background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));background-size:300% 100%;animation:iconGrad 6s ease infinite;border:1px solid rgba(94,231,223,.4)}
.dark .pr-card2-icon{background:linear-gradient(135deg,rgba(94,231,223,.25),rgba(21,154,156,.35),rgba(59,130,246,.2));background-size:300% 100%;animation:iconGrad 6s ease infinite;border:1px solid rgba(94,231,223,.15)}
@keyframes iconGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.pr-card2-name{font-family:Sora,sans-serif;font-size:14px;font-weight:700}
.pr-card2-for{font-size:11px;color:#94a3b8;margin-left:8px;font-weight:500}
.dark .pr-card2-for{color:rgba(255,255,255,.35)}
.pr-card2-badge{font-size:10px;font-weight:600;color:var(--tl);padding:3px 10px;border-radius:20px;background:rgba(26,184,186,.1);border:1px solid rgba(26,184,186,.15)}

/* Price */
.pr-card2-price{margin-bottom:20px}
.pr-card2-amount{font-family:Sora,sans-serif;font-size:48px;font-weight:900;line-height:1;letter-spacing:-2px}
.light .pr-card2-amount{color:var(--navy)}
.dark .pr-card2-amount{color:#fff}
.pr-card2-period{font-family:Sora,sans-serif;font-size:16px;font-weight:400;color:#94a3b8;margin-left:4px}
.dark .pr-card2-period{color:rgba(255,255,255,.35)}
.pr-card2-bill{font-size:12px;color:#94a3b8;margin-top:4px}
.dark .pr-card2-bill{color:rgba(255,255,255,.25)}

/* CTA button */
.pr-card2-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:100px;font-family:Sora,sans-serif;font-size:13px;font-weight:700;text-decoration:none;transition:all .3s;margin-bottom:24px;cursor:pointer}
.light .pr-card2-btn{background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));color:#fff;border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3)}
.light .pr-card2-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(21,154,156,.4)}
.dark .pr-card2-btn{background:linear-gradient(135deg,rgba(94,231,223,.25),rgba(21,154,156,.35),rgba(59,130,246,.2));color:rgba(255,255,255,.4);border:1px solid rgba(94,231,223,.15);cursor:default}

/* Features */
.pr-card2-label{font-family:Sora,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.light .pr-card2-label{color:var(--navy)}
.dark .pr-card2-label{color:rgba(255,255,255,.5)}
.pr-card2-feats{display:flex;flex-direction:column;gap:10px;flex:1}
.pr-card2-feat{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5}
.light .pr-card2-feat{color:#475569}
.dark .pr-card2-feat{color:rgba(255,255,255,.45)}
.pr-card2-feat svg{flex-shrink:0;margin-top:2px}
.light .pr-card2-feat svg{color:var(--teal)}
.dark .pr-card2-feat svg{color:rgba(255,255,255,.2)}

/* ═══ SEO BANNER ═══ */
.pr-seo-banner{margin-top:40px;padding:24px 32px;border-radius:20px;background:linear-gradient(135deg,rgba(21,154,156,.08),rgba(59,130,246,.04));border:1px solid rgba(26,184,186,.12);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;backdrop-filter:blur(10px)}
.pr-seo-left{flex:1}
.pr-seo-title{font-family:Sora,sans-serif;font-size:18px;font-weight:800;margin-bottom:6px;background:linear-gradient(90deg,#5ee7df,var(--tl),#3b82f6,var(--tl),#5ee7df);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:seoGrad 6s ease infinite}
.pr-seo-sub{font-size:13px;color:rgba(255,255,255,.35);line-height:1.7}
.pr-seo-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:100px;color:#fff;font-family:Sora,sans-serif;font-size:13px;font-weight:700;text-decoration:none;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3);transition:all .3s;flex-shrink:0}
.pr-seo-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(21,154,156,.4)}
@keyframes seoGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .pr-header-row{flex-direction:column;gap:16px}
  .pr-subtitle{max-width:100%}
  .pr-cards{grid-template-columns:1fr}
  .pr-trial{flex-direction:column;text-align:center}
}
@media(max-width:600px){
  .pr-outer{padding:6px 6px}
  .pr-sec-inner-bg{padding:60px 20px;border-radius:20px}
  .pr-title{font-size:30px;letter-spacing:-1px}
  .pr-card2{padding:24px}
  .pr-card2-amount{font-size:40px}
}



/* ═══ NEW HOW IT WORKS ═══ */





.hw-sec{padding:80px 48px;background:#fff;overflow:hidden}
.hw-inner{max-width:90%;margin:0 auto}

/* Header */
.hw-header{text-align:center;margin-bottom:60px}
.hw-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:100px;background:rgba(21,154,156,.06);border:1px solid rgba(21,154,156,.08);margin-bottom:20px}
.hw-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--tl)}
.hw-tag span{font-family:Sora,sans-serif;font-size:10px;font-weight:600;color:var(--teal);letter-spacing:1.5px;text-transform:uppercase}
.hw-title{font-family:Sora,sans-serif;font-size:clamp(32px,4.5vw,48px);font-weight:800;line-height:1.1;letter-spacing:-2px;margin-bottom:16px}
.hw-title-l1{color:var(--navy);display:block}
.hw-title-l2{color:rgba(180,190,201,.4);display:block}
.hw-sub{font-size:16px;color:#64748b;line-height:1.7;max-width:560px;margin:0 auto}

/* ═══ HUB GRID — 3 columns: left cards | center | right cards ═══ */
.hw-grid{display:grid;grid-template-columns:2fr 1fr 280px 1fr 2fr;gap:0;align-items:center;margin-bottom:20px}

/* Left & Right columns — with vertical connectors between cards */
.hw-col{display:flex;flex-direction:column;gap:0}
.hw-col-r{align-items:stretch}
.hw-col-l{align-items:stretch}

/* Vertical connector between cards */
.hw-vline{width:2px;height:20px;margin:0 auto;border-left:2px dashed rgba(180,190,201,.3);position:relative}
.hw-vline::after{content:'';position:absolute;bottom:-3px;left:-4px;width:6px;height:6px;border-radius:50%;background:rgba(180,190,201,.2)}

/* Center column */
.hw-mid{display:flex;flex-direction:column;align-items:center;position:relative;justify-content:center}
.hw-center{width:160px;height:160px;border-radius:32px;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));background-size:300% 100%;animation:hwGrad 6s ease infinite;box-shadow:0 16px 48px rgba(21,154,156,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5}
.hw-center-icon svg{width:52px;height:52px;fill:#fff;margin-bottom:8px}
.hw-center-label{font-family:Sora,sans-serif;font-size:14px;font-weight:800;color:#fff}
@keyframes hwGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Step cards — full width of column */
.hw-step{width:100%;padding:24px;border-radius:18px;background:#fff;border:1px solid #e8eef1;box-shadow:0 4px 20px rgba(180,190,201,.2),0 8px 0 -4px rgba(240,240,240,.8),0 12px 0 -6px rgba(230,230,230,.5);transition:all .3s;cursor:default;position:relative}
.hw-step:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(180,190,201,.25),0 8px 0 -4px rgba(235,235,235,.8),0 12px 0 -6px rgba(225,225,225,.5)}

/* Lines between columns */
.hw-lines-col{display:flex;flex-direction:column;justify-content:space-around;height:100%;padding:20px 0}
.hw-hline{position:relative;height:2px;width:100%;display:flex;align-items:center}
.hw-hline::before{content:'';position:absolute;left:0;right:0;top:0;border-top:2px dashed rgba(180,190,201,.35)}
.hw-hline .dot-l{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:rgba(180,190,201,.3)}
.hw-hline .dot-r{position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--tl);box-shadow:0 0 6px var(--tl)}

/* Right lines — invert dot colors (teal near agent = left side) */
.hw-lines-right .hw-hline .dot-l{background:var(--tl);box-shadow:0 0 6px var(--tl)}
.hw-lines-right .hw-hline .dot-r{background:rgba(180,190,201,.3);box-shadow:none}

/* Remove old pseudo lines from cards */
.hw-col-l .hw-step::after,.hw-col-r .hw-step::after{display:none}

/* Lines between columns — drawn with pseudo on hw-mid */
/* Center card */

.hw-step-num{font-family:Sora,sans-serif;font-size:48px;font-weight:900;color:rgba(180,190,201,.15);line-height:1;margin-bottom:10px;letter-spacing:-2px}
.hw-step-title{font-family:Sora,sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px}
.hw-step-desc{font-size:13px;color:#64748b;line-height:1.65}

/* Bottom step (7) centered */
.hw-bottom{display:flex;justify-content:center;margin-top:0}
.hw-bottom .hw-step{width:100%;max-width:calc(40% - 10px)}
.hw-bottom .hw-step::after,.hw-bottom .hw-step::before{display:none}
/* Vertical connector above bottom card */
.hw-bottom-line{width:2px;height:28px;background:rgba(180,190,201,.25);margin:0 auto;position:relative}
.hw-bottom-line::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--tl)}

/* ═══ INFO SECTION ═══ */
.hw-info{margin:60px 0 0;display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
.hw-info-left{padding:32px;border-radius:22px;background:linear-gradient(145deg,rgba(11,16,30,.96),rgba(15,22,40,.98));border:1px solid rgba(26,184,186,.1);box-shadow:0 16px 48px rgba(0,0,0,.12);position:relative;overflow:hidden}
.hw-info-left video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0}
.hw-info-left-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,30,.2),rgba(11,16,30,.55));z-index:1}
.hw-info-left h3{position:relative;z-index:2;font-family:Sora,sans-serif;font-size:22px;font-weight:800;color:#fff;margin-bottom:12px;line-height:1.3}
.hw-info-left p{position:relative;z-index:2;font-size:14px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:20px}
.hw-info-cta{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:100px;font-family:Sora,sans-serif;font-size:13px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3);transition:all .3s}
.hw-info-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(21,154,156,.4)}

.hw-info-right{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hw-stat{padding:20px;border-radius:18px;background:#fff;border:1px solid #e8eef1;box-shadow:0 4px 20px rgba(180,190,201,.2),0 8px 0 -4px rgba(240,240,240,.8);text-align:center}
.hw-stat-n{font-family:Sora,sans-serif;font-size:28px;font-weight:800;background:linear-gradient(90deg,#5ee7df,var(--tl),#3b82f6,var(--tl),#5ee7df);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:hwGrad 6s ease infinite;margin-bottom:4px}
.hw-stat-l{font-size:11px;color:#94a3b8}

/* SEO */
.hw-seo{margin-top:40px;padding:24px 32px;border-radius:20px;background:linear-gradient(135deg,rgba(21,154,156,.04),rgba(59,130,246,.02));border:1px solid rgba(21,154,156,.08)}
.hw-seo-title{font-family:Sora,sans-serif;font-size:16px;font-weight:700;margin-bottom:4px;background:linear-gradient(90deg,#5ee7df,var(--tl),#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hw-seo-text{font-size:13px;color:#94a3b8;line-height:1.7}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .hw-grid{grid-template-columns:2fr 1fr 220px 1fr 2fr}
  .hw-step{padding:20px}
  .hw-step-num{font-size:40px}
  .hw-step-title{font-size:14px}
  .hw-step-desc{font-size:12px}
  .hw-center{width:120px;height:120px;border-radius:24px}
}
@media(max-width:900px){
  .hw-grid{display:flex;flex-direction:column;gap:0;align-items:center}
  .hw-col{width:100%;max-width:500px;gap:0;display:flex;flex-direction:column;align-items:stretch}
  .hw-lines-col{display:none}
  .hw-mid{order:-1;margin-bottom:0}
  .hw-step{width:100%;max-width:100%}
  /* Show vertical lines between steps in mobile */
  .hw-vline{height:24px;display:block;width:2px;margin:0 auto;border-left:2px dashed rgba(180,190,201,.3)}
  /* Add vertical line between center and first column */
  .hw-mid::after{content:'';display:block;width:2px;height:24px;border-left:2px dashed rgba(26,184,186,.25);margin:0 auto}
  /* Add vertical line between left col and right col */
  .hw-col-l::after{content:'';display:block;width:2px;height:24px;border-left:2px dashed rgba(180,190,201,.3);margin:0 auto}
  .hw-bottom-line{height:24px;width:2px;margin:0 auto;border-left:2px dashed rgba(180,190,201,.3)}
  .hw-bottom{justify-content:center}
  .hw-bottom .hw-step{max-width:500px;width:100%}
  .hw-info{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hw-sec{padding:60px 20px}
  .hw-title{font-size:28px;letter-spacing:-1px}
  .hw-step{max-width:100%;padding:20px}
  .hw-step-num{font-size:36px}
  .hw-center{width:100px;height:100px;border-radius:20px}
  .hw-info-right{grid-template-columns:1fr}
  .hw-bottom .hw-step{max-width:100%}
}


/* ═══ NEW CONTACT + FAQ ═══ */





/* ═══ UNIFIED SECTION ═══ */
.cf-sec{padding:0}
.cf-outer{padding:10px 10px}
.cf-bg{padding:80px 48px;background:linear-gradient(180deg,var(--dk2),var(--dk));border-radius:28px;position:relative;overflow:hidden}
.cf-inner{max-width:90%;margin:0 auto}

/* Top tab */
.cf-tab-top{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:600px;height:28px;z-index:10}
.cf-tab-top svg{width:100%;height:100%;transform:rotate(180deg)}
/* Bottom tab */
.cf-tab-bot{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:600px;height:28px;z-index:10}

/* ═══ CONTACT PART ═══ */
.cf-contact{margin-bottom:80px}

/* Tag */
.cf-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:100px;background:rgba(26,184,186,.06);border:1px solid rgba(26,184,186,.1);margin-bottom:20px}
.cf-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--tl)}
.cf-tag span{font-family:Sora,sans-serif;font-size:10px;font-weight:600;color:var(--tl);letter-spacing:1.5px;text-transform:uppercase}

/* Title */
.cf-header{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:40px}
.cf-title{font-family:Sora,sans-serif;font-size:clamp(32px,4.5vw,48px);font-weight:800;line-height:1.08;letter-spacing:-2px;flex:1}
.cf-title-l1{color:#fff;display:block}
.cf-title-l2{color:rgba(180,190,201,.3);display:block}
.cf-subtitle{font-size:15px;color:rgba(255,255,255,.4);line-height:1.8;max-width:400px;flex-shrink:0}

/* Form grid */
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.cf-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-fg{display:flex;flex-direction:column;gap:6px}
.cf-fg label{font-family:Sora,sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px}
.cf-fg input,.cf-fg select,.cf-fg textarea{padding:14px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;outline:none;transition:all .3s;backdrop-filter:blur(10px)}
.cf-fg input:focus,.cf-fg select:focus,.cf-fg textarea:focus{border-color:rgba(26,184,186,.3);background:rgba(255,255,255,.06);box-shadow:0 0 20px rgba(26,184,186,.08)}
.cf-fg select{appearance:none;-webkit-appearance:none;cursor:pointer}
.cf-fg textarea{min-height:100px;resize:vertical}
.cf-fg.fw{grid-column:1/-1}
.cf-fg select option{background:var(--dk);color:#fff}

/* Multi-select checkboxes */
.cf-checks{display:flex;flex-wrap:wrap;gap:8px}
.cf-check{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);cursor:pointer;transition:all .2s}
.cf-check:hover{border-color:rgba(26,184,186,.2);background:rgba(255,255,255,.05)}
.cf-check input{display:none}
.cf-check input:checked + span{color:var(--tl)}
.cf-check:has(input:checked){border-color:rgba(26,184,186,.3);background:rgba(26,184,186,.08)}
.cf-check span{font-size:13px;color:rgba(255,255,255,.5);font-weight:500;transition:color .2s}

.cf-submit{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:100px;font-family:Sora,sans-serif;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3);cursor:pointer;transition:all .3s;width:100%;border:none}
.cf-submit:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(21,154,156,.4)}

.cf-email-text{grid-column:1/-1;text-align:center;font-size:12px;color:rgba(255,255,255,.25);margin-top:4px}
.cf-email-text a{color:var(--tl);text-decoration:none}

/* Right side — bento info cards */
.cf-info-bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf-ib-card{padding:20px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:all .3s}
.cf-ib-card:hover{border-color:rgba(26,184,186,.15);background:rgba(255,255,255,.06)}
.cf-ib-wide{grid-column:1/-1}
.cf-ib-visual{margin-bottom:14px}
.cf-ib-title{font-family:Sora,sans-serif;font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.cf-ib-desc{font-size:12px;color:rgba(255,255,255,.35);line-height:1.5}

/* Visual: progress bars */
.cf-ib-bars{display:flex;flex-direction:column;gap:6px}
.cf-ib-bar{height:26px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 12px;position:relative;overflow:hidden}
.cf-ib-bar::after{content:'';position:absolute;left:0;top:0;bottom:0;width:inherit;background:linear-gradient(90deg,rgba(26,184,186,.08),rgba(26,184,186,.02));border-radius:8px}
.cf-ib-bar span{font-size:10px;color:rgba(255,255,255,.3);position:relative;z-index:1;font-weight:500}

/* Visual: checkmarks */
.cf-ib-checks{display:flex;gap:8px}
.cf-ib-check{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.cf-ib-check svg{width:16px;height:16px;stroke:var(--tl);fill:none;stroke-width:2.5}

/* Visual: lock */
.cf-ib-lock{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.cf-ib-lock svg{width:22px;height:22px;stroke:rgba(255,255,255,.25);fill:none;stroke-width:1.8}

/* Visual: docs */
.cf-ib-docs{display:flex;gap:6px}
.cf-ib-doc{width:32px;height:40px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);position:relative}
.cf-ib-doc::after{content:'';position:absolute;top:8px;left:6px;right:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.06)}
.cf-ib-doc::before{content:'';position:absolute;top:16px;left:6px;width:60%;height:3px;border-radius:2px;background:rgba(255,255,255,.04)}

/* ═══ DIVIDER ═══ */
.cf-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(26,184,186,.15),transparent);margin:0 0 80px}

/* ═══ FAQ PART — carousel cards ═══ */
.cf-faq{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:center}

/* Left side — title + controls */
.cf-faq-left{}
.cf-faq-header{text-align:left;margin-bottom:24px}
.cf-faq-title{font-family:Sora,sans-serif;font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.1;letter-spacing:-1.5px;margin-bottom:12px}
.cf-faq-title span{color:#fff}
.cf-faq-title .ghost{color:rgba(180,190,201,.3)}
.cf-faq-sub{font-size:14px;color:rgba(255,255,255,.35);line-height:1.7}

/* Carousel controls */
.cf-faq-controls{display:flex;gap:10px;margin-top:20px}
.cf-faq-arr{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(94,231,223,.3),rgba(21,154,156,.5),rgba(59,130,246,.3));background-size:300% 100%;animation:cfGrad 6s ease infinite;border:1px solid rgba(94,231,223,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.cf-faq-arr:hover{background:rgba(26,184,186,.1);border-color:rgba(26,184,186,.2)}
.cf-faq-arr svg{width:16px;height:16px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:2}
.cf-faq-arr:hover svg{stroke:var(--tl)}

/* Counter */
.cf-faq-counter{margin-top:16px;font-family:Sora,sans-serif;font-size:13px;color:rgba(255,255,255,.25)}
.cf-faq-counter b{color:var(--tl);font-weight:700}

/* Right side — card carousel */
.cf-faq-carousel-wrap{overflow:hidden;position:relative}
.cf-faq-carousel{display:flex;gap:14px;transition:transform .5s ease}

.cf-faq-card{min-width:calc(50% - 7px);max-width:calc(50% - 7px);padding:28px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);flex-shrink:0;transition:border-color .3s,background .3s}
.cf-faq-card:hover{border-color:rgba(26,184,186,.15);background:rgba(255,255,255,.06)}

.cf-faq-card-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,rgba(94,231,223,.4),rgba(21,154,156,.6),rgba(59,130,246,.3));background-size:300% 100%;animation:cfGrad 6s ease infinite;border:1px solid rgba(94,231,223,.25);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cf-faq-card-icon svg{width:18px;height:18px;stroke:var(--tl);fill:none;stroke-width:2}

.cf-faq-card-q{font-family:Sora,sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.35}
.cf-faq-card-a{font-size:13px;color:rgba(255,255,255,.4);line-height:1.7;margin-bottom:16px}

.cf-faq-card-num{font-family:Sora,sans-serif;font-size:40px;font-weight:900;color:rgba(180,190,201,.12);line-height:1;display:flex;align-items:baseline;gap:2px}
.cf-faq-card-num span{font-size:16px;color:rgba(180,190,201,.2);font-weight:600}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .cf-header{flex-direction:column;gap:16px}
  .cf-grid{grid-template-columns:1fr}
  .cf-subtitle{max-width:100%}
  .cf-faq{grid-template-columns:1fr}
  .cf-faq-left{text-align:center}
  .cf-faq-controls{justify-content:center}
  .cf-faq-counter{text-align:center}
  .cf-info-bento{grid-template-columns:1fr}
  .cf-ib-wide{grid-column:auto}
  .cf-tab-top,.cf-tab-bot{width:400px}
}
@media(max-width:600px){
  .cf-outer{padding:6px 6px}
  .cf-bg{padding:60px 20px;border-radius:20px}
  .cf-title{font-size:28px;letter-spacing:-1px}
  .cf-form{grid-template-columns:1fr}
  .cf-faq-q span{font-size:14px}.cf-faq-card{min-width:100%!important;max-width:100%!important}
  .cf-tab-top,.cf-tab-bot{width:280px}
}



@keyframes cfGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ═══ NEW FOOTER ═══ */





/* ═══ FOOTER ═══ */
.foot{padding:60px 48px 40px;background:var(--dk);margin:0 10px;border-radius:28px 28px 0 0;position:relative;overflow:hidden}
.foot::before{content:'';position:absolute;inset:0;background:url('/footer-bg.png') center center/cover no-repeat;opacity:.15;pointer-events:none}
.foot-inner{max-width:90%;margin:0 auto;position:relative;z-index:1}

/* Top row — logo + nav + cta */
.foot-top{display:grid;grid-template-columns:1.2fr 1fr auto;gap:40px;align-items:start;margin-bottom:40px}

/* Logo area */
.foot-brand{}
.foot-logo{margin-bottom:16px}
.foot-tagline{margin-top:4px;max-width:400px}
.foot-tagline-l1{font-family:Sora,sans-serif;font-size:20px;font-weight:800;color:#fff;display:block;line-height:1.15;letter-spacing:-1px}
.foot-tagline-l2{font-family:Sora,sans-serif;font-size:20px;font-weight:800;display:block;line-height:1.15;letter-spacing:-1px;background:linear-gradient(90deg,#5ee7df,var(--tl),#3b82f6,var(--tl),#5ee7df);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:footGrad 6s ease infinite}
@keyframes footGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Nav columns */
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.foot-nav-col h4{font-family:Sora,sans-serif;font-size:12px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.foot-nav-col a{display:block;font-size:14px;color:rgba(255,255,255,.35);text-decoration:none;margin-bottom:10px;transition:color .2s}
.foot-nav-col a:hover{color:var(--tl)}

/* CTA */
.foot-cta{text-align:right}
.foot-cta-title{font-family:Sora,sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}
.foot-cta-sub{font-size:13px;color:rgba(255,255,255,.35);margin-bottom:16px}
.foot-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:100px;font-family:Sora,sans-serif;font-size:13px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(135deg,rgba(94,231,223,.5),rgba(21,154,156,.7),rgba(59,130,246,.4));border:1px solid rgba(94,231,223,.4);box-shadow:0 4px 24px rgba(21,154,156,.3);transition:all .3s}
.foot-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(21,154,156,.4)}
.foot-cta-acc{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:100px;font-family:Sora,sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:all .3s}
.foot-cta-acc:hover{background:rgba(255,255,255,.1);color:#fff}

/* SEO card — glass style */
.foot-seo-card{margin-bottom:32px;padding:24px 28px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.foot-seo-card-title{font-family:Sora,sans-serif;font-size:14px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:8px}
.foot-seo-card p{font-size:13px;color:rgba(255,255,255,.25);line-height:1.8}

/* Divider */
.foot-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);margin-bottom:24px}

/* Bottom row */
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-legal-links{display:flex;gap:20px}
.foot-legal-links a{font-size:12px;color:rgba(255,255,255,.25);text-decoration:none;transition:color .2s}
.foot-legal-links a:hover{color:var(--tl)}
.foot-copy{font-size:11px;color:rgba(255,255,255,.2)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .foot-top{grid-template-columns:1fr;gap:32px}
  .foot-cta{text-align:left}
}
@media(max-width:600px){
  .foot{padding:40px 20px 30px;margin:0 6px;border-radius:20px 20px 0 0}
  .foot-nav{grid-template-columns:1fr 1fr;gap:20px}
  .foot-bottom{flex-direction:column;text-align:center}
  .foot-legal-links{justify-content:center}
  .foot-tagline-l1,.foot-tagline-l2{font-size:22px}
}