/* =========================================================
   Poraj Services Australia — Design System
   ========================================================= */

:root{
  --bg: #06060f;
  --bg-alt: #0b0c1a;
  --surface: rgba(255,255,255,0.04);
  --surface-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --text: #f4f5fb;
  --text-dim: #a8adc4;
  --text-dimmer: #767b96;

  --violet: #8b5cf6;
  --violet-2: #a855f7;
  --cyan: #22d3ee;
  --pink: #ec4899;
  --amber: #fbbf24;
  --green: #34d399;

  --grad-primary: linear-gradient(120deg, var(--violet) 0%, var(--pink) 50%, var(--cyan) 100%);
  --grad-primary-soft: linear-gradient(120deg, rgba(139,92,246,0.25) 0%, rgba(236,72,153,0.25) 50%, rgba(34,211,238,0.25) 100%);
  --grad-text: linear-gradient(90deg, #c4b5fd 0%, #f0abfc 45%, #67e8f9 100%);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-glow: 0 0 60px -15px rgba(139,92,246,0.55);
  --shadow-card: 0 20px 50px -20px rgba(0,0,0,0.6);

  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1240px;
}

.turnstile-wrap{min-height:65px;margin:8px 0 16px;overflow:hidden}
.turnstile-wrap .cf-turnstile{width:100%}

*, *::before, *::after{ box-sizing: border-box; }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; color: var(--text-dim); }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
::selection{ background: var(--violet); color:#fff; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section{ position: relative; padding: 120px 0; }
.section-tight{ padding: 80px 0; }
.text-gradient{
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan);
  padding: 6px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  margin-bottom: 20px;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background: var(--grad-primary);
  box-shadow: 0 0 12px var(--pink);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--grad-primary);
  color: #08060f;
  background-size: 200% 200%;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); background-position: 100% 50%; }
.btn-ghost{
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background: var(--surface-strong); border-color: var(--violet-2); transform: translateY(-3px); }
.btn-sm{ padding: 10px 20px; font-size: 13px; }
.btn-block{ width:100%; }

/* ---------- Background FX ---------- */
.bg-fx{
  position: fixed; inset:0; z-index:-2; overflow:hidden; background: var(--bg);
}
.bg-fx canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.45;
  animation: drift 22s ease-in-out infinite alternate;
}
.blob.b1{ width:520px; height:520px; top:-150px; left:-120px; background: var(--violet); }
.blob.b2{ width:460px; height:460px; top:20%; right:-160px; background: var(--pink); animation-duration: 26s; animation-delay: -4s; }
.blob.b3{ width:480px; height:480px; bottom:-180px; left:30%; background: var(--cyan); animation-duration: 30s; animation-delay: -10s; }
@keyframes drift{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,-60px) scale(1.15); }
  100%{ transform: translate(-30px,30px) scale(.95); }
}
.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
}
.noise{
  position:absolute; inset:0; opacity:.03; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 18px 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(6,6,15,0.75);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--border);
  padding: 12px 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:18px; }
.brand-mark{
  width:42px; height:42px; border-radius:12px;
  background: var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; color:#08060f; font-size:15px;
  box-shadow: 0 0 24px -4px rgba(139,92,246,.8);
}
.brand-text small{ display:block; font-weight:400; font-size:11px; color: var(--text-dimmer); letter-spacing:.05em; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links > li > a{
  padding: 10px 16px; border-radius: var(--radius-pill); font-size:14px; font-weight:500; color: var(--text-dim);
  transition: color .25s, background .25s;
  position: relative;
}
.nav-links > li > a:hover, .nav-links > li > a.active{ color: var(--text); background: var(--surface); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.cart-btn{ position:relative; display:flex; align-items:center; gap:8px; }
.cart-count{
  position:absolute; top:-6px; right:-6px; background: var(--pink); color:#fff;
  font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 2px var(--bg);
}
.nav-toggle{ display:none; }
.mobile-nav-quote, .mobile-nav-action{ display:none; }
.mobile-cart-count{ display:inline-flex; min-width:20px; height:20px; align-items:center; justify-content:center; margin-left:6px; border-radius:999px; background:var(--pink); color:#fff; font-size:11px; font-weight:700; }

.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute; top: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(6px);
  width: 560px; padding: 18px; border-radius: var(--radius-md);
  background: rgba(11,12,26,0.97); border:1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  display:grid; grid-template-columns: 1fr 1fr; gap:6px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 50;
}
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.dropdown-item{ display:flex; gap:12px; padding:12px; border-radius: var(--radius-sm); transition: background .2s; }
.dropdown-item:hover{ background: var(--surface); }
.dropdown-item .ico{ width:38px; height:38px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background: var(--surface-strong); font-size:18px; }
.dropdown-item strong{ display:block; font-size:14px; color:var(--text); }
.dropdown-item span{ font-size:12.5px; color: var(--text-dimmer); }

/* ---------- Hero ---------- */
.hero{ padding: 190px 0 100px; position:relative; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:60px; align-items:center; }
.hero h1{ font-size: clamp(2.6rem, 5vw, 4.4rem); }
.hero-lead{ font-size: 19px; max-width: 540px; }
.hero-cta{ display:flex; gap:16px; margin: 34px 0; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:40px; margin-top: 46px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:'Space Grotesk',sans-serif; font-size: 30px; }
.hero-stat span{ font-size:13px; color: var(--text-dimmer); }
.hero-visual{ position:relative; }
.orb-card{
  position:relative; border-radius: var(--radius-lg);
  background: var(--surface); border:1px solid var(--border-strong);
  backdrop-filter: blur(20px);
  padding: 28px; box-shadow: var(--shadow-card);
  animation: float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
.orb-card .term-line{ display:flex; align-items:center; gap:8px; font-family:monospace; font-size:13px; color:var(--cyan); margin-bottom:8px; }
.floating-chip{
  position:absolute; padding:12px 16px; border-radius: var(--radius-md);
  background: rgba(11,12,26,0.9); border:1px solid var(--border-strong);
  font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px;
  box-shadow: var(--shadow-card); animation: float 6s ease-in-out infinite;
}
.floating-chip.c1{ top:-6%; right:-8%; animation-delay: -1s; }
.floating-chip.c2{ bottom:6%; left:-10%; animation-delay: -3s; }
.floating-chip.c3{ bottom:-8%; right:10%; animation-delay: -5s; }
.dot{ width:9px; height:9px; border-radius:50%; }
.dot.green{ background: var(--green); box-shadow:0 0 10px var(--green); }
.dot.violet{ background: var(--violet); box-shadow:0 0 10px var(--violet); }
.dot.amber{ background: var(--amber); box-shadow:0 0 10px var(--amber); }

/* logo marquee */
.marquee-wrap{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee{ display:flex; gap:60px; width: max-content; animation: scroll-x 26s linear infinite; opacity:.6; }
.marquee span{ font-family:'Space Grotesk',sans-serif; font-size: 20px; white-space:nowrap; color: var(--text-dimmer); }
@keyframes scroll-x{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- Cards / Services ---------- */
.section-head{ max-width: 680px; margin: 0 auto 60px; text-align:center; }
.section-head.left{ margin:0 0 50px; text-align:left; }
.grid{ display:grid; gap: 26px; }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }

.card{
  position:relative; padding: 32px; border-radius: var(--radius-md);
  background: var(--surface); border:1px solid var(--border);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; opacity:0; transition: opacity .4s; pointer-events:none;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,.18), transparent 60%);
}
.card:hover::before{ opacity:1; }
.card:hover{ transform: translateY(-8px); border-color: var(--border-strong); box-shadow: var(--shadow-card); background: var(--surface-strong); }
.card-icon{
  width:54px; height:54px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:20px; background: var(--grad-primary-soft); border:1px solid var(--border-strong);
}
.card h3{ font-size: 20px; }
.card p{ font-size: 14.5px; margin-bottom: 14px; }
.card-link{ font-size:13.5px; font-weight:600; color: var(--cyan); display:inline-flex; gap:6px; align-items:center; }
.card-link .arrow{ transition: transform .3s var(--ease); }
.card:hover .card-link .arrow{ transform: translateX(4px); }
.card-tag{ position:absolute; top:20px; right:20px; font-size:11px; padding:4px 10px; border-radius:var(--radius-pill); background: var(--surface-strong); color: var(--text-dimmer); }

.reveal{ opacity:1; transform:none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

.grid-services{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field-help{ display:block; margin-top:8px; color:var(--text-dimmer); font-size:12.5px; }
.trust-strip{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.trust-strip span{ padding:9px 14px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-dim); font-size:12.5px; }

/* ---------- Process / Steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; position:relative; }
.step{ position:relative; padding: 0 20px; }
.step-num{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; background: var(--surface); border:1px solid var(--border-strong);
  margin-bottom: 18px; color: var(--cyan);
}
.step h4{ font-size:16px; }
.step p{ font-size:13.5px; }

/* ---------- Stats band ---------- */
.stats-band{
  border-radius: var(--radius-lg); padding: 56px; background: var(--surface); border:1px solid var(--border);
  display:grid; grid-template-columns: repeat(4,1fr); gap:20px; text-align:center;
}
.stats-band b{ font-family:'Space Grotesk',sans-serif; font-size: 38px; display:block; }
.stats-band span{ color: var(--text-dimmer); font-size:13.5px; }

/* ---------- Testimonials ---------- */
.testi-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:10px; }
.testi-track::-webkit-scrollbar{ height:6px; }
.testi-track::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:10px; }
.testi-card{
  flex: 0 0 380px; scroll-snap-align:start; padding:28px; border-radius: var(--radius-md);
  background: var(--surface); border:1px solid var(--border);
}
.testi-stars{ color: var(--amber); letter-spacing:2px; margin-bottom:14px; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%; background: var(--grad-primary); display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#08060f; font-size:14px;
}
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.testi-person strong{ font-size:14px; display:block; }
.testi-person span{ font-size:12.5px; color: var(--text-dimmer); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--border); padding: 22px 0; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:600; font-size:16px; }
.faq-q .plus{ transition: transform .3s var(--ease); font-size:20px; color: var(--cyan); flex:none; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); font-size:14.5px; }
.faq-item.open .faq-a{ max-height:240px; margin-top:14px; }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius: var(--radius-lg); padding: 70px; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(160deg, rgba(139,92,246,.18), rgba(34,211,238,.10));
  border: 1px solid var(--border-strong);
}
.cta-band h2{ font-size: clamp(1.8rem,3.4vw,2.6rem); max-width:640px; margin: 0 auto .4em; }
.cta-band .actions{ display:flex; gap:16px; justify-content:center; margin-top:30px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding: 70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.footer-col h5{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-dimmer); margin-bottom:18px; }
.footer-col li{ margin-bottom:12px; }
.footer-col a{ font-size:14.5px; color: var(--text-dim); transition: color .2s; }
.footer-col a:hover{ color: var(--cyan); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--border); font-size:13px; color: var(--text-dimmer); flex-wrap:wrap; gap:12px; }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; transition: background .25s, transform .25s; }
.social-row a:hover{ background: var(--surface-strong); transform: translateY(-3px); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding: 170px 0 80px; }
.breadcrumb{ font-size:13px; color: var(--text-dimmer); margin-bottom:18px; display:flex; gap:8px; align-items:center; }
.breadcrumb a:hover{ color: var(--cyan); }

/* ---------- Free resources ---------- */
.resource-hero h1{ max-width:800px; font-size:clamp(2.7rem, 5vw, 4.4rem); }
.resource-hero .hero-lead{ max-width:720px; }
.resource-facts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.resource-facts span{
  display:inline-flex; align-items:center; gap:7px; padding:10px 15px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text-dim); font-size:13px;
}
.resource-facts strong{ color:var(--text); font-family:'Space Grotesk',sans-serif; }
.resource-grid{ align-items:stretch; }
.resource-card{ display:flex; flex-direction:column; min-height:650px; }
.resource-card-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:30px; }
.resource-number{
  width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:var(--grad-primary-soft); border:1px solid var(--border-strong);
  font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:var(--cyan);
}
.resource-format{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dimmer); }
.resource-card h3{ font-size:23px; }
.resource-card > p{ min-height:74px; }
.resource-card .resource-best{ min-height:92px; margin-top:2px; padding:14px 16px; border-left:2px solid var(--cyan); background:rgba(34,211,238,.05); }
.resource-card .resource-best strong{ color:var(--text); }
.resource-list{ list-style:disc; padding-left:20px; margin:4px 0 28px; color:var(--text-dim); }
.resource-list li{ margin-bottom:9px; font-size:14px; }
.resource-actions{ margin-top:auto; display:flex; flex-direction:column; gap:15px; position:relative; }
.resource-help-link{ align-self:center; color:var(--cyan); font-size:13.5px; font-weight:600; text-align:center; }
.resource-help-link:hover{ color:var(--text); }
.resource-next-step{
  margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding:30px 32px; border-radius:var(--radius-md); border:1px solid var(--border-strong);
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(34,211,238,.08));
}
.resource-next-step[hidden]{ display:none; }
.resource-next-step h3{ margin:5px 0 7px; }
.resource-next-step p{ margin:0; max-width:670px; }
.resource-next-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.resource-note{
  display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center;
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  padding:56px; background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(34,211,238,.06));
}
.resource-note h2{ font-size:clamp(1.8rem,3vw,2.45rem); margin-bottom:0; }
.resource-note > p{ font-size:16px; margin:0; }
.resource-conversion{ max-width:980px; margin:0 auto; }
.resource-conversion > p{ max-width:680px; margin-left:auto; margin-right:auto; }
.resource-newsletter-form{ display:flex; justify-content:center; gap:12px; max-width:680px; margin:28px auto 12px; }
.resource-newsletter-form input{ flex:1; min-width:220px; }
.resource-newsletter-message{ min-height:22px; color:var(--pink); font-size:13px; font-weight:600; }
.resource-newsletter-message.success{ color:var(--green); }
.resource-consent{ font-size:12px; color:var(--text-dimmer); }
.resource-consent a{ color:var(--cyan); }

/* ---------- Pricing ---------- */
.price-card{ position:relative; }
.price-card.featured{ border-color: var(--violet-2); box-shadow: var(--shadow-glow); }
.price-badge{ position:absolute; top:-14px; right:28px; background: var(--grad-primary); color:#08060f; font-size:11px; font-weight:700; padding:6px 14px; border-radius: var(--radius-pill); }
.price-amount{ font-family:'Space Grotesk',sans-serif; font-size:38px; margin: 14px 0 4px; }
.price-amount small{ font-size:14px; color: var(--text-dimmer); font-family:'Inter',sans-serif; }
.price-feats li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color: var(--text-dim); padding:7px 0; }
.price-feats li::before{ content:'✓'; color: var(--green); font-weight:700; }

/* ---------- Store / Product ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-chip{ padding:9px 18px; border-radius: var(--radius-pill); border:1px solid var(--border-strong); font-size:13.5px; font-weight:600; background: var(--surface); color: var(--text); transition: all .25s; }
.filter-chip.active, .filter-chip:hover{ background: var(--grad-primary); color:#08060f; border-color:transparent; }
.product-card{ display:flex; flex-direction:column; }
.product-media{
  height:170px; border-radius: var(--radius-sm); margin-bottom:20px; position:relative; overflow:hidden;
  background: var(--grad-primary-soft); display:flex; align-items:center; justify-content:center; font-size:44px;
}
.product-platform{ position:absolute; top:12px; left:12px; display:flex; gap:6px; }
.platform-pill{ font-size:10.5px; font-weight:700; padding:4px 9px; border-radius: var(--radius-pill); background: rgba(6,6,15,.7); border:1px solid var(--border-strong); color: var(--text); }
.product-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }
.product-price{ font-family:'Space Grotesk',sans-serif; font-size:22px; }
.product-price small{ font-size:12px; color: var(--text-dimmer); font-family:'Inter',sans-serif; }
.product-card .product-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.store-links{ display:flex; gap:8px; margin-top:12px; }
.store-links a{ flex:1; text-align:center; font-size:12px; font-weight:600; padding:9px; border-radius: var(--radius-sm); background: var(--surface-strong); border:1px solid var(--border-strong); }
.store-links a:hover{ border-color: var(--cyan); color: var(--cyan); }

/* Cart drawer */
.cart-overlay{ position:fixed; inset:0; background: rgba(3,3,10,.6); backdrop-filter: blur(4px); z-index:200; opacity:0; visibility:hidden; transition: opacity .35s var(--ease); }
.cart-overlay.open{ opacity:1; visibility:visible; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; z-index:201;
  background: var(--bg-alt); border-left:1px solid var(--border-strong);
  padding: 28px; display:flex; flex-direction:column; gap:20px;
  transform: translateX(100%); transition: transform .4s var(--ease);
  box-shadow: -30px 0 60px rgba(0,0,0,.4);
}
.cart-drawer.open{ transform: translateX(0); }
.cart-head{ display:flex; justify-content:space-between; align-items:center; }
.cart-items{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.cart-item{ display:flex; gap:14px; padding:14px; border-radius: var(--radius-sm); background: var(--surface); border:1px solid var(--border); }
.cart-item .thumb{ width:52px; height:52px; border-radius:10px; background: var(--grad-primary-soft); display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; }
.cart-item .meta{ flex:1; }
.cart-item .meta strong{ display:block; font-size:14px; }
.cart-item .meta span{ font-size:12.5px; color: var(--text-dimmer); }
.cart-item .remove{ font-size:12px; color: var(--pink); }
.cart-empty{ text-align:center; padding:60px 20px; color: var(--text-dimmer); }
.cart-summary{ border-top:1px solid var(--border); padding-top:20px; display:flex; flex-direction:column; gap:14px; }
.cart-total-row{ display:flex; justify-content:space-between; font-size:16px; font-weight:700; }

/* Checkout */
.checkout-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:40px; align-items:flex-start; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; color: var(--text-dim); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
input, select, textarea{
  width:100%; padding:13px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border:1px solid var(--border-strong); color: var(--text); font-size:14.5px;
  transition: border-color .25s, background .25s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--violet-2); background: var(--surface-strong); }
.pay-methods{ display:flex; gap:10px; margin-bottom:20px; }
.pay-method{ flex:1; text-align:center; padding:14px; border-radius: var(--radius-sm); border:1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size:13px; font-weight:600; cursor:pointer; }
.pay-method.active{ border-color: var(--violet-2); background: var(--surface-strong); }
.rating-star{ background:none; border:0; color:var(--text-dimmer); font-size:32px; line-height:1; padding:4px; cursor:pointer; border-radius:8px; }
.rating-star:hover, .rating-star:focus-visible{ outline:2px solid var(--violet-2); outline-offset:2px; }
.order-summary{ position:sticky; top:110px; }
.summary-line{ display:flex; justify-content:space-between; font-size:14px; padding:8px 0; color: var(--text-dim); }
.summary-line.total{ font-size:18px; font-weight:700; color: var(--text); border-top:1px solid var(--border); margin-top:8px; padding-top:16px; }
.demo-banner{ font-size:12.5px; padding:12px 16px; border-radius: var(--radius-sm); background: rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.35); color: var(--amber); margin-bottom:20px; }

/* ---------- Chatbot ---------- */
.chat-launcher{
  position:fixed; bottom:26px; right:26px; z-index:300;
  width:64px; height:64px; border-radius:50%; border:none;
  background: var(--grad-primary); box-shadow: 0 10px 40px -8px rgba(139,92,246,.7);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  animation: pulse-ring 2.6s ease-in-out infinite;
}
@keyframes pulse-ring{ 0%,100%{ box-shadow: 0 10px 40px -8px rgba(139,92,246,.7); } 50%{ box-shadow: 0 10px 55px -4px rgba(236,72,153,.75); } }
.chat-launcher .ping{ position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background: var(--green); border:3px solid var(--bg); }
.chat-window{
  position:fixed; bottom:104px; right:26px; z-index:300;
  width:380px; max-width: 92vw; height: 560px; max-height: 74vh;
  background: var(--bg-alt); border:1px solid var(--border-strong); border-radius: var(--radius-lg);
  display:flex; flex-direction:column; overflow:hidden; box-shadow: var(--shadow-card);
  opacity:0; visibility:hidden; transform: translateY(16px) scale(.97); transform-origin: bottom right;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.chat-window.open{ opacity:1; visibility:visible; transform:none; }
body.cart-open .chat-launcher, body.cart-open .chat-window{ opacity:0; visibility:hidden; pointer-events:none; }
.chat-head{ padding:18px 20px; background: var(--grad-primary); display:flex; align-items:center; gap:12px; color:#08060f; }
.chat-head .avatar{ width:38px; height:38px; border-radius:50%; background: rgba(8,6,15,.2); display:flex; align-items:center; justify-content:center; font-size:18px; }
.chat-head strong{ display:block; font-size:14.5px; }
.chat-head small{ font-size:11.5px; opacity:.8; }
.chat-voice-toggle{ margin-left:auto; background: rgba(8,6,15,.15); border:none; color:#08060f; font-size:16px; opacity:.85; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.chat-voice-toggle[aria-pressed="true"]{ background: rgba(8,6,15,.3); opacity:1; }
.chat-close{ margin-left:8px; background:none; border:none; color:#08060f; font-size:18px; opacity:.75; }
.chat-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; background: radial-gradient(circle at 20% 0%, rgba(139,92,246,.08), transparent 60%); }
.msg{ max-width:82%; padding:11px 15px; border-radius: 16px; font-size:13.5px; line-height:1.5; }
.msg.bot{ align-self:flex-start; background: var(--surface-strong); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg.user{ align-self:flex-end; background: var(--grad-primary); color:#08060f; font-weight:500; border-bottom-right-radius:4px; }
.msg.system{ align-self:center; font-size:11.5px; color: var(--text-dimmer); background:none; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding: 0 18px 12px; }
.quick-btn{ font-size:12.5px; padding:8px 14px; border-radius: var(--radius-pill); border:1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.quick-btn:hover{ background: var(--surface-strong); border-color: var(--cyan); }
.chat-input-row{ display:flex; gap:10px; padding:16px; border-top:1px solid var(--border); }
.chat-input-row input{ flex:1; }
.chat-send{ width:44px; height:44px; border-radius:50%; background: var(--grad-primary); border:none; display:flex; align-items:center; justify-content:center; color:#08060f; font-size:16px; flex:none; }
.typing-dots{ display:inline-flex; gap:4px; padding:4px 0; }
.typing-dots span{ width:6px; height:6px; border-radius:50%; background: var(--text-dimmer); animation: tdots 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes tdots{ 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} }
.handoff-banner{ margin:0 18px 12px; font-size:12px; padding:10px 14px; border-radius:10px; background: rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.35); color: var(--cyan); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; margin-bottom: 20px;}
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .stats-band{ grid-template-columns: repeat(2,1fr); }
  .steps{ grid-template-columns: repeat(2,1fr); gap:30px; }
  .checkout-grid{ grid-template-columns: 1fr; }
  .order-summary{ position:static; }
  .resource-card{ min-height:620px; }
  .resource-note{ grid-template-columns:1fr; gap:24px; }
  .resource-next-step{ align-items:flex-start; flex-direction:column; }
  .resource-next-actions{ justify-content:flex-start; }
}
@media (max-width: 720px){
  .nav-inner{ gap:12px; }
  .brand{ min-width:0; }
  .brand-text{ font-size:16px; line-height:1.2; }
  .nav-actions{ margin-left:auto; }
  .nav-actions .cart-btn, .nav-actions #accountNavLink, .nav-actions > .btn-primary{ display:none; }
  .nav-toggle{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; flex:none; }
  .nav-links{ display:none; }
  .nav-links.mobile-open{
    display:flex;
    position:fixed;
    top:82px;
    left:16px;
    right:16px;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
    flex-direction:column;
    align-items:stretch;
    background:rgba(11,12,26,.98);
    border:1px solid var(--border-strong);
    border-radius:18px;
    padding:14px;
    z-index:99;
    box-shadow:var(--shadow-card);
  }
  .nav-links.mobile-open > li > a{ display:block; padding:13px 16px; }
  .nav-links.mobile-open .dropdown-panel{ display:none; }
  .mobile-nav-quote, .mobile-nav-action{ display:block; }
  .mobile-nav-action a{ background:var(--surface); border:1px solid var(--border); }
  .mobile-nav-quote a{ background:var(--grad-primary); color:#08060f!important; text-align:center; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap:30px; }
  .hero{ padding:150px 0 60px; }
  .cta-band{ padding:44px 24px; }
  .chat-launcher{ width:56px; height:56px; right:16px; bottom:16px; }
  .chat-window{ width: 92vw; right:4vw; bottom:84px; height:70vh; }
  .stats-band{ padding:30px; grid-template-columns: 1fr 1fr; }
  .resource-hero h1{ font-size:clamp(2.35rem,12vw,3.2rem); }
  .resource-facts{ display:grid; grid-template-columns:1fr; }
  .resource-facts span{ justify-content:flex-start; }
  .resource-card{ min-height:0; }
  .resource-card > p, .resource-card .resource-best{ min-height:0; }
  .resource-note{ padding:34px 24px; }
  .resource-next-step{ padding:26px 22px; }
  .resource-next-actions{ width:100%; }
  .resource-next-actions .btn{ width:100%; }
  .resource-newsletter-form{ flex-direction:column; }
  .resource-newsletter-form .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}