/* =========================================================================
   S-Core Ecliptor — homepage premium stylesheet (Task 13)
   Adapted from the human-provided reference design.

   WordPress integration notes:
   - The reference is a standalone page; this theme renders inside the shared
     Elementor header/footer (get_header()/get_footer()). To avoid the
     reference's generic class names (.container, .section, .btn, .glass, and
     bare element selectors like h2/p/a) leaking into and restyling that
     shared chrome, EVERY reference rule below is scoped under
     `#premium-home` (the <main> wrapper in front-page.php).
   - Google Fonts are self-hosted (see @font-face below) — no external font
     network request, matching the existing Inter self-hosting pattern.
   ========================================================================= */

/* ---------- Self-hosted fonts (fontsource woff2, latin subset) ---------- */
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

:root{
  --bg:#05060a;
  --bg-soft:#090b12;
  --surface:rgba(255,255,255,0.045);
  --surface-strong:rgba(255,255,255,0.075);
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.18);
  --text:#F3F5F9;
  --text-dim:#9AA0AE;
  --text-faint:#5B606D;
  --blue:#3E7BFA;
  --blue-bright:#7DA3FF;
  --blue-deep:#15224B;
  --blue-glow:rgba(62,123,250,0.45);
  --green:#35D6A2;
  --amber:#FF9A5C;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --container:1220px;
  --disp:'Space Grotesk',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

/* The homepage body is the shared theme body; only paint the base + font here
   so the Elementor header/footer keep their own styling. */
body.home{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Subtle fixed scanline texture, behind all content (reference `body::before`). */
body.home::after{
  content:"";
  position:fixed;inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,0.014) 0px,rgba(255,255,255,0.014) 1px,transparent 1px,transparent 3px);
  pointer-events:none;
  z-index:0;
  opacity:.5;
}

#premium-home{position:relative;z-index:1;}
#premium-home *{box-sizing:border-box;}
#premium-home img{max-width:100%;display:block;}
#premium-home a{color:inherit;text-decoration:none;}
#premium-home button{font-family:inherit;cursor:pointer;}
#premium-home ul{list-style:none;margin:0;padding:0;}

#premium-home .container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,56px);position:relative;z-index:2;}
#premium-home .eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-bright);
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:18px;
}
#premium-home .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 10px 2px var(--blue-glow);}
#premium-home h1,#premium-home h2,#premium-home h3,#premium-home h4{font-family:var(--disp);font-weight:600;letter-spacing:-0.01em;color:var(--text);margin:0;}
#premium-home h2{font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-0.02em;}
#premium-home h3{font-size:20px;}
#premium-home p{color:var(--text-dim);margin:0;}
#premium-home .section{padding:clamp(72px,9vw,128px) 0;position:relative;}
#premium-home .section-head{max-width:640px;margin-bottom:56px;}
#premium-home .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
#premium-home .divider-glow{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(62,123,250,0.35),transparent);}

/* ---------- Glass utilities ---------- */
#premium-home .glass{
  background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
  border:1px solid var(--border);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 70px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);
}
#premium-home .glass:hover{border-color:var(--border-strong);}

/* ---------- Buttons ---------- */
#premium-home .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:12px;
  font-family:var(--body);font-weight:600;font-size:14.5px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
#premium-home .btn-primary{
  background:linear-gradient(135deg,#4C86FF,#2456D9);
  color:#fff;
  box-shadow:0 0 0 1px rgba(124,163,255,0.35), 0 14px 34px -10px rgba(62,123,250,0.65);
}
#premium-home .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(124,163,255,0.55), 0 18px 40px -8px rgba(62,123,250,0.8);}
#premium-home .btn-ghost{
  background:rgba(255,255,255,0.03);
  border-color:var(--border-strong);
  color:var(--text);
}
#premium-home .btn-ghost:hover{border-color:var(--blue-bright);background:rgba(62,123,250,0.08);}
#premium-home .btn-sm{padding:10px 18px;font-size:13.5px;border-radius:10px;}
#premium-home .btn-block{width:100%;}

/* ---------- Hero ---------- */
#premium-home .hero{
  padding:clamp(48px,8vw,96px) 0 clamp(60px,8vw,100px);
  position:relative;
  overflow:hidden;
}
#premium-home .hero::before{
  content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:700px;
  background:radial-gradient(closest-side, rgba(62,123,250,0.18), transparent 70%);
  filter:blur(10px);pointer-events:none;z-index:0;
}
#premium-home .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
#premium-home .hero h1{font-size:clamp(36px,5vw,60px);line-height:1.05;letter-spacing:-0.025em;margin-bottom:22px;}
#premium-home .hero h1 em{font-style:normal;color:var(--blue-bright);}
#premium-home .hero-sub{font-size:17px;color:var(--text-dim);max-width:490px;margin-bottom:34px;}
#premium-home .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px;}
#premium-home .trust-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
#premium-home .trust-row .tr-label{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em;}
#premium-home .trust-logos{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
#premium-home .trust-logos img{height:22px;width:auto;filter:grayscale(1) brightness(2.2) opacity(0.75);transition:filter .3s ease;}
#premium-home .trust-logos img:hover{filter:grayscale(0) brightness(1) opacity(1);}

/* Hero terminal widget */
#premium-home .hero-visual{position:relative;}
#premium-home .radar-wrap{position:absolute;inset:-60px;pointer-events:none;z-index:0;display:flex;align-items:center;justify-content:center;}
#premium-home .radar-sweep{
  width:120%;height:120%;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(62,123,250,0.28), transparent 30%, transparent 100%);
  animation:ec-spin 9s linear infinite;
  filter:blur(6px);
  opacity:.55;
}
@keyframes ec-spin{to{transform:rotate(360deg);}}
#premium-home .terminal-card{position:relative;z-index:1;padding:26px;}
#premium-home .terminal-head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--text-dim);
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--border);
  text-transform:uppercase;
}
#premium-home .dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(53,214,162,.6);animation:ec-pulse 1.8s infinite;}
@keyframes ec-pulse{0%{box-shadow:0 0 0 0 rgba(53,214,162,.55);}70%{box-shadow:0 0 0 8px rgba(53,214,162,0);}100%{box-shadow:0 0 0 0 rgba(53,214,162,0);}}
#premium-home .terminal-time{margin-left:auto;color:var(--text-faint);}
#premium-home .terminal-product{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
#premium-home .product-thumb{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:linear-gradient(140deg,#1a2036,#0d0f16);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
#premium-home .product-thumb svg{width:20px;height:20px;stroke:var(--blue-bright);fill:none;stroke-width:1.7;}
#premium-home .product-name{font-size:14.5px;font-weight:600;color:var(--text);}
#premium-home .product-sku{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:2px;}
#premium-home .price-shift{margin-left:auto;text-align:right;font-family:var(--mono);}
#premium-home .price-old{display:block;font-size:11px;color:var(--text-faint);text-decoration:line-through;}
#premium-home .price-new{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--green);font-weight:600;justify-content:flex-end;}
#premium-home .terminal-ai{
  background:rgba(62,123,250,0.07);
  border:1px solid rgba(62,123,250,0.25);
  border-radius:var(--radius-md);
  padding:14px 16px;margin-bottom:18px;
}
#premium-home .ai-badge{font-size:13px;font-weight:600;color:var(--blue-bright);margin-bottom:10px;}
#premium-home .confidence-bar{height:5px;border-radius:4px;background:rgba(255,255,255,0.08);overflow:hidden;margin-bottom:8px;}
#premium-home .confidence-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-bright));border-radius:4px;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1);}
#premium-home .confidence-label{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);}
#premium-home .terminal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#premium-home .tstat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;}
#premium-home .tlabel{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:5px;}
#premium-home .tvalue{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text);}
#premium-home .tvalue.green{color:var(--green);}
#premium-home .tvalue.amber{color:var(--amber);}

/* ---------- Problem rail ---------- */
#premium-home .problem-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
#premium-home .problem-item{background:var(--bg-soft);padding:30px 26px;}
#premium-home .problem-num{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-bottom:14px;}
#premium-home .problem-item p{color:var(--text);font-size:14.5px;line-height:1.5;}

/* ---------- Bento features ---------- */
#premium-home .bento{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:20px;}
#premium-home .bento-hero{grid-row:1 / 3;padding:36px;display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;position:relative;overflow:hidden;}
#premium-home .bento-hero .ficon{position:absolute;top:32px;left:32px;}
#premium-home .feature-card{padding:28px;display:flex;flex-direction:column;gap:14px;}
#premium-home .ficon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(145deg, rgba(62,123,250,0.22), rgba(62,123,250,0.04));
  border:1px solid rgba(62,123,250,0.3);
  display:flex;align-items:center;justify-content:center;
}
#premium-home .ficon svg{width:20px;height:20px;stroke:var(--blue-bright);fill:none;stroke-width:1.7;}
#premium-home .feature-card h3{margin-top:2px;}
#premium-home .feature-card p{font-size:14.5px;}
#premium-home .bento-hero h3{font-size:26px;margin-bottom:10px;}
#premium-home .bento-hero p{font-size:15px;max-width:340px;}
#premium-home .bento-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 80% 15%, rgba(62,123,250,0.22), transparent 55%);pointer-events:none;}

/* ---------- Product preview ---------- */
#premium-home .product-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch;}
#premium-home .video-frame{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);
  position:relative;background:#000;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8);
  aspect-ratio:16/9;
}
#premium-home .video-frame video{width:100%;height:100%;object-fit:cover;display:block;}
/* Responsive landscape/portrait pair, toggled by CSS (lazy-played via JS). */
#premium-home video.ec-video-landscape{display:block;}
#premium-home video.ec-video-portrait{display:none;}
#premium-home .video-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  display:flex;align-items:center;gap:7px;
  background:rgba(5,6,10,0.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);
  padding:6px 12px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
#premium-home .stat-stack{display:flex;flex-direction:column;gap:14px;}
#premium-home .stat-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-radius:var(--radius-md);
}
#premium-home .stat-row .slabel{font-size:13.5px;color:var(--text-dim);}
#premium-home .stat-row .sval{font-family:var(--mono);font-weight:600;font-size:16px;}
#premium-home .sval.green{color:var(--green);}
#premium-home .sval.amber{color:var(--amber);}
#premium-home .sval.blue{color:var(--blue-bright);}

/* ---------- How it works ---------- */
#premium-home .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;}
#premium-home .steps::before{
  content:"";position:absolute;top:26px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(62,123,250,0.5),rgba(62,123,250,0.5),transparent);
  z-index:0;
}
#premium-home .step{padding:0 28px;position:relative;z-index:1;}
#premium-home .step-num{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--blue-bright);
  background:var(--bg);border:1px solid var(--border-strong);
  margin-bottom:22px;
  box-shadow:0 0 0 6px var(--bg);
}
#premium-home .step h3{margin-bottom:10px;}
#premium-home .step p{font-size:14.5px;}

/* ---------- Pricing ---------- */
#premium-home .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
#premium-home .price-card{padding:34px 30px;display:flex;flex-direction:column;position:relative;}
#premium-home .price-card.featured{
  border-color:rgba(62,123,250,0.55);
  background:linear-gradient(165deg, rgba(62,123,250,0.13), rgba(255,255,255,0.02));
  box-shadow:0 0 0 1px rgba(62,123,250,0.35), 0 30px 80px -25px rgba(62,123,250,0.4);
  transform:translateY(-8px);
}
#premium-home .price-badge{
  position:absolute;top:20px;right:20px;
  background:linear-gradient(135deg,#4C86FF,#2456D9);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(62,123,250,0.7);
}
#premium-home .price-tier{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;}
#premium-home .price-card h3{font-size:22px;margin-bottom:6px;}
#premium-home .price-audience{font-size:13.5px;color:var(--text-dim);margin-bottom:22px;}
#premium-home .price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:26px;font-family:var(--mono);}
#premium-home .price-amount .num{font-size:38px;font-weight:600;color:var(--text);}
#premium-home .price-amount .per{font-size:13px;color:var(--text-faint);}
#premium-home .price-feats{display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1;}
#premium-home .price-feats li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text-dim);}
#premium-home .price-feats li svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--blue-bright);fill:none;stroke-width:2;}

/* ---------- Capability band ---------- */
#premium-home .cap-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
#premium-home .cap-item{background:var(--bg-soft);padding:30px 24px;text-align:center;}
#premium-home .cap-val{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--blue-bright);margin-bottom:8px;}
#premium-home .cap-label{font-size:12.5px;color:var(--text-dim);}

/* ---------- Testimonials ---------- */
#premium-home .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
#premium-home .testi-card{padding:28px;display:flex;flex-direction:column;gap:18px;}
#premium-home .testi-quote{font-size:15px;color:var(--text);line-height:1.6;}
#premium-home .testi-quote::before{content:"\201C";color:var(--blue-bright);font-family:var(--disp);}
#premium-home .testi-who{display:flex;align-items:center;gap:12px;padding-top:6px;border-top:1px solid var(--border);}
#premium-home .testi-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#26305a,#0d0f16);border:1px solid var(--border);flex:none;}
#premium-home .testi-name{font-size:13px;font-weight:600;color:var(--text);}
#premium-home .testi-role{font-family:var(--mono);font-size:11px;color:var(--text-faint);}

/* ---------- FAQ ---------- */
#premium-home .faq-list{display:flex;flex-direction:column;gap:12px;max-width:780px;}
#premium-home .faq-item{border-radius:var(--radius-md);overflow:hidden;}
#premium-home .faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;cursor:pointer;font-weight:600;font-size:15px;
}
#premium-home .faq-q .plus{font-family:var(--mono);font-size:18px;color:var(--blue-bright);transition:transform .3s ease;flex:none;}
#premium-home .faq-item.open .plus{transform:rotate(45deg);}
#premium-home .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
#premium-home .faq-a-inner{padding:0 24px 20px;font-size:14.5px;color:var(--text-dim);}

/* ---------- Final CTA / Connect ---------- */
#premium-home .final-cta{
  text-align:center;padding:clamp(56px,8vw,96px) clamp(24px,6vw,80px);
  position:relative;overflow:hidden;
}
#premium-home .final-cta::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:700px;height:400px;
  background:radial-gradient(closest-side, rgba(62,123,250,0.28), transparent 70%);
  pointer-events:none;
}
#premium-home .final-cta h2{position:relative;z-index:1;margin-bottom:16px;}
#premium-home .final-cta p{position:relative;z-index:1;max-width:520px;margin:0 auto 30px;}
#premium-home .final-cta .hero-ctas{justify-content:center;position:relative;z-index:1;margin-bottom:22px;}
#premium-home .contact-line{position:relative;z-index:1;font-size:14px;color:var(--text-dim);margin-bottom:18px;}
#premium-home .contact-line a{color:var(--text-dim);}
#premium-home .contact-line a:hover{color:var(--blue-bright);}
#premium-home .contact-social{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;margin-bottom:22px;}
#premium-home .contact-social a{width:34px;height:34px;border-radius:9px;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background .2s ease;}
#premium-home .contact-social a:hover{border-color:var(--blue-bright);background:rgba(62,123,250,0.08);}
#premium-home .contact-social svg{width:15px;height:15px;stroke:var(--text-dim);fill:none;stroke-width:1.7;}
#premium-home .final-note{position:relative;z-index:1;font-family:var(--mono);font-size:12px;color:var(--text-faint);}

/* ---------- Reveal ---------- */
#premium-home .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
#premium-home .reveal.visible{opacity:1;transform:translateY(0);}

/* Staggered per-card reveal for multi-card grid sections. The grid
   container itself no longer fades as one block — its direct children
   fade/rise in sequence, each on a slightly longer transition-delay,
   once the parent gains .visible (added by the existing IntersectionObserver
   in premium.js — no JS change needed). */
#premium-home .problem-rail.reveal,
#premium-home .bento.reveal,
#premium-home .steps.reveal,
#premium-home .pricing-grid.reveal,
#premium-home .testi-grid.reveal{
  opacity:1;transform:none;
}
#premium-home .problem-rail.reveal > *,
#premium-home .bento.reveal > *,
#premium-home .steps.reveal > *,
#premium-home .pricing-grid.reveal > *,
#premium-home .testi-grid.reveal > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
#premium-home .problem-rail.reveal.visible > *,
#premium-home .bento.reveal.visible > *,
#premium-home .steps.reveal.visible > *,
#premium-home .pricing-grid.reveal.visible > *,
#premium-home .testi-grid.reveal.visible > *{
  opacity:1;transform:translateY(0);
}
#premium-home .problem-rail.reveal > *:nth-child(1),
#premium-home .bento.reveal > *:nth-child(1),
#premium-home .steps.reveal > *:nth-child(1),
#premium-home .pricing-grid.reveal > *:nth-child(1),
#premium-home .testi-grid.reveal > *:nth-child(1){transition-delay:0ms;}
#premium-home .problem-rail.reveal > *:nth-child(2),
#premium-home .bento.reveal > *:nth-child(2),
#premium-home .steps.reveal > *:nth-child(2),
#premium-home .pricing-grid.reveal > *:nth-child(2),
#premium-home .testi-grid.reveal > *:nth-child(2){transition-delay:80ms;}
#premium-home .problem-rail.reveal > *:nth-child(3),
#premium-home .bento.reveal > *:nth-child(3),
#premium-home .steps.reveal > *:nth-child(3),
#premium-home .pricing-grid.reveal > *:nth-child(3),
#premium-home .testi-grid.reveal > *:nth-child(3){transition-delay:160ms;}
#premium-home .problem-rail.reveal > *:nth-child(4),
#premium-home .bento.reveal > *:nth-child(4),
#premium-home .steps.reveal > *:nth-child(4),
#premium-home .pricing-grid.reveal > *:nth-child(4),
#premium-home .testi-grid.reveal > *:nth-child(4){transition-delay:240ms;}
#premium-home .problem-rail.reveal > *:nth-child(5),
#premium-home .bento.reveal > *:nth-child(5),
#premium-home .steps.reveal > *:nth-child(5),
#premium-home .pricing-grid.reveal > *:nth-child(5),
#premium-home .testi-grid.reveal > *:nth-child(5){transition-delay:320ms;}
#premium-home .problem-rail.reveal > *:nth-child(6),
#premium-home .bento.reveal > *:nth-child(6),
#premium-home .steps.reveal > *:nth-child(6),
#premium-home .pricing-grid.reveal > *:nth-child(6),
#premium-home .testi-grid.reveal > *:nth-child(6){transition-delay:400ms;}
#premium-home .problem-rail.reveal > *:nth-child(n+7),
#premium-home .bento.reveal > *:nth-child(n+7),
#premium-home .steps.reveal > *:nth-child(n+7),
#premium-home .pricing-grid.reveal > *:nth-child(n+7),
#premium-home .testi-grid.reveal > *:nth-child(n+7){transition-delay:480ms;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  #premium-home .hero-grid{grid-template-columns:1fr;}
  #premium-home .hero-visual{max-width:460px;margin:0 auto;}
  #premium-home .problem-rail{grid-template-columns:1fr 1fr;}
  #premium-home .bento{grid-template-columns:1fr;}
  #premium-home .bento-hero{grid-row:auto;min-height:280px;}
  #premium-home .product-grid{grid-template-columns:1fr;}
  #premium-home .steps{grid-template-columns:1fr;gap:36px;}
  #premium-home .steps::before{display:none;}
  #premium-home .pricing-grid{grid-template-columns:1fr;}
  #premium-home .price-card.featured{transform:none;}
  #premium-home .testi-grid{grid-template-columns:1fr;}
  #premium-home .cap-band{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  #premium-home video.ec-video-landscape{display:none;}
  #premium-home video.ec-video-portrait{display:block;}
  #premium-home .video-frame{aspect-ratio:9/16;}
}
@media (max-width:560px){
  #premium-home .problem-rail{grid-template-columns:1fr;}
  #premium-home .cap-band{grid-template-columns:1fr;}
  #premium-home .trust-row{flex-direction:column;align-items:flex-start;gap:12px;}
}
@media (prefers-reduced-motion:reduce){
  #premium-home *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; transition-delay:0ms !important;}
  #premium-home .reveal{opacity:1 !important;transform:none !important;}
  #premium-home .problem-rail.reveal > *,
  #premium-home .bento.reveal > *,
  #premium-home .steps.reveal > *,
  #premium-home .pricing-grid.reveal > *,
  #premium-home .testi-grid.reveal > *{opacity:1 !important;transform:none !important;}
}

/* =========================================================================
   S-Core Ecliptor — inner-page premium stylesheet (Task 15)
   Shared by page-sing-up.php (is_page('sing-up')) and home.php (is_home(),
   the Blog posts archive). Reuses Task 13's :root tokens/fonts defined at
   the top of this file. Both templates wrap their content in
   `<main class="premium-page">` (plus a page-specific id —
   #premium-singup / #premium-blog — for the handful of rules that are
   genuinely page-specific), so shared primitives (.container, .glass,
   .btn, .section) are written ONCE below under `.premium-page` rather than
   duplicated per page.

   These intentionally duplicate values already defined above under
   `#premium-home` (same tokens, same design language) rather than
   broadening those existing selectors — `#premium-home` and `.premium-page`
   never appear on the same page, and the brief for this task asked for
   additive changes that don't restructure the existing homepage rules.
   ========================================================================= */

.premium-page{position:relative;z-index:1;color:var(--text);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;}
.premium-page *{box-sizing:border-box;}
.premium-page img{max-width:100%;display:block;}
.premium-page a{color:inherit;text-decoration:none;}
.premium-page ul{list-style:none;margin:0;padding:0;}
.premium-page .container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,56px);position:relative;z-index:2;}
.premium-page h1,.premium-page h2,.premium-page h3,.premium-page h4{font-family:var(--disp);font-weight:600;letter-spacing:-0.01em;color:var(--text);margin:0;}
.premium-page p{color:var(--text-dim);margin:0;}
.premium-page .section{padding:clamp(56px,8vw,96px) 0;position:relative;}

/* Body paint: the parent theme is already dark by default on these two
   templates (unlike the homepage, whose body.home rule above had to force
   it), so this just pins the exact design-token color for consistency
   instead of leaving it to whatever dark gray the parent theme happens to
   use. Scoped to these two specific pages via the body classes WordPress
   already adds (page-id-6691 for Sing Up, blog for the posts archive) so
   it can't leak to any other page even if premium.css were ever loaded
   elsewhere. */
body.page-id-6691,
body.blog{background:var(--bg);}

/* ---------- Glass / buttons (identical values to #premium-home's above) ---------- */
.premium-page .glass{
  background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
  border:1px solid var(--border);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 70px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);
}
.premium-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:12px;
  font-family:var(--body);font-weight:600;font-size:14.5px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  border:1px solid transparent;white-space:nowrap;cursor:pointer;
}
.premium-page .btn-primary{
  background:linear-gradient(135deg,#4C86FF,#2456D9);color:#fff;
  box-shadow:0 0 0 1px rgba(124,163,255,0.35), 0 14px 34px -10px rgba(62,123,250,0.65);
}
.premium-page .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(124,163,255,0.55), 0 18px 40px -8px rgba(62,123,250,0.8);}
.premium-page .btn-ghost{background:rgba(255,255,255,0.03);border-color:var(--border-strong);color:var(--text);}
.premium-page .btn-ghost:hover{border-color:var(--blue-bright);background:rgba(62,123,250,0.08);}
.premium-page .btn-sm{padding:10px 18px;font-size:13.5px;border-radius:10px;}

/* ---------- Inner-page hero (compact breadcrumb + title band) ----------
   Replaces the parent theme's generic sphere-banner breadcrumb band
   (templates/header-menu-bottom.php in the `renev` parent theme, gated on
   `is_page() && _renev_page_breadcrumb_area post meta`), which prints
   unconditionally before this template's own content via the shared
   `renev_header` action hook — i.e. it's a sibling of <main>, not a
   descendant, so it can't be targeted by a `.premium-page …` / `#premium-*
   …` descendant selector. It's hidden with this unscoped rule instead of
   flipping the per-page `_renev_page_breadcrumb_area` meta (a DB change,
   outside this task's file-only scope) or an `is_page`/`is_home`-gated PHP
   hook removal (the hook is a single combined callback that also prints
   this theme's real page title, so removing it would remove more than
   intended). This is safe precisely because premium.css itself is only
   ever enqueued on these two pages (plus the homepage, where this element
   already doesn't render — see post 48's breadcrumb-area meta). */
.inner-section-area.live-breadcrumb,
.inner-section-area.local-breadcrumb{display:none;}

.inner-hero{padding:clamp(40px,6vw,64px) 0 clamp(32px,5vw,48px);position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.inner-hero::before{
  content:"";position:absolute;top:-160px;left:12%;
  width:520px;height:420px;
  background:radial-gradient(closest-side, rgba(62,123,250,0.16), transparent 70%);
  filter:blur(10px);pointer-events:none;z-index:0;
}
.inner-hero-crumb{
  position:relative;z-index:1;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--text-faint);
}
.inner-hero-crumb a{color:var(--text-dim);}
.inner-hero-crumb a:hover{color:var(--blue-bright);}
.inner-hero-crumb .current{color:var(--blue-bright);}
.inner-hero h1{position:relative;z-index:1;font-size:clamp(30px,4vw,44px);letter-spacing:-0.02em;line-height:1.1;}
.inner-hero p{position:relative;z-index:1;margin-top:14px;max-width:560px;font-size:15.5px;color:var(--text-dim);}

/* ---------- Sign-up page (is_page('sing-up'), post 6691) ----------
   The page's own content is left rendering through Elementor's normal
   `the_content` filter (see page-sing-up.php) so the real CF7 "login" form
   (#6692) keeps working exactly as before — only presentation changes
   below. */

/* Neutralizes this page's own top-level Elementor container (element
   5b44835), whose stored settings (margin-top:-200px, padding-top:300px —
   see wp-content/uploads/elementor/css/post-6691.css) were tuned to sit
   underneath the tall generic breadcrumb band this stylesheet hides above:
   left alone, that -200px margin would pull the section's black background
   up over/behind our much shorter .inner-hero instead of below it.
   Overriding the two custom properties the container's own CSS reads
   (--margin-top / --padding-top) beats the original rule on specificity
   (one ID + one class here vs. three chained classes there), so no
   !important is needed, and everything else about the container — its
   black background, the real 50/50 column split, the form inside — is
   untouched. */
#premium-singup .elementor-element-5b44835{
  --margin-top:0px;
  --padding-top:60px;
}
#premium-singup{padding-bottom:clamp(56px,8vw,96px);}

/* The CF7 form's own markup (`<div class="login-box">…`, hand-authored in
   the form's message template) has zero matching CSS anywhere in the theme
   or any plugin (grep-confirmed across wp-content/themes and
   wp-content/plugins) — it was inheriting the parent theme's default
   near-black text color on this page's black background: present in the
   DOM, invisible on screen. That's the low-contrast bug from Step 1; the
   rules below are the fix, styled as a glass card to match the rest of the
   premium system. */
#premium-singup .login-box{
  max-width:420px;
  background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,38px);
  box-shadow:0 24px 70px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}
#premium-singup .login-box .small{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-bright);margin:0 0 10px;
}
#premium-singup .login-box h3{font-size:24px;margin:0 0 8px;}
#premium-singup .login-box .desc{color:var(--text-dim);font-size:14px;margin:0 0 26px;}
#premium-singup .login-box label{display:block;font-size:13px;font-weight:600;color:var(--text-dim);margin:18px 0 6px;}
#premium-singup .login-box label:first-of-type{margin-top:0;}
#premium-singup .login-box input.wpcf7-form-control{
  width:100%;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  color:var(--text);font-family:var(--body);font-size:14px;
  transition:border-color .2s ease, background .2s ease;
}
#premium-singup .login-box input.wpcf7-form-control::placeholder{color:var(--text-faint);}
#premium-singup .login-box input.wpcf7-form-control:focus{outline:none;border-color:var(--blue-bright);background:rgba(255,255,255,0.06);}
#premium-singup .login-box input.wpcf7-submit{
  margin-top:26px;width:100%;cursor:pointer;
  padding:14px 26px;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(135deg,#4C86FF,#2456D9);color:#fff;
  font-family:var(--body);font-weight:600;font-size:14.5px;
  box-shadow:0 0 0 1px rgba(124,163,255,0.35), 0 14px 34px -10px rgba(62,123,250,0.65);
  transition:transform .25s ease, box-shadow .25s ease;
}
#premium-singup .login-box input.wpcf7-submit:hover{transform:translateY(-2px);}
#premium-singup .login-box .bottom-text{margin-top:18px;font-size:12.5px;color:var(--text-faint);}
#premium-singup .login-box .wpcf7-spinner{filter:invert(1) brightness(1.4);}
#premium-singup .login-box .wpcf7-not-valid-tip{color:#FF6B6B;font-size:12.5px;margin-top:6px;}
#premium-singup .login-box .wpcf7-response-output{
  margin-top:18px;border-radius:10px;padding:12px 14px;font-size:13px;
  border-color:var(--border) !important;color:var(--text-dim);
}
@media(max-width:575px){
  /* Columns stack below Elementor's own 576px breakpoint (see
     post-6691.css); the form has no auto-centering of its own at that
     width, so give it one here. */
  #premium-singup .login-box{margin:0 auto;}
}

/* ---------- Blog archive (is_home(), page_for_posts = post 6995) ---------- */
#premium-blog{padding-bottom:clamp(56px,8vw,96px);}
#premium-blog .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
#premium-blog .post-card{display:flex;flex-direction:column;overflow:hidden;}
#premium-blog .post-thumb{display:block;aspect-ratio:16/10;overflow:hidden;}
#premium-blog .post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
#premium-blog .post-card:hover .post-thumb img{transform:scale(1.04);}
#premium-blog .post-card .post-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1;}
#premium-blog .post-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
#premium-blog .post-card h3{font-size:19px;line-height:1.3;}
#premium-blog .post-card h3 a:hover{color:var(--blue-bright);}
#premium-blog .post-excerpt{font-size:14px;color:var(--text-dim);flex:1;}
#premium-blog .post-readmore{align-self:flex-start;margin-top:4px;}

#premium-blog .archive-pagination{margin-top:48px;display:flex;justify-content:center;}
#premium-blog .archive-pagination .nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
#premium-blog .archive-pagination a,
#premium-blog .archive-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;border-radius:10px;
  border:1px solid var(--border);color:var(--text-dim);
  font-family:var(--mono);font-size:13px;
}
#premium-blog .archive-pagination a:hover{border-color:var(--blue-bright);color:var(--blue-bright);}
#premium-blog .archive-pagination span.current{border-color:var(--blue-bright);color:var(--blue-bright);background:rgba(62,123,250,0.08);}

#premium-blog .empty-state{text-align:center;padding:clamp(56px,8vw,88px) clamp(24px,6vw,60px);max-width:620px;margin:0 auto;}
#premium-blog .empty-icon{
  width:64px;height:64px;margin:0 auto 22px;border-radius:16px;
  background:linear-gradient(145deg, rgba(62,123,250,0.22), rgba(62,123,250,0.04));
  border:1px solid rgba(62,123,250,0.3);
  display:flex;align-items:center;justify-content:center;
}
#premium-blog .empty-icon svg{width:28px;height:28px;stroke:var(--blue-bright);fill:none;stroke-width:1.7;}
#premium-blog .empty-state h2{font-size:26px;margin-bottom:14px;}
#premium-blog .empty-state p{font-size:15px;margin-bottom:26px;}

@media(max-width:980px){
  #premium-blog .archive-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  #premium-blog .archive-grid{grid-template-columns:1fr;}
}