/* ═══════════════════════════════════════════════════════════════
   TEARN — Main Stylesheet  |  Dark Futuristic Purple Theme
   tearnapp.com
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ─── Design Tokens ──────────────────────────────────────────── */
:root {
  --bg-base:    #07070e;
  --bg-surface: #0b0b18;
  --bg-card:    #10101f;
  --bg-card-hi: #15152a;

  --p950: #12063a; --p900: #1e0b52; --p800: #2e1065;
  --p700: #4c1d95; --p600: #6d28d9; --p500: #7c3aed;
  --p400: #8b5cf6; --p300: #a78bfa; --p200: #c4b5fd;
  --p100: #ede9fe; --p50:  #f5f3ff;

  --fuchsia: #d946ef;
  --fuchsia-dim: rgba(217,70,239,.25);

  --t100: #f0f0ff; --t200: #d4d4e8;
  --t400: #8888a2; --t600: #54546a;

  --border-xs: rgba(139,92,246,.08);
  --border-sm: rgba(139,92,246,.15);
  --border-md: rgba(139,92,246,.30);
  --border-lg: rgba(139,92,246,.55);

  --glow-xs: 0 0 12px rgba(139,92,246,.20);
  --glow-sm: 0 0 28px rgba(139,92,246,.35);
  --glow-md: 0 0 55px rgba(139,92,246,.45);
  --glow-lg: 0 0 100px rgba(139,92,246,.55);

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .25s;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg-base);
  color:var(--t100);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--p300);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--p100)}
img,svg{display:block;max-width:100%}
input,button,textarea{font-family:inherit}
button{cursor:pointer}

/* ─── Ambient Background ─────────────────────────────────────── */
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px)}
.orb-1{width:700px;height:700px;background:radial-gradient(circle,#6d28d9 0%,transparent 70%);
  top:-250px;left:-200px;opacity:.13;animation:orbA 22s ease-in-out infinite}
.orb-2{width:550px;height:550px;background:radial-gradient(circle,#d946ef 0%,transparent 70%);
  top:35%;right:-180px;opacity:.10;animation:orbB 28s ease-in-out infinite}
.orb-3{width:800px;height:800px;background:radial-gradient(circle,#4c1d95 0%,transparent 70%);
  bottom:-350px;left:15%;opacity:.11;animation:orbC 34s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,-70px) scale(1.1)}66%{transform:translate(-30px,40px) scale(.94)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-60px,50px) scale(1.08)}70%{transform:translate(30px,-30px) scale(.96)}}
@keyframes orbC{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(40px,60px) scale(1.05)}75%{transform:translate(-50px,-40px) scale(.97)}}

/* noise grain overlay */
body::before{content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:.5}

nav,main,footer,.hero,.legal-hero{position:relative;z-index:1}

/* ─── Layout ─────────────────────────────────────────────────── */
.container{width:min(1160px,100% - 48px);margin-inline:auto}
section{padding:96px 0}

/* ─── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p300)}
.gradient-text{
  background:linear-gradient(135deg,#c4b5fd 0%,#8b5cf6 45%,#d946ef 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 200%;animation:gradShift 7s ease infinite}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ─── Navigation ─────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:all var(--dur) var(--ease)}
.nav.scrolled{background:rgba(7,7,14,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-xs);padding:14px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--t100);font-family:'Space Grotesk',sans-serif;
  font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
.brand svg{width:34px;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{color:var(--t400);font-size:.875rem;font-weight:500;transition:color var(--dur) var(--ease)}
.nav-links a:hover{color:var(--t100)}
.nav-cta{background:linear-gradient(135deg,var(--p500),var(--fuchsia));color:white!important;
  padding:9px 22px;border-radius:50px;font-weight:600;font-size:.85rem;
  transition:all var(--dur) var(--ease)!important;box-shadow:var(--glow-xs)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:var(--glow-sm)!important}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--t200);border-radius:2px;transition:all var(--dur) var(--ease)}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;padding:140px 0 80px}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px}

.hero-badge{display:inline-flex;align-items:center;gap:8px;
  background:rgba(139,92,246,.09);border:1px solid var(--border-md);
  color:var(--p200);padding:7px 18px;border-radius:50px;
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hero-badge .blink{width:7px;height:7px;background:var(--fuchsia);border-radius:50%;animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}

.logo-float{animation:logoFloat 7s ease-in-out infinite;
  filter:drop-shadow(0 0 32px rgba(139,92,246,.6)) drop-shadow(0 0 60px rgba(139,92,246,.25))}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.logo-float svg{width:88px;height:auto;margin:0 auto}

.hero h1{font-size:clamp(2.6rem,6.5vw,5rem);max-width:13ch}
.hero-sub{font-size:clamp(1rem,2vw,1.2rem);color:var(--t400);max-width:50ch;line-height:1.72}

/* ─── Email Form ─────────────────────────────────────────────── */
.email-form-wrap{width:100%;max-width:500px}
.email-form{display:flex;gap:0;background:var(--bg-card);border:1px solid var(--border-md);
  border-radius:50px;padding:6px 6px 6px 22px;transition:all var(--dur) var(--ease)}
.email-form:focus-within{border-color:var(--p400);box-shadow:var(--glow-sm)}
.email-form input{flex:1;background:transparent;border:none;outline:none;
  color:var(--t100);font-size:.95rem;min-width:0}
.email-form input::placeholder{color:var(--t600)}
.email-form button{background:linear-gradient(135deg,var(--p500),var(--fuchsia));
  color:white;border:none;padding:12px 22px;border-radius:44px;font-weight:600;
  font-size:.85rem;white-space:nowrap;transition:all var(--dur) var(--ease)}
.email-form button:hover{transform:translateX(2px);box-shadow:0 0 22px rgba(217,70,239,.45)}
.email-form button:disabled{opacity:.6;cursor:default;transform:none}
.form-note{font-size:.76rem;color:var(--t600);margin-top:10px;text-align:center}

/* ─── Store Badges ───────────────────────────────────────────── */
.store-badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.store-badge{display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  color:var(--t400);padding:11px 18px;border-radius:13px;
  font-size:.78rem;cursor:not-allowed;opacity:.55;position:relative}
.store-badge .b-icon{font-size:1.4rem;line-height:1}
.store-badge .b-text span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.store-badge .b-text strong{font-size:.9rem;display:block;color:var(--t200)}
.badge-pill{position:absolute;top:-8px;right:10px;
  background:var(--p600);color:white;font-size:.55rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:20px}

/* ─── Divider ────────────────────────────────────────────────── */
.section-rule{height:1px;background:linear-gradient(90deg,transparent,var(--border-md),transparent);
  margin:0}

/* ─── Section Headers ────────────────────────────────────────── */
.section-head{display:flex;flex-direction:column;gap:10px}
.section-head.center{align-items:center;text-align:center}
.section-head h2{font-size:clamp(1.9rem,3.5vw,2.9rem)}
.section-head p{color:var(--t400);font-size:1.05rem;line-height:1.72;max-width:54ch}
.section-head.center p{margin-inline:auto}

/* ─── Features ───────────────────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px;margin-top:56px}
.f-card{background:var(--bg-card);border:1px solid var(--border-xs);border-radius:var(--r-lg);
  padding:30px;transition:all var(--dur) var(--ease);position:relative;overflow:hidden}
.f-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,92,246,.06) 0%,transparent 55%);opacity:0;transition:opacity var(--dur) var(--ease)}
.f-card:hover{border-color:var(--border-md);transform:translateY(-5px);
  box-shadow:var(--glow-xs),0 24px 50px rgba(0,0,0,.45)}
.f-card:hover::after{opacity:1}
.f-icon{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:18px;border:1px solid var(--border-sm);
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(217,70,239,.08))}
.f-card h3{font-size:1.05rem;margin-bottom:9px}
.f-card p{color:var(--t400);font-size:.875rem;line-height:1.65}

/* ─── How It Works ───────────────────────────────────────────── */
.hiw{background:linear-gradient(180deg,transparent 0%,rgba(76,29,149,.07) 50%,transparent 100%)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px;position:relative}
.steps::before{content:'';position:absolute;top:40px;left:calc(16.66% + 32px);right:calc(16.66% + 32px);
  height:1px;background:linear-gradient(90deg,var(--p700),var(--fuchsia),var(--p700))}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:8px}
.step-num{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;color:white;position:relative;z-index:1;
  background:linear-gradient(135deg,var(--p500),var(--fuchsia));box-shadow:var(--glow-sm)}
.step-num::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:linear-gradient(135deg,var(--p400),var(--fuchsia));z-index:-1;filter:blur(6px);opacity:.5}
.step h3{font-size:1.05rem}
.step p{color:var(--t400);font-size:.875rem;max-width:22ch;line-height:1.6}

/* ─── Social Proof / Stats ───────────────────────────────────── */
.stats{background:var(--bg-surface);border-top:1px solid var(--border-xs);border-bottom:1px solid var(--border-xs)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;text-align:center}
.stat-val{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--p200),var(--p400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.stat-lbl{color:var(--t400);font-size:.82rem;font-weight:500}

/* ─── Beta CTA ───────────────────────────────────────────────── */
.beta-card{
  background:linear-gradient(135deg,rgba(76,29,149,.28) 0%,rgba(109,40,217,.14) 40%,rgba(217,70,239,.09) 100%);
  border:1px solid var(--border-md);border-radius:var(--r-2xl);
  padding:clamp(44px,8vw,88px);text-align:center;position:relative;overflow:hidden}
.beta-card::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:55%;height:1px;background:linear-gradient(90deg,transparent,var(--p300),transparent)}
.beta-card::after{content:'';position:absolute;bottom:0;right:0;width:300px;height:300px;
  background:radial-gradient(circle,rgba(217,70,239,.08) 0%,transparent 70%);pointer-events:none}
.beta-card h2{font-size:clamp(1.9rem,4vw,3.2rem);margin-bottom:14px}
.beta-card > p{color:var(--t400);font-size:1.05rem;max-width:48ch;margin:0 auto 40px;line-height:1.72}
.role-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.role-tab{background:transparent;border:1px solid var(--border-md);color:var(--t400);
  padding:8px 22px;border-radius:50px;font-size:.85rem;font-weight:600;
  transition:all var(--dur) var(--ease)}
.role-tab.active,.role-tab:hover{background:rgba(139,92,246,.14);border-color:var(--p400);color:var(--p200)}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:50px;
  font-weight:600;font-size:.95rem;transition:all var(--dur) var(--ease);border:none;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--p500),var(--fuchsia));color:white;box-shadow:var(--glow-xs)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow-md);color:white}
.btn-outline{background:transparent;border:1px solid var(--border-lg);color:var(--p200)}
.btn-outline:hover{background:rgba(139,92,246,.1);border-color:var(--p300);color:var(--p100)}

/* ─── Footer ─────────────────────────────────────────────────── */
footer{background:var(--bg-surface);border-top:1px solid var(--border-xs);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px}
.f-brand .brand{margin-bottom:14px}
.f-brand p{color:var(--t400);font-size:.875rem;line-height:1.68;max-width:28ch;margin-bottom:20px}
.social-links{display:flex;gap:10px}
.social-link{width:36px;height:36px;border-radius:10px;border:1px solid var(--border-sm);
  display:flex;align-items:center;justify-content:center;color:var(--t400);font-size:.85rem;
  transition:all var(--dur) var(--ease)}
.social-link:hover{border-color:var(--p400);color:var(--p300);background:rgba(139,92,246,.1)}
.f-col h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t600);margin-bottom:16px}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.f-col a{color:var(--t400);font-size:.875rem;transition:color var(--dur) var(--ease)}
.f-col a:hover{color:var(--p200)}
.footer-bottom{border-top:1px solid var(--border-xs);padding-top:28px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-bottom p,.footer-bottom a{color:var(--t600);font-size:.775rem}
.footer-bottom a:hover{color:var(--p300)}

/* ─── Toast ──────────────────────────────────────────────────── */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(110px);
  background:var(--bg-card);border:1px solid var(--border-md);color:var(--t100);
  padding:14px 24px;border-radius:50px;font-size:.9rem;font-weight:500;
  box-shadow:var(--glow-sm),0 24px 48px rgba(0,0,0,.6);z-index:999;
  transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:10px;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(34,197,94,.4)}
.toast.error{border-color:rgba(239,68,68,.4)}

/* ─── Legal Pages ────────────────────────────────────────────── */
.legal-hero{padding:150px 0 56px;border-bottom:1px solid var(--border-xs)}
.legal-hero h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:10px}
.legal-content{padding:60px 0 100px}
.prose{max-width:740px}
.last-updated-tag{display:inline-block;background:rgba(139,92,246,.1);border:1px solid var(--border-sm);
  color:var(--p300);font-size:.75rem;padding:5px 14px;border-radius:50px;margin-bottom:36px}
.prose h2{font-size:1.25rem;color:var(--p200);margin:44px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border-xs)}
.prose h3{font-size:1rem;color:var(--t200);margin:26px 0 10px}
.prose p,.prose li{color:var(--t400);font-size:.94rem;line-height:1.78;margin-bottom:12px}
.prose ul,.prose ol{padding-left:22px;margin-bottom:14px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--t200);font-weight:600}
.prose a{color:var(--p300)}
.prose a:hover{color:var(--p100)}

/* ─── Support Page ───────────────────────────────────────────── */
.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:52px}
.s-card{background:var(--bg-card);border:1px solid var(--border-xs);border-radius:var(--r-lg);
  padding:32px;transition:all var(--dur) var(--ease)}
.s-card:hover{border-color:var(--border-md);transform:translateY(-3px)}
.s-card .s-icon{font-size:1.8rem;margin-bottom:16px}
.s-card h3{margin-bottom:8px;font-size:1.05rem}
.s-card p{color:var(--t400);font-size:.875rem;margin-bottom:20px;line-height:1.65}
.contact-form{background:var(--bg-card);border:1px solid var(--border-xs);border-radius:var(--r-xl);
  padding:40px;margin-top:60px;max-width:640px}
.contact-form h3{margin-bottom:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:.8rem;font-weight:600;color:var(--t400);text-transform:uppercase;letter-spacing:.06em}
.form-group input,.form-group textarea,.form-group select{
  background:var(--bg-surface);border:1px solid var(--border-sm);border-radius:var(--r-sm);
  color:var(--t100);padding:11px 14px;font-size:.9rem;outline:none;
  transition:border-color var(--dur) var(--ease)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--p400);box-shadow:var(--glow-xs)}
.form-group textarea{resize:vertical;min-height:120px}

/* ─── Scroll Reveal ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.up{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.28s}.reveal.d4{transition-delay:.38s}

/* ─── Responsive ─────────────────────────────────────────────── */
@media(max-width:900px){
  .steps{grid-template-columns:1fr;gap:40px}
  .steps::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .f-brand{grid-column:span 2}
}
@media(max-width:680px){
  section{padding:64px 0}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .f-brand{grid-column:auto}
  .email-form{flex-direction:column;border-radius:var(--r-lg);padding:14px;gap:10px}
  .email-form button{width:100%;padding:13px}
  .form-row{grid-template-columns:1fr}
  .beta-card{padding:40px 20px}
  .features-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .store-badges{flex-direction:column;align-items:center}
}