:root{
  --blue:#00A8FF; --deep:#3030FF; --purple:#7B00FF; --magenta:#D000FF;
  --grad: linear-gradient(90deg,#00A8FF 0%, #3030FF 34%, #7B00FF 68%, #D000FF 100%);
  --grad-soft: linear-gradient(120deg, rgba(0,168,255,.10), rgba(123,0,255,.10) 60%, rgba(208,0,255,.10));
  --ink:#0A0B1E; --ink-soft:#54566E; --muted:#83849B;
  --line:#EAEAF3; --bg-lav:#F6F5FF; --bg-blue:#F0F8FF; --white:#fff;
  --radius:22px; --shadow:0 10px 32px rgba(20,10,70,.07); --shadow-lg:0 24px 64px rgba(20,10,70,.14);
  --maxw:1650px;
}
/* Header stays at its original width, only content grids widen */
header .wrap{ max-width:1650px; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ font-family:'Outfit',sans-serif; color:var(--ink); background:#fff; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.display{ font-family:'Outfit',sans-serif; font-weight:600 !important; }

/* ===== GLOBAL HEADING STYLE ===== */
h1, h2{ font-size:clamp(40px,5.4vw,60px) !important; line-height:1.08; letter-spacing:-.045em; font-weight:600 !important; background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 48%,var(--deep) 56%,var(--magenta) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero h1.grad-text{ background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 48%,var(--deep) 56%,var(--magenta) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.section-head h2{ max-width:100%; }
@media (max-width:760px){ h1, h2{ font-size:clamp(34px,10vw,52px) !important; letter-spacing:-.035em; } }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto !important; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:9px 18px; border-radius:100px; background:var(--grad-soft); border:1px solid rgba(123,0,255,.16); color:var(--purple); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--grad); }

/* ===== GLOBAL HEADING SYSTEM: shared gradient-keyword + reveal + accent components ===== */
.grad-text, .heading-gradient-tail, .grad, .theme-title-accent{ background-size:200% auto !important; }
.reveal.in .grad-text, .reveal.in .heading-gradient-tail, .reveal.in .grad, .reveal.in .theme-title-accent{ display:inline-block; animation: gradWordIn .6s .16s cubic-bezier(.16,.7,.2,1) backwards, gradShift 6s ease-in-out .7s infinite; }
@keyframes gradWordIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.section-accent-line{ position:relative; width:110px; height:2px; margin:22px auto 0; border-radius:2px; background:linear-gradient(90deg,transparent,var(--purple) 50%,transparent); }
.section-accent-line::after{ content:''; position:absolute; top:50%; left:50%; width:8px; height:8px; transform:translate(-50%,-50%) rotate(45deg); border-radius:2px; background:linear-gradient(135deg,var(--blue),var(--purple)); }
@keyframes catShimmer{ 0%{ background-position:220% 0; } 100%{ background-position:-220% 0; } }
@media (prefers-reduced-motion: reduce){
  .reveal.in .grad-text, .reveal.in .heading-gradient-tail, .reveal.in .grad, .reveal.in .theme-title-accent{ animation:none; }
  .section-accent-line{ animation:none; }
}
.section{ padding:150px 0; position:relative; }
@media (max-width:1024px){ .section{ padding:100px 0; } }
@media (max-width:640px){ .section{ padding:76px 0; } }
.compat-section{ padding:110px 0 !important; }
@media (max-width:1024px){ .compat-section{ padding:90px 0 !important; } }
@media (max-width:640px){ .compat-section{ padding:64px 0 !important; } }
.section-head{ text-align:center; max-width:660px; margin:0 auto 60px; }
.section-head h2{ font-size:clamp(30px,4.2vw,48px); font-weight:800; line-height:1.15; letter-spacing:-0.015em; }
.section-head p{ margin-top:16px; color:var(--muted); font-size:17px; line-height:1.65; }
.oneline-sub{ white-space:nowrap; max-width:none !important; }
@media (max-width:1280px){ .oneline-sub{ white-space:normal; } }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 30px; border-radius:100px; font-weight:700; font-size:15px; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, background .3s ease, color .3s ease; white-space:nowrap; position:relative; }
.btn-primary{ background:var(--grad); background-size:220% 100%; color:#fff; box-shadow:0 14px 34px rgba(123,0,255,.28); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 46px rgba(123,0,255,.36); background-position:100% 0; }
.btn-outline{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.btn-outline:hover{ border-color:var(--purple); color:var(--purple); transform:translateY(-3px); }
.btn-ghost{ color:var(--ink-soft); font-weight:700; font-size:14.5px; }
.btn-sm{ padding:12px 24px; font-size:15.5px; }
.magnetic{ will-change:transform; }

/* reveal — animation-based so it never collides with each card's own hover transition */
.reveal{ opacity:0; transform:translateY(34px) scale(.98); will-change:opacity,transform; }
@keyframes revealUp{ from{ opacity:0; transform:translateY(34px) scale(.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
.reveal.in{ animation:revealUp .8s var(--d,0s) cubic-bezier(.16,.7,.2,1) forwards; }

/* scroll progress bar */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--grad); z-index:1200; transition:width .1s linear; }

/* ===== HEADER ===== */
header{ position:absolute; top:0; left:0; right:0; z-index:1000; padding-top:14px; background:transparent; transition:padding .35s ease; }
.nav-shell{ display:flex; align-items:center; justify-content:space-between; padding:12px 22px; border-radius:100px; background:transparent; transition:all .4s cubic-bezier(.2,.8,.2,1); }
header.scrolled{ position:fixed; padding-top:10px; }
header.scrolled .nav-shell{ background:rgba(255,255,255,.82); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:0 10px 34px rgba(20,10,70,.10); border:1px solid rgba(234,234,243,.9); }
.logo{ display:flex; align-items:center; }
.logo-img-wrap{ height:auto; overflow:visible; display:block; }
.logo-img{ height:38px; width:auto; display:block; margin-top:0; image-rendering:auto; }
.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-item{ position:relative; }
.nav-item > a, .nav-item > button{ display:flex; align-items:center; gap:5px; font-size:16px; color:var(--ink-soft); padding:10px 16px; border-radius:100px; transition:color .2s, background .2s; }
.nav-item > a:hover, .nav-item > button:hover{ color:var(--ink); background:var(--bg-lav); }
.nav-item svg.chev{ transition:transform .25s ease; }
.nav-item:hover svg.chev{ transform:rotate(180deg); }
.mega{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:620px; background:#fff; border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow-lg);
  padding:28px; opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:26px;
}
.nav-item:hover .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega h5{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.mega ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.mega a{ font-size:14px; font-weight:600; color:var(--ink-soft); transition:color .2s; }
.mega a:hover{ color:var(--purple); }
.nav-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--ink-soft); transition:background .2s, color .2s; }
.icon-btn svg{ width:22px; height:22px; }
.icon-btn:hover{ background:var(--bg-lav); color:var(--purple); }
.burger{ display:none; width:40px; height:40px; align-items:center; justify-content:center; flex-shrink:0; }
.burger span, .burger span::before, .burger span::after{ content:''; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.3s; }
.burger span::before{ position:absolute; top:-6px; } .burger span::after{ position:absolute; top:6px; }
.mobile-panel{ display:none; flex-direction:column; gap:4px; background:#fff; border-radius:20px; margin-top:10px; padding:18px; border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.mobile-panel.open{ display:flex; }
.mobile-panel a{ padding:13px 12px; font-weight:600; font-size:15px; border-radius:12px; color:var(--ink-soft); }
.mobile-panel a:hover{ background:var(--bg-lav); }

/* ===== HERO ===== */
.hero{ position:relative; padding:150px 0 55px; text-align:center; overflow:hidden; }
.hero-dots{ position:absolute; top:220px; width:120px; height:80px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; z-index:0; opacity:.7; }
.hero-dots span{ width:5px; height:5px; border-radius:50%; background:var(--purple); opacity:.28; }
.hero-dots.left{ left:20px; } .hero-dots.right{ right:20px; }
.hero-kicker{ font-size:clamp(17px,2vw,20px); font-weight:800; color:var(--ink); margin-top:26px; letter-spacing:-0.01em; }
.hero-divider{ display:flex; align-items:center; justify-content:center; gap:10px; margin:26px auto 0; }
.hero-divider span{ width:52px; height:2px; background:linear-gradient(90deg, transparent, var(--purple)); border-radius:2px; }
.hero-divider span:last-child{ background:linear-gradient(90deg, var(--purple), transparent); }
.hero-divider i{ width:9px; height:9px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(90px); z-index:0; }
.hero-blob.b1{ width:420px; height:420px; background:radial-gradient(circle,#00A8FF,transparent 70%); top:-160px; left:-140px; opacity:.55; animation:driftA 14s ease-in-out infinite; }
.hero-blob.b2{ width:420px; height:420px; background:radial-gradient(circle,#D000FF,transparent 70%); top:-100px; right:-140px; opacity:.45; animation:driftB 16s ease-in-out infinite; }
@keyframes driftA{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,30px) scale(1.12);} }
@keyframes driftB{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-36px,26px) scale(1.08);} }
.hero-inner{ max-width:1100px; margin:0 auto; position:relative; z-index:2; }
.hero h1{ font-size:clamp(30px,4.6vw,58px) !important; font-weight:700 !important; line-height:1.1; letter-spacing:-0.02em; margin-top:10px; max-width:1000px; margin-left:auto; margin-right:auto; white-space:normal; overflow:visible; }
.hero h1 .line1{ display:block; white-space:nowrap; }
.hero h1 .line2{ display:block; }

.hero p.lead{ margin:22px auto 0; max-width:900px; color:var(--muted); font-size:17px; line-height:1.65; }
.hero-cta{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.hero-cta .btn svg{ flex-shrink:0; }
.hero-meta{ margin-top:22px; font-size:13.5px; font-weight:600; color:var(--muted); }
.hero-meta b{ color:var(--ink); }

/* ===== HERO STATS CARD ===== */
.hero-stats-card{ display:inline-flex; align-items:center; gap:0; margin:26px auto 0; background:#fff; border-radius:100px; padding:12px 30px; box-shadow:var(--shadow-lg); border:1px solid var(--line); }
.hs-item{ display:flex; align-items:center; gap:12px; padding:4px 26px; text-align:left; }
.hs-icon{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hs-icon.hs-blue{ background:#E4EEFF; color:var(--deep); }
.hs-icon.hs-purple{ background:#F1E6FF; color:var(--purple); }
.hs-icon.hs-green{ background:#E1F7EA; color:#12A150; }
.hs-txt{ display:flex; flex-direction:column; line-height:1.3; }
.hs-txt b{ font-size:16.5px; font-weight:800; }
.hs-item:nth-child(1) .hs-txt b{ color:var(--deep); }
.hs-item:nth-child(3) .hs-txt b{ color:var(--purple); }
.hs-item:nth-child(5) .hs-txt b{ color:#12A150; }
.hs-txt span{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.hs-sep{ width:1px; align-self:stretch; background:var(--line); }
@media (max-width:640px){ .hero-stats-card{ flex-direction:column; border-radius:22px; padding:16px 20px; gap:14px; } .hs-sep{ width:100%; height:1px; } .hs-item{ width:100%; padding:2px 4px; } }

.hero-stage{ position:relative; max-width:1040px; margin:76px auto 0; height:480px; z-index:2; }

/* ===== HERO V2 (exact demo layout) ===== */
.hero-v2{ padding-top:130px; }
.hero-decor-wave{ position:absolute; top:-40px; left:-60px; width:520px; height:340px; z-index:0; opacity:.85; pointer-events:none; }
.hero-decor-diamond{ position:absolute; z-index:1; opacity:.8; pointer-events:none; }
.hero-decor-diamond.dd1{ top:24px; left:36px; }
.hero-decor-diamond.dd2{ top:270px; left:110px; }
.hero-decor-diamond.dd3{ top:300px; right:130px; }
.hero-decor-ring{ position:absolute; top:78px; right:150px; width:20px; height:20px; border-radius:50%; border:5px solid; border-image:var(--grad) 1; z-index:1; opacity:.7; pointer-events:none; }
.hero-h1-v2{ margin-top:8px; }
.hero-h1-v2 .line-dark{ color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); }
.hero-h1-v2 .line-grad{ background:linear-gradient(90deg,var(--blue),var(--deep) 45%,var(--purple) 75%,var(--magenta)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-kicker-v2{ font-size:clamp(17px,2vw,21px); font-weight:800; color:var(--ink); letter-spacing:-.01em; margin-top:22px; }
.hero-kicker-v2 .kc-purple{ color:var(--purple); }
.hero-kicker-v2 .kc-blue{ color:var(--deep); }
.hero-h1-v2 .hl{ display:block; color:var(--ink); white-space:nowrap; min-height:1.08em; }
.hero-h1-v2 .hl .gp{ background:linear-gradient(90deg,var(--blue),var(--deep) 60%,var(--purple)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-h1-v2 .hl .gp2{ background:linear-gradient(90deg,var(--deep),var(--purple) 55%,var(--magenta)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ===== HERO HEADING TYPEWRITER (JS-driven, cursor stays inline with text) ===== */
.tw-cursor{ display:inline-block; width:3px; height:0.78em; margin-left:3px; vertical-align:-0.08em; background:linear-gradient(180deg,var(--blue),var(--purple)); border-radius:2px; animation:tw-blink 1s step-end infinite; }
@keyframes tw-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
@media (max-width:760px){ .hero-h1-v2 .hl{ white-space:normal; } }
.hero-sparkle-divider{ display:flex; align-items:center; justify-content:center; gap:12px; margin:26px auto 0; }
.hero-sparkle-divider .ln{ width:110px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--purple)); }
.hero-sparkle-divider .ln.r{ background:linear-gradient(90deg,var(--purple),transparent); }
.hero-underline-wrap{ display:flex; justify-content:center; margin-top:6px; }
.hero-underline-wrap svg{ width:min(640px,88vw); height:auto; }
.hero-lead-v2{ margin-top:22px; }

/* demo stage */
.demo-stage{ position:relative; max-width:1240px; margin:90px auto 0; height:520px; z-index:2; }
.fb-group{ position:absolute; z-index:6; animation:floaty3 6s ease-in-out infinite; }
.fb-group-left{ top:-46px; left:0; }
.fb-group-right{ top:-16px; right:0; animation-delay:.6s; }
.fb-group .hero-float-badge{ position:relative; top:0; left:0; right:0; animation:none; }
.hero-float-badge{ position:absolute; width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 14px 30px rgba(20,10,70,.18); z-index:6; animation:floaty3 6s ease-in-out infinite; }
.hero-float-badge.fb-left{ background:linear-gradient(135deg,#3AB4FF,#3030FF); }
.hero-float-badge.fb-right{ background:linear-gradient(135deg,#9B4CFF,#7B00FF); }
.fb-arrow{ position:absolute; z-index:8; opacity:.9; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(20,10,70,.15)); }
.fb-arrow-line{ animation:fbArrowFlow 1.4s linear infinite; }
@keyframes fbArrowFlow{ to{ stroke-dashoffset:-22; } }
.fb-group .fb-arrow{ top:52px; }
.fb-arrow-left{ width:120px; height:110px; left:50%; transform:translateX(-50%); }
.fb-arrow-right{ width:120px; height:110px; right:50%; transform:translateX(50%); }

.demo-glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
.demo-glow.dg1{ width:320px; height:320px; left:-30px; top:90px; background:radial-gradient(circle,#00A8FF,transparent 70%); opacity:.4; }
.demo-glow.dg2{ width:340px; height:340px; right:-30px; top:70px; background:radial-gradient(circle,#D000FF,transparent 70%); opacity:.35; }
.demo-glow.dg3{ width:360px; height:360px; left:50%; top:-60px; transform:translateX(-50%); background:radial-gradient(circle,#7B00FF,transparent 70%); opacity:.3; }
.demo-float-chip{ position:absolute; z-index:8; padding:8px 14px; border-radius:100px; background:#fff; box-shadow:0 12px 28px rgba(20,10,70,.16); display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; color:var(--ink); animation:floaty2 7s ease-in-out infinite; }
.demo-float-chip.dfc-1{ top:20px; left:130px; animation-delay:.3s; }
.demo-float-chip.dfc-2{ bottom:60px; right:120px; animation-delay:.9s; }

.demo-card{ position:absolute; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 22px 55px rgba(20,10,70,.16); border:1px solid rgba(20,10,70,.06); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.demo-card:hover{ z-index:15 !important; box-shadow:0 30px 70px rgba(20,10,70,.26); animation-play-state:paused; }
.dc-1{ width:215px; height:300px; left:0; top:130px; z-index:1; opacity:0; animation:cardEnter1 .9s cubic-bezier(.16,.7,.2,1) .2s forwards, cardFloat1 7s ease-in-out 1.1s infinite; }
.dc-2{ width:248px; height:365px; left:172px; top:52px; z-index:2; opacity:0; animation:cardEnter2 .9s cubic-bezier(.16,.7,.2,1) .35s forwards, cardFloat2 6.5s ease-in-out 1.25s infinite; }
.dc-3{ width:460px; height:470px; left:50%; top:0; z-index:5; opacity:0; animation:cardEnter3 .9s cubic-bezier(.16,.7,.2,1) .1s forwards, cardFloat3 7.5s ease-in-out 1s infinite; }
.dc-4{ width:248px; height:365px; right:172px; top:52px; z-index:2; opacity:0; animation:cardEnter4 .9s cubic-bezier(.16,.7,.2,1) .35s forwards, cardFloat4 6.5s ease-in-out 1.25s infinite; }
.dc-5{ width:215px; height:300px; right:0; top:130px; z-index:1; opacity:0; animation:cardEnter5 .9s cubic-bezier(.16,.7,.2,1) .2s forwards, cardFloat5 7s ease-in-out 1.1s infinite; }
@keyframes cardEnter1{ from{ opacity:0; transform:rotate(-7deg) translateY(55px) scale(.94); } to{ opacity:1; transform:rotate(-7deg) translateY(0) scale(1); } }
@keyframes cardEnter2{ from{ opacity:0; transform:rotate(-4deg) translateY(55px) scale(.94); } to{ opacity:1; transform:rotate(-4deg) translateY(0) scale(1); } }
@keyframes cardEnter3{ from{ opacity:0; transform:translateX(-50%) translateY(65px) scale(.94); } to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes cardEnter4{ from{ opacity:0; transform:rotate(4deg) translateY(55px) scale(.94); } to{ opacity:1; transform:rotate(4deg) translateY(0) scale(1); } }
@keyframes cardEnter5{ from{ opacity:0; transform:rotate(7deg) translateY(55px) scale(.94); } to{ opacity:1; transform:rotate(7deg) translateY(0) scale(1); } }
@keyframes cardFloat1{ 0%,100%{ transform:rotate(-7deg) translateY(0); } 50%{ transform:rotate(-7deg) translateY(-14px); } }
@keyframes cardFloat2{ 0%,100%{ transform:rotate(-4deg) translateY(0); } 50%{ transform:rotate(-4deg) translateY(-10px); } }
@keyframes cardFloat3{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-12px); } }
@keyframes cardFloat4{ 0%,100%{ transform:rotate(4deg) translateY(0); } 50%{ transform:rotate(4deg) translateY(-10px); } }
@keyframes cardFloat5{ 0%,100%{ transform:rotate(7deg) translateY(0); } 50%{ transform:rotate(7deg) translateY(-14px); } }

.ctr-logo{ display:flex; align-items:center; gap:6px; }
.ctr-logo-img-wrap{ overflow:hidden; display:block; }
.ctr-logo-img{ width:auto; display:block; image-rendering:-webkit-optimize-contrast; }
.ctr-logo-chip{ background:#fff; padding:5px 9px; border-radius:8px; display:inline-flex; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.demo-brand{ display:flex; align-items:center; gap:6px; }
.demo-brand-icon{ border-radius:6px; display:flex; align-items:center; justify-content:center; background:var(--grad); flex-shrink:0; }
.demo-brand-name{ font-weight:800; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; }
.ctr-mark{ width:19px; height:19px; border-radius:6px; background:var(--grad); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ctr-mark svg{ width:10px; height:10px; }
.ctr-word{ font-size:10.5px; font-weight:800; letter-spacing:-.01em; }

.dc-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-size:10px; font-weight:800; }
.dc-logo{ display:flex; align-items:center; gap:6px; }
.dc-logo .dot{ width:16px; height:16px; border-radius:6px; background:var(--grad); flex-shrink:0; }
.dc-nav{ display:flex; gap:10px; font-size:8.5px; font-weight:600; opacity:.5; }
.dc-light .dc-head{ color:var(--ink); border-bottom:1px solid var(--line); }
.dc-dark .dc-head{ color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.dc-body{ padding:16px 14px; }
.dc-h{ font-size:17px; font-weight:800; line-height:1.18; letter-spacing:-.01em; }
.dc-h.small{ font-size:14px; }
.dc-light .dc-h{ color:var(--ink); }
.dc-dark .dc-h{ color:#fff; }
.dc-h .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dc-p{ font-size:8.5px; line-height:1.5; color:var(--muted); margin-top:8px; max-width:150px; }
.dc-dark .dc-p{ color:rgba(255,255,255,.5); }
.dc-btn{ display:inline-block; margin-top:12px; padding:7px 14px; border-radius:100px; font-size:9px; font-weight:800; }
.dc-btn.ink{ background:var(--ink); color:#fff; }
.dc-btn.grad{ background:linear-gradient(90deg,#3AB4FF,#7B00FF); color:#fff; }
.dc-btn.white{ background:#fff; color:var(--ink); }
.dc-photo{ margin-top:12px; border-radius:12px; height:88px; background:linear-gradient(135deg,#F2E9FF,#E8F3FF); position:relative; overflow:hidden; }
.dc-photo.warm{ background:linear-gradient(135deg,#EFE7DD,#E3D9CC); }
.dc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dc-cats{ display:flex; gap:6px; margin-top:10px; }
.dc-cats span{ width:24px; height:24px; border-radius:8px; background:var(--bg-lav); }
.dc-trust{ margin-top:16px; }
.dc-trust small{ font-size:7.5px; color:rgba(255,255,255,.4); font-weight:700; letter-spacing:.03em; }
.dc-trust-logos{ display:flex; gap:10px; margin-top:8px; font-size:8px; font-weight:800; color:rgba(255,255,255,.6); align-items:center; }
.dc-popular{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:8.5px; font-weight:800; color:var(--ink); }

/* portfolio center card */
.dc-3 .dc-head{ padding:14px 18px; }
.dc-3 .dc-nav{ gap:14px; opacity:.65; }
.dc-3-body{ padding:20px 22px; position:relative; height:calc(100% - 46px); }
.dc-3-h{ font-size:22px; font-weight:800; color:#fff; line-height:1.15; letter-spacing:-.01em; }
.dc-3-h .grad{ background:linear-gradient(90deg,#7CDBFF,#D48CFF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dc-3-p{ font-size:10.5px; color:rgba(255,255,255,.55); margin-top:8px; max-width:220px; line-height:1.5; }
.dc-3-btn{ margin-top:16px; display:inline-block; padding:10px 18px; border-radius:100px; background:linear-gradient(90deg,#3AB4FF,#3030FF); color:#fff; font-size:11px; font-weight:800; }
.dc-shot{ position:relative; width:100%; height:100%; overflow:hidden; }
.dc-shot .dc-shot-bar{ position:absolute; top:0; left:0; right:0; height:24px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); z-index:2; display:flex; align-items:center; gap:5px; padding:0 10px; }
.dc-shot .dc-shot-bar span{ width:6px; height:6px; border-radius:50%; background:#E0E0EA; }
.dc-shot .dc-shot-bar span:nth-child(1){ background:#FF6B6B; } .dc-shot .dc-shot-bar span:nth-child(2){ background:#FFC24B; } .dc-shot .dc-shot-bar span:nth-child(3){ background:#4CD97B; }
.dc-shot img{ position:absolute; top:24px; left:0; width:100%; height:calc(100% - 24px); object-fit:cover; object-position:top; display:block; }
.dc-shot-label{ position:absolute; left:12px; bottom:12px; z-index:3; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); border-radius:100px; padding:6px 13px; font-size:10.5px; font-weight:800; color:var(--ink); box-shadow:0 6px 16px rgba(20,10,70,.14); }
@media (max-width:1024px){ .demo-stage{ transform:scale(.86); transform-origin:top center; } }
.hero-stat-card{ position:absolute; background:#fff; box-shadow:0 10px 26px rgba(20,10,70,.12); border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:var(--ink); }
.hero-stat-card .lbl{ color:var(--muted) !important; }
.hero-stat-card .lbl{ font-size:7.5px; color:rgba(255,255,255,.5); font-weight:700; }
.hero-stat-card .val{ font-size:14px; font-weight:800; margin-top:2px; }
.hero-stat-revenue{ top:14px; right:20px; width:120px; }
.hero-stat-customers{ bottom:16px; left:22px; width:170px; }
.avatars{ display:flex; margin-top:8px; }
.avatars span{ width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#3AB4FF,#7B00FF); margin-left:-5px; border:1.5px solid #fff; }
.avatars span:first-child{ margin-left:0; }

.hero-catbar{ display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; max-width:max-content; margin:44px auto 0; padding:13px; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); position:relative; z-index:3; }


.hero-catbar-item{ display:flex; align-items:center; gap:12px; padding:17px 29px; border-radius:100px; font-size:14.5px; font-weight:700; color:var(--ink-soft); transition:all .25s ease; white-space:nowrap; }
.hero-catbar-item:hover{ color:var(--ink); background:var(--bg-lav); }
.hero-catbar-item.active{ background:var(--grad); color:#fff; box-shadow:0 10px 26px rgba(123,0,255,.28); }
.hcb-ic{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; }
.hcb-ic svg{ display:block; }
.hero-catbar-item.active .hcb-ic-line{ color:#fff; }
.hero-catbar-item .hcb-ic-line{ color:var(--ink-soft); }
.hero-catbar-item:hover .hcb-ic-line{ color:var(--purple); }
@media (max-width:760px){ .hero-catbar{ max-width:100%; overflow-x:auto; justify-content:flex-start; border-radius:18px; -webkit-overflow-scrolling:touch; } .hero-catbar-item{ flex:0 0 auto; padding:11px 16px; font-size:13.5px; } }
.floating-card{ position:absolute; border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); transition:transform .2s ease-out; }
.hero-main-browser{ position:absolute; top:20px; left:50%; transform:translateX(-50%); width:640px; z-index:5; animation:floaty1 7s ease-in-out infinite; }
.hero-card-a{ width:230px; top:60px; left:20px; z-index:3; animation:floaty2 8s ease-in-out infinite; }
.hero-card-b{ width:210px; bottom:10px; right:10px; z-index:4; animation:floaty3 6.5s ease-in-out infinite; }
.hero-card-c{ width:180px; bottom:40px; left:70px; z-index:2; animation:floaty2 9s ease-in-out infinite reverse; }
.hero-card-d{ width:170px; top:0; right:60px; z-index:2; animation:floaty3 7.5s ease-in-out infinite reverse; }
@keyframes floaty1{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-14px);} }
@keyframes floaty2{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-16px) rotate(-1deg);} }
@keyframes floaty3{ 0%,100%{ transform:translateY(0) rotate(3deg);} 50%{ transform:translateY(-18px) rotate(1deg);} }

/* browser mock */
.mock{ border-radius:16px; overflow:hidden; background:#fff; }
.mock-bar{ height:32px; background:#F6F6FB; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid var(--line); }
.mock-bar span{ width:8px; height:8px; border-radius:50%; background:#E1E2ED; }
.mock-body{ position:relative; }

/* ===== STATS ===== */
.stats-section-v2{ position:relative; overflow:hidden; background:
    radial-gradient(900px 560px at 8% 15%, rgba(0,168,255,.35), transparent 60%),
    radial-gradient(1000px 620px at 95% 20%, rgba(208,0,255,.30), transparent 60%),
    radial-gradient(900px 600px at 85% 95%, rgba(208,0,255,.35), transparent 60%),
    radial-gradient(700px 500px at 5% 90%, rgba(0,168,255,.22), transparent 60%),
    linear-gradient(135deg,#EAF2FF 0%,#F3EBFF 45%,#FBE9FB 75%,#FCE4FA 100%);
}
.stats-corner-ring{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.5); pointer-events:none; z-index:0; }
.stats-corner-ring.scr-tl{ width:420px; height:420px; top:-220px; left:-160px; }
.stats-corner-ring.scr-br{ width:460px; height:460px; bottom:-240px; right:-160px; }
.stats-corner-fill{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.stats-corner-fill.scf-tl{ width:260px; height:260px; top:-120px; left:-100px; background:rgba(255,255,255,.25); }
.stats-corner-fill.scf-br{ width:300px; height:300px; bottom:-150px; right:-110px; background:rgba(255,255,255,.18); }
.stats-dotgrid{ position:absolute; z-index:0; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; pointer-events:none; }
.stats-dotgrid span{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.7); }
.stats-dotgrid.sdg-tr{ top:70px; right:60px; }
.stats-dotgrid.sdg-bl{ bottom:70px; left:60px; }
.stats-dotgrid.sdg-bl span{ background:rgba(123,0,255,.22); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; z-index:2; }
.stats-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.stat-num-alt{ display:inline-block; font-size:15px; font-weight:800; font-family:'Outfit'; letter-spacing:.04em; }
.stat-card{ position:relative; overflow:hidden; border-radius:20px; padding:26px 24px; background:rgba(255,255,255,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); text-align:left; display:flex; align-items:flex-start; gap:16px; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; box-shadow:0 8px 32px rgba(80,40,160,.08); }
.stat-card:nth-child(1){ --d:0s; } .stat-card:nth-child(2){ --d:.1s; } .stat-card:nth-child(3){ --d:.2s; } .stat-card:nth-child(4){ --d:.3s; }
.stat-card:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(80,40,160,.16); border-color:rgba(255,255,255,.9); }
.stat-icon{ flex:none; width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.stat-icon svg{ width:26px; height:26px; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.stat-card:hover .stat-icon{ transform:scale(1.1) rotate(-6deg); box-shadow:0 10px 22px -6px rgba(80,40,160,.35); }
.stat-card:hover .stat-icon svg{ transform:scale(1.08); }
.stat-card:hover .stat-dot{ transform:scale(1.4); }
.stat-dot{ transition:transform .4s ease; }
.stat-body{ min-width:0; }
.stat-num{ font-size:30px; font-weight:800; font-family:'Outfit'; line-height:1.1; }
.stat-label{ font-size:15px; color:var(--ink); margin-top:4px; font-weight:700; }
.stat-desc{ font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.5; }
.stat-corner{ position:absolute; right:-6px; bottom:-6px; width:70px; height:70px; border-radius:100% 0 0 0 / 100% 0 0 0; opacity:.14; pointer-events:none; }
.stat-dot{ position:absolute; right:14px; bottom:14px; width:9px; height:9px; border-radius:100%; }
.stats-badge{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px 9px 14px; border-radius:100px; background:rgba(255,255,255,.7); backdrop-filter:blur(10px); margin:0 auto 18px; position:relative; z-index:2; box-shadow:0 6px 18px rgba(80,40,160,.08); }
.stats-badge svg{ width:15px; height:15px; }
.stats-badge span{ font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--purple); }
.stats-head-wrap{ text-align:center; max-width:1100px; margin:0 auto 50px; position:relative; z-index:2; }
.stats-head-wrap h2{ white-space:nowrap; }
.stats-head-wrap p{ white-space:nowrap; }
@media (max-width:760px){ .stats-head-wrap h2, .stats-head-wrap p{ white-space:normal; } }

/* ===== FEATURED THEMES ===== */
.filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:52px; }
.filter-btn{ padding:11px 24px; border-radius:100px; font-size:13.5px; font-weight:700; border:1px solid var(--line); background:#fff; color:var(--ink-soft); transition:all .25s ease; box-shadow:0 2px 10px rgba(20,10,70,.04); }
.filter-btn.active, .filter-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 10px 24px rgba(10,11,30,.18); }
.theme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.theme-item.is-featured{ grid-column:span 2; }
.theme-item.is-featured .tcard-thumb{ aspect-ratio:20/11; }
.tcard{ height:100%; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; position:relative; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.tcard::before{ content:''; position:absolute; inset:0; border-radius:22px; padding:1.5px; background:var(--grad); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:2; }
.tcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.tcard:hover::before{ opacity:1; }
.tcard-thumb{ aspect-ratio:16/11; position:relative; overflow:hidden; background:#F4F3FC; }
.tcard-browserbar{ position:absolute; top:0; left:0; right:0; height:30px; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); display:flex; align-items:center; gap:6px; padding:0 12px; z-index:3; border-bottom:1px solid rgba(20,10,70,.06); }
.tcard-browserbar span{ width:7px; height:7px; border-radius:50%; background:#E1E0EE; }
.tcard-browserbar span:nth-child(1){ background:#FF6159; } .tcard-browserbar span:nth-child(2){ background:#FFBD2E; } .tcard-browserbar span:nth-child(3){ background:#28C840; }
.tcard-thumb .shot{ position:absolute; inset:30px 0 0 0; }
.tcard-thumb .ph-block, .tcard-thumb .mock-body, .tcard-thumb .shot img{ transition:transform .6s cubic-bezier(.2,.8,.2,1); width:100%; height:100%; object-fit:cover; }
.tcard:hover .tcard-thumb .shot img{ transform:scale(1.06); }
.tcard-badge{ position:absolute; top:40px; left:12px; z-index:4; padding:6px 13px; border-radius:100px; font-size:11px; font-weight:800; letter-spacing:.03em; color:#fff; background:var(--grad); box-shadow:0 8px 18px rgba(123,0,255,.3); }
.tcard-fav{ position:absolute; top:40px; right:12px; z-index:4; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); box-shadow:0 6px 16px rgba(20,10,70,.14); transition:color .25s ease, transform .25s ease; }
.tcard-fav:hover{ color:#FF3D71; transform:scale(1.1); }
.tcard-overlay{ position:absolute; inset:30px 0 0 0; background:linear-gradient(0deg, rgba(10,11,30,.68), rgba(10,11,30,.1) 60%, transparent); opacity:0; display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:18px; transition:opacity .35s ease; z-index:3; }
.tcard-overlay .btn{ transform:translateY(10px); opacity:0; transition:transform .4s ease, opacity .4s ease; }
.tcard:hover .tcard-overlay{ opacity:1; }
.tcard:hover .tcard-overlay .btn{ transform:translateY(0); opacity:1; }
.tcard:hover .tcard-overlay .btn:nth-child(2){ transition-delay:.06s; }
.tcard-body{ padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }
.tcard-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.tcard-body h4{ font-size:17px; font-weight:800; }
.tcard-cat{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600; margin-top:5px; }
.tcard-cat .dot{ width:5px; height:5px; border-radius:50%; background:var(--purple); flex-shrink:0; }
.tcard-price{ font-weight:800; color:var(--purple); font-size:13.5px; background:var(--grad-soft); border:1px solid rgba(123,0,255,.14); padding:6px 12px; border-radius:100px; white-space:nowrap; }
.tcard-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.tcard-rating{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); font-weight:700; }
.stars{ color:#FFB020; letter-spacing:1px; display:inline-flex; align-items:center; gap:1px; }
.tcard-demo{ display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800; color:var(--ink); transition:gap .25s ease, color .25s ease; }
.tcard-demo svg{ transition:transform .25s ease; }
.tcard:hover .tcard-demo{ color:var(--purple); }
.tcard:hover .tcard-demo svg{ transform:translateX(3px); }
.tgrid-cta{ text-align:center; margin-top:60px; }

/* ===== PREMIUM THEMES POLISH ===== */
#themes{ overflow:hidden; background:linear-gradient(180deg,#F6F5FF 0%,#FFFFFF 52%,#F8F7FF 100%) !important; }
#themes::before{ content:''; position:absolute; width:620px; height:620px; top:-260px; right:-180px; border-radius:50%; background:radial-gradient(circle,rgba(123,0,255,.12),transparent 68%); pointer-events:none; }
#themes::after{ content:''; position:absolute; width:460px; height:460px; bottom:-220px; left:-170px; border-radius:50%; background:radial-gradient(circle,rgba(0,168,255,.10),transparent 68%); pointer-events:none; }
#themes .wrap{ position:relative; z-index:1; }
#themes .section-head{ max-width:820px; margin-bottom:42px; }
#categories .section-head{ max-width:1100px; }
#categories .section-head h2, #better-websites .section-head h2{ white-space:nowrap; background:none; color:var(--ink); -webkit-text-fill-color:var(--ink); }
#categories .section-head h2 .heading-gradient-tail, #better-websites .section-head h2 .heading-gradient-tail{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
@media (max-width:760px){ #categories .section-head h2, #better-websites .section-head h2{ white-space:normal; } }
#themes .section-head h2{ font-size:clamp(34px,4.8vw,58px); letter-spacing:-.045em; }
#themes .section-head p{ max-width:640px; margin-left:auto; margin-right:auto; font-size:17px; }
.starter-points{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 28px; margin:-16px auto 46px; max-width:900px; }
.starter-points span{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink-soft); }
.starter-points svg{ flex:none; color:var(--purple); }
#themes .theme-title-accent{ position:relative; display:inline-block; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#themes .theme-title-accent::after{ content:''; position:absolute; left:4%; right:4%; bottom:-7px; height:4px; border-radius:100px; background:var(--grad); transform:skewX(-14deg); box-shadow:0 5px 14px rgba(123,0,255,.20); }
#themes .filters{ width:max-content; max-width:100%; margin:0 auto 48px; padding:7px; gap:4px; border:1px solid rgba(123,0,255,.12); border-radius:100px; background:rgba(255,255,255,.72); box-shadow:0 12px 32px rgba(20,10,70,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
#themes .filter-btn{ border-color:transparent; background:transparent; box-shadow:none; padding:10px 18px; }
#themes .filter-btn.active, #themes .filter-btn:hover{ background:var(--grad); border-color:transparent; box-shadow:0 8px 20px rgba(123,0,255,.22); }
#themes .theme-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
#themes .theme-item.is-featured{ grid-column:span 1; }
#themes .theme-item.is-featured .tcard-thumb{ aspect-ratio:16/11; }
#themes .tcard{ border-color:rgba(123,0,255,.10); box-shadow:0 10px 28px rgba(20,10,70,.06); }
#themes .tcard:hover{ box-shadow:0 22px 48px rgba(20,10,70,.14); }
#themes .tcard-body{ padding:22px 24px 24px; }
#themes .tgrid-cta .btn{ padding-left:28px; padding-right:28px; }
#themes .theme-pagination{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:48px; width:50%; min-width:340px; max-width:640px; margin-left:auto; margin-right:auto; }
#themes .page-pill{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:4px; padding:6px; border-radius:100px; background:rgba(255,255,255,.85); border:1px solid rgba(123,0,255,.12); box-shadow:0 10px 30px rgba(20,10,70,.08); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#themes .page-btn{ min-width:38px; height:38px; padding:0 12px; border-radius:100px; border:none; background:transparent; color:var(--ink-soft); font-size:13.5px; font-weight:800; transition:all .25s ease; flex:1; display:flex; align-items:center; justify-content:center; cursor:default; pointer-events:none; }
#themes .page-pill .page-btn{ min-width:0; }
#themes .page-btn:hover:not(:disabled):not(.active){ color:var(--purple); background:rgba(123,0,255,.08); }
#themes .page-btn.active{ color:#fff; background:var(--grad); box-shadow:0 8px 20px rgba(123,0,255,.32); }
#themes .page-btn.arrow{ flex:none; width:44px; height:44px; min-width:44px; border-radius:50%; background:var(--grad); color:#fff; box-shadow:0 10px 24px rgba(123,0,255,.3); transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
#themes .page-btn.arrow:hover:not(:disabled){ transform:translateY(-2px) scale(1.06); box-shadow:0 14px 30px rgba(123,0,255,.42); }
#themes .page-btn.arrow:disabled{ opacity:.32; cursor:not-allowed; box-shadow:none; }
@media (max-width:760px){ #themes .filters{ width:100%; justify-content:flex-start; overflow-x:auto; border-radius:18px; } #themes .filter-btn{ flex:0 0 auto; } #themes .theme-pagination{ margin-top:32px; width:100%; min-width:0; } }

/* ===== POWERFUL THEMES SHOWCASE (dual infinite marquee) ===== */
.pw-showcase{ background:#05060F url('../images/showcase-bg.webp') center center / cover no-repeat; overflow:hidden; padding:130px 0 140px; position:relative; }
.pw-head{ text-align:center; max-width:1100px; margin:0 auto 56px; position:relative; z-index:2; padding:0 24px; }
.pw-head h2{ font-size:clamp(26px,3.6vw,50px) !important; font-weight:800 !important; line-height:1.15; letter-spacing:-.02em; white-space:nowrap; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color:#fff !important; color:#fff !important; }
.pw-head h2 .grad{ background:linear-gradient(90deg,#4FC3FF,#3030FF 45%,#B000FF 75%,#FF3DD8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media (max-width:760px){ .pw-head h2{ white-space:normal; } }

.pw-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 20px; max-width:1080px; margin:0 auto 54px; position:relative; z-index:2; padding:0 24px; }
.pw-feature{ display:flex; flex-direction:row; align-items:center; gap:14px; text-align:left; padding:14px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); transition:border-color .3s ease, background .3s ease, transform .3s ease; text-decoration:none; cursor:pointer; }
.pw-feature:hover{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.pw-feature-icon{ position:relative; width:38px; height:38px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(#12122E,#12122E) padding-box, linear-gradient(135deg, var(--c1), var(--c2)) border-box; border:1.5px solid transparent; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; box-shadow:0 0 0 rgba(0,0,0,0); }
.pw-feature-icon::before{ content:''; position:absolute; inset:-10px; border-radius:18px; background:radial-gradient(circle, var(--c2), transparent 68%); opacity:0; filter:blur(12px); z-index:-1; transition:opacity .4s ease, transform .4s ease; }
.pw-feature-icon svg{ width:18px; height:18px; position:relative; z-index:1; }
.pw-feature:hover .pw-feature-icon{ transform:scale(1.08); box-shadow:0 10px 26px -6px var(--c2); }
.pw-feature:hover .pw-feature-icon::before{ opacity:.6; transform:scale(1.1); }
.pw-feature-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.pw-feature-title{ font-size:14.5px; font-weight:700; letter-spacing:-.005em; line-height:1.3; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform .3s ease; }
.pw-feature:hover .pw-feature-title{ transform:translateX(2px); }
.pw-feature-arrow{ flex-shrink:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); transition:transform .3s ease, color .3s ease; }
.pw-feature:hover .pw-feature-arrow{ transform:translateX(4px); color:rgba(255,255,255,.85); }
.pw-divider{ max-width:1200px; margin:0 auto 50px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); position:relative; z-index:2; }
@media (max-width:1024px){ .pw-features{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .pw-features{ grid-template-columns:1fr; gap:10px; margin-bottom:40px; padding:0 20px; } .pw-feature{ padding:13px 16px; } .pw-divider{ margin-bottom:36px; } }

.pw-marquee-wrap{ position:relative; z-index:2; display:flex; flex-direction:column; gap:26px; }
.pw-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.pw-scroll-layer{ will-change:transform; transition:transform .1s linear; }
.pw-marquee-track{ display:flex; align-items:center; gap:24px; width:max-content; will-change:transform; }
.pw-marquee-ltr .pw-marquee-track{ animation:pw-scroll-ltr 20s linear infinite; }
.pw-marquee-rtl .pw-marquee-track{ animation:pw-scroll-rtl 24s linear infinite; }
@keyframes pw-scroll-ltr{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }
@keyframes pw-scroll-rtl{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

.pw-demo-img{ flex:none; width:320px; height:210px; object-fit:cover; border-radius:18px; border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 40px rgba(0,0,0,.4); background:#161237; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; }
.pw-demo-img:hover{ transform:scale(1.02); box-shadow:0 24px 52px rgba(0,0,0,.5); border-color:rgba(255,255,255,.22); }

@media (max-width:1180px){ .pw-demo-img{ width:280px; height:184px; } }
@media (max-width:760px){
  .pw-showcase{ padding:90px 0 100px; }
  .pw-demo-img{ width:230px; height:152px; border-radius:14px; }
  .pw-marquee-track{ gap:16px; }
  .pw-marquee-wrap{ gap:18px; }
}

.pw-cta{ text-align:center; margin-top:56px; position:relative; z-index:2; }
.pw-cta-btn{ display:inline-flex; align-items:center; gap:9px; padding:17px 34px; border-radius:100px; background:linear-gradient(90deg,#3AB4FF,#7B00FF 55%,#FF3DD8); background-size:220% 100%; color:#fff; font-weight:700; font-size:15px; box-shadow:0 16px 38px rgba(123,0,255,.35); transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, background-position .5s ease; }
.pw-cta-btn:hover{ background-position:100% 0; box-shadow:0 20px 46px rgba(123,0,255,.48); }
.pw-cta-btn svg{ transition:transform .25s ease; }
.pw-cta-btn:hover svg{ transform:translateX(3px); }
@media (max-width:760px){ .pw-cta{ margin-top:42px; } }

@media (prefers-reduced-motion: reduce){
  .pw-marquee-ltr .pw-marquee-track, .pw-marquee-rtl .pw-marquee-track{ animation-duration:80s; }
}

/* ===== CATEGORIES ===== */
.cat-section{ position:relative; overflow:hidden; }
.cat-section::before{ content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:900px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(123,0,255,.06), transparent 70%); pointer-events:none; z-index:0; }
.cat-head-line{ display:none; }

.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 20px; position:relative; z-index:1; }
.cat-pill{ display:flex; align-items:center; gap:18px; padding:16px 18px; border-radius:100px; background:#fff; border:1px solid var(--line); position:relative; overflow:hidden; transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, border-color .6s ease; }
.cat-pill::before{ content:''; position:absolute; inset:0; border-radius:100px; padding:1.5px; background:var(--grad); opacity:0; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .6s ease; pointer-events:none; }
.cat-pill:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(20,10,70,.12); }
.cat-pill:hover::before{ opacity:1; }

.cat-pill-icon{ position:relative; flex-shrink:0; width:56px; height:56px; border-radius:50%; background:#15161F; display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; transition:transform .6s cubic-bezier(.2,.8,.2,1), background .6s ease, box-shadow .6s ease; }
.cat-pill-icon svg{ width:23px; height:23px; position:relative; z-index:1; }
.cat-pill:hover .cat-pill-icon{ transform:scale(1.1); background:var(--grad); box-shadow:0 12px 26px rgba(123,0,255,.35); }

.cat-pill-body{ flex:1; min-width:0; }
.cat-pill-body h4{ font-size:15.5px; font-weight:700; color:var(--ink); transition:color .5s ease; display:flex; align-items:center; gap:8px; }
.cat-pill-body span{ display:block; margin-top:2px; font-size:12px; color:var(--muted); font-weight:600; }
.cat-pill-tag{ font-size:9px; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--grad); padding:2.5px 8px; border-radius:100px; }

.cat-pill-arrow{ flex-shrink:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); background:var(--bg-lav); transition:all .55s cubic-bezier(.2,.8,.2,1); }
.cat-pill:hover .cat-pill-arrow{ background:var(--grad); color:#fff; transform:translateX(3px); }

/* featured category */
.cat-pill.featured{ border-color:rgba(176,0,255,.16); }
.cat-pill.featured:hover{ box-shadow:0 22px 46px rgba(176,0,255,.22); }

/* per-icon micro interactions (subtle, on hover) */
.cat-pill svg *{ transform-box:fill-box; }
.cat-pill[data-anim="shine"] .cat-pill-icon::after{ content:''; position:absolute; top:-40%; left:-40%; width:26%; height:180%; background:rgba(255,255,255,.4); filter:blur(2px); opacity:0; transform:translateX(-60px) skewX(-18deg); }
.cat-pill[data-anim="shine"]:hover .cat-pill-icon::after{ opacity:1; animation:catShine .8s ease forwards; }
@keyframes catShine{ from{ transform:translateX(-60px) skewX(-18deg); opacity:1; } to{ transform:translateX(90px) skewX(-18deg); opacity:0; } }

.cat-pill[data-anim="cart"] .wheel{ transform-origin:center; transition:transform .8s ease; }
.cat-pill[data-anim="cart"]:hover .wheel{ animation:catSpin .9s linear infinite; }
@keyframes catSpin{ to{ transform:rotate(360deg); } }

.cat-pill[data-anim="blog"] .doc-line{ transform-origin:left center; transform:scaleX(.4); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.cat-pill[data-anim="blog"] .doc-line:nth-of-type(2){ transition-delay:.06s; }
.cat-pill[data-anim="blog"] .doc-line:nth-of-type(3){ transition-delay:.12s; }
.cat-pill[data-anim="blog"]:hover .doc-line{ transform:scaleX(1); }

.cat-pill[data-anim="agency"] .team-b{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.cat-pill[data-anim="agency"]:hover .team-b{ transform:translate(-1.5px,-1px); }

.cat-pill[data-anim="portfolio"] .frame-mtn{ transform-origin:70% 75%; transform:scale(.75); opacity:.5; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; }
.cat-pill[data-anim="portfolio"]:hover .frame-mtn{ transform:scale(1); opacity:1; }

.cat-pill[data-anim="tech"] .tech-dot{ transition:opacity .35s ease; opacity:.35; }
.cat-pill[data-anim="tech"]:hover .tech-dot{ animation:catBlink 1.1s ease-in-out infinite; }
.cat-pill[data-anim="tech"]:hover .tech-dot:nth-of-type(2){ animation-delay:.2s; }
.cat-pill[data-anim="tech"]:hover .tech-dot:nth-of-type(3){ animation-delay:.4s; }
@keyframes catBlink{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.cat-pill[data-anim="edu"] .cap{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.cat-pill[data-anim="edu"]:hover .cap{ transform:translateY(-3px); }

.cat-pill[data-anim="food"] .utensil{ transform-origin:top center; transition:transform .4s ease; }
.cat-pill[data-anim="food"]:hover .utensil{ animation:catWiggle .6s ease; }
@keyframes catWiggle{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-6deg); } }

.cat-pill[data-anim="heart"] svg{ transform-origin:center; }
.cat-pill[data-anim="heart"]:hover svg{ animation:catPulse .6s ease-in-out 2; }
@keyframes catPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }

.cat-pill[data-anim="real"] .draw-path{ stroke-dasharray:64; stroke-dashoffset:64; transition:stroke-dashoffset .6s ease; }
.cat-pill[data-anim="real"]:hover .draw-path{ stroke-dashoffset:0; }

.cat-pill[data-anim="travel"] svg{ transition:transform .5s ease; }
.cat-pill[data-anim="travel"]:hover svg{ animation:catFly .8s ease; }
@keyframes catFly{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(2.5px,-2.5px) rotate(8deg); } }

.cat-pill[data-anim="creative"] .dot{ transform-origin:center; transform:scale(0); opacity:0; transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
.cat-pill[data-anim="creative"]:hover .dot{ transform:scale(1); opacity:1; }
.cat-pill[data-anim="creative"]:hover .dot:nth-of-type(2){ transition-delay:.05s; }
.cat-pill[data-anim="creative"]:hover .dot:nth-of-type(3){ transition-delay:.1s; }
.cat-pill[data-anim="creative"]:hover .dot:nth-of-type(4){ transition-delay:.15s; }

@media (max-width:1024px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cat-grid{ grid-template-columns:1fr; } .cat-pill{ padding:14px 16px; gap:14px; } .cat-pill-icon{ width:50px; height:50px; } .stats-grid.cols-3{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .cat-head-line{ animation:none; }
  .cat-pill, .cat-pill-icon, .cat-pill-arrow, .cat-pill *{ animation:none !important; transition-duration:.01s !important; }
}


/* ===== SPLIT SECTIONS ===== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.split.rev .visual{ order:2; } .split.rev .content{ order:1; }
.check-list{ margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.check-item{ display:flex; align-items:center; gap:11px; font-weight:600; font-size:15.5px; color:var(--ink-soft); }
.check-item .tick{ width:22px; height:22px; border-radius:50%; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.check-item svg{ color:var(--purple); }

/* floating panels for customization */
.panel-stack{ position:relative; }
.ui-panel{ position:absolute; background:#fff; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:12px 16px; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--ink-soft); }
.ui-panel .dot{ width:9px; height:9px; border-radius:50%; background:var(--grad); }

/* ===== BENTO FEATURES ===== */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:20px; }
.bento-card{ border-radius:22px; padding:30px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .35s ease; border:1px solid var(--line); background:#fff; }
.bento-card:hover{ transform:translateY(-6px); }
.bento-card.wide{ grid-column:span 2; }
.bento-card.tall{ grid-row:span 2; }
.bento-card h4{ font-size:18px; font-weight:800; }
.bento-card p{ font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.5; max-width:260px; }
.bento-icon{ width:44px; height:44px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:16px; }
.bento-card:nth-child(1){ background:linear-gradient(135deg,#F0F8FF,#fff); }
.bento-card:nth-child(2){ background:linear-gradient(135deg,#F6F5FF,#fff); }
.bento-card:nth-child(3){ background:linear-gradient(135deg,#FDF2FF,#fff); }
.bento-card:nth-child(4){ background:linear-gradient(135deg,#F0FFFA,#fff); }
.bento-card:nth-child(5){ background:linear-gradient(135deg,#FFF8F0,#fff); }
.bento-card:nth-child(6){ background:linear-gradient(135deg,#F0F2FF,#fff); }

/* ===== PERFORMANCE ORBIT (hub + spoke cards) ===== */
.perf-orbit{ position:relative; max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:0; padding:30px 0; }
.perf-orbit::before{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at center, rgba(123,0,255,.06), transparent 62%); pointer-events:none; }

.perf-col{ position:relative; z-index:1; display:flex; flex-direction:column; gap:26px; flex:1 1 0; min-width:0; max-width:320px; }
.perf-col-left{ align-items:stretch; }
.perf-col-right{ align-items:stretch; }

.perf-card{ position:relative; display:flex; align-items:center; gap:16px; background:transparent; }
.perf-col-right .perf-card{ flex-direction:row-reverse; text-align:right; }
.perf-card-icon{ flex-shrink:0; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg, var(--ic,var(--purple)) 0%, var(--blue) 100%); border:none; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -10px rgba(80,40,200,.45); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.perf-card:hover .perf-card-icon{ transform:scale(1.08); }
.perf-card-icon svg{ width:23px; height:23px; }
.perf-card-icon b{ font-size:16px; font-weight:800; }
.perf-card-text h4{ font-size:14.5px; font-weight:800; color:var(--ink); }
.perf-card-text p{ margin-top:5px; font-size:12.5px; color:var(--muted); line-height:1.55; }
.perf-score-card{ position:absolute; bottom:-6px; right:-18px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px 16px 8px 8px; box-shadow:0 16px 34px -14px rgba(80,40,200,.35); }
.perf-score-card img{ width:40px; height:40px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.perf-score-card-body{ display:flex; flex-direction:column; line-height:1.2; }
.perf-score-num{ font-size:20px; font-weight:800; background:linear-gradient(135deg,var(--purple),var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.perf-score-label{ font-size:11px; font-weight:700; color:var(--muted); }
@media (max-width:640px){ .perf-score-card{ right:0; bottom:-14px; padding:6px 12px 6px 6px; } .perf-score-card img{ width:32px; height:32px; } }

.perf-hub-wrap{ position:relative; z-index:2; flex:0 0 auto; width:360px; max-width:100%; margin:0 20px; display:flex; align-items:center; justify-content:center; }
.perf-hub-wrap svg{ width:100%; height:auto; display:block; }
.perf-mock-line{ stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1) .1s; }
.reveal.in .perf-mock-line{ stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce){ .perf-mock-line{ transition:none; } }

.perf-outcomes{ position:relative; display:flex; max-width:1080px; margin:56px auto 0; border-radius:24px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); overflow:hidden; flex-wrap:wrap; }
.perf-outcome{ flex:1 1 0; min-width:220px; display:flex; align-items:flex-start; gap:14px; text-align:left; padding:30px 22px; }
.perf-outcome-icon{ flex-shrink:0; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--oc-soft); color:var(--oc); }
.perf-outcome-text h5{ font-size:14.5px; font-weight:800; color:var(--ink); }
.perf-outcome-text p{ margin-top:5px; font-size:12.5px; color:var(--muted); line-height:1.55; }

@media (max-width:900px){
  .perf-orbit{ flex-direction:column; gap:22px; }
  .perf-col{ max-width:520px; width:100%; }
  .perf-hub-wrap{ order:-1; margin:0 0 6px; width:280px; }
}
@media (max-width:640px){
  .perf-hub-wrap{ width:230px; }
  .perf-outcome{ flex:1 1 50%; border-bottom:1px solid var(--line); }
}

/* ===== BROWSER COMPAT (card style, matches responsive device cards) ===== */
.browser-row{ position:relative; display:flex; align-items:stretch; justify-content:center; gap:20px; margin-top:24px; max-width:900px; margin-left:auto; margin-right:auto; flex-wrap:wrap; }
.browser-card{ position:relative; z-index:1; flex:1 1 130px; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 14px 20px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); will-change:transform; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.browser-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(123,0,255,.25); }
.browser-card-icon{ position:relative; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--c-soft); }
.browser-card-icon::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed var(--c); opacity:.3; }
.browser-card-icon img{ width:32px; height:32px; display:block; }
.browser-card small{ font-size:14px; font-weight:800; color:var(--ink); }
.browser-card-line{ width:30px; height:3px; border-radius:100px; background:var(--c); margin-top:-8px; }

.browser-badge-row{ display:inline-flex; align-items:center; gap:10px; margin:36px auto 0; padding:12px 26px; border-radius:100px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px; font-weight:600; flex-wrap:wrap; justify-content:center; }
.browser-badge-row svg{ flex-shrink:0; color:var(--purple); }
.browser-badge-row .sep{ opacity:.5; margin:0 2px; }
@media (max-width:640px){
  .browser-card{ flex:1 1 42%; max-width:160px; }
  .browser-badge-row{ font-size:12px; padding:10px 18px; gap:6px; }
}

/* ===== RESPONSIVE EXPERIENCE (card style) ===== */
.resp-devices{ position:relative; display:flex; align-items:stretch; justify-content:center; gap:24px; margin:48px auto 0; max-width:760px; flex-wrap:wrap; }
.resp-connector{ position:absolute; left:0; right:0; top:38%; width:100%; height:90px; z-index:0; pointer-events:none; opacity:.5; }
.resp-connector-path{ stroke-dashoffset:340; stroke-dasharray:340; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .2s; }
.reveal.in .resp-connector-path{ stroke-dashoffset:0; }

.resp-device{ position:relative; z-index:1; flex:1 1 190px; max-width:220px; display:flex; flex-direction:column; align-items:center; gap:16px; padding:32px 20px 26px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); will-change:transform; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.resp-device:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(123,0,255,.25); }
.resp-device-icon{ position:relative; width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--c-soft); color:var(--c); }
.resp-device-icon::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed var(--c); opacity:.35; }
.resp-device-icon svg{ width:28px; height:28px; }
.resp-device small{ font-size:14.5px; font-weight:800; color:var(--ink); }
.resp-device-line{ width:34px; height:3px; border-radius:100px; background:var(--c); margin-top:-6px; }

.resp-desktop{ --c:#3AB4FF; --c-soft:rgba(58,180,255,.12); }
.resp-tablet{ --c:#7B00FF; --c-soft:rgba(123,0,255,.1); }
.resp-mobile{ --c:#D000FF; --c-soft:rgba(208,0,255,.1); }

.resp-badge-row{ display:inline-flex; align-items:center; gap:10px; margin:44px auto 0; padding:12px 26px; border-radius:100px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px; font-weight:600; flex-wrap:wrap; justify-content:center; }
.resp-badge-row svg{ flex-shrink:0; color:var(--purple); }
.resp-badge-row b{ color:var(--ink-soft); font-weight:700; }
.resp-badge-row .sep{ opacity:.5; margin:0 2px; }

@media (max-width:640px){
  .resp-devices{ gap:16px; }
  .resp-device{ flex:1 1 100%; max-width:280px; padding:26px 20px 22px; }
  .resp-badge-row{ font-size:12px; padding:10px 18px; gap:6px; }
}
.float{ animation:floatIcon 6s ease-in-out infinite; }
@keyframes floatIcon{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

/* ===== SMART AD SPACES ===== */
.ad-wireframe{ position:relative; border:1px solid var(--line); border-radius:22px; padding:30px; background:#fff; box-shadow:var(--shadow); }
.ad-zone{ position:relative; border:2px dashed rgba(123,0,255,.35); border-radius:12px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; color:var(--purple); letter-spacing:.03em; }
.ad-zone::after{ content:''; position:absolute; inset:-4px; border-radius:16px; border:2px solid var(--purple); opacity:0; animation:adpulse 2.8s ease-in-out infinite; }
@keyframes adpulse{ 0%{opacity:.6; transform:scale(1);} 100%{opacity:0; transform:scale(1.07);} }

/* ===== MARKETPLACE EXPERIENCE ===== */
.mkt-stage{ position:relative; max-width:900px; margin:0 auto; height:440px; }
.mkt-browser{ position:absolute; top:20px; left:50%; transform:translateX(-50%); width:70%; z-index:3; box-shadow:var(--shadow-lg); animation:floaty1 8s ease-in-out infinite; }
.mkt-chip{ position:absolute; background:#fff; border-radius:100px; padding:10px 18px; font-size:12.5px; font-weight:800; box-shadow:var(--shadow-lg); border:1px solid var(--line); display:flex; align-items:center; gap:7px; z-index:4; }
.mkt-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--grad); }

/* ===== WHY CTRSPACE / CHART ===== */
.why-cards{ display:flex; flex-direction:column; gap:22px; }
.why-card{ display:flex; gap:18px; padding:24px; border-radius:18px; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; background:#fff; }
.why-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.why-icon{ width:48px; height:48px; border-radius:13px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.chart-wrap{ border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow); background:#fff; }
.chart-path{ stroke-dasharray:700; stroke-dashoffset:700; transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); }
.chart-path.in{ stroke-dashoffset:0; }

.why-split{ align-items:start; }
.why-rows{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; padding:6px 24px; box-shadow:var(--shadow); }
.why-row{ display:flex; align-items:center; gap:16px; padding:18px 2px; border-bottom:1px solid var(--line); transition:transform .25s ease; }
.why-row:last-child{ border-bottom:none; }
.why-row:hover{ transform:translateX(4px); }
.why-row-icon{ width:40px; height:40px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.why-row-text h4{ font-size:15px; font-weight:800; color:var(--ink); }
.why-row-text p{ font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.5; }
@media (max-width:1024px){ .why-split{ align-items:center; } }

/* ===== PLUGINS ===== */
.plugin-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.plugin-item{ aspect-ratio:1; border:1px solid var(--line); border-radius:16px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; color:var(--muted); transition:all .3s ease; background:#fff; }
.plugin-item svg{ width:24px; height:24px; transition:color .3s ease; }
.plugin-item span{ font-size:10.5px; font-weight:700; text-align:center; padding:0 6px; }
.plugin-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.plugin-item:hover svg, .plugin-item:hover span{ color:var(--purple); }

/* ===== FINAL CTA ===== */
.final-cta{ border-radius:36px; padding:100px 40px; text-align:center; position:relative; overflow:hidden; background:var(--ink); color:#fff; }
.final-blob{ position:absolute; border-radius:50%; filter:blur(100px); z-index:0; animation:blobmove 12s ease-in-out infinite; }
.final-blob.f1{ width:400px; height:400px; background:#00A8FF; top:-140px; left:-100px; opacity:.35; }
.final-blob.f2{ width:400px; height:400px; background:#D000FF; bottom:-160px; right:-100px; opacity:.35; }
@keyframes blobmove{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(30px,-20px);} }
.final-cta h2{ font-size:clamp(28px,4.4vw,48px); font-weight:800; letter-spacing:-0.02em; position:relative; z-index:2; background:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:#fff; color:#fff; }
.final-cta h2 .grad-text{ -webkit-text-fill-color:transparent; background:linear-gradient(90deg,#4FC3FF,#B000FF 60%,#FF3DD8); -webkit-background-clip:text; background-clip:text; }
.final-cta .eyebrow{ position:relative; z-index:2; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; }
.final-cta .eyebrow .dot{ background:linear-gradient(90deg,#4FC3FF,#B000FF,#FF3DD8); }
.final-cta .section-accent-line{ position:relative; z-index:2; }
.final-cta p{ max-width:520px; margin:18px auto 0; color:rgba(255,255,255,.7); font-size:17px; position:relative; z-index:2; }
.final-cta .hero-cta{ margin-top:34px; position:relative; z-index:2; }

/* ===== FOOTER NEWSLETTER (glow card, footer-top) ===== */
.news-form{ display:flex; gap:6px; background:rgba(255,255,255,.05); padding:6px; border-radius:100px; border:1px solid rgba(255,255,255,.14); }
.news-form input{ flex:1; padding:12px 18px; border-radius:100px; border:none; background:transparent; font-size:14.5px; outline:none; min-width:0; color:#fff; }
.news-form input::placeholder{ color:rgba(255,255,255,.4); }
.news-form .btn-primary{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:linear-gradient(90deg,#1CA9FF,#3B2FE0); box-shadow:0 14px 34px rgba(43,60,224,.32); }
.foot-newsletter{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:40px 46px; margin:100px 0 60px; border-radius:26px; border:1px solid rgba(123,0,255,.35); background:linear-gradient(135deg, #0D0E28, #16123A 55%, #1C0F35); box-shadow:0 0 60px -20px rgba(123,0,255,.4), inset 0 0 40px -30px rgba(58,180,255,.35); overflow:hidden; }
.foot-newsletter-icon{ flex-shrink:0; width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#3AB4FF,#7B00FF); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 14px 30px -8px rgba(80,40,200,.6); position:relative; z-index:1; }
.foot-newsletter-plane{ position:absolute; top:20px; right:26px; width:26px; height:26px; color:#B98BFF; opacity:.8; transform:rotate(0deg); z-index:1; }
.foot-newsletter-head{ display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
.foot-newsletter-text{ max-width:440px; position:relative; z-index:1; }
.foot-newsletter-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#B98BFF; padding:7px 15px 7px 13px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.foot-newsletter-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--grad); }
.foot-newsletter-text h3{ margin-top:10px; font-size:clamp(22px,2.6vw,30px); font-weight:800; color:#fff; letter-spacing:-.01em; }
.foot-newsletter-text p{ margin-top:10px; font-size:16.5px; color:rgba(255,255,255,.55); line-height:1.65; max-width:420px; }
.foot-newsletter-main{ display:flex; flex-direction:column; gap:16px; position:relative; z-index:2; }
.foot-news-form{ flex-shrink:0; max-width:400px; width:100%; }
.foot-news-tags{ display:flex; flex-wrap:wrap; gap:18px; }
.foot-news-tag{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.65); }
.foot-news-tag-icon{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--ti1,#3AB4FF),var(--ti2,#7B00FF)); border:none; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 6px 14px -4px rgba(80,40,200,.55); }
.foot-news-tag:nth-child(1) .foot-news-tag-icon{ --ti1:#3AB4FF; --ti2:#7B00FF; }
.foot-news-tag:nth-child(2) .foot-news-tag-icon{ --ti1:#9B4CFF; --ti2:#D000FF; }
.foot-news-tag:nth-child(3) .foot-news-tag-icon{ --ti1:#FF3DD8; --ti2:#7B00FF; }
.foot-news-illustration{ display:none; }
@media (max-width:900px){ .foot-newsletter{ flex-direction:column; align-items:flex-start; padding:34px 26px; } .foot-news-form{ max-width:100%; } }

/* ===== FOOTER ===== */
footer{ background:#07081A; color:#B7B8CC; padding:0 0 0; position:relative; overflow:hidden; }
footer::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, transparent, var(--blue), var(--purple), var(--magenta), transparent); }
.foot-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.08); }
.foot-logo-chip{ display:inline-flex; background:transparent; padding:0; }
.foot-logo-chip .logo-img-wrap{ height:auto; overflow:visible; }
.foot-logo-chip .logo-img{ height:44px; }
.foot-brand p{ margin-top:18px; font-size:16px; line-height:1.7; color:#8B8CA6; max-width:280px; }
.foot-social{ display:flex; gap:10px; margin-top:22px; }
.foot-social a{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--si1,#3AB4FF),var(--si2,#7B00FF)); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 8px 18px -6px rgba(80,40,200,.5); }
.foot-social a:nth-child(1){ --si1:#3AB4FF; --si2:#2447FF; }
.foot-social a:nth-child(2){ --si1:#5B6BFF; --si2:#9B4CFF; }
.foot-social a:nth-child(3){ --si1:#B24CFF; --si2:#FF3DD8; }
.foot-social a:nth-child(4){ --si1:#3AB4FF; --si2:#7B00FF; }
.foot-social a:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 14px 28px -6px rgba(123,0,255,.65); }
.foot-col-head{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.foot-col-icon{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--ci1,#3AB4FF),var(--ci2,#7B00FF)); border:none; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 8px 18px -6px rgba(80,40,200,.55); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.foot-top .foot-col:nth-of-type(1) .foot-col-icon{ --ci1:#3AB4FF; --ci2:#7B00FF; }
.foot-top .foot-col:nth-of-type(2) .foot-col-icon{ --ci1:#9B4CFF; --ci2:#D000FF; }
.foot-top .foot-col:nth-of-type(3) .foot-col-icon{ --ci1:#4FC3FF; --ci2:#4338CA; }
.foot-top .foot-col:nth-of-type(4) .foot-col-icon{ --ci1:#FF3DD8; --ci2:#7B00FF; }
.foot-col:hover .foot-col-icon{ transform:scale(1.08) rotate(-4deg); }
.foot-col h5{ color:#fff; font-size:16px; font-weight:700; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot-col a{ display:inline-flex; align-items:center; gap:8px; width:fit-content; position:relative; padding-bottom:2px; font-size:16px; color:#9394AC; transition:color .2s, transform .2s; }
.foot-col a::before{ content:''; width:5px; height:5px; border-radius:50%; background:#5C5D78; flex-shrink:0; transition:background .25s ease, transform .25s ease; }
.foot-col a::after{ content:''; position:absolute; left:13px; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--blue),var(--purple)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.foot-col a svg{ flex-shrink:0; opacity:0; transform:translateX(-3px); transition:opacity .2s, transform .2s; margin-left:auto; }
.foot-col a:hover{ color:#fff; transform:translateX(2px); }
.foot-col a:hover::before{ background:var(--purple); transform:scale(1.3); }
.foot-col a:hover::after{ transform:scaleX(1); }
.foot-col a:hover svg{ opacity:1; transform:translateX(0); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:16px; color:#75768E; flex-wrap:wrap; gap:14px; }
.foot-bottom a{ color:#75768E; } .foot-bottom a:hover{ color:#fff; }
.foot-bottom-trust{ display:inline-flex; align-items:center; gap:8px; color:#8B8CA6; }
.foot-bottom-trust svg{ color:#B98BFF; flex-shrink:0; }
.foot-brand-name{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
@media (max-width:1024px){ .foot-top{ grid-template-columns:1fr 1fr; gap:40px 24px; } .foot-brand{ grid-column:1/3; } }
@media (max-width:640px){ .foot-top{ grid-template-columns:1fr; } .foot-brand{ grid-column:auto; } .foot-bottom{ flex-direction:column; align-items:flex-start; } }



/* ===== REAL-IMAGE THUMBNAIL FRAME ===== */
.shot{ position:absolute; inset:0; overflow:hidden; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.tcard:hover .shot img{ transform:scale(1.08); }
.shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,11,30,.35)); pointer-events:none; }
.shot-tag{ position:absolute; left:14px; bottom:12px; z-index:2; display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:100px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); font-size:11px; font-weight:800; color:var(--ink); letter-spacing:.02em; box-shadow:0 4px 14px rgba(10,11,30,.18); }
.shot-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--grad); }

/* ===== CATEGORY ICONS: replaced by monochrome pill design above ===== */

/* ===== BENTO WITH IMAGE STRIP ===== */
.bento-media{ position:absolute; inset:0; z-index:0; opacity:.16; background-size:cover; background-position:center; }
.bento-card > *{ position:relative; z-index:1; }
.bento-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 20%, #fff 85%); z-index:0; }

/* ===== BROWSER LOGOS (real) ===== */

/* ===== PLUGIN CARDS (real brand logos) ===== */
.plugin-item{ padding:14px 8px; }
.plugin-item .plugin-logo{ width:34px; height:34px; transition:transform .3s ease; display:block; }
.plugin-item:hover .plugin-logo{ transform:scale(1.15); }
.plugin-item span{ margin-top:8px; color:var(--ink-soft); font-size:10.5px; font-weight:700; text-align:center; padding:0 4px; display:block; }
.plugin-item:hover span{ color:var(--ink); }

/* ===== HERO PHOTO CARDS ===== */
.hero-photo{ position:absolute; inset:0; overflow:hidden; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== SPLIT SECTION REAL SHOTS ===== */
.real-shot{ position:absolute; inset:0; overflow:hidden; }
.real-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.mock-overlay-chip{ position:absolute; background:#fff; border-radius:14px; padding:12px 16px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; }
.mock-overlay-chip .mo-icon{ width:32px; height:32px; border-radius:9px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.mock-overlay-chip .mo-txt small{ display:block; font-size:10.5px; color:var(--muted); font-weight:600; }

/* ===== MONETIZATION SECTION (sticky-stack layered panels, Zeyna-style) ===== */
.mz-section{ position:relative; background:#fff; padding:150px 0; }
@media (max-width:1024px){ .mz-section{ padding:100px 0; } }
@media (max-width:640px){ .mz-section{ padding:76px 0; } }
.mz-dots-decor{ position:absolute; top:5%; right:4%; display:grid; grid-template-columns:repeat(5,1fr); gap:11px; opacity:.5; pointer-events:none; z-index:0; will-change:transform; }
.mz-dots-decor span{ width:3.5px; height:3.5px; border-radius:50%; background:var(--purple); opacity:.5; }

.mz-head{ text-align:center; max-width:720px; margin:0 auto 60px; position:relative; z-index:1; }
.mz-heading{ font-size:clamp(32px,4.4vw,52px); font-weight:800 !important; line-height:1.12; letter-spacing:-.02em; background:none !important; -webkit-text-fill-color:var(--ink) !important; color:var(--ink) !important; }
.mz-heading .grad-text{ display:block; -webkit-text-fill-color:transparent !important; }
.mz-accent{ width:52px; height:4px; border-radius:100px; background:var(--grad); margin:18px auto 0; }
.mz-lead{ margin-top:20px; font-size:17px; line-height:1.7; color:var(--muted); max-width:520px; margin-left:auto; margin-right:auto; }

.mz-nav{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:0; margin-top:32px; position:relative; z-index:1; }
.mz-nav-item{ display:flex; align-items:center; gap:10px; padding:0 16px; position:relative; opacity:1; cursor:pointer; background:none; border:none; font-family:inherit; }
.mz-nav-item:not(:last-child)::after{ content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:26px; background:var(--line); }
.mz-nav-icon{ position:relative; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s ease, box-shadow .3s ease; }
.mz-nav-icon::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid currentColor; opacity:0; transform:scale(.8); transition:opacity .3s ease, transform .3s ease; }
.mz-nav-item.is-on .mz-nav-icon{ transform:scale(1.08); }
.mz-nav-item.is-on .mz-nav-icon::before{ opacity:.3; transform:scale(1); }
.mz-nav-item span{ font-size:12.5px; font-weight:700; color:var(--ink-soft); white-space:nowrap; transition:color .3s ease; }
.mz-nav-item.is-on span{ color:var(--ink); }
@media (max-width:900px){ .mz-nav{ display:none; } }

/* ===== SCROLL-PINNED HORIZONTAL PARALLAX SLIDER ===== */
.mz-pin-outer{ position:relative; height:480vh; }
.mz-pin-inner{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }

.mz-hprogress{ display:flex; align-items:center; justify-content:center; gap:12px; position:relative; z-index:2; margin-bottom:8px; }
.mz-hprogress-num{ font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mz-hprogress-num b{ color:var(--purple); }
.mz-hprogress-line{ width:110px; height:3px; border-radius:100px; background:var(--line); overflow:hidden; }
.mz-hprogress-fill{ display:block; height:100%; width:10%; border-radius:100px; background:var(--grad); transition:width .2s ease; }

.mz-hviewport{ position:relative; width:100%; overflow:hidden; padding:34px 0; }
.mz-htrack{ display:flex; align-items:stretch; gap:36px; padding:0 9vw; will-change:transform; }

.mz-hcard{ position:relative; flex:0 0 auto; width:min(760px,78vw); border-radius:28px; border:1px solid var(--line); background:#fff; overflow:hidden; box-shadow:var(--shadow); }
.mz-hcard-decor{ position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; will-change:transform; }
.mz-hcard-inner{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; align-items:center; padding:48px 44px; will-change:transform; }
.mz-hcard-icon{ position:absolute; top:32px; right:32px; z-index:2; width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; will-change:transform; }
.mz-hcard-text{ will-change:transform; }
.mz-hcard-num{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); }
.mz-hcard h3{ font-size:clamp(26px,2.8vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.12; color:var(--ink); margin-top:12px; }
.mz-hcard p{ margin-top:14px; font-size:15px; line-height:1.68; color:var(--muted); max-width:380px; }
.mz-hcard-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:13px; font-weight:800; color:var(--purple); }
.mz-hcard-visual{ position:relative; border-radius:20px; background:var(--bg-lav); border:1px solid var(--line); min-height:280px; display:flex; align-items:center; justify-content:center; padding:28px; will-change:transform; }

.mz-hdots{ display:flex; align-items:center; justify-content:center; gap:10px; position:relative; z-index:2; margin-top:6px; }
.mz-hdots button{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:transform .3s ease, background .3s ease, width .3s ease; }
.mz-hdots button.is-on{ background:var(--grad); width:26px; border-radius:100px; }

@media (prefers-reduced-motion: reduce), (max-width:900px){
  .mz-pin-outer{ height:auto; }
  .mz-pin-inner{ position:static; height:auto; padding:10px 0; }
  .mz-hviewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .mz-htrack{ transform:none !important; padding:0 24px; }
  .mz-hcard{ width:min(420px,84vw); scroll-snap-align:center; }
  .mz-hcard-inner{ grid-template-columns:1fr; text-align:center; padding:32px 28px; transform:none !important; }
  .mz-hcard p{ margin-left:auto; margin-right:auto; }
  .mz-hcard-icon{ position:static; margin:0 auto 14px; transform:none !important; }
  .mz-hcard-decor{ transform:none !important; }
  .mz-hcard-visual{ order:-1; margin-bottom:20px; transform:none !important; }
  .mz-hdots{ display:none; }
}

/* visual 1 - AdSense Ready */
.mz-v1{ width:100%; max-width:440px; border-radius:16px; border:1px solid var(--line); overflow:hidden; background:#fff; box-shadow:0 16px 40px rgba(20,10,70,.1); }
.mz-v1-bar{ height:26px; background:#F6F6FB; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid var(--line); }
.mz-v1-bar span{ width:6px; height:6px; border-radius:50%; background:#E1E2ED; }
.mz-v1-bar small{ margin-left:6px; font-size:9px; font-weight:700; color:var(--muted); }
.mz-v1-body{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.mz-v1-slot{ position:relative; border-radius:9px; border:1.5px dashed rgba(123,0,255,.32); background:var(--grad-soft); opacity:.4; transition:opacity .5s ease; display:flex; align-items:center; justify-content:center; }
.mz-v1-slot em{ font-style:normal; font-size:8.5px; font-weight:800; color:var(--purple); text-align:center; letter-spacing:.02em; line-height:1.3; }
.mz-hcard.is-active .mz-v1-slot{ opacity:1; }
.mz-hcard.is-active .mz-v1-slot:nth-child(1){ transition-delay:.1s; }
.mz-hcard.is-active .mz-v1-slot:nth-child(3){ transition-delay:.3s; }
.mz-hcard.is-active .mz-v1-slot:nth-child(4){ transition-delay:.5s; }
.mz-v1-head{ height:30px; }
.mz-v1-row{ display:flex; gap:10px; flex:1; }
.mz-v1-side{ width:34%; }
.mz-v1-content{ flex:1; border-radius:9px; background:var(--bg-lav); display:flex; flex-direction:column; justify-content:center; gap:7px; padding:10px; }
.mz-v1-content i{ height:6px; border-radius:4px; background:#fff; border:1px solid var(--line); display:block; }
.mz-v1-foot{ height:22px; }

/* visual 2 - Strategic Ad Placement */
.mz-v2{ width:100%; max-width:440px; height:100%; min-height:280px; position:relative; border-radius:16px; border:1px solid var(--line); background:#fff; box-shadow:0 16px 40px rgba(20,10,70,.1); padding:18px; }
.mz-v2 .z{ position:absolute; border-radius:11px; border:1.5px dashed rgba(123,0,255,.42); background:var(--grad-soft); opacity:0; transform:scale(.92); transition:opacity .5s ease, transform .5s ease; display:flex; align-items:center; justify-content:center; }
.mz-v2 .z em{ font-style:normal; font-size:8.5px; font-weight:800; color:var(--purple); }
.mz-hcard.is-active .mz-v2 .z{ opacity:1; transform:scale(1); }
.mz-hcard.is-active .mz-v2 .z2{ transition-delay:.1s; }
.mz-hcard.is-active .mz-v2 .z3{ transition-delay:.2s; }
.mz-hcard.is-active .mz-v2 .z4{ transition-delay:.3s; }
.mz-v2 .z1{ top:18px; left:18px; right:18px; height:24px; }
.mz-v2 .z2{ top:56px; left:18px; width:32%; bottom:18px; }
.mz-v2 .z3{ top:56px; left:calc(32% + 30px); right:18px; height:52px; }
.mz-v2 .z4{ top:122px; left:calc(32% + 30px); right:18px; bottom:18px; background:var(--bg-lav); border-style:solid; border-color:var(--line); }
.mz-v2-pulse{ position:absolute; width:16px; height:16px; border-radius:50%; background:rgba(23,185,120,.35); opacity:0; }
.mz-v2-pulse::before{ content:''; position:absolute; inset:0; border-radius:50%; background:#17B978; transform:scale(.4); }
.mz-hcard.is-active .mz-v2-pulse{ animation:mzPulseGlow 1.8s ease-out infinite; }
.mz-v2-pulse.p1{ top:24px; left:34px; animation-delay:.4s; }
.mz-v2-pulse.p2{ top:78px; left:calc(32% + 60px); animation-delay:.9s; }
@keyframes mzPulseGlow{ 0%{ opacity:.8; transform:scale(.6); } 70%{ opacity:0; transform:scale(2.2); } 100%{ opacity:0; } }

/* visual 3 - SEO Friendly */
.mz-v3{ width:100%; max-width:420px; }
.mz-v3-top{ display:flex; align-items:center; justify-content:space-between; }
.mz-v3-score{ display:flex; align-items:baseline; gap:6px; }
.mz-v3-score b{ font-size:36px; font-weight:800; color:var(--ink); }
.mz-v3-score span{ font-size:11px; font-weight:700; color:var(--muted); }
.mz-v3-tags{ display:flex; gap:7px; }
.mz-v3-tags span{ font-size:10px; font-weight:800; color:var(--purple); background:var(--grad-soft); padding:5px 11px; border-radius:100px; }
.mz-v3-chart{ margin-top:22px; width:100%; height:110px; }
.mz-v3-path{ fill:none; stroke:url(#seoGradLine); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.mz-hcard.is-active .mz-v3-path{ stroke-dashoffset:0; }
.mz-v3-kw{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.mz-v3-kw div{ flex:1; min-width:100px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.mz-v3-kw b{ display:block; font-size:13px; font-weight:800; color:var(--ink); }
.mz-v3-kw span{ font-size:9.5px; font-weight:700; color:var(--muted); }

/* visual 4 - Fast Loading */
.mz-v4{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.mz-v4-gauge{ position:relative; width:150px; height:150px; }
.mz-v4-gauge .val{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mz-v4-gauge .val b{ font-size:32px; font-weight:800; color:var(--ink); }
.mz-v4-gauge .val span{ font-size:10px; font-weight:700; color:var(--muted); }
.mz-v4-ring{ stroke-dasharray:440; stroke-dashoffset:440; transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); }
.mz-hcard.is-active .mz-v4-ring{ stroke-dashoffset:49; }
.mz-v4-metrics{ display:flex; gap:12px; width:100%; max-width:340px; }
.mz-v4-metrics div{ flex:1; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.mz-v4-metrics b{ display:block; font-size:15px; font-weight:800; color:var(--ink); }
.mz-v4-metrics span{ font-size:9.5px; font-weight:700; color:var(--muted); }

/* visual 5 - Mobile Optimized */
.mz-v5{ width:100%; display:flex; align-items:flex-end; justify-content:center; gap:20px; }
.mz-v5 .dv{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 30px rgba(20,10,70,.1); display:flex; flex-direction:column; gap:7px; padding:9px; opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.mz-v5 .dv small{ display:block; text-align:center; font-size:8px; font-weight:700; color:var(--muted); }
.mz-hcard.is-active .mz-v5 .dv{ opacity:1; transform:translateY(0); }
.mz-hcard.is-active .mz-v5 .dv.tablet{ transition-delay:.12s; }
.mz-hcard.is-active .mz-v5 .dv.mobile{ transition-delay:.24s; }
.mz-v5 .dv i{ display:block; border-radius:5px; background:var(--bg-lav); }
.mz-v5 .dv.desktop{ width:190px; height:126px; }
.mz-v5 .dv.tablet{ width:106px; height:144px; }
.mz-v5 .dv.mobile{ width:66px; height:144px; }
.mz-v5 .dv i:first-child{ height:16px; background:linear-gradient(90deg,#3AB4FF,#B000FF); }
.mz-v5 .dv i:not(:first-child){ flex:1; }

/* visual 6 - One-Click Customization */
.mz-v6{ width:100%; max-width:360px; }
.mz-v6-label{ font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; margin-bottom:14px; }
.mz-v6-swatches{ display:flex; gap:11px; }
.mz-v6-swatch{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; box-shadow:0 4px 10px rgba(20,10,70,.12); cursor:pointer; transition:transform .3s ease; }
.mz-v6-swatch.active{ border-color:var(--ink); transform:scale(1.12); box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(10,11,30,.15); }
.mz-v6-row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:12.5px; font-weight:700; color:var(--ink); }
.mz-v6-toggle{ width:36px; height:20px; border-radius:100px; background:var(--line); position:relative; flex-shrink:0; transition:background .3s ease; }
.mz-v6-toggle.on{ background:var(--grad); }
.mz-v6-toggle i{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.15); transition:transform .3s ease; display:block; }
.mz-v6-toggle.on i{ transform:translateX(16px); }

/* visual 7 - Multiple Layout Option */
.mz-v7{ width:100%; max-width:420px; display:flex; gap:12px; }
.mz-v7-opt{ flex:1; min-width:0; border-radius:14px; border:2px solid var(--line); background:#fff; padding:10px; display:flex; flex-direction:column; gap:6px; position:relative; height:110px; transition:border-color .3s ease, transform .3s ease; }
.mz-v7-opt i{ display:block; border-radius:5px; background:var(--bg-lav); }
.mz-v7-opt small{ font-size:8.5px; font-weight:700; color:var(--muted); text-align:center; margin-top:auto; }
.mz-v7-opt.active{ border-color:var(--purple); transform:translateY(-4px); }
.mz-v7-opt.active i{ background:var(--grad-soft); }
.mz-v7-opt.active::after{ content:'✓'; position:absolute; top:-8px; right:-8px; width:19px; height:19px; border-radius:50%; background:var(--grad); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 4px 10px rgba(123,0,255,.35); }

/* visual 8 - Boost Visibility with Social Integration */
.mz-v8{ width:100%; max-width:400px; display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.mz-v8-icon{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border-radius:14px; border:1px solid var(--line); background:#fff; transition:transform .3s ease, box-shadow .3s ease; }
.mz-hcard.is-active .mz-v8-icon{ animation:mzPopIn .5s cubic-bezier(.34,1.56,.64,1) backwards; }
.mz-v8 .mz-v8-icon:nth-child(2){ animation-delay:.08s; }
.mz-v8 .mz-v8-icon:nth-child(3){ animation-delay:.16s; }
.mz-v8 .mz-v8-icon:nth-child(4){ animation-delay:.24s; }
@keyframes mzPopIn{ from{ opacity:0; transform:scale(.85) translateY(8px); } to{ opacity:1; transform:scale(1) translateY(0); } }
.mz-v8-icon b{ font-size:13px; font-weight:800; color:var(--ink); }
.mz-v8-icon span{ font-size:9px; font-weight:700; color:var(--muted); }

.mz-final{ text-align:center; margin-top:0; position:relative; z-index:1; }
.mz-final h3{ font-size:clamp(29px,3.4vw,39px); font-weight:800; color:var(--ink); }
.mz-final .btn{ margin-top:22px; }

@media (prefers-reduced-motion: reduce){ .mz-hcard-text, .mz-hcard-visual, .mz-hcard-icon, .mz-hcard-decor, .mz-hcard-inner{ transition:none !important; } }


/* ===== MKT MARKETPLACE REAL PREVIEW ===== */
.mkt-photo{ position:absolute; inset:0; overflow:hidden; }
.mkt-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .theme-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:44px; }
  .split.rev .visual{ order:1; } .split.rev .content{ order:2; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-card.wide{ grid-column:span 2; }
  .plugin-grid{ grid-template-columns:repeat(4,1fr); }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .hero-stage{ height:400px; }
  .hero-main-browser{ width:74%; }
  .demo-stage{ height:380px; max-width:92%; }
  .dc-3{ width:400px; height:370px; }
  .dc-1,.dc-5{ width:190px; height:270px; }
  .dc-2,.dc-4{ width:210px; height:310px; }
  .dc-2{ left:120px; } .dc-4{ right:120px; }
}
@media (max-width:900px){
  .nav-links, .nav-actions .icon-btn{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:760px){
  .hero h1 .line1{ white-space:normal; }
  .section{ padding:150px 0; }
  .stats-grid, .cat-grid, .theme-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .bento{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .bento-card.wide, .bento-card.tall{ grid-column:span 1; grid-row:auto; min-height:180px; }
  .plugin-grid{ grid-template-columns:repeat(3,1fr); }
  .foot-top{ grid-template-columns:1fr; gap:36px; }
  .news-form{ flex-direction:column; background:none; border:none; padding:0; gap:10px; }
  .news-form input{ background:#fff; border:1px solid var(--line); padding:14px 18px; }
  .hero-stage{ height:auto; padding-bottom:40px; }
  .hero-main-browser{ position:relative; top:0; left:0; transform:none; width:100%; margin:0 auto; }
  .hero-card-a,.hero-card-b,.hero-card-c,.hero-card-d{ display:none; }
  .demo-stage{ height:auto; margin-top:50px; }
  .dc-3{ position:relative; left:0; top:0; transform:none; width:100%; height:340px; margin:0 auto; }
  .dc-1,.dc-2,.dc-4,.dc-5{ display:none; }
  .hero-float-badge, .fb-arrow, .fb-group{ display:none; }
  .hero-decor-wave{ width:280px; height:180px; }
  .hero-dots{ display:none; }
  .filters{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; }
}