/* =========================================================
   PREMIUM SEGMENT — LUXURY ACADEMIC UI
   Replace the previous premium.css with this file.
   ========================================================= */

:root {
  --premium-ink: #151515;
  --premium-muted: #6f6b64;
  --premium-paper: #fffdf8;
  --premium-cream: #f7f4ed;
  --premium-gold: #d7a93d;
  --premium-gold-light: #f3d77b;
  --premium-gold-dark: #a8781e;
  --premium-line: rgba(25,22,18,.12);
  --premium-shadow: 0 28px 80px rgba(24,20,12,.12);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
}

html { scroll-behavior: smooth; }
html.no-loader .page-loader { display: none !important; }

/* ---------------------------------------------------------
   PAGE LOADER
   --------------------------------------------------------- */
body.loader-active { overflow: hidden; }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(226,189,102,.1), transparent 55%),
    radial-gradient(circle at 76% 78%, rgba(215,169,61,.06), transparent 50%),
    #191816;
  transition: opacity .6s ease, visibility .6s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.loader-icon-stage {
  position: relative;
  width: 60px;
  height: 60px;
}
.loader-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #e2bd66;
  opacity: 0;
  transform: scale(.7) rotate(-8deg);
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,.8,.3,1);
}
.loader-icon.is-active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.loader-text-row {
  min-height: 3rem;
  display: flex;
  align-items: center;
  font: 800 clamp(1.6rem,4vw,2.4rem) "Manrope", sans-serif;
  color: #f3d77b;
  letter-spacing: -.02em;
}
.loader-cursor {
  display: inline-block;
  width: 3px;
  height: 1.9rem;
  margin-left: 4px;
  background: #d7a93d;
  animation: loaderBlink .8s steps(1) infinite;
}
@keyframes loaderBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.loader-dots { display: flex; gap: 10px; }
.loader-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: background .35s ease, transform .35s ease;
}
.loader-dot.is-active { background: #d7a93d; transform: scale(1.3); }
.loader-dot.is-done { background: rgba(215,169,61,.55); }

@media (prefers-reduced-motion: reduce) {
  .page-loader { display: none !important; }
  .loader-cursor { animation: none; }
}

body.premium-page {
  background: #fbfaf7;
  color: var(--premium-ink);
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
}

.premium-page p,
.premium-page li,
.premium-page small { font-weight: 500; }

.premium-page strong { font-weight: 800; }

body.modal-open { overflow: hidden; }

/* ---------------------------------------------------------
   SCROLL REVEAL
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* BUTTON RIPPLE */
.premium-primary,
.price-button,
.sample-cta,
.price-sample-btn,
.channel-cta {
  position: relative;
  overflow: hidden;
}
.btn-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  pointer-events: none;
  animation: rippleOut .6s ease-out forwards;
}
@keyframes rippleOut {
  from { transform: scale(0); opacity: .7; }
  to { transform: scale(22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* NAV PREMIUM BUTTON */
.nav-premium-badge {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: #21190a !important;
  background: linear-gradient(180deg,#f7df92 0%,#d9aa3d 52%,#b9811e 100%) !important;
  border: 1px solid rgba(255,221,124,.9) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(191,139,38,.25), inset 0 1px rgba(255,255,255,.65);
  text-shadow: 0 1px rgba(255,255,255,.35);
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease;
}

.nav-premium-badge::before {
  content: "";
  position: absolute;
  inset: -80% -25%;
  width: 38%;
  transform: translateX(-180%) rotate(18deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation: premiumShine 2.8s ease-in-out infinite;
  z-index: -1;
}

.nav-premium-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(244,199,76,.7);
  animation: premiumPulse 2.8s ease-out infinite;
  pointer-events: none;
}

.nav-premium-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 24px rgba(191,139,38,.34), inset 0 1px rgba(255,255,255,.7);
}

@keyframes premiumShine {
  0%,35% { transform: translateX(-180%) rotate(18deg); }
  70%,100% { transform: translateX(440%) rotate(18deg); }
}

@keyframes premiumPulse {
  0%,55% { box-shadow: 0 0 0 0 rgba(244,199,76,.5); }
  80% { box-shadow: 0 0 0 8px rgba(244,199,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,199,76,0); }
}

/* FLOATING PRICE BADGE */
.floating-price {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 500;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 9px 8px;
  background: linear-gradient(135deg,#221a06,#3a2c0d);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(215,169,61,.45);
  box-shadow: 0 14px 34px rgba(20,16,8,.28), 0 0 0 0 rgba(215,169,61,.4);
  cursor: pointer;
  animation: floatingPriceIn .7s cubic-bezier(.16,.8,.3,1) .4s both, floatingPriceBob 3.4s ease-in-out 1.2s infinite;
  transition: opacity .35s ease, transform .35s ease, box-shadow .3s ease;
}
.floating-price:hover {
  box-shadow: 0 18px 42px rgba(20,16,8,.34), 0 0 0 6px rgba(215,169,61,.18);
}
.floating-price.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
}
.fp-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 14px;
  line-height: 1.15;
  pointer-events: none;
}
.fp-plan-tag { font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: #cbbd97; font-weight: 700; }
.fp-plan-amount { font-family: "Manrope",sans-serif; font-weight: 800; font-size: 1.02rem; color: #f3d77b; margin-top: 2px; }
.fp-plan-amount sup { font-size: .6rem; margin-right: 1px; }
.fp-divider { width: 1px; background: rgba(255,255,255,.18); margin: 4px 0; pointer-events: none; }

@keyframes floatingPriceIn {
  from { opacity: 0; transform: translateY(-16px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floatingPriceBob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 760px) {
  /* Cleared above the mobile bottom tab bar (64px + safe-area) injected by main.js */
  .floating-price { top: auto; bottom: calc(64px + env(safe-area-inset-bottom) + 14px); right: 16px; left: 16px; justify-content: center; z-index: 9997; }
}
@media (max-width: 400px) {
  .fp-plan { padding: 3px 9px; }
  .fp-plan-tag { font-size: .5rem; }
  .fp-plan-amount { font-size: .9rem; }
}

/* TRUST STRIP */
.trust-strip { padding: 46px 0; background: #fbfaf7; border-bottom: 1px solid var(--premium-line); }
.trust-inner {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item b {
  font: 800 2.1rem/1 "Manrope",sans-serif;
  color: #a8781e;
  letter-spacing: -.03em;
}
.trust-item span { font-size: .72rem; line-height: 1.4; color: #6f695f; font-weight: 700; }
.trust-divider { width: 1px; height: 34px; background: #e2dbcd; }

@media (max-width: 950px) {
  .trust-inner { grid-template-columns: repeat(2, auto); row-gap: 24px; }
  .trust-divider:nth-of-type(2) { display: none; }
}
@media (max-width: 520px) {
  .trust-inner { grid-template-columns: 1fr; }
  .trust-divider { display: none; }
}

/* HERO */
.premium-hero {
  min-height: 760px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 78% 26%,rgba(224,179,65,.13),transparent 26%),
    radial-gradient(circle at 18% 80%,rgba(206,159,45,.07),transparent 25%),
    #fbfaf7;
  border-bottom: 1px solid var(--premium-line);
}

.premium-hero::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  right: -330px;
  top: -330px;
  border: 1px solid rgba(190,143,42,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(190,143,42,.025),0 0 0 140px rgba(190,143,42,.02);
  animation: slowSpin 60s linear infinite;
}

@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.premium-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 150px 0 105px;
}

.premium-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9b701e;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--premium-gold);
  box-shadow: 0 0 0 5px rgba(215,169,61,.12);
  animation: dotPulse 2.2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(215,169,61,.12); }
  50% { box-shadow: 0 0 0 9px rgba(215,169,61,.05); }
}

.premium-hero h1 {
  max-width: 900px;
  margin: 24px 0 25px;
  font-family: "Manrope",sans-serif;
  font-size: clamp(3.2rem,7vw,6.6rem);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 800;
  color: #171614;
  animation: heroRise .9s cubic-bezier(.16,.8,.3,1) both;
}

.premium-hero h1 span {
  color: #a67821;
  font-weight: 700;
}

.hero-handwritten {
  position: relative;
  margin: 14px 0 0;
  color: #9c7324;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.35rem;
  transform: rotate(-1.2deg);
  transform-origin: left center;
  animation: heroRise 1.05s cubic-bezier(.16,.8,.3,1) .15s both;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-copy {
  max-width: 680px;
  color: #666158;
  font-size: 1.12rem;
  line-height: 1.75;
  animation: heroRise 1s cubic-bezier(.16,.8,.3,1) .1s both;
}

.hero-copy strong {
  color:#2b2925;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #d7a93d;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.hero-typed-wrap { position: relative; }
#heroTyped { display: inline-block; min-width: 11ch; }
.typed-cursor {
  color: #d7a93d;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 38px;
  animation: heroRise 1.1s cubic-bezier(.16,.8,.3,1) .2s both;
}

.premium-primary,
.premium-secondary,
.sample-cta,
.price-button {
  border: 0;
  text-decoration: none;
  cursor: pointer;
  font: 700 .92rem "DM Sans",sans-serif;
}

.premium-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  color:#201805;
  background:linear-gradient(135deg,#f5dc8c,#c9952c);
  border-radius: var(--r-md);
  box-shadow:0 12px 30px rgba(180,130,32,.2);
  transition:transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s ease;
}

.premium-primary:hover { transform:translateY(-2px) scale(1.015); box-shadow:0 18px 38px rgba(180,130,32,.28); }
.premium-primary:active { transform:translateY(0) scale(.99); }

/* Restored animated sliding underline (grows on hover instead of a static line) */
.premium-secondary {
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#4e4a43;
  padding:14px 6px;
  border-radius: 3px;
  transition: color .25s ease;
}
.premium-secondary::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 10px;
  height: 1px;
  background: #a67821;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.16,.8,.3,1);
}
.premium-secondary:hover { color:#a67821; }
.premium-secondary:hover::after { transform: scaleX(1); }

.hero-proof {
  display:flex;
  align-items:center;
  gap:19px;
  margin-top:74px;
  color:#7c766d;
  font-size:.8rem;
  letter-spacing:.02em;
  animation: heroRise 1.2s cubic-bezier(.16,.8,.3,1) .3s both;
}

.hero-proof b { color:#a8781e; margin-right:5px; font-size:.68rem; }
.hero-proof i { width:34px; height:1px; background:#d6d0c6; }

.premium-orb { position:absolute; border-radius:50%; pointer-events:none; }
.premium-orb-one { width:9px;height:9px;right:19%;top:33%;background:#d8ad4a;box-shadow:0 0 0 10px rgba(216,173,74,.1); animation: orbFloat 7s ease-in-out infinite; }
.premium-orb-two { width:5px;height:5px;right:12%;bottom:28%;background:#c59a3b; animation: orbFloat 9s ease-in-out infinite reverse; }
.premium-orb-three { width:7px;height:7px;left:9%;top:22%;background:#e2bd66;box-shadow:0 0 0 8px rgba(226,189,102,.09); animation: orbFloat 8s ease-in-out infinite; }

@keyframes orbFloat {
  0%,100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(8px); }
}

/* COMMON */
.premium-container {
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

.section-heading { max-width:760px; }
.section-heading.centered { text-align:center; margin:0 auto; }
.section-heading h2,
.difference-head h2,
.samples-copy h2 {
  margin:13px 0 16px;
  font:800 clamp(2.35rem,4.2vw,4rem)/1.04 "Manrope",sans-serif;
  letter-spacing:-.055em;
}
.section-heading h2 em,
.difference-head h2 em,
.samples-copy h2 em { color:#a67821;font-style:normal;font-weight:500; }
.section-heading p,
.difference-head > p {
  color:#777168;
  line-height:1.75;
  font-size:1rem;
}

/* PRODUCT */
.product-section {
  padding:130px 0 145px;
  background:#f7f4ed;
}

.note-showcase {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr);
  gap:70px;
  align-items:center;
  margin-top:70px;
}

.note-paper {
  position:relative;
  padding:46px 48px 42px;
  background:
    linear-gradient(rgba(125,94,43,.025) 1px,transparent 1px),
    var(--premium-paper);
  background-size:100% 28px,auto;
  border:1px solid #ded7c9;
  border-radius: var(--r-xl);
  box-shadow:var(--premium-shadow);
  transform:rotate(-.65deg);
  color:#302d27;
  transition: transform .45s cubic-bezier(.16,.8,.3,1), box-shadow .45s ease;
  overflow: hidden;
}

.note-paper:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 40px 100px rgba(24,20,12,.16);
}

.handwritten-tag {
  position: absolute;
  top: -16px;
  left: 40px;
  padding: 5px 14px;
  background: #2b2117;
  color: #f3d77b;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 999px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 22px rgba(20,16,8,.25);
  z-index: 3;
  animation: tagWiggle 4s ease-in-out 1s infinite;
}

@keyframes tagWiggle {
  0%,100% { transform: rotate(-3deg); }
  50% { transform: rotate(1deg); }
}

.note-paper::after {
  content:"PREMIUM SEGMENT";
  position:absolute;
  right:26px;
  top:50%;
  transform:rotate(-90deg) translateY(-50%);
  transform-origin:right top;
  color:rgba(151,113,39,.13);
  font:800 .65rem "Manrope",sans-serif;
  letter-spacing:.2em;
}

.paper-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:.58rem;
  letter-spacing:.12em;
  color:#8b8377;
  font-weight:800;
}
.paper-top > div { display:grid; gap:5px; }
.paper-page { font-size:.75rem;color:#b18a42; }

.paper-rule { height:1px;background:#d9d0c1;margin:17px 0 25px; }
.topic-label { color:#aa7b26;font-size:.58rem;font-weight:800;letter-spacing:.16em; }
.note-paper h3 { margin:7px 0 13px;font:800 2rem/1.1 "Manrope",sans-serif;letter-spacing:-.045em; }
.paper-lead { max-width:720px;color:#5f5a51;font:400 .84rem/1.65 "DM Sans",sans-serif; }
.paper-grid { display:grid;grid-template-columns:1.08fr .92fr;gap:25px;margin-top:26px; }
.paper-text h4 { margin:14px 0 6px;font:800 .68rem "Manrope",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#a8781e; }
.paper-text p,.paper-text li { color:#5c574f;font-size:.73rem;line-height:1.65; }
.paper-text ol { padding-left:18px;margin:8px 0; }

.circuit-wrap {
  padding:14px 10px 10px;
  border:1px solid #e0d8ca;
  border-radius: var(--r-md);
  background:rgba(255,255,255,.52);
}
.diagram-caption { margin:0 0 6px 8px;color:#9a9285;font-size:.5rem;letter-spacing:.12em;font-weight:800; }
.circuit { width:100%;height:auto;color:#514a3f; }
.circuit line,.circuit polyline { stroke:currentColor;stroke-width:1.7;fill:none; }
.circuit circle { stroke:currentColor;stroke-width:1.5;fill:var(--premium-paper); }
.circuit .source-circle { stroke:#ad812b;stroke-width:1.8; }
.circuit .source-text { fill:#ad812b;font-size:14px;font-weight:700; }
.circuit text { fill:#5c5549;font:11px "DM Sans",sans-serif; }
.circuit .small-label { font-size:9px;fill:#8c8376; }

.pyq-paper {
  margin-top:30px;
  padding:18px 20px 16px;
  background:#fff;
  border:1px solid #d8cfc1;
  border-left:3px solid #c4922d;
  border-radius: var(--r-md);
}
.pyq-head { display:flex;align-items:center;gap:9px;color:#8b8378;font-size:.58rem;font-weight:700; }
.pyq-badge { padding:4px 8px;background:#efe1bd;color:#8b641a;font-size:.55rem;font-weight:800;letter-spacing:.08em;border-radius:999px; }
.pyq-frequency { margin-left:auto;color:#a8781e; }
.pyq-paper p { margin:12px 0 13px;color:#403c35;font-size:.76rem;line-height:1.65; }
.pyq-meta { display:flex;gap:18px;color:#8c8478;font-size:.57rem;font-weight:700; }

.showcase-side { display:grid;gap:26px; }
.showcase-intro { display:grid;grid-template-columns:42px 1fr;gap:16px; }
.showcase-intro .number { color:#c3912f;font:800 .8rem "Manrope",sans-serif; }
.showcase-intro h3 { margin:0 0 9px;font:800 1.35rem/1.15 "Manrope",sans-serif;letter-spacing:-.03em; }
.showcase-intro p { margin:0;color:#79736a;font-size:.9rem;line-height:1.7; }

.flow-card {
  position:relative;
  padding:22px 20px;
  background:#fffdfa;
  border:1px solid #ded6c9;
  border-radius: var(--r-lg);
  box-shadow:0 15px 40px rgba(30,24,12,.06);
  transition: box-shadow .35s ease, transform .35s ease;
}
.flow-card:hover { box-shadow:0 22px 50px rgba(30,24,12,.1); transform: translateY(-3px); }
.flow-line { position:absolute;left:39px;top:38px;bottom:38px;width:1px;background:#ded5c5; }
.flow-item { position:relative;display:grid;grid-template-columns:38px 1fr;gap:12px;padding:13px 0; }
.flow-item > span {
  position:relative;z-index:2;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#f5f0e6;
  color:#8e8577;
  font-size:.58rem;font-weight:800;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.flow-item.active > span { background:#d7a83c;color:#231b0a; box-shadow: 0 0 0 6px rgba(215,168,60,.15); }
.flow-item:hover > span { transform: scale(1.1); }
.flow-item b { display:block;font-size:.78rem;color:#35312b; }
.flow-item small { display:block;margin-top:3px;color:#999187;font-size:.66rem;line-height:1.4; }

.micro-proof {
  display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-top:1px solid #ded7cb;
}
.micro-proof .shield {
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#eee5cf;color:#9a6f1d;font-weight:800;font-size:.75rem;
}
.micro-proof b { display:block;font-size:.75rem; }
.micro-proof small { display:block;color:#8a8379;margin-top:4px;font-size:.68rem;line-height:1.45; }

/* DIFFERENCE */
.difference-section { padding:125px 0;background:#fbfaf7; }
.difference-head { display:grid;grid-template-columns:1fr .75fr;gap:90px;align-items:end; }
.feature-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px; }
.feature-card {
  position:relative;
  min-height:290px;
  padding:28px;
  background:#f2eee6;
  border:1px solid #e0d9cd;
  border-radius: var(--r-lg);
  transition: transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease;
}
.feature-card:hover { transform: translateY(-7px); box-shadow: 0 24px 50px rgba(24,20,12,.1); }
.feature-no { position:absolute;right:22px;top:22px;color:#a89f92;font-size:.62rem;font-weight:800;letter-spacing:.05em; }

/* Icon badge now hosts a real SVG glyph instead of a text glyph */
.feature-icon {
  margin-top:30px;margin-bottom:38px;color:#ad7d22;
  width:58px;height:58px;display:grid;place-items:center;
  background:rgba(173,125,34,.1);border:1px solid rgba(173,125,34,.18);border-radius: var(--r-md);
  transition: transform .4s cubic-bezier(.16,.8,.3,1);
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-card:hover .feature-icon { transform: rotate(-6deg) scale(1.05); }
.feature-card h3 { margin:0 0 10px;font:800 1.15rem/1.25 "Manrope",sans-serif;letter-spacing:-.025em; color: #201d19; }
.feature-card p { margin:0;color:#767067;font-size:.8rem;line-height:1.65; }

/* Dark card variant — declared AFTER the base .feature-card h3/p rules above
   so it is not silently overridden (same specificity, later rule used to win). */
.feature-card-dark { background:#1d1c19; border-color: #2c2a25; }
.feature-card-dark h3 { color: #ffffff; }
.feature-card-dark p { color:#d8d2c6; }
.feature-card-dark .feature-no { color: rgba(255,255,255,.55); }
.feature-card-dark .feature-icon { background:rgba(226,189,102,.14); border-color: rgba(226,189,102,.32); color:#e2bd66; }

/* Gold card variant — same reasoning */
.feature-card.gold-feature { background:#e8d39b;border-color:#d6b66b; }
.feature-card.gold-feature h3 { color: #2b2211; }
.feature-card.gold-feature p { color: #5f5330; }
.feature-card.gold-feature .feature-no { color: rgba(43,34,17,.45); }
.feature-card.gold-feature .feature-icon { background:rgba(255,255,255,.4); border-color: rgba(255,255,255,.5); color:#8a6316; }

/* SAMPLES */
.samples-section { padding:25px 0 90px;background:#fbfaf7; }
.samples-banner {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  padding:68px 72px;
  color:#fff;
  background:#191816;
  border:1px solid #2d2a25;
  border-radius: var(--r-xl);
  box-shadow:0 30px 80px rgba(20,18,14,.16);
}
.samples-banner::before {
  content:"";
  position:absolute;
  width:480px;height:480px;
  right:-160px;top:-250px;border-radius:50%;
  border:1px solid rgba(230,188,79,.25);
  box-shadow:0 0 0 55px rgba(230,188,79,.035),0 0 0 110px rgba(230,188,79,.02);
  animation: slowSpin 70s linear infinite;
}
.samples-glow { position:absolute;width:220px;height:220px;left:43%;top:-120px;background:rgba(218,170,56,.14);filter:blur(65px);border-radius:50%;animation: glowPulse 5s ease-in-out infinite; }

@keyframes glowPulse {
  0%,100% { opacity: .8; }
  50% { opacity: 1; transform: scale(1.12); }
}

.eyebrow.light { color:#d9ad4b; }
.samples-copy { position:relative;z-index:2; }
.samples-copy h2 { color:#fff; }
.samples-copy p { max-width:610px;color:#a9a39a;line-height:1.7;margin:0; }
.sample-cta {
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:17px 24px;
  background:#e0b24b;color:#241a06;
  border-radius: var(--r-md);
  white-space:nowrap;
  box-shadow:0 15px 35px rgba(0,0,0,.28);
  transition: transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s ease, background .3s ease;
}
.sample-cta:hover { background:#f0c765; transform: translateY(-2px) scale(1.02); box-shadow: 0 20px 45px rgba(0,0,0,.32); }

/* WHATSAPP CHANNEL BANNER */
.channel-section { padding: 10px 0 100px; background:#fbfaf7; }
.channel-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 40px 46px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg,#0c1f14,#0a2e1a 55%,#0c1f14);
  border-radius: var(--r-xl);
  box-shadow: 0 28px 70px rgba(10,40,22,.35);
  transition: transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease;
}
.channel-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg,#25D366,#1a7f3c,#25D366,#0e5226);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: channelBorderFlow 5s linear infinite;
  z-index: 0;
}
@keyframes channelBorderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.channel-banner::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  right: -100px; top: -140px;
  background: radial-gradient(circle, rgba(37,211,102,.28), transparent 70%);
  filter: blur(10px);
  z-index: 0;
  animation: glowPulse 4.5s ease-in-out infinite;
}
.channel-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 36px 85px rgba(10,40,22,.45);
}
.channel-live {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 18px;
  left: 46px;
  padding: 5px 11px;
  background: rgba(37,211,102,.16);
  border: 1px solid rgba(37,211,102,.4);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #6ee6a0;
}
.channel-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #34e07a;
  box-shadow: 0 0 0 3px rgba(52,224,122,.25);
  animation: dotPulse 1.6s ease-in-out infinite;
}
.channel-pulse-wrap { position: relative; z-index: 2; flex-shrink: 0; }
.channel-icon {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.channel-icon svg { width: 34px; height: 34px; }
.channel-pulse-wrap::before,
.channel-pulse-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37,211,102,.4);
  animation: channelPulse 2.6s ease-out infinite;
}
.channel-pulse-wrap::after { animation-delay: 1.3s; }

@keyframes channelPulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(2.1); opacity: 0; }
}

.channel-text { position: relative; z-index: 2; flex: 1; min-width: 0; margin-top: 14px; }
.channel-text b { display:block; font: 800 1.5rem "Manrope",sans-serif; letter-spacing:-.02em; color:#fff; }
.channel-text small { display:block; margin-top:6px; color:#a9d9bb; font-size:.88rem; line-height:1.55; font-weight: 500; max-width: 480px; }
.channel-cta {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: #25D366;
  color: #08240f;
  font-weight: 800;
  font-size: .88rem;
  border-radius: var(--r-md);
  box-shadow: 0 14px 30px rgba(37,211,102,.35);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.channel-banner:hover .channel-cta { background:#3ee27c; transform: translateX(2px) translateY(-2px); box-shadow: 0 18px 38px rgba(37,211,102,.45); }

/* PRICING */
.pricing-section { padding:0 0 140px;background:#fbfaf7; scroll-margin-top: 100px; }
.premium-pricing-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:58px;max-width:950px;margin-left:auto;margin-right:auto; }
.premium-price-card {
  position:relative;
  padding:43px;
  background:#fff;
  border:1px solid #ded7ca;
  border-radius: var(--r-xl);
  box-shadow:0 15px 45px rgba(25,21,12,.055);
  transition: transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease;
}
.premium-price-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(25,21,12,.1); }
.featured-price { border:1px solid #c99a35;box-shadow:0 25px 65px rgba(151,106,24,.12); }
.featured-price:hover { box-shadow: 0 36px 85px rgba(151,106,24,.2); }
.price-ribbon {
  position:absolute;right:20px;top:20px;
  padding:5px 14px 7px;
  color:#7a5312;background:#f2e1b5;
  font-family: "Caveat", cursive;
  font-size:1.05rem;font-weight:700;letter-spacing:.01em;
  border-radius: 999px;
  transform: rotate(3deg);
}

.price-sample-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 13px 19px;
  background: transparent;
  color: #8a6316;
  border: 1.5px dashed #d6b66b;
  border-radius: var(--r-md);
  font: 700 .85rem "DM Sans",sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.price-sample-btn:hover {
  background: #faf3e0;
  border-color: #c99a35;
  transform: translateY(-2px);
}
.price-year { color:#9c7324;font-size:.62rem;font-weight:800;letter-spacing:.15em; }
.premium-price-card h3 { margin:13px 0 20px;font:800 1.25rem "Manrope",sans-serif;letter-spacing:-.03em; }
.price { font:800 4.1rem/.95 "Manrope",sans-serif;letter-spacing:-.06em;color:#171512; }
.price sup { font-size:1.35rem;vertical-align:top;position:relative;top:8px;margin-right:2px;color:#a67621; }
.price-note { display:block;margin-top:7px;color:#918a7f;font-size:.72rem; }

.price-or { display:flex; align-items:center; gap:10px; margin-top:18px; color:#a89f92; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.price-or i { flex:1; height:1px; background:#e5dfd5; }

.price-combo {
  margin-top:14px;
  padding:14px 16px;
  background:#f7f0dc;
  border:1px solid #e6d29c;
  border-radius: var(--r-md);
  font-size:.8rem;
  color:#5c5548;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.price-combo b { font:800 1rem "Manrope",sans-serif; color:#8a6316; }
.price-combo span { margin-left:auto; font-size:.64rem; font-weight:800; letter-spacing:.06em; color:#a8781e; text-transform:uppercase; }

.price-rule { height:1px;background:#e5dfd5;margin:28px 0 5px; }
.premium-price-card ul { list-style:none;padding:0;margin:0 0 30px; }
.premium-price-card li { padding:12px 0;border-bottom:1px solid #eee9e1;color:#625d55;font-size:.78rem; }
.premium-price-card li::before { content:"✓";margin-right:9px;color:#ae7f24;font-weight:800; }
.price-button {
  display:flex;justify-content:center;align-items:center;
  padding:15px 19px;
  color:#fff;background:#1c1b18;border-radius: var(--r-md);
  transition: transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s ease, background .3s ease;
}
.price-button:hover { background:#0d0c0b; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.secondary-price { color:#25221c;background:#eeeae2; }
.secondary-price:hover { background:#e3ddd2; box-shadow: 0 14px 30px rgba(0,0,0,.08); }

.whatsapp-only-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:34px auto 0;
  color:#8a8379;
  font-size:.76rem;
  font-weight:600;
}

/* FAQ */
.faq-section { padding: 20px 0 130px; background: #fbfaf7; }
.faq-list { max-width: 780px; margin: 50px auto 0; display: grid; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid #e2dbcd;
  border-radius: var(--r-md);
  padding: 6px 22px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item[open] { border-color: #d6b66b; box-shadow: 0 14px 34px rgba(24,20,12,.06); }
.faq-item summary {
  padding: 18px 0;
  font: 700 .95rem "DM Sans",sans-serif;
  color: #2b2925;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f5f0e6;
  color: #a8781e;
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform .3s ease, background .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: #eddcac; }
.faq-item p { margin: 0 0 20px; color: #706b62; font-size: .84rem; line-height: 1.7; font-weight: 500; }

/* FOOTER */
.premium-footer {
  padding: 54px 0;
  background: #191816;
  color: #cfc8bb;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.premium-footer .nav-logo-text { color: #fff; font-weight: 800; font-size: 1.1rem; }
.premium-footer .nav-logo-text span { color: #e2bd66; }
.footer-brand p { margin: 8px 0 0; font-size: .78rem; color: #948d80; max-width: 320px; line-height: 1.6; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a {
  color: #cfc8bb;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  position: relative;
  transition: color .25s ease;
}
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: #e2bd66;
  transition: width .3s ease;
}
.footer-links a:hover { color: #f3d77b; }
.footer-links a:hover::after { width: 100%; }

/* MODAL */
.sample-modal {
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  padding:24px;
  visibility:hidden;opacity:0;
  transition:.3s ease;
}
.sample-modal.is-open { visibility:visible;opacity:1; }
.modal-backdrop { position:absolute;inset:0;background:rgba(10,9,7,.72);backdrop-filter:blur(10px); }
.sample-dialog {
  position:relative;z-index:2;
  width:min(700px,100%);
  max-height:min(820px,calc(100vh - 48px));
  overflow:auto;
  padding:34px;
  background:#fbfaf7;
  border:1px solid rgba(255,255,255,.2);
  border-radius: var(--r-xl);
  box-shadow:0 40px 120px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.98);
  transition:.35s cubic-bezier(.16,.8,.3,1);
}
.sample-modal.is-open .sample-dialog { transform:none; }
.modal-close {
  position:absolute;right:18px;top:15px;
  width:36px;height:36px;border:0;background:transparent;
  color:#756e64;font-size:1.7rem;cursor:pointer;
  border-radius: 50%;
  transition: background .25s ease, transform .25s ease;
}
.modal-close:hover { background:#eee7db; transform: rotate(90deg); }
.modal-top { padding-right:40px;margin-bottom:22px; }
.modal-top h2 { margin:10px 0 8px;font:800 2rem "Manrope",sans-serif;letter-spacing:-.045em; }
.modal-top p { margin:0;color:#858078;font-size:.78rem;line-height:1.6; }
.sample-list { border-top:1px solid #ded8ce; }
.sample-row {
  display:grid;
  grid-template-columns:45px 1fr auto;
  gap:14px;
  align-items:center;
  padding:17px 10px;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid #e5dfd6;
  border-radius: var(--r-sm);
  transition:.25s ease;
}
.sample-row:hover { padding-left:14px;background:#f2ede4; }
.sample-number { color:#b08127;font:800 .7rem "Manrope",sans-serif; }
.sample-row b { display:block;font-size:.8rem; }
.sample-row small { display:block;color:#8c857b;font-size:.64rem;margin-top:4px;line-height:1.4; }
.sample-open { color:#9a6d1d;font-size:.65rem;font-weight:800;white-space:nowrap; }
.modal-foot { margin-top:18px;color:#a09a90;font-size:.62rem; }
.modal-foot strong { color:#7d5a1c; }

/* RESPONSIVE */
@media (max-width: 950px) {
  .note-showcase { grid-template-columns:1fr; }
  .showcase-side { grid-template-columns:1fr 1fr; }
  .showcase-intro,.micro-proof { align-self:center; }
  .flow-card { grid-column:1 / -1; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .difference-head { grid-template-columns:1fr;gap:15px; }
}
@media (max-width: 760px) {
  .premium-hero { min-height:auto; }
  .premium-hero-inner { padding:125px 0 75px; }
  .premium-hero h1 { font-size:clamp(2.9rem,13vw,4.5rem); }
  .hero-proof { flex-wrap:wrap;margin-top:45px; }
  .hero-proof i { display:none; }
  .product-section,.difference-section { padding:90px 0; }
  .note-paper { padding:30px 25px;transform:none; }
  .paper-grid { grid-template-columns:1fr; }
  .circuit-wrap { margin-top:5px; }
  .showcase-side { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:220px; }
  .samples-banner { grid-template-columns:1fr;padding:44px 30px; }
  .sample-cta { width:100%;justify-content:space-between; }
  .channel-banner { flex-direction:column; text-align:center; padding:46px 22px 30px; }
  .channel-live { left: 50%; transform: translateX(-50%); }
  .channel-text { margin-top: 4px; }
  .channel-text small { max-width: none; }
  .channel-cta { width:100%; justify-content:center; }
  .price-combo span { margin-left:0; }
  .premium-pricing-grid { grid-template-columns:1fr; }
  .premium-price-card { padding:32px 27px; }
}
@media (max-width: 520px) {
  .premium-container,.premium-hero-inner { width:min(100% - 32px,1180px); }
  .premium-hero h1 { letter-spacing:-.055em; }
  .hero-actions { align-items:flex-start;flex-direction:column; }
  .premium-primary { width:100%;justify-content:space-between; }
  .note-paper h3 { font-size:1.65rem; }
  .pyq-meta { flex-direction:column;gap:5px; }
  .sample-dialog { padding:25px 18px; }
  .sample-row { grid-template-columns:32px 1fr; }
  .sample-open { grid-column:2; }
}

/* Staggered reveal for grid items */
.feature-grid .reveal:nth-child(1) { transition-delay: 0s; }
.feature-grid .reveal:nth-child(2) { transition-delay: .08s; }
.feature-grid .reveal:nth-child(3) { transition-delay: .16s; }
.feature-grid .reveal:nth-child(4) { transition-delay: .24s; }
.premium-pricing-grid .reveal:nth-child(1) { transition-delay: 0s; }
.premium-pricing-grid .reveal:nth-child(2) { transition-delay: .12s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-premium-badge::before,
  .nav-premium-badge::after,
  .premium-hero::before,
  .samples-banner::before,
  .samples-glow,
  .kicker-dot,
  .premium-orb,
  .channel-pulse-wrap::before,
  .channel-pulse-wrap::after,
  .premium-hero h1,
  .hero-copy,
  .hero-actions,
  .hero-proof,
  .hero-handwritten,
  .floating-price,
  .handwritten-tag,
  .btn-ripple { animation:none; }
  * { scroll-behavior:auto !important; transition:none !important; }
}