@font-face { font-family: "Inter"; src: url("/fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --bg:#050505; --bg2:#0D0C0B; --card:#111010; --card2:#191715;
  --ink:#F6F2EE; --mute:#A39C96; --dim:#6A635D; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --neon:#FF5E1A; --neon-hi:#FF8A3D; --neon-ink:#0A0604;
  --glow:0 0 24px rgba(255,94,26,.5),0 0 80px rgba(255,94,26,.22);
  --r:22px; --gut:clamp(16px,4vw,56px); --max:1240px;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
em { font-style:normal; color:var(--neon); }
h1,h2,h3 { margin:0; letter-spacing:-.035em; line-height:1.02; font-weight:800; }
h2 { font-size:clamp(34px,5vw,60px); max-width:16ch; margin-bottom:clamp(28px,4vw,48px); }
h3 { font-size:24px; letter-spacing:-.02em; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:15px 26px; border-radius:999px; background:var(--neon); color:var(--neon-ink);
  font-weight:750; font-size:16px; text-decoration:none; border:0; cursor:pointer; box-shadow:var(--glow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); white-space:nowrap; font-family:inherit; }
.btn:hover { transform:translateY(-2px); background:var(--neon-hi); }
.btn-sm { padding:10px 18px; font-size:14px; }
.btn-ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2); }
.btn-ghost:hover { background:rgba(255,255,255,.06); }

/* nav */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px; padding:14px var(--gut);
  background:rgba(5,5,5,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.logo { font-weight:850; font-size:24px; letter-spacing:-.05em; text-decoration:none; display:inline-flex; align-items:baseline; }
.logo i { width:.3em; height:.3em; border-radius:50%; background:var(--neon); margin-left:.06em; box-shadow:0 0 12px rgba(255,94,26,.8); }
.links { display:flex; gap:28px; margin-left:auto; }
.links a { text-decoration:none; color:var(--mute); font-size:15px; font-weight:550; transition:color .3s var(--ease); }
.links a:hover { color:var(--ink); }

/* kicker */
.kicker { display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px var(--neon); }

/* hero */
.hero { max-width:var(--max); margin:0 auto; padding:clamp(40px,7vw,96px) var(--gut) clamp(48px,6vw,80px);
  display:grid; grid-template-columns:1.12fr .88fr; grid-template-areas:"text photo" "paths photo"; column-gap:clamp(24px,5vw,72px); row-gap:40px; }
.hero-text { grid-area:text; }
.hero h1 { font-size:clamp(44px,6.1vw,82px); }
.lede { color:var(--mute); font-size:clamp(17px,1.5vw,20px); max-width:34em; margin:26px 0 30px; }
.ctas { display:flex; gap:12px; flex-wrap:wrap; }

.hero-photo { grid-area:photo; position:relative; margin:0; align-self:start; margin-top:clamp(0px,3vw,40px); }
.hero-photo img { position:relative; z-index:1; width:100%; filter:contrast(1.04); }
.halo { position:absolute; left:52%; top:30%; width:84%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,94,26,.95) 0%, rgba(255,94,26,.55) 32%, rgba(255,94,26,.12) 58%, transparent 70%); filter:blur(6px); }
.chip { position:absolute; z-index:2; padding:10px 14px; border-radius:14px; font-size:13.5px; color:var(--mute);
  background:rgba(17,16,16,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line2); white-space:nowrap;
  animation:float 6s var(--ease) infinite alternate; }
.chip b { color:var(--ink); font-weight:750; }
.c1 { left:-8%; top:16%; }
.c2 { right:-6%; top:50%; animation-delay:-2s; }
.c3 { left:-4%; bottom:12%; animation-delay:-4s; }
@keyframes float { from { transform:translateY(0); } to { transform:translateY(-8px); } }

.paths { grid-area:paths; border-top:1px solid var(--line2); }
.paths-title { margin:18px 0 6px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.path { display:grid; grid-template-columns:44px 1fr auto 26px; align-items:center; gap:14px; padding:18px 4px; text-decoration:none;
  border-bottom:1px solid var(--line); transition:background .35s var(--ease), padding .35s var(--ease); border-radius:12px; }
.path:hover { background:rgba(255,94,26,.06); padding-left:14px; }
.path .n { font-weight:800; color:var(--neon); font-size:15px; font-variant-numeric:tabular-nums; }
.path .t b { display:block; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.path .t small { display:block; color:var(--mute); font-size:14px; margin-top:2px; }
.tag { font-size:12.5px; font-weight:750; padding:5px 11px; border-radius:999px; color:var(--mute); border:1px solid var(--line2); }
.tag-on { color:var(--neon-ink); background:var(--neon); border-color:var(--neon); }
.arr { color:var(--dim); font-size:20px; transition:transform .35s var(--ease), color .35s var(--ease); }
.path:hover .arr { transform:translateX(4px); color:var(--neon); }

/* ticker */
.ticker { overflow:hidden; border-block:1px solid var(--line2); background:var(--bg2); padding:16px 0; }
.track { display:flex; gap:28px; width:max-content; animation:slide 38s linear infinite; font-weight:750; font-size:18px; letter-spacing:-.01em; }
.track i { color:var(--neon); font-style:normal; }
@keyframes slide { to { transform:translateX(-50%); } }

/* sections */
.sec { max-width:var(--max); margin:0 auto; padding:clamp(64px,9vw,120px) var(--gut) 0; }

/* shelf */
.shelf { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease); }
.card:hover { border-color:rgba(255,94,26,.45); transform:translateY(-3px); }
.shot { padding:18px 18px 0; background:linear-gradient(180deg, rgba(255,94,26,.16), transparent 70%); }
.shot img { border-radius:14px 14px 0 0; border:1px solid var(--line2); border-bottom:0; aspect-ratio:16/9.4; object-fit:cover; object-position:top; width:100%; }
.card-body { padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-body p { margin:0; color:var(--mute); }
.card-foot { margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price { font-size:28px; font-weight:800; letter-spacing:-.03em; }
.price small { font-size:14px; font-weight:600; color:var(--mute); letter-spacing:0; }
.price.muted { font-size:16px; color:var(--mute); font-weight:650; letter-spacing:0; }
.badge { font-size:12px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; padding:6px 11px; border-radius:999px;
  color:var(--neon); background:rgba(255,94,26,.12); border:1px solid rgba(255,94,26,.35); white-space:nowrap; }
.badge-dim { color:var(--mute); background:transparent; border-color:var(--line2); }
.card-more { grid-column:1 / -1; flex-direction:row; align-items:center; gap:22px; padding:26px 28px; background:transparent; border:1px dashed var(--line2); }
.card-more h3 { font-size:20px; white-space:nowrap; }
.card-more p { margin:0; color:var(--mute); }
.plus { font-size:34px; font-weight:300; color:var(--neon); line-height:1; }

/* steps */
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s; }
.steps li { padding:26px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); }
.steps .n { display:block; font-size:44px; font-weight:850; color:var(--neon); letter-spacing:-.04em; line-height:1; margin-bottom:22px; }
.steps b { font-size:20px; letter-spacing:-.01em; }
.steps p { margin:6px 0 0; color:var(--mute); }
.req { margin:22px 0 0; color:var(--dim); font-size:15px; }

/* free */
.free { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:end; padding:clamp(28px,4vw,52px);
  border-radius:calc(var(--r) + 8px); border:1px solid rgba(255,94,26,.3);
  background:radial-gradient(120% 140% at 100% 0%, rgba(255,94,26,.22), transparent 55%), var(--card); }
.free h2 { margin-bottom:28px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.two b { font-size:18px; }
.two p { margin:6px 0 0; color:var(--mute); }
.signup { background:rgba(5,5,5,.6); border:1px solid var(--line2); border-radius:var(--r); padding:22px; }
.signup label { display:block; font-weight:750; font-size:18px; margin-bottom:14px; }
.signup .row { display:flex; gap:8px; }
.signup input { flex:1; min-width:0; padding:14px 16px; border-radius:999px; border:1px solid var(--line2); background:var(--bg); color:var(--ink);
  font:inherit; font-size:16px; outline:none; transition:border-color .3s var(--ease); }
.signup input:focus { border-color:var(--neon); }
.fine { margin:12px 0 0; font-size:13.5px; color:var(--dim); }
.thanks { display:none; margin:12px 0 0; color:var(--neon); font-weight:650; }
.signup.done .thanks { display:block; }
.signup.done .fine { display:none; }
.signup.done .row { display:none; }
.err { margin:10px 0 0; color:#FF8A6B; font-size:14px; min-height:0; }
.err:empty { display:none; }
.fine-link a { color:var(--mute); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.signup { position:relative; }
.btn:disabled { opacity:.7; cursor:default; transform:none; }

/* about */
.about { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.about-photo { position:relative; border-radius:calc(var(--r) + 6px); overflow:hidden; background:
  radial-gradient(70% 60% at 50% 34%, rgba(255,94,26,.55), rgba(255,94,26,.08) 60%, transparent 75%), var(--card); border:1px solid var(--line); }
.about-photo img { width:100%; padding-top:28px; }
.beats { margin:0; display:grid; gap:22px; }
.beats div { display:grid; grid-template-columns:110px 1fr; gap:18px; padding-top:18px; border-top:1px solid var(--line); }
.beats dt { color:var(--neon); font-weight:750; font-size:14px; letter-spacing:.06em; text-transform:uppercase; padding-top:3px; }
.beats dd { margin:0; color:var(--mute); font-size:18px; }

/* faq */
.qs { border-top:1px solid var(--line2); max-width:860px; }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; cursor:pointer; padding:22px 40px 22px 0; font-size:19px; font-weight:700; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:var(--neon); font-size:26px; font-weight:400;
  transition:transform .35s var(--ease); }
details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
details p { margin:0 0 22px; color:var(--mute); max-width:60ch; }
details a { color:var(--neon); }

/* footer */
.foot { max-width:var(--max); margin:clamp(80px,10vw,140px) auto 0; padding:40px var(--gut) 48px; border-top:1px solid var(--line2); }
.foot-top { display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.logo-lg { font-size:clamp(56px,10vw,120px); line-height:1; }
.foot-top p { color:var(--mute); margin:0; }
.foot-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:34px; }
.foot-row nav { display:flex; gap:22px; flex-wrap:wrap; }
.foot-row a { color:var(--mute); text-decoration:none; font-size:15px; }
.foot-row a:hover { color:var(--ink); }
.legal { margin:28px 0 0; color:var(--dim); font-size:13px; line-height:1.7; }

/* phone */
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; grid-template-areas:"text" "photo" "paths"; row-gap:28px; }
  .hero-photo { max-width:520px; justify-self:center; width:100%; }
  .shelf, .steps, .two, .free, .about { grid-template-columns:1fr; }
  .card-more { flex-direction:column; align-items:flex-start; gap:10px; }
  .card-more h3 { white-space:normal; }
}
@media (max-width: 640px) {
  body { font-size:16px; }
  .links { display:none; }
  .nav .btn-sm { margin-left:auto; }
  .chip { font-size:12px; padding:8px 11px; }
  .c1 { left:0; top:6%; } .c2 { right:0; top:46%; } .c3 { left:0; bottom:10%; }
  .path { grid-template-columns:30px 1fr auto; gap:10px; }
  .path .arr { display:none; }
  .path .t b { font-size:16.5px; }
  .signup .row { flex-direction:column; }
  .signup .btn { justify-content:center; }
  .beats div { grid-template-columns:1fr; gap:6px; }
  .ctas .btn { flex:1; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* inner pages (privacy, 404) */
.doc { max-width:760px; margin:0 auto; padding:clamp(48px,8vw,104px) var(--gut) 0; }
.doc h1 { font-size:clamp(40px,6vw,68px); margin-bottom:14px; }
.doc h2 { font-size:22px; letter-spacing:-.01em; max-width:none; margin:38px 0 8px; }
.doc p { color:var(--mute); margin:0 0 12px; }
.doc a:not(.btn) { color:var(--neon); }
.doc .upd { color:var(--dim); font-size:14px; }
.doc-404 { min-height:52vh; }
.doc-404 .btn { margin-top:18px; }

/* tool coming-soon pages */
.soon { max-width:var(--max); margin:0 auto; padding:clamp(40px,7vw,96px) var(--gut) 0; display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(28px,5vw,64px); align-items:center; }
.soon-name { margin:0 0 10px; font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); }
.soon h1 { font-size:clamp(44px,6.4vw,84px); }
.soon .lede b { color:var(--ink); font-weight:650; }
.soon-form { margin-top:4px; max-width:520px; }
.soon-form .fine a { color:var(--mute); }
.soon-pills { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.soon-pills span { font-size:13.5px; font-weight:650; color:var(--mute); padding:7px 13px; border-radius:999px; border:1px solid var(--line2); }
.soon-shot { position:relative; margin:0; }
.soon-glow { position:absolute; inset:8% -4% -6% 6%; border-radius:40px; background:radial-gradient(60% 60% at 60% 50%, rgba(255,94,26,.55), transparent 72%); filter:blur(30px); }
.soon-shot img { position:relative; border-radius:18px; border:1px solid var(--line2); box-shadow:0 30px 80px rgba(0,0,0,.6); width:100%; }
.soon-sec { padding-top:clamp(56px,8vw,104px); }
.feats li b { display:block; }
.feats .ic { display:block; font-size:15px; font-weight:800; color:var(--neon); margin-bottom:16px; letter-spacing:0; }
.back { margin:26px 0 0; }
.back a { color:var(--mute); text-decoration:none; font-weight:600; }
.back a:hover { color:var(--ink); }
@media (max-width: 900px) {
  .soon { grid-template-columns:1fr; }
}

/* ===== one-page teaser (letrech.com while the editing tool is coming) ===== */
.teaser { min-height:100vh; display:flex; flex-direction:column;
  background-color:var(--bg); }
.t-top { display:flex; align-items:center; justify-content:space-between; padding:20px var(--gut); }
.t-pill { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); padding:9px 14px; border-radius:999px; border:1px solid var(--line2); background:rgba(255,255,255,.03); }
.t-main { flex:1; width:100%; max-width:1180px; margin:0 auto; padding:clamp(28px,6vw,72px) var(--gut) 0; text-align:center; }
.t-hero { max-width:1000px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.t-hero h1 { font-size:clamp(44px,7.4vw,96px); letter-spacing:-.045em; }
.t-hero .lede { margin:22px auto 30px; max-width:34em; }
.t-form { width:100%; max-width:520px; text-align:left; }
.t-form .fine a { color:var(--mute); }
.t-shot { position:relative; margin:clamp(48px,7vw,88px) auto 0; max-width:1080px; }
.t-glow { position:absolute; left:8%; right:8%; top:-6%; height:70%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,94,26,.55), rgba(255,94,26,.12) 60%, transparent); filter:blur(40px); }
.t-frame { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line2);
  box-shadow:0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,94,26,.08); }
.t-frame img { width:100%; transform:scale(1.03); }          /* hides the blur's soft edge */
.t-frame::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,5,0) 55%, rgba(5,5,5,.85) 100%); }
.t-scan { position:absolute; top:0; bottom:0; width:28%; left:-30%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(90deg, transparent, rgba(255,138,61,.16), transparent); animation:scan 7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes scan { 0% { left:-30%; } 55%, 100% { left:105%; } }
.t-lock { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:2; display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px; border-radius:999px; background:rgba(10,9,8,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,94,26,.45); box-shadow:var(--glow); font-weight:750; font-size:16px; white-space:nowrap; }
.t-lock svg { width:18px; height:18px; fill:none; stroke:var(--neon); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.t-foot { display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap; padding:36px var(--gut) 32px;
  margin-top:clamp(36px,5vw,64px); border-top:1px solid var(--line); color:var(--dim); font-size:13px; }
.t-foot p { margin:0; }
.t-foot nav { display:flex; gap:20px; }
.t-foot a { color:var(--mute); text-decoration:none; }
.t-foot a:hover { color:var(--ink); }
@media (max-width: 640px) {
  .t-pill { font-size:11.5px; padding:8px 12px; }
  .t-hero h1 { font-size:clamp(40px,11.5vw,56px); }
  .t-frame { border-radius:14px; }
  .t-lock { font-size:14px; padding:10px 15px; }
  .t-foot { flex-direction:column; align-items:flex-start; }
}