: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 */
#site-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 ===== */
/* Typography only. This rule used to also paint every h1/h2 with a gradient
   clipped to the text (background-clip:text + text-fill-color:transparent).
   Two problems with that:
   - Chrome mis-rasterises a background-clip:text block while it animates, and
     the reveal made it paint a ghost copy of the last word at the block's left
     edge for the duration of the animation.
   - Nothing actually wanted it. Headings that carry a gradient set their own on
     an inner span (.grad-text, .gp, .gp2) or on themselves (.blog-hero-title),
     and a dozen templates were already cancelling this rule with
     `background:none !important; -webkit-text-fill-color:... !important`.
   The clip now lives only where a gradient is genuinely used. */
h1, h2{ font-size:clamp(40px,5.4vw,60px) !important; line-height:1.08; letter-spacing:-.045em; font-weight:600 !important; }
.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 ===== */
/* `display` is set here, NOT on `.reveal.in`. These gradient keywords sit inside
   headings; flipping them from inline to inline-block at the moment the reveal
   fires changes how the line breaks, so the heading re-wraps mid-scroll and the
   text visibly jumps or collides with the line below. Declaring the final
   display up front means the box the browser measures before the animation is
   the same one it measures after. */
.grad-text, .heading-gradient-tail, .grad, .theme-title-accent{ background-size:200% auto !important; display:inline-block; }
.reveal.in .grad-text, .reveal.in .heading-gradient-tail, .reveal.in .grad, .reveal.in .theme-title-accent{ 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 ===== */
/* Scoped to the site header by id: a bare `header` selector also caught every
   nested <header> in content -- WooCommerce's address titles among them, which
   were thrown to the top-left corner of the page. */
#site-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); }
#site-header.scrolled{ position:fixed; padding-top:10px; }
#site-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; }
/* Same values, id-prefixed. WooCommerce ships `.woocommerce img{height:auto}`
   and puts those classes on <body>, which outranks a bare `.logo-img` and used
   to stretch the header logo to its natural height on every store page. This
   is the one place the header logo is sized — the breakpoints below extend it. */
#site-header .logo-img{ height:38px; width: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); }

/* --- header fit -------------------------------------------------------------
   The nav row is sized by its content. Between the burger breakpoint and a full
   desktop width the row runs out of room, and a two-word item ("Starter Sites")
   used to fold onto a second line — which grew the header from 78px to 98px and
   left that one item sitting taller than its neighbours. The items now stay on
   one line and the row closes up its padding instead.
   Keep this block identical in home.css and site.css: the homepage and the
   inner pages load one file each, and the header must match across both.     */
.nav-item > a, .nav-item > button{ white-space:nowrap; }

@media (max-width:1300px){
  .nav-links{ gap:2px; }
  .nav-item > a, .nav-item > button{ padding:10px 11px; font-size:15px; }
  .nav-actions{ gap:4px; }
}

@media (max-width:1120px){
  .nav-item > a, .nav-item > button{ padding:9px 8px; font-size:14.5px; }
  .nav-actions .btn-sm{ padding:11px 16px; font-size:14.5px; }
  .logo-img{ height:32px; }
}
.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); }
/* --- off-canvas panel: actions ---------------------------------------------
   Below the burger breakpoint the header keeps only the logo and the burger,
   so the CTA and the action icons are presented here instead. */
.mobile-panel-actions{ margin-top:14px; padding-top:16px; border-top:1px solid var(--line); }
.mobile-panel .mobile-panel-cta{
  display:flex; width:100%; padding:15px 22px; font-size:15.5px; color:#fff;
  border-radius:100px; text-align:center;
}
.mobile-panel .mobile-panel-cta:hover{ background-position:100% 0; color:#fff; }
.mobile-panel-icons{ display:flex; gap:8px; margin-top:12px; }
.mobile-panel .mobile-panel-icons a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:12px 6px; border-radius:14px; border:1px solid var(--line);
  background:#fff; font-size:11.5px; font-weight:700; color:var(--ink-soft);
}
.mobile-panel .mobile-panel-icons a:hover{ background:var(--bg-lav); color:var(--purple); }
.mobile-panel .mobile-panel-icons svg{ flex-shrink:0; }

/* The panel belongs to the burger, so it is never shown while the full nav is. */
@media (min-width:1001px){ .mobile-panel, .mobile-panel-actions{ display:none !important; } }

/* ===== 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:fbFloat 6s ease-in-out infinite; }
/* Drifts straight up and down. The shared floaty3 keyframes also rotate 1-3deg,
   which is fine for a floating card but tips the arrow off its curve — the head
   stops pointing where the dashes lead. */
@keyframes fbFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
/* Mirrored pair: same offset both sides, like every other flanking element in
   the stage (dc-1/dc-5, dc-2/dc-4, the glows). */
.fb-group-left{ top:-46px; left:0; }
.fb-group-right{ top:-46px; 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{ display:flex; flex-direction:column; 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); } }
/* Mobile twins of the centre card's animations. cardEnter3/cardFloat3 both
   carry translateX(-50%), which pairs with `left:50%` to centre the card on
   desktop. On mobile the card is position:relative and full width, so that
   offset drags it half a screen to the left — and a running animation outranks
   the `transform:none` the mobile rule sets. Same entrance and drift, no
   horizontal offset. */
@keyframes cardEnter3m{ from{ opacity:0; transform:translateY(65px) scale(.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes cardFloat3m{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

.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; }
/* Clears the fixed site header when pagination re-frames the section. */
#themes{ scroll-margin-top:90px; }
#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, #woo-themes .theme-pagination, .woocommerce-section .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, #woo-themes .page-pill, .woocommerce-section .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, #woo-themes .page-btn, .woocommerce-section .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:pointer; }
#themes .page-pill .page-btn, #woo-themes .page-pill .page-btn, .woocommerce-section .page-pill .page-btn{ min-width:0; }
#themes .page-btn:hover:not(:disabled):not(.active), #woo-themes .page-btn:hover:not(:disabled):not(.active), .woocommerce-section .page-btn:hover:not(:disabled):not(.active){ color:var(--purple); background:rgba(123,0,255,.08); }
#themes .page-btn.active, #woo-themes .page-btn.active, .woocommerce-section .page-btn.active{ color:#fff; background:var(--grad); box-shadow:0 8px 20px rgba(123,0,255,.32); }
#themes .page-btn.arrow, #woo-themes .page-btn.arrow, .woocommerce-section .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), #woo-themes .page-btn.arrow:hover:not(:disabled), .woocommerce-section .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, #woo-themes .page-btn.arrow:disabled, .woocommerce-section .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, #woo-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; }
/* Design system section: the visual column runs flush to the section edge, so
   the section drops its bottom padding -- but only while .split is two columns.
   Once it stacks (<=1024px) the CTA is the last element and would otherwise sit
   on the section edge, so mobile keeps the normal .section padding. */
@media (min-width:1025px){ section.design-system-section{ padding-bottom:0; } }
/* Divider closing the section off from the one below. Uses --line (#EAEAF3),
   the theme's border colour, rather than a hard grey. */
section.design-system-section{ border-bottom:1px solid var(--line); }
.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); }
/* Positions moved out of style attributes so they can be tuned per breakpoint —
   these labels sit deliberately outside their card, and on a phone that overhang
   is what reached past the viewport edge. Desktop values are unchanged. */
.ui-panel-colors{ top:-16px; left:-20px; }
.ui-panel-type{ top:20%; right:-30px; }
.ui-panel-spacing{ bottom:24%; left:-34px; }
.ui-panel-header{ bottom:-14px; right:20px; }
.ui-panel-components{ top:50%; left:44%; }
@media (max-width:640px){
  .ui-panel{ padding:9px 12px; font-size:11px; }
  .ui-panel-colors{ left:-6px; }
  .ui-panel-type{ right:-6px; }
  .ui-panel-spacing{ left:-6px; }
}

/* ===== 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; }
  /* The right-hand column is mirrored (row-reverse + text-align:right) so its
     icons face the hub between the two columns. Once the columns stack there is
     no hub between them, and the mirroring just made the icon side and the text
     alignment flip halfway down the list. Normalised to match the left column. */
  .perf-col-right .perf-card{ flex-direction:row; text-align:left; }
}
@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; }
@media (max-width:768px){ .final-cta{ padding:70px 15px; } }

/* ===== 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 1fr; gap:32px 20px; } .foot-brand{ grid-column:1/3; } .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:1000px){
  .nav-links, .nav-actions .icon-btn{ display:none; }
  /* Moved into the off-canvas panel — see .mobile-panel-actions. */
  .nav-actions > .btn{ display:none; }
  .burger{ display:flex; }
  /* Logo left, burger right, nothing between them to unbalance the row. */
  .nav-shell{ padding:10px 16px; gap:12px; }
  .nav-actions{ gap:0; }
  /* The wordmark is a two-line lockup — CTRSPACE over BUILD / MONETIZE /
     OPTIMIZE / GROW (1444x264, ~5.5:1) — so the tagline is only about a sixth
     of the total height. Sized generously here because the mobile row holds
     nothing but the logo and the burger: at 34px the logo is ~186px wide,
     which still leaves roughly 130px of clear space before the burger. */
  #site-header .logo-img{ height:34px; }
  .logo{ min-width:0; flex:0 1 auto; }
  .logo-img-wrap{ max-width:100%; }
}
@media (max-width:600px){
  #site-header .logo-img{ height:31px; }
  .nav-shell{ padding:9px 14px; }
  .mobile-panel{ padding:16px; }
}
@media (max-width:380px){
  #site-header .logo-img{ height:27px; }
  .mobile-panel .mobile-panel-icons a{ font-size:10.5px; padding:10px 4px; }
}
@media (max-width:760px){
  .hero h1 .line1{ white-space:normal; }
  /* was 150px — the desktop value, which re-broke the 1024/640 steps below it. */
  .section{ padding:88px 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 1fr; gap:32px 20px; }
  .foot-brand{ grid-column:1/3; }
  .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; }
  /* No scale here: the .86 shrink is a desktop/tablet trick, and on a phone it
     inset the card further than the heading and buttons above it. Dropping it
     lets the card line up with the rest of the hero content. */
  /* max-width:92% comes from the tablet step above; at phone widths it inset
     the card 13px further than the heading and buttons. Full width here means
     one shared gutter for the whole hero. */
  .demo-stage{ height:auto; margin-top:50px; transform:none; max-width:100%; }
  .dc-3{ position:relative; left:0; top:0; transform:none; width:100%; height:340px; margin:0 auto;
         animation:cardEnter3m .9s cubic-bezier(.16,.7,.2,1) .1s forwards, cardFloat3m 7.5s ease-in-out 1s infinite; }
  .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; }
}

/* ---------------------------------------------------------------------------
   Phone ladder. This block sits last on purpose.

   The card grids each had a correct phone step declared next to their own
   component further up the file (e.g. `@media (max-width:640px){ .cat-grid{
   grid-template-columns:1fr } }` at ~line 657), but the shared responsive
   region below it re-asserts the TABLET value for the same selector. Both match
   on a phone, equal specificity, so the later one won and the grids stayed at
   two and three columns down to 380px. Cards ended up 88px wide with their text
   clipped by `overflow:hidden`.

   Rather than hunt every earlier declaration, the phone values live here, after
   every wider step — which is the order a breakpoint ladder needs anyway.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .stats-grid, .stats-grid.cols-3{ grid-template-columns:1fr; gap:14px; }
  /* .stat-card is a flex row: a 56px fixed icon + gap + 48px padding left the
     text column ~35px wide in a two-up grid. One column gives it ~200px. */
  .cat-grid{ grid-template-columns:1fr; }
  .theme-grid, #themes .theme-grid{ grid-template-columns:1fr; gap:18px; }
  .plugin-grid{ grid-template-columns:repeat(2,1fr); }
}