/* ═══════════════════════════════════════════════════════════════════
   EXTRAWEB — MAIN.CSS
   Design tokens, reset, base components, nav, footer, utilities
═══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  --c-purple: #7C3AED; --c-violet: #8B5CF6; --c-pink: #EC4899;
  --c-orange: #F97316; --c-cyan: #06B6D4;  --c-teal: #14B8A6;
  --c-lime: #84CC16;   --c-amber: #F59E0B; --c-green: #22C55E;
  --c-red: #EF4444;

  --g-brand: linear-gradient(135deg,#7C3AED,#EC4899);
  --g-warm:  linear-gradient(135deg,#F97316,#F59E0B);
  --g-cool:  linear-gradient(135deg,#06B6D4,#14B8A6);
  --g-punch: linear-gradient(135deg,#EC4899,#F97316);
  --g-full:  linear-gradient(135deg,#7C3AED 0%,#EC4899 40%,#F97316 70%,#F59E0B 100%);

  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px;

  --nav-h: 68px;
  --section-y: 96px;
  --page-x: clamp(20px, 5%, 64px);
  --max-w: 1280px;

  --transition: .25s cubic-bezier(.23,1,.32,1);
  --transition-slow: .45s cubic-bezier(.23,1,.32,1);
}

/* ── DARK MODE ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:      #060612; --bg-2: #0B0B20; --bg-3: #0F0F2A;
  --surface: #13132E; --surface-2: #18184A;
  --border:  rgba(255,255,255,.07); --border-2: rgba(255,255,255,.12);
  --text-1:  #FFFFFF; --text-2: rgba(255,255,255,.72);
  --text-3:  rgba(255,255,255,.42); --text-4: rgba(255,255,255,.22);
  --nav-bg:  rgba(6,6,18,.82); --orb-op: .14;
  --input-bg: rgba(255,255,255,.04);
  --scrollbar-track: rgba(255,255,255,.04);
  --scrollbar-thumb: rgba(255,255,255,.15);
}

/* ── LIGHT MODE ─────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:      #F7F7FE; --bg-2: #EEEEFF; --bg-3: #E8E8FF;
  --surface: #FFFFFF; --surface-2: #F2F2FF;
  --border:  rgba(0,0,0,.06); --border-2: rgba(0,0,0,.1);
  --text-1:  #09090F; --text-2: rgba(9,9,15,.65);
  --text-3:  rgba(9,9,15,.42); --text-4: rgba(9,9,15,.22);
  --nav-bg:  rgba(247,247,254,.9); --orb-op: .06;
  --input-bg: rgba(0,0,0,.03);
  --scrollbar-track: rgba(0,0,0,.04);
  --scrollbar-thumb: rgba(0,0,0,.15);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg); color: var(--text-1);
  overflow-x: hidden; line-height: 1.6;
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
img  { max-width:100%; display:block; }
input, textarea, select { font-family:inherit; }
ul,ol { list-style:none; }

/* ── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:99px; }

/* ── AMBIENT MESH ───────────────────────────────────────────────── */
.mesh {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.orb {
  position:absolute; border-radius:50%;
  filter:blur(130px); opacity:var(--orb-op);
  will-change:transform; transition:opacity .5s;
}
.o1{width:800px;height:800px;background:#7C3AED;top:-250px;left:-150px;animation:o1 22s ease-in-out infinite;}
.o2{width:600px;height:600px;background:#EC4899;top:25vh;right:-120px;animation:o2 28s ease-in-out infinite;}
.o3{width:500px;height:500px;background:#06B6D4;bottom:5vh;left:10vw;animation:o3 20s ease-in-out infinite;}
.o4{width:380px;height:380px;background:#F97316;bottom:-80px;right:15vw;animation:o1 24s ease-in-out infinite 7s;}
@keyframes o1{0%,100%{transform:translate(0,0)} 30%{transform:translate(70px,-50px)} 70%{transform:translate(-45px,70px)}}
@keyframes o2{0%,100%{transform:translate(0,0)} 40%{transform:translate(-80px,45px)} 75%{transform:translate(55px,-65px)}}
@keyframes o3{0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-45px) scale(1.08)}}

/* ── GRAIN OVERLAY ──────────────────────────────────────────────── */
body::after {
  content:''; position:fixed; inset:0; z-index:9997;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.03; mix-blend-mode:overlay; transition:opacity .35s;
}

/* ── SCROLL PROGRESS ────────────────────────────────────────────── */
.pbar { position:fixed; top:0; left:0; height:2px; z-index:9999; background:var(--g-full); width:0; transition:width .1s; }

/* ══════════════════════════════════════════════════════
   MOBILE NAV
══════════════════════════════════════════════════════ */
.m-nav {
  display: none !important; position: fixed; inset: 0; z-index: 300;
  background: var(--bg); backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
.m-nav.open { display: flex !important; }
.m-nav a {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 700;
  color: var(--text-2);  transition: color .2s;
}
.m-nav a:hover { color: var(--text-1); }
.m-close { position: absolute; top: 22px; right: 24px; font-size: 1.5rem; color: var(--text-3); cursor: pointer; transition: color .2s; padding: 8px; }
.m-close:hover { color: var(--text-1); }

.m-tog {
    display: none !important;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    margin-left: 4px;
}

.m-tog {
    display: flex !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════════════ */

.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:0 var(--page-x);
  background:var(--nav-bg);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border-bottom:1px solid var(--border);
  transition:background .35s, border-color .35s;
}
.nav-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; height:var(--nav-h);
}
.logo {
  display:flex; align-items:center; gap:10px;
  font-family:'Clash Display','General Sans',sans-serif;
  font-weight:700; font-size:1.3rem;
  flex-shrink:0; margin-right:48px;
}
.logo-mark {
  width:32px; height:32px; border-radius:9px;
  background:var(--g-brand); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; color:#fff;
  box-shadow:0 4px 18px rgba(124,58,237,.45);
}
.logo-text {
  background:var(--g-full); background-size:300%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:gradShift 7s ease-in-out infinite;
}

h1, h2, h3, h4, h5, h6{
        word-spacing: 8px;
}
@keyframes gradShift{0%,100%{background-position:0%}50%{background-position:100%}}

.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-2);
    padding: 7px 14px;
    border-radius: 9px;
    transition: color .2s, background .2s;
}
.nav-links a:hover { color:var(--text-1); background:rgba(124,58,237,.08); }
.nav-links a.active { color:var(--text-1); }

.nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* Theme toggle */
.theme-toggle {
  width:46px; height:26px; border-radius:100px; position:relative;
  background:rgba(124,58,237,.18); border:1px solid rgba(124,58,237,.28);
  cursor:pointer; transition:all .3s; flex-shrink:0;
}
[data-theme="light"] .theme-toggle { background:rgba(249,115,22,.15); border-color:rgba(249,115,22,.25); }
.toggle-knob {
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#A78BFA; transition:transform .3s, background .3s;
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem; line-height:1;
}
[data-theme="light"] .toggle-knob { transform:translateX(20px); background:#F97316; }

.ham { display:none !important; flex-direction:column; gap:5px; padding:8px; margin-left:4px; }
.ham span { display:block; width:22px; height:1.5px; background:var(--text-3); border-radius:2px; transition:.3s; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY
═══════════════════════════════════════════════════════════════════ */
.mob-nav {
  display:none !important; position:fixed; inset:0; z-index:300;
  background:var(--bg); backdrop-filter:blur(20px);
  flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.mob-nav.open { display:flex !important; }
.mob-nav a {
  font-family:'Clash Display','General Sans',sans-serif;
  font-size:clamp(1.8rem,5vw,2.4rem); font-weight:700;
  color:var(--text-2); transition:color .2s;
}
.mob-nav a:hover { color:var(--text-1); }
.mob-nav .btn { margin-top:8px; }
.mob-close {
  position:absolute; top:22px; right:24px;
  font-size:1.5rem; color:var(--text-3); cursor:pointer;
  padding:8px; transition:color .2s; border-radius:8px;
  line-height:1;
}
.mob-close:hover { color:var(--text-1); background:var(--surface-2); }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    font-family: 'General Sans', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all .25s cubic-bezier(.23,1,.32,1);
    cursor: pointer;
}
.btn-pill  { border-radius:var(--r-full); }
.btn-sm    { padding:8px 16px; font-size:.8rem; }
.btn-lg {
    padding: 15px 36px;
    font-size: 1rem;
}
.btn-full  { width:100%; justify-content:center; }

.btn-primary {
  background:var(--g-brand); color:#fff;
  box-shadow:0 4px 20px rgba(124,58,237,.38), 0 0 0 1px rgba(124,58,237,.22);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(124,58,237,.52); }

.btn-outline {
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border-2);
    position: relative;
    overflow: hidden;
}
.btn-outline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--g-brand);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}
.btn-outline:hover { color:#fff; border-color:transparent; transform:translateY(-2px); }
.btn-outline:hover::before { opacity:1; }
.btn-outline span { position:relative; z-index:1; }

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border-2);
}
.btn-ghost:hover { color:var(--text-1); background:var(--surface-2); }

.btn-danger { background:rgba(239,68,68,.12); color:#EF4444; border:1px solid rgba(239,68,68,.2); }
.btn-danger:hover { background:rgba(239,68,68,.18); }

.btn-success { background:rgba(34,197,94,.12); color:#22C55E; border:1px solid rgba(34,197,94,.2); }
.btn-success:hover { background:rgba(34,197,94,.18); }

/* ═══════════════════════════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-label { font-size:.82rem; font-weight:600; color:var(--text-2); }
.form-hint  { font-size:.76rem; color:var(--text-3); }
.form-error { font-size:.76rem; color:#EF4444; }

.input, .textarea, .select {
  background:var(--input-bg); border:1.5px solid var(--border-2);
  border-radius:var(--r-md); padding:11px 16px;
  font-family:'General Sans',sans-serif;
  font-size:.9rem; font-weight:500; color:var(--text-1);
  width:100%; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input::placeholder, .textarea::placeholder { color:var(--text-4); font-weight:400; }
.input:focus, .textarea:focus, .select:focus {
  border-color:rgba(124,58,237,.5);
  box-shadow:0 0 0 4px rgba(124,58,237,.1);
}
.input.error { border-color:rgba(239,68,68,.5); }
.input.error:focus { box-shadow:0 0 0 4px rgba(239,68,68,.1); }
.input.success { border-color:rgba(34,197,94,.5); }

.textarea { resize:vertical; min-height:120px; line-height:1.6; }
.select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }

/* Checkbox / Radio */
.checkbox-wrap { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.checkbox-wrap input[type="checkbox"],
.checkbox-wrap input[type="radio"] {
  width:18px; height:18px; flex-shrink:0; border-radius:5px;
  border:1.5px solid var(--border-2); background:var(--input-bg);
  cursor:pointer; accent-color:var(--c-purple);
  margin-top:1px;
}
.checkbox-label { font-size:.875rem; color:var(--text-2); line-height:1.5; }

/* Divider with text */
.divider-text {
  display:flex; align-items:center; gap:12px;
  font-size:.78rem; color:var(--text-4);
}
.divider-text::before, .divider-text::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════════ */
.section { padding:var(--section-y) var(--page-x); position:relative; z-index:1; }
.section-alt { background:rgba(124,58,237,.025); }
[data-theme="light"] .section-alt { background:rgba(124,58,237,.02); }
.w { max-width:var(--max-w); margin:0 auto; }
.w-sm { max-width:680px; margin:0 auto; }
.w-xs { max-width:480px; margin:0 auto; }

.section-header { margin-bottom:60px; }
.section-header.center { text-align:center; }
.section-header.center .section-desc { margin:0 auto; }

/* Grid helpers */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* Flex helpers */
.flex     { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.items-center { align-items:center; }
.gap-2  { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; }
.gap-6  { gap:24px; } .gap-8 { gap:32px; }
.ml-auto{ margin-left:auto; }
.text-center { text-align:center; }

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════════════ */
.display-1 {
  font-family:'Clash Display','General Sans',sans-serif;
  font-size:clamp(3rem,8vw,7.5rem);
  font-weight:700; line-height:.96;
}
.heading-1 {
  font-family:'Clash Display','General Sans',sans-serif;
  font-size:clamp(2.2rem,4.2vw,3.6rem);
  font-weight:700; line-height:1.06;
}
.heading-2 {
  font-family:'Clash Display','General Sans',sans-serif;
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:700;
}
.heading-3 {
  font-family:'Clash Display','General Sans',sans-serif;
  font-size:1.2rem; font-weight:700;
}
.body-lg  { font-size:1.05rem; font-weight:300; line-height:1.85; }
.body-md  { font-size:.9rem;   line-height:1.75; }
.body-sm  { font-size:.82rem;  line-height:1.7; }
.caption  { font-size:.74rem;  color:var(--text-3); }

.grad {
    background: var(--g-full);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradShift 6s ease-in-out infinite;
}

.grad-text {
  background:var(--g-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.grad-text-full {
  background:var(--g-full); background-size:300%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:gradShift 7s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   TAGS / BADGES
═══════════════════════════════════════════════════════════════════ */
.s-tag {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:var(--r-full);
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;margin-bottom: 20px;
}
.st-p { background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.22); color:#A78BFA; }
.st-k { background:rgba(236,72,153,.1); border:1px solid rgba(236,72,153,.2);  color:#F472B6; }
.st-c { background:rgba(6,182,212,.1);  border:1px solid rgba(6,182,212,.2);   color:#22D3EE; }
.st-o { background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.2);  color:#FB923C; }
.st-l { background:rgba(132,204,22,.1); border:1px solid rgba(132,204,22,.2);  color:#A3E635; }
.st-t { background:rgba(20,184,166,.1); border:1px solid rgba(20,184,166,.2);  color:#2DD4BF; }
.st-r { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.2);   color:#F87171; }

.badge { font-size:.62rem; font-weight:700; padding:3px 9px; border-radius:var(--r-full); }
.b-free { background:rgba(132,204,22,.1); border:1px solid rgba(132,204,22,.2); color:#A3E635; }
.b-pro  { background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.2); color:#A78BFA; }
.b-new  { background:var(--g-brand); color:#fff; }

/* ═══════════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════════ */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:32px;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card-hover:hover { transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.12); }
.card-sm { padding:20px 24px; }
.card-lg { padding:44px; }

/* ═══════════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════════ */
.alert {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 18px; border-radius:var(--r-md);
  font-size:.875rem; line-height:1.5;
}
.alert-success { background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.2);  color:var(--text-2); }
.alert-error   { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.2);  color:var(--text-2); }
.alert-warning { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); color:var(--text-2); }
.alert-info    { background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2); color:var(--text-2); }
.alert-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE HEADER (inner pages)
═══════════════════════════════════════════════════════════════════ */
.page-hero {
  padding:calc(var(--nav-h) + 72px) var(--page-x) 72px;
  position:relative; z-index:1; text-align:center;
}
.page-hero h1 { margin:12px 0 20px; }
.page-hero p  { margin:0 auto; max-width:560px; }


/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.footer {
  padding: 80px clamp(20px,5%,60px) 40px;
  background: var(--bg-2); border-top: 1px solid var(--border);
  position: relative; z-index: 1; transition: background .35s, border-color .35s;
}
.footer-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: 64px; margin-bottom: 64px;
}
.f-brand .logo { margin-bottom: 16px; }
.f-brand p {
    font-size: .9rem;
    color: var(--text-2);
    line-height: 1.85;
    max-width: 270px;
    font-weight: 400;
}
.f-col h4 {
    font-family: 'Clash Display', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 20px;
}
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.f-col ul li a {
    font-size: .875rem;
    color: var(--text-3);
    transition: color .18s;
    font-weight: 500;
}
.f-col ul li a:hover { color: var(--text-1); }
.footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    border-top: 1px solid var(--border-2);
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.f-copy {
    font-size: .8rem;
    color: var(--text-2);
    font-weight: 500;
}
.f-lns  { display: flex; gap: 20px; }
.f-lns a {
    font-size: .8rem;
    color: var(--text-2);
    transition: color .18s;
}
.f-lns a:hover { color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════════════ */
.rv { opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; }
.rv.in { opacity:1; transform:none; }
.d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}
.d4{transition-delay:.28s} .d5{transition-delay:.35s} .d6{transition-delay:.42s}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES
═══════════════════════════════════════════════════════════════════ */
.auth-page {
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:80px var(--page-x) 40px; position:relative; z-index:1;
}
.auth-card {
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-2xl); padding:48px 44px;
  width:100%; max-width:460px;
  box-shadow:0 40px 80px rgba(0,0,0,.14), 0 0 0 1px rgba(124,58,237,.06);
  position:relative; overflow:hidden;
}
.auth-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--g-full);
}
.auth-logo { display:flex; justify-content:center; margin-bottom:32px; }
.auth-title { font-family:'Clash Display',sans-serif; font-size:1.8rem; font-weight:700; color:var(--text-1); margin-bottom:8px; text-align:center; }
.auth-sub   { font-size:.875rem; color:var(--text-3); text-align:center; margin-bottom:32px; }
.auth-form  { display:flex; flex-direction:column; gap:20px; }
.auth-footer { text-align:center; margin-top:24px; font-size:.84rem; color:var(--text-3); }
.auth-footer a { color:#A78BFA; font-weight:600; }
.auth-footer a:hover { text-decoration:underline; }
.auth-divider { margin:24px 0; }

/* Social buttons */
.social-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px; border-radius:var(--r-md);
  background:var(--input-bg); border:1.5px solid var(--border-2);
  font-size:.875rem; font-weight:600; color:var(--text-2);
  transition:all .2s; cursor:pointer;
}
.social-btn:hover { border-color:var(--c-violet); color:var(--text-1); }
.social-btns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ═══════════════════════════════════════════════════════════════════
   SECTION TITLE COMPONENT
═══════════════════════════════════════════════════════════════════ */
.section-title {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;line-height:1.06; 
  color:var(--text-1); margin-bottom:18px;
}
.section-title .grad { background:var(--g-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.section-desc { font-size:1rem; font-weight:300; color:var(--text-3); line-height:1.85; max-width:540px; }

/* ═══════════════════════════════════════════════════════════════════
   PRICING CARDS
═══════════════════════════════════════════════════════════════════ */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.price-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:40px 36px;
  transition:transform var(--transition-slow); position:relative; overflow:hidden;
}
.price-card:hover { transform:translateY(-6px); }
.price-card.featured {
  background:linear-gradient(160deg,rgba(124,58,237,.1),rgba(236,72,153,.05));
  border-color:rgba(124,58,237,.32);
  box-shadow:0 0 0 1px rgba(124,58,237,.14),0 44px 80px rgba(124,58,237,.1);
  transform:scale(1.03);
}
.price-card.featured:hover { transform:scale(1.03) translateY(-6px); }
.price-card.featured::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% -5%,rgba(124,58,237,.12),transparent 52%);
  pointer-events:none;
}
.popular-pill {
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  background:var(--g-brand); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.05em;
  padding:5px 18px; border-radius:0 0 11px 11px; white-space:nowrap;
}
.pc-tier { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.pc-price {
  font-family:'Clash Display',sans-serif;
  font-size:4rem; font-weight:700;
  color:var(--text-1); line-height:1; display:flex; align-items:flex-start; gap:4px;
}
.pc-sym { font-size:1.4rem; margin-top:8px; font-weight:600; }
.pc-billing { font-size:.84rem; color:var(--text-3); margin-top:12px; margin-bottom:28px; }
.pc-line  { height:1px; background:var(--border); margin:28px 0; }
.pc-list  { list-style:none; display:flex; flex-direction:column; gap:13px; }
.pc-list li { font-size:.875rem; color:var(--text-2); display:flex; align-items:flex-start; gap:10px; line-height:1.55; }
.pc-yes { color:#A3E635; font-weight:700; flex-shrink:0; }
.pc-no  { color:var(--text-4); flex-shrink:0; }
.pc-off { opacity:.32; text-decoration:line-through; }
.pc-btn {
  width:100%; margin-top:32px; padding:14px;
  border-radius:var(--r-md);
  font-family:'Clash Display',sans-serif;
  font-size:.95rem; font-weight:700; cursor:pointer;
  transition:all .3s; border:none;
}
.pcb-ghost { background:var(--surface-2); border:1.5px solid var(--border-2); color:var(--text-2); }
.pcb-ghost:hover { background:var(--surface); color:var(--text-1); transform:translateY(-1px); }
.pcb-main { background:var(--g-brand); color:#fff; box-shadow:0 6px 22px rgba(124,58,237,.32); }
.pcb-main:hover { box-shadow:0 10px 38px rgba(124,58,237,.5); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIAL CARDS
═══════════════════════════════════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:36px 32px;
  transition:transform var(--transition); position:relative; overflow:hidden;
}
.testi:hover { transform:translateY(-4px); }
.testi::before {
  content:'"'; position:absolute; top:-14px; right:24px;
  font-family:'Clash Display',sans-serif;
  font-size:9rem; font-weight:700; line-height:1;
  opacity:.035; color:var(--text-1); pointer-events:none;
}
.t-stars { display:flex; gap:3px; margin-bottom:16px; }
.star { color:#F59E0B; font-size:.85rem; }
.t-quote { font-family:'Clash Display',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text-1); line-height:1.4; margin-bottom:15px; }
.t-body  { font-size:.875rem; color:var(--text-3); line-height:1.78; margin-bottom:24px; font-weight:300; }
.t-author { display:flex; align-items:center; gap:13px; }
.t-av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Clash Display',sans-serif; font-weight:700; font-size:.88rem; color:#fff; flex-shrink:0; }
.t-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-1);
}
.t-role {
    font-size: .73rem;
    color: var(--text-2);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════════════ */
.faq-item {
  border-bottom:1px solid var(--border);
  padding:20px 0;
}
.faq-q {
  font-family:'Clash Display',sans-serif;
  font-size:1rem; font-weight:700;
  color:var(--text-1); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:4px 0;
  user-select:none;
}
.faq-arrow { font-size:1.1rem; color:var(--text-3); transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-arrow { transform:rotate(45deg); }
.faq-a {
  font-size:.9rem; color:var(--text-3); line-height:1.8;
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s;
}
.faq-item.open .faq-a { max-height:300px; padding-top:14px; }

/* ═══════════════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════════════ */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; color:var(--text-3);
  flex-wrap:wrap;
}
.breadcrumb a { color:var(--text-3); transition:color .18s; }
.breadcrumb a:hover { color:var(--text-1); }
.breadcrumb .sep { opacity:.4; }
.breadcrumb .current { color:var(--text-1); font-weight:500; }

/* ═══════════════════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; border-radius:var(--r-xl); border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  background:rgba(124,58,237,.06); padding:13px 18px;
  text-align:left; font-size:.75rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.data-table td {
  padding:14px 18px; font-size:.875rem; color:var(--text-2);
  border-bottom:1px solid var(--border);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(124,58,237,.03); }

/* ═══════════════════════════════════════════════════════════════════
   STATUS PILLS
═══════════════════════════════════════════════════════════════════ */
.status { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; padding:3px 10px; border-radius:var(--r-full); }
.status::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.status-success { background:rgba(34,197,94,.1);  color:#4ADE80; }
.status-success::before { background:#4ADE80; }
.status-pending { background:rgba(245,158,11,.1); color:#FBBF24; }
.status-pending::before { background:#FBBF24; }
.status-failed  { background:rgba(239,68,68,.1);  color:#F87171; }
.status-failed::before  { background:#F87171; }