/* ================================================================
   NEKTOR — Design System
   Dark Luxury Tech | Syne + Plus Jakarta Sans | Gold Metallics
   ================================================================ */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: ntk-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
  animation: ntk-in 0.32s cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes ntk-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.98); }
}
@keyframes ntk-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* -------- TOKENS -------- */
:root {
  --gold-100: #FFF8E8;
  --gold-200: #F5DFA0;
  --gold-300: #E8C55A;
  --gold-400: #D4A843;
  --gold-500: #C49A22;
  --gold-600: #B07A10;
  --gold-700: #8A5E08;
  --gold-glow-sm: 0 0 20px rgba(196,154,34,.18);
  --gold-glow-md: 0 0 40px rgba(196,154,34,.16), 0 0 80px rgba(196,154,34,.07);

  --bg-base:    #060610;
  --bg-raised:  #0C0C1C;
  --bg-elevated:#111124;
  --bg-card:    #0F0F22;
  --bg-card-h:  #161630;

  --border-faint:    rgba(196,154,34,.05);
  --border-subtle:   rgba(196,154,34,.10);
  --border-default:  rgba(196,154,34,.18);
  --border-strong:   rgba(196,154,34,.38);

  --text-primary:   #EDE8DC;
  --text-secondary: #8888AA;
  --text-muted:     #52526A;

  --font-display: 'Syne', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  --r-sm:6px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-2xl:40px; --r-full:9999px;

  --t-fast:150ms ease; --t-base:260ms ease;
  --t-slow:420ms cubic-bezier(.22,1,.36,1);

  --nav-h: 70px;
  --max-w: 1180px;
  --max-w-sm: 780px;
}

/* -------- RESET -------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-body);
  background:var(--bg-base);
  color:var(--text-primary);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}
svg{display:block}

/* -------- TYPOGRAPHY -------- */
.t-hero {
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.6rem,6.5vw,6.2rem);
  line-height:1.0;
  letter-spacing:-0.026em;
}
.t-h1 {
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.08;
  letter-spacing:-0.018em;
}
.t-h2 {
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.6rem);
  line-height:1.15;
  letter-spacing:-0.012em;
}
.t-h3 {
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.55rem);
  line-height:1.25;
}
.t-body-lg { font-size:clamp(.95rem,1.4vw,1.12rem); line-height:1.72; color:var(--text-secondary); }
.t-body     { font-size:1rem; line-height:1.65; }
.t-sm       { font-size:.875rem; line-height:1.5; }
.t-xs       { font-size:.72rem; line-height:1.4; letter-spacing:.07em; text-transform:uppercase; }

.t-gold {
  background:linear-gradient(135deg,var(--gold-300) 0%,var(--gold-500) 55%,var(--gold-400) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.t-center{text-align:center} .t-left{text-align:left}

/* -------- LAYOUT -------- */
.container    { max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-6); }
.container-sm { max-width:var(--max-w-sm); margin:0 auto; padding:0 var(--sp-6); }
.section      { padding:var(--sp-24) 0; }
.section-sm   { padding:var(--sp-16) 0; }
.pt-nav       { padding-top:var(--nav-h); }

/* -------- NAV -------- */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background var(--t-base),border-color var(--t-base),backdrop-filter var(--t-base);
  border-bottom:1px solid transparent;
}
.site-nav.scrolled {
  background:rgba(6,6,16,.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom-color:var(--border-faint);
}
.nav-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-6);
  width:100%; display:flex; align-items:center; gap:var(--sp-6);
}
.nav-logo { flex-shrink:0; height:38px; display:flex; align-items:center; }
.nav-logo img { height:100%; width:auto; }

.nav-links {
  display:flex; align-items:center; gap:var(--sp-1); flex:1;
}
.nav-item { position:relative; }

.nav-link {
  display:inline-flex; align-items:center; gap:5px;
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);
  font-size:.9rem; font-weight:500;
  color:var(--text-secondary);
  transition:color var(--t-fast),background var(--t-fast);
  white-space:nowrap;
}
.nav-link:hover,.nav-link.active { color:var(--text-primary); background:rgba(255,255,255,.04); }

.nav-chevron {
  font-size:.6rem; transition:transform var(--t-fast); display:inline-block; line-height:1;
}
.nav-item.open .nav-chevron { transform:rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position:absolute; top:calc(100% + 10px); left:50%;
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:var(--sp-3);
  min-width:270px;
  box-shadow:0 24px 60px rgba(0,0,0,.65),var(--gold-glow-sm);
  opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(-10px);
  transition:opacity var(--t-base),transform var(--t-base);
}
.nav-item.open .nav-dropdown {
  opacity:1; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.dd-link {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3);
  border-radius:var(--r-md);
  transition:background var(--t-fast);
}
.dd-link:hover { background:rgba(196,154,34,.07); }
.dd-icon {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:rgba(196,154,34,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; flex-shrink:0; margin-top:1px;
}
.dd-title { font-size:.85rem; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.dd-desc  { font-size:.73rem; color:var(--text-muted); line-height:1.4; }

.nav-actions {
  display:flex; align-items:center; gap:var(--sp-3); margin-left:auto; flex-shrink:0;
}
.nav-login {
  font-size:.875rem; font-weight:500; color:var(--text-secondary);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-sm);
  transition:color var(--t-fast);
}
.nav-login:hover { color:var(--text-primary); }

/* Mobile */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:var(--sp-2); margin-left:auto;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text-primary); border-radius:2px;
  transition:transform var(--t-base),opacity var(--t-base);
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-mobile-overlay {
  position:fixed; inset:0; background:var(--bg-base); z-index:998;
  padding:calc(var(--nav-h) + var(--sp-6)) var(--sp-6) var(--sp-8);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--t-slow);
  overflow-y:auto;
}
.nav-mobile-overlay.open { transform:translateX(0); }

.mob-nav-section { margin-bottom:var(--sp-6); }
.mob-nav-label {
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-500); padding:0 var(--sp-4); margin-bottom:var(--sp-2); display:block;
}
.mob-nav-link {
  display:block; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  font-size:.95rem; font-weight:500; color:var(--text-secondary);
  transition:color var(--t-fast),background var(--t-fast);
}
.mob-nav-link:hover { color:var(--text-primary); background:rgba(255,255,255,.03); }
.mob-nav-actions {
  margin-top:auto; display:flex; flex-direction:column; gap:var(--sp-3);
  padding-top:var(--sp-6); border-top:1px solid var(--border-faint);
}

/* -------- BUTTONS -------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6); border-radius:var(--r-full);
  font-family:var(--font-body); font-size:.9rem; font-weight:600;
  transition:all var(--t-base); white-space:nowrap; cursor:pointer;
}
.btn-lg { padding:var(--sp-4) var(--sp-8); font-size:1rem; }
.btn-full { width:100%; }

.btn-gold {
  background:linear-gradient(135deg,var(--gold-400) 0%,var(--gold-600) 100%);
  color:#070400;
  box-shadow:0 4px 20px rgba(196,154,34,.28);
}
.btn-gold:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 32px rgba(196,154,34,.42);
  filter:brightness(1.06);
}
.btn-gold:active { transform:translateY(0); }

.btn-ghost {
  border:1px solid var(--border-default); color:var(--text-primary); background:transparent;
}
.btn-ghost:hover {
  border-color:var(--border-strong); background:rgba(255,255,255,.03);
}

/* -------- SECTION LABEL -------- */
.section-label {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:3px var(--sp-4);
  border:1px solid var(--border-default); border-radius:var(--r-full);
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-400); background:rgba(196,154,34,.06); margin-bottom:var(--sp-5);
}

/* -------- HERO -------- */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + var(--sp-16)) var(--sp-6) var(--sp-20);
  text-align:center; overflow:hidden;
}

/* Concentric circles background */
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-rings {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:max(140vw,140vh); height:max(140vw,140vh);
}
.hero-rings circle {
  fill:none; stroke:rgba(196,154,34,.055); stroke-width:1;
  cx:50%; cy:50%;
}
.hero-rings circle:nth-child(1){ r:8%}
.hero-rings circle:nth-child(2){ r:14%}
.hero-rings circle:nth-child(3){ r:20%}
.hero-rings circle:nth-child(4){ r:27%}
.hero-rings circle:nth-child(5){ r:34%}
.hero-rings circle:nth-child(6){ r:41%}
.hero-rings circle:nth-child(7){ r:48%}
.hero-radial {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(ellipse 80% 60% at 50% -5%, rgba(196,154,34,.12) 0%,transparent 70%);
}
.hero-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 100% 80% at 50% 100%, var(--bg-base) 0%, transparent 60%);
}

.hero-content { position:relative; z-index:1; max-width:920px; }

.hero-badge {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:4px var(--sp-4) 4px var(--sp-3);
  border:1px solid var(--border-default); border-radius:var(--r-full);
  font-size:.75rem; font-weight:600; color:var(--gold-300);
  background:rgba(196,154,34,.06); margin-bottom:var(--sp-6);
  letter-spacing:.03em;
}
.badge-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--gold-400); animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.65)}
}

.hero-title { margin-bottom:var(--sp-6); }

.hero-subtitle {
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--text-secondary); line-height:1.72;
  max-width:660px; margin:0 auto var(--sp-10);
}
.hero-actions {
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-4); flex-wrap:wrap;
}

/* Metrics bar */
.hero-metrics {
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-10); margin-top:var(--sp-16); flex-wrap:wrap;
}
.metric { display:flex; flex-direction:column; align-items:center; gap:4px; }
.metric-value {
  font-family:var(--font-display); font-weight:800;
  font-size:2.4rem; letter-spacing:-.035em;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.metric-label { font-size:.8rem; color:var(--text-muted); font-weight:500; }
.metric-sep { width:1px; height:44px; background:var(--border-faint); }

/* -------- CARDS -------- */
.card {
  background:var(--bg-card); border:1px solid var(--border-faint);
  border-radius:var(--r-lg); padding:var(--sp-6);
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);
}
.card:hover {
  border-color:var(--border-subtle);
  box-shadow:0 12px 50px rgba(0,0,0,.45),var(--gold-glow-sm);
  transform:translateY(-3px);
}
.card-accent { border-left:3px solid var(--gold-500); }

.card-icon {
  width:46px; height:46px; border-radius:var(--r-md);
  background:rgba(196,154,34,.09); border:1px solid rgba(196,154,34,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; margin-bottom:var(--sp-4);
}
.card-title {
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; color:var(--text-primary); margin-bottom:var(--sp-2);
}
.card-desc { font-size:.88rem; color:var(--text-secondary); line-height:1.62; }

/* -------- GRIDS -------- */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-5); }

/* Split 2-col */
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center; }
.split.rev { direction:rtl; }
.split.rev > * { direction:ltr; }

/* -------- CHECKLIST -------- */
.check-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.check-item {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  font-size:.94rem; color:var(--text-secondary); line-height:1.5;
}
.check-item::before {
  content:'✓'; color:var(--gold-400); font-weight:700; flex-shrink:0; margin-top:1px;
}

/* -------- STEPS -------- */
.steps { display:flex; flex-direction:column; gap:var(--sp-8); }
.step { display:grid; grid-template-columns:64px 1fr; gap:var(--sp-5); align-items:start; }
.step-num {
  font-family:var(--font-display); font-weight:800;
  font-size:3.2rem; line-height:1; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(196,154,34,.28);
}
.step-title {
  font-family:var(--font-display); font-weight:700;
  font-size:1.15rem; margin-bottom:var(--sp-2); color:var(--text-primary);
}
.step-desc { font-size:.9rem; color:var(--text-secondary); line-height:1.65; }

/* -------- CTA SECTION -------- */
.cta-section { position:relative; text-align:center; padding:var(--sp-24) var(--sp-6); overflow:hidden; }
.cta-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(196,154,34,.08) 0%,transparent 70%);
}
.cta-box {
  position:relative; max-width:800px; margin:0 auto;
  padding:var(--sp-12) var(--sp-10);
  border:1px solid var(--border-default); border-radius:var(--r-2xl);
  background:rgba(11,11,26,.85); backdrop-filter:blur(20px);
}
.cta-box::before {
  content:''; position:absolute; inset:-1px; border-radius:calc(var(--r-2xl) + 1px);
  background:linear-gradient(135deg,rgba(196,154,34,.25) 0%,transparent 50%,rgba(196,154,34,.08) 100%);
  pointer-events:none; z-index:-1;
}
.cta-title {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.7rem,3.5vw,2.8rem); line-height:1.1; letter-spacing:-.02em;
  margin-bottom:var(--sp-4);
}
.cta-sub {
  font-size:1rem; color:var(--text-secondary); margin-bottom:var(--sp-8);
  max-width:540px; margin-left:auto; margin-right:auto; line-height:1.7;
}
.cta-actions {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-4); flex-wrap:wrap;
}

/* -------- FOOTER -------- */
.site-footer {
  border-top:1px solid var(--border-faint); padding:var(--sp-16) 0 var(--sp-8);
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-10);
  margin-bottom:var(--sp-12);
}
.footer-logo { height:32px; margin-bottom:var(--sp-4); }
.footer-tagline { font-size:.875rem; color:var(--text-muted); line-height:1.65; }
.footer-col-title {
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:var(--sp-4); display:block;
}
.footer-links { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-link { font-size:.875rem; color:var(--text-muted); transition:color var(--t-fast); }
.footer-link:hover { color:var(--text-primary); }
.footer-bottom {
  padding-top:var(--sp-6); border-top:1px solid var(--border-faint);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4);
}
.footer-copy { font-size:.78rem; color:var(--text-muted); }

/* -------- PRICING -------- */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); align-items:start; }
.pricing-card {
  background:var(--bg-card); border:1px solid var(--border-faint);
  border-radius:var(--r-xl); padding:var(--sp-8); position:relative;
  transition:all var(--t-base);
}
.pricing-card.featured {
  border-color:var(--border-default);
  background:var(--bg-elevated);
  box-shadow:var(--gold-glow-md);
  transform:scale(1.02);
}
.pricing-card.featured::after {
  content:''; position:absolute; inset:-1px; border-radius:calc(var(--r-xl) + 1px);
  background:linear-gradient(160deg,rgba(196,154,34,.3) 0%,transparent 45%,rgba(196,154,34,.08) 100%);
  pointer-events:none; z-index:-1;
}
.pricing-tag {
  display:inline-flex; padding:2px var(--sp-3);
  background:rgba(196,154,34,.14); border:1px solid rgba(196,154,34,.28);
  border-radius:var(--r-full); font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-300); margin-bottom:var(--sp-4);
}
.pricing-name {
  font-family:var(--font-display); font-size:1.25rem; font-weight:700; margin-bottom:var(--sp-2);
}
.pricing-plan-desc { font-size:.85rem; color:var(--text-muted); margin-bottom:var(--sp-6); line-height:1.5; }
.pricing-price {
  display:flex; align-items:baseline; gap:4px; margin-bottom:var(--sp-6);
}
.pricing-currency { font-size:1.1rem; font-weight:600; color:var(--gold-400); }
.pricing-amount {
  font-family:var(--font-display); font-size:2.8rem; font-weight:800;
  letter-spacing:-.04em; color:var(--text-primary);
}
.pricing-period { font-size:.85rem; color:var(--text-muted); }
.pricing-features { display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-8); }
.pricing-feature {
  display:flex; align-items:center; gap:var(--sp-3);
  font-size:.85rem; color:var(--text-secondary);
}
.pricing-check {
  width:18px; height:18px; border-radius:50%;
  background:rgba(196,154,34,.12); display:flex; align-items:center;
  justify-content:center; font-size:.68rem; color:var(--gold-400); flex-shrink:0;
}

/* FAQ */
.faq-item {
  border-bottom:1px solid var(--border-faint); padding:var(--sp-6) 0;
}
.faq-question {
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--text-primary); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
}
.faq-arrow { color:var(--gold-400); font-size:.8rem; flex-shrink:0; transition:transform var(--t-base); }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-answer {
  font-size:.92rem; color:var(--text-secondary); line-height:1.7;
  max-height:0; overflow:hidden; transition:max-height var(--t-slow),padding var(--t-base);
  padding-top:0;
}
.faq-item.open .faq-answer { max-height:300px; padding-top:var(--sp-4); }

/* -------- PAGE HERO (inner) -------- */
.page-hero {
  padding:calc(var(--nav-h) + var(--sp-20)) 0 var(--sp-16);
  text-align:center; position:relative; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(196,154,34,.1) 0%,transparent 70%);
}
.page-hero-content { position:relative; z-index:1; }

/* -------- SCROLL ANIMATIONS -------- */
[data-anim] {
  opacity:0; transform:translateY(28px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1);
}
[data-anim].in { opacity:1; transform:translateY(0); }
[data-anim-d="1"]{transition-delay:.08s}
[data-anim-d="2"]{transition-delay:.16s}
[data-anim-d="3"]{transition-delay:.24s}
[data-anim-d="4"]{transition-delay:.32s}
[data-anim-d="5"]{transition-delay:.42s}
[data-anim-d="6"]{transition-delay:.52s}

/* -------- PLATFORM MOCKUP -------- */
.mockup {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 50px 120px rgba(0,0,0,.65),var(--gold-glow-md);
  max-width:900px; margin:0 auto;
}
.mockup-bar {
  background:var(--bg-raised); border-bottom:1px solid var(--border-faint);
  padding:var(--sp-3) var(--sp-5); display:flex; align-items:center; gap:var(--sp-2);
}
.m-dot { width:11px; height:11px; border-radius:50%; }
.m-dot:nth-child(1){background:#FF5F57} .m-dot:nth-child(2){background:#FFBD2E} .m-dot:nth-child(3){background:#28CA41}
.mockup-url {
  flex:1; background:rgba(255,255,255,.04); border-radius:var(--r-full);
  height:26px; margin:0 auto; max-width:320px; display:flex; align-items:center;
  justify-content:center; font-size:.72rem; color:var(--text-muted);
}
.mockup-body { padding:var(--sp-6); }

/* Mock dashboard inside mockup */
.mock-dash { display:grid; grid-template-columns:200px 1fr; gap:var(--sp-4); height:340px; }
.mock-sidebar {
  background:var(--bg-raised); border-radius:var(--r-md); border:1px solid var(--border-faint);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
}
.mock-menu-item {
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  font-size:.75rem; color:var(--text-muted); transition:all var(--t-fast);
}
.mock-menu-item.active {
  background:rgba(196,154,34,.1); color:var(--gold-400); font-weight:600;
}
.mock-main { display:flex; flex-direction:column; gap:var(--sp-4); overflow:hidden; }
.mock-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.mock-stat {
  background:var(--bg-raised); border-radius:var(--r-md); border:1px solid var(--border-faint);
  padding:var(--sp-3) var(--sp-4);
}
.mock-stat-val {
  font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  letter-spacing:-.03em; margin-bottom:2px;
}
.mock-stat-val.gold { background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mock-stat-label { font-size:.7rem; color:var(--text-muted); }
.mock-pipeline { flex:1; background:var(--bg-raised); border-radius:var(--r-md); border:1px solid var(--border-faint); padding:var(--sp-4); overflow:hidden; }
.mock-pipeline-title { font-size:.72rem; color:var(--text-muted); margin-bottom:var(--sp-3); text-transform:uppercase; letter-spacing:.07em; }
.mock-pipeline-cols { display:flex; gap:var(--sp-3); height:calc(100% - 24px); }
.mock-col { flex:1; display:flex; flex-direction:column; gap:var(--sp-2); }
.mock-col-head {
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--sp-1); padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--border-faint);
}
.mock-card {
  background:var(--bg-card); border:1px solid var(--border-faint);
  border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3);
  font-size:.72rem; color:var(--text-secondary);
}
.mock-card .dot { width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:4px; }

/* Marquee */
.marquee-section { padding:var(--sp-12) 0; border-top:1px solid var(--border-faint); border-bottom:1px solid var(--border-faint); overflow:hidden; }
.marquee-track { display:flex; gap:var(--sp-10); animation:marquee 28s linear infinite; width:max-content; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item {
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; transition:color var(--t-fast);
  display:flex; align-items:center; gap:var(--sp-3);
}
.marquee-item:hover { color:var(--text-secondary); }
.marquee-sep { color:var(--gold-500); font-size:.8rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Table comparison */
.compare-table { width:100%; border-collapse:separate; border-spacing:0; }
.compare-table th,.compare-table td {
  padding:var(--sp-4); border-bottom:1px solid var(--border-faint);
  font-size:.875rem; text-align:center;
}
.compare-table th:first-child,.compare-table td:first-child { text-align:left; color:var(--text-secondary); }
.compare-table thead th {
  font-family:var(--font-display); font-weight:700; color:var(--text-primary);
  font-size:.9rem; border-bottom:2px solid var(--border-subtle);
}
.compare-table thead th.featured-col { color:var(--gold-400); }
.compare-table tbody tr:hover td { background:rgba(255,255,255,.01); }
.compare-table .yes { color:var(--gold-400); font-size:1rem; }
.compare-table .no { color:var(--text-muted); }

/* Glow divider */
.glow-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,154,34,.3),transparent);
  border:none; margin:0;
}

/* Page hero label w/ icon */
.page-hero-tags {
  display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap;
  margin-bottom:var(--sp-6);
}
.page-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px var(--sp-3);
  border:1px solid var(--border-subtle); border-radius:var(--r-full);
  font-size:.73rem; font-weight:600; color:var(--text-muted); background:rgba(255,255,255,.02);
}

/* Grid 2 que permanece 2 colunas no mobile (cards compactos) */
.grid-2-keep { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }

/* -------- UTILITIES -------- */
.gap-2{gap:var(--sp-2)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)} .mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.mb-10{margin-bottom:var(--sp-10)} .mb-12{margin-bottom:var(--sp-12)}
.flex{display:flex} .flex-col{flex-direction:column}
.items-center{align-items:center} .justify-center{justify-content:center}
.flex-wrap{flex-wrap:wrap}
.relative{position:relative}

/* -------- RESPONSIVE -------- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .pricing-card.featured{transform:none}
  .split{grid-template-columns:1fr;gap:var(--sp-10)}
  .split.rev{direction:ltr}
  .mock-dash{height:auto;grid-template-columns:1fr}
  .mock-sidebar{display:none}
}

@media(max-width:768px){
  :root{--nav-h:62px;--sp-24:56px;--sp-20:44px;--sp-16:36px}

  /* Nav */
  .nav-links,.nav-actions{display:none}
  .nav-hamburger{display:flex}

  /* Grids: grid-3 → 1col; grid-4 stays 2col (not 1) */
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .footer-bottom{flex-direction:column;text-align:center;gap:var(--sp-3)}

  /* Hero */
  .hero{padding-left:var(--sp-5);padding-right:var(--sp-5);min-height:unset}
  .hero-badge{white-space:normal;justify-content:center;text-align:center}
  .hero-title br,.t-h1 br,.t-h2 br,.cta-title br{display:none}
  .hero-subtitle{font-size:.97rem;margin-bottom:var(--sp-8)}
  .hero-metrics{gap:var(--sp-4);margin-top:var(--sp-10)}
  .metric-value{font-size:1.85rem}
  .metric-sep{display:none}

  /* Mockup dashboard */
  .mockup-body{padding:var(--sp-3)}
  .mock-dash{gap:var(--sp-3)}
  .mock-stats{grid-template-columns:1fr 1fr}
  .mock-stats .mock-stat:last-child{grid-column:1/-1}
  .mock-pipeline{height:190px}
  .mock-pipeline-cols{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--sp-2)}
  .mock-col{min-width:72px;flex-shrink:0}

  /* Cards */
  .card{padding:var(--sp-5)}

  /* Steps */
  .step{grid-template-columns:48px 1fr;gap:var(--sp-3)}
  .step-num{font-size:2.4rem}

  /* CTA */
  .cta-box{padding:var(--sp-8) var(--sp-6)}

  /* Section spacing */
  .section{padding:var(--sp-16) 0}
  .section-sm{padding:var(--sp-12) 0}
}

@media(max-width:480px){
  .container,.container-sm{padding:0 var(--sp-4)}

  /* Hero */
  .hero{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .metric-value{font-size:1.55rem}
  .metric-label{font-size:.72rem}

  /* Grid-4 stays 2col even on very small screens */
  .grid-4{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}

  /* Cards */
  .card{padding:var(--sp-4)}

  /* Steps */
  .step{grid-template-columns:40px 1fr;gap:var(--sp-3)}
  .step-num{font-size:2rem}

  /* CTA box */
  .cta-box{padding:var(--sp-6) var(--sp-4);border-radius:var(--r-xl)}
  .cta-title{font-size:clamp(1.5rem,6vw,2rem)}
  .cta-sub{font-size:.92rem}

  /* Section label */
  .section-label{font-size:.68rem}

  /* Pricing */
  .pricing-grid{max-width:100%}
  .pricing-card{padding:var(--sp-6)}
  .pricing-amount{font-size:2.4rem}

  /* Mock pipeline column min-width */
  .mock-col{min-width:68px}
  .mock-pipeline{height:160px}

  /* Page hero */
  .page-hero{padding-top:calc(var(--nav-h) + var(--sp-12));padding-bottom:var(--sp-10)}
}