/* ═════════════════════════════════════════════════
   Frely v3 — "Electric Motion"
   Violet-black + acid lime. Syne / Inter Tight / Space Mono.
   GSAP: preloader, char-stagger hero, aurora, pinned horizontal modules.
   ═════════════════════════════════════════════════ */

@font-face { font-family:'Syne'; font-weight:700; font-display:swap; src:url('/v3/fonts/syne700.woff2') format('woff2'); }
@font-face { font-family:'Syne'; font-weight:800; font-display:swap; src:url('/v3/fonts/syne800.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:400; font-display:swap; src:url('/v3/fonts/intertight400.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:500; font-display:swap; src:url('/v3/fonts/intertight500.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-weight:400; font-display:swap; src:url('/v3/fonts/spacemono400.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-weight:700; font-display:swap; src:url('/v3/fonts/spacemono700.woff2') format('woff2'); }

:root {
  --bg: #0a0812;
  --bg-2: #120e1e;
  --panel: #171226;
  --line: rgba(255,255,255,0.09);
  --text: #f4f1fa;
  --mid: #a89fc0;
  --dim: #6e6588;
  --acid: #c8ff00;
  --acid-dim: rgba(200,255,0,0.14);
  --violet: #7c5cff;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
html, body { overflow-x:clip; background:var(--bg); }
@supports not (scrollbar-gutter:stable) { html { overflow-y:scroll; } }

body {
  color:var(--text);
  font-family:'Inter Tight', system-ui, sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--acid); color:#0a0812; }

img { max-width:100%; display:block; height:auto; }
a { color:inherit; text-decoration:none; }
.mono { font-family:'Space Mono', monospace; }
.wrap { max-width:1220px; margin:0 auto; padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px); }

h1,h2,h3 { font-family:'Syne', sans-serif; letter-spacing:-0.02em; line-height:1.04; font-weight:800; }
h2 { font-size:clamp(2.2rem, 5vw, 3.9rem); }
.acid { color:var(--acid); font-style:normal; }
.sec-kicker { font-size:0.78rem; letter-spacing:0.12em; color:var(--acid); margin-bottom:20px; display:block; }

/* ── buttons ── */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace; font-weight:700; font-size:0.92rem; letter-spacing:0.02em;
  padding:16px 30px; border-radius:99px; border:1px solid transparent;
  cursor:pointer; will-change:transform;
}
.btn span { position:relative; z-index:2; transition:color .3s ease; }
.btn-acid { background:var(--acid); color:#0a0812; overflow:hidden; }
.btn-acid::before {
  content:""; position:absolute; inset:0; background:var(--text);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn-acid:hover::before { transform:translateY(0); }
.btn-ghost { border-color:var(--line); color:var(--text); background:transparent; }
.btn-ghost:hover { border-color:var(--acid); color:var(--acid); }
.btn-big { padding:19px 40px; font-size:1rem; }

/* ── preloader ── */
.preloader {
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.pre-inner { display:flex; flex-direction:column; align-items:center; gap:18px; }
.pre-brand { font-family:'Syne'; font-weight:800; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:0.32em; text-indent:0.32em; }
.pre-count { font-family:'Space Mono'; color:var(--acid); font-size:0.95rem; }
html.no-js .preloader { display:none; }

/* ── custom cursor (desktop only) ── */
.cursor-dot {
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--acid); pointer-events:none; z-index:999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  opacity:0; transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine) { html.js .cursor-dot { opacity:1; } }

/* ── topbar ── */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.topbar.scrolled { background:rgba(10,8,18,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--line); }
.topbar-in { display:flex; align-items:center; gap:34px; height:74px; }
.brand { font-family:'Syne'; font-weight:800; font-size:1.35rem; letter-spacing:0.06em; }
.brand-x { color:var(--acid); }
.topnav { display:flex; gap:28px; margin-left:auto; }
.topnav a { font-family:'Space Mono'; font-size:0.82rem; letter-spacing:0.06em; color:var(--mid); transition:color .25s ease; }
.topnav a:hover { color:var(--acid); }
.topbar .btn { padding:11px 24px; font-size:0.84rem; }

/* ── hero ── */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:110px; overflow:hidden; }
.hero-in { position:relative; z-index:3; width:100%; }
.aurora {
  position:absolute; inset:-20%; z-index:1; pointer-events:none;
  background:
    radial-gradient(38% 42% at 30% 38%, rgba(124,92,255,0.34), transparent 66%),
    radial-gradient(30% 36% at 72% 60%, rgba(200,255,0,0.13), transparent 64%),
    radial-gradient(26% 30% at 55% 25%, rgba(56,189,248,0.14), transparent 60%);
  filter:blur(46px);
  will-change:transform;
}
.noise {
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-tag { color:var(--dim); font-size:0.85rem; letter-spacing:0.1em; margin-bottom:26px; }
.hero-h { font-size:clamp(3rem, 9vw, 7.6rem); line-height:0.98; margin-bottom:40px; }
.hh-line { display:block; overflow:hidden; }
.hh-line > * { display:inline-block; }
.hh-outline {
  color:transparent;
  -webkit-text-stroke:1.5px var(--text);
}
.hero-low { display:flex; align-items:flex-end; justify-content:space-between; gap:44px; flex-wrap:wrap; }
.hero-sub { max-width:27em; color:var(--mid); font-size:1.14rem; }
.hero-cta { display:flex; gap:16px; flex-wrap:wrap; }

/* ticker */
.ticker-wrap { position:relative; z-index:3; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:70px; overflow:hidden; padding:0; }
.ticker { display:flex; align-items:center; gap:34px; white-space:nowrap; padding:15px 0; font-family:'Space Mono'; font-size:0.82rem; letter-spacing:0.1em; color:var(--dim); width:max-content; animation:tick 28s linear infinite; }
.ticker i { color:var(--acid); font-style:normal; font-size:0.7rem; }
@keyframes tick { to { transform:translateX(-50%); } }
.ticker-wrap:hover .ticker { animation-play-state:paused; }

.scroll-cue {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; font-size:0.68rem; letter-spacing:0.3em; color:var(--dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.cue-line { width:1px; height:44px; background:linear-gradient(var(--acid), transparent); display:block; animation:cue 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes cue { 0%,100% { transform:scaleY(0.4); } 50% { transform:scaleY(1); } }

/* ── sections base ── */
.pain, .setup, .own, .faq { position:relative; padding:clamp(90px,12vw,150px) 0; }
.modules { padding-top:clamp(90px,12vw,150px); }

/* ── pain ── */
.pain-h em { color:var(--violet); font-style:normal; }
.pain-stripes { margin-top:clamp(48px,7vw,84px); border-top:1px solid var(--line); }
.stripe {
  display:grid; grid-template-columns:90px 1fr; align-items:center;
  gap:clamp(18px,4vw,54px); padding:clamp(22px,3.4vw,34px) clamp(20px,4vw,48px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, padding-left .4s var(--ease);
}
.stripe:hover { background:var(--bg-2); padding-left:clamp(34px,5vw,72px); }
.stripe .mono { color:var(--dim); font-size:0.9rem; }
.stripe p { font-family:'Syne'; font-weight:700; font-size:clamp(1.15rem,2.6vw,1.9rem); letter-spacing:-0.01em; }
.stripe:hover .mono { color:var(--acid); }
.stripe-r { padding-left:clamp(60px,10vw,160px); }

/* ── modules horizontal ── */
.modules-head { margin-bottom:clamp(44px,6vw,72px); }
.hwrap { overflow:hidden; }
.htrack { display:flex; gap:26px; padding:0 clamp(20px,4vw,48px); width:max-content; will-change:transform; }
.mod-card {
  position:relative; width:min(520px, 82vw); flex-shrink:0;
  background:var(--panel); border:1px solid var(--line); border-radius:22px;
  padding:clamp(26px,3vw,40px); overflow:hidden;
  display:flex; flex-direction:column; gap:16px;
}
.mod-a { background:linear-gradient(145deg, #1b1430, #130f21 60%); }
.mod-b { background:linear-gradient(145deg, #161228, #12101d 55%); }
.mod-num { color:var(--acid); font-size:0.85rem; letter-spacing:0.1em; }
.mod-card h3 { font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.1; }
.mod-card p { color:var(--mid); max-width:30em; }
.mod-card figure { margin-top:auto; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.mod-chip {
  position:absolute; top:22px; right:-34px; transform:rotate(38deg);
  background:var(--acid); color:#0a0812; font-size:0.66rem; font-weight:700;
  padding:6px 40px; letter-spacing:0.12em;
}
.h-progress-wrap { margin-top:34px; }
.h-progress { height:2px; background:var(--acid); width:0%; }

/* ── setup ── */
.setup { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps { list-style:none; margin-top:clamp(44px,6vw,64px); display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s; }
.step { border:1px solid var(--line); border-radius:18px; padding:30px 28px 34px; background:var(--panel); position:relative; transition:transform .45s var(--ease), border-color .3s ease; }
.step:hover { transform:translateY(-8px); border-color:rgba(200,255,0,0.4); }
.step-n { color:var(--acid); font-size:0.9rem; display:block; margin-bottom:44px; }
.step h3 { font-size:1.4rem; margin-bottom:12px; }
.step p { color:var(--mid); font-size:0.98rem; }
.step code { display:inline-block; margin-top:18px; font-size:0.85rem; background:#000; border:1px solid var(--line); color:var(--acid); padding:10px 16px; border-radius:8px; white-space:nowrap; max-width:100%; overflow-x:auto; }

/* ── own ── */
.own-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,7vw,100px); align-items:start; }
.own-sub { color:var(--mid); margin:24px 0 34px; max-width:26em; font-size:1.1rem; }
.own-list { list-style:none; }
.own-list li { display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); }
.own-list .mono { color:var(--acid); font-size:1.1rem; line-height:1.4; }
.own-list div { color:var(--mid); }
.own-list strong { color:var(--text); display:block; margin-bottom:4px; font-family:'Syne'; font-weight:700; font-size:1.05rem; letter-spacing:0; }

/* ── faq ── */
.faq-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(44px,7vw,100px); align-items:start; }
.link-more { display:inline-block; margin-top:26px; color:var(--acid); font-size:0.82rem; letter-spacing:0.1em; border-bottom:1px solid var(--acid); padding-bottom:3px; }
.fq { border-bottom:1px solid var(--line); }
.fq summary {
  list-style:none; cursor:pointer; position:relative;
  font-family:'Syne'; font-weight:700; font-size:1.2rem; letter-spacing:-0.01em;
  padding:24px 52px 24px 0; transition:color .25s ease;
}
.fq summary::-webkit-details-marker { display:none; }
.fq summary:hover { color:var(--acid); }
.fx { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--acid); font-size:1.5rem; font-family:'Inter Tight'; font-weight:400; transition:transform .35s var(--ease); }
.fq[open] .fx { transform:translateY(-50%) rotate(45deg); }
.fq p { padding:0 44px 26px 0; color:var(--mid); max-width:38em; }

/* ── join ── */
.join { position:relative; padding:clamp(100px,13vw,170px) 0; overflow:hidden; }
.join-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,7vw,100px); align-items:center; }
.join-copy p { color:var(--mid); margin-top:22px; max-width:26em; font-size:1.1rem; }
.join-mail { margin-top:30px; font-size:0.82rem; letter-spacing:0.08em; color:var(--dim); }
.join-mail a { color:var(--acid); border-bottom:1px solid var(--acid); }
.join-form { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:clamp(28px,4vw,42px); display:flex; flex-direction:column; gap:9px; }
.f-label { font-size:0.72rem; letter-spacing:0.12em; color:var(--dim); margin-top:14px; }
.f-label:first-child { margin-top:0; }
.f-label em { font-style:normal; color:var(--dim); opacity:0.7; }
.f-input {
  font-family:'Inter Tight'; font-size:1rem; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; width:100%; transition:border-color .2s ease, box-shadow .2s ease;
}
.f-input:focus { outline:none; border-color:var(--acid); box-shadow:0 0 0 3px var(--acid-dim); }
select.f-input { appearance:none; }
.join-form .btn { margin-top:24px; }
.f-note { margin-top:14px; font-size:0.66rem; letter-spacing:0.1em; color:var(--dim); text-align:center; }
.frely-waitlist-success { background:rgba(200,255,0,0.1); border:1px solid rgba(200,255,0,0.35); color:var(--acid); padding:16px 20px; border-radius:12px; font-weight:600; margin-bottom:8px; }

/* ── footer ── */
.footer { border-top:1px solid var(--line); overflow:hidden; }
.foot-giant {
  font-family:'Syne'; font-weight:800; letter-spacing:0.04em;
  font-size:clamp(4.6rem, 17vw, 15rem); line-height:0.94;
  text-align:center; padding-top:clamp(30px,5vw,60px);
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.13);
  user-select:none;
}
.footer-in { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding-top:clamp(40px,6vw,64px); padding-bottom:40px; }
.foot-col { display:flex; flex-direction:column; gap:11px; }
.foot-col h4 { font-size:0.72rem; letter-spacing:0.14em; color:var(--dim); margin-bottom:7px; font-weight:400; }
.foot-col a { font-size:0.95rem; color:var(--mid); transition:color .2s ease; }
.foot-col a:hover { color:var(--acid); }
.foot-base { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:20px; padding-bottom:26px; border-top:1px solid var(--line); font-size:0.72rem; letter-spacing:0.1em; color:var(--dim); }

/* ── reveal fallback (no-JS safe) ── */
html.js .reveal-up { opacity:0; transform:translateY(34px); }
html.js .reveal-up.in { opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-up { opacity:1; transform:none; }
  .ticker { animation:none; flex-wrap:wrap; width:auto; }
  html { scroll-behavior:auto; }
}

/* ── responsive ── */
@media (max-width:1020px) {
  .topnav { display:none; }
  .steps { grid-template-columns:1fr; }
  .own-grid, .faq-grid, .join-grid { grid-template-columns:1fr; }
  .footer-in { grid-template-columns:1fr 1fr; }
  .hero-low { flex-direction:column; align-items:flex-start; }
}
@media (max-width:860px) {
  /* mobile: no pin, native horizontal snap scroll */
  .hwrap { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hwrap::-webkit-scrollbar { display:none; }
  .htrack { width:auto; }
  .mod-card { scroll-snap-align:center; }
  .h-progress-wrap { display:none; }
}
@media (max-width:640px) {
  .stripe { grid-template-columns:1fr; gap:6px; }
  .stripe-r { padding-left:clamp(20px,4vw,48px); }
  .mod-card { width:86vw; }
  .footer-in { grid-template-columns:1fr; }
  .hero { padding-top:96px; }
}