:root {
  --bg:#07080d; --ink:#f4ffe4; --muted:#a3b38a;
  --accent:#d6ff3e; --accent2:#ff3d8a;
  --paper:#12141c; --line:#2a2e16;
  --head:"Space Grotesk", Georgia, serif;
  --body:"IBM Plex Sans", "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.tf-site {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
}
a { color:inherit; }
img { max-width:100%; }
.tf-nav {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:14px 28px; backdrop-filter:blur(16px);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom:1px solid var(--line);
}
.tf-logo { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--head); font-weight:700; letter-spacing:-.03em; font-size:18px; }
.tf-mark { width:34px; height:34px; display:grid; place-items:center; background:var(--accent); color:#08110e; border-radius:10px; font-size:12px; font-weight:800; }
[data-layout="cinema"] .tf-mark, [data-layout="snap"] .tf-mark, [data-layout="pulse"] .tf-mark, [data-layout="signal"] .tf-mark, [data-layout="ticket"] .tf-mark { color:#08110e; }
.tf-nav nav { display:flex; gap:16px; margin-left:auto; font-size:14px; }
.tf-nav nav a { text-decoration:none; opacity:.85; }
.tf-nav nav a:hover { opacity:1; }
.tf-buy {
  text-decoration:none; background:var(--accent); color:#08110e;
  padding:10px 16px; border-radius:999px; font-weight:700; font-size:14px;
}
.tf-hero { position:relative; min-height:92vh; overflow:hidden; }
[data-layout="split"] .tf-hero, [data-layout="letter"] .tf-hero, [data-layout="ivory"] .tf-hero { min-height:86vh; }
.tf-slider { position:relative; height:100%; min-height:inherit; }
.tf-slide {
  position:absolute; inset:0; opacity:0; pointer-events:none;
  display:grid; align-items:end;
  padding:8vh 7vw 12vh;
  transition:opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  background:
    radial-gradient(900px 480px at 80% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    radial-gradient(700px 420px at 10% 80%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 55%),
    linear-gradient(160deg, var(--paper), var(--bg));
}
.tf-slide.is-on { opacity:1; pointer-events:auto; transform:none; z-index:1; }
[data-layout="cinema"] .tf-slide { transform:scale(1.06); align-items:center; }
[data-layout="cinema"] .tf-slide.is-on { transform:scale(1); }
[data-layout="snap"] .tf-slide { transform:translateX(8%); }
[data-layout="pulse"] .tf-slide { transform:translateY(24px) scale(.98); align-items:center; }
[data-layout="ticket"] .tf-slide { transform:translateX(-6%) rotate(-.4deg); }
[data-layout="atlas"] .tf-slide { transform:translateX(30px); }
[data-layout="bloom"] .tf-slide { transform:translateY(18px); align-items:center; }
[data-layout="meridian"] .tf-slide { transform:scale(.96); align-items:center; }
[data-layout="ivory"] .tf-slide, [data-layout="split"] .tf-slide, [data-layout="letter"] .tf-slide {
  transform:none; opacity:0;
}
.tf-orb {
  position:absolute; border-radius:50%; filter:blur(2px); opacity:.55;
  animation:tfFloat 9s ease-in-out infinite;
}
.tf-orb.a { width:180px; height:180px; right:8%; top:18%; background:var(--accent); }
.tf-orb.b { width:90px; height:90px; left:12%; bottom:22%; background:var(--accent2); animation-delay:-3s; }
[data-layout="tide"] .tf-slide.is-on .tf-orb.a { border-radius:42% 58% 60% 40%; }
@keyframes tfFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-18px); }
}
.tf-kicker {
  letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:var(--accent); margin:0 0 12px;
}
.tf-slide h1, .tf-page h1 {
  font-family:var(--head); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(40px, 6vw, 84px); line-height:.96; margin:0 0 16px; max-width:14ch;
}
[data-layout="pulse"] .tf-slide h1 { font-size:clamp(56px, 8vw, 112px); letter-spacing:.02em; font-weight:400; }
.tf-lead { max-width:42ch; font-size:18px; color:var(--muted); margin:0 0 22px; }
.tf-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.tf-btn {
  display:inline-flex; align-items:center; text-decoration:none;
  background:var(--accent); color:#08110e; font-weight:800;
  padding:14px 18px; border-radius:14px;
}
.tf-ghost { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); padding:8px 2px; }
.tf-controls {
  position:absolute; z-index:3; left:7vw; bottom:28px; display:flex; gap:8px; align-items:center;
}
.tf-controls button, .tf-dot {
  border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 70%, transparent);
  color:var(--ink); width:42px; height:42px; border-radius:50%; cursor:pointer;
}
.tf-dot { width:10px; height:10px; padding:0; }
.tf-dot.is-on { background:var(--accent); border-color:var(--accent); }
.tf-num { font-variant-numeric:tabular-nums; font-size:13px; margin-left:8px; }
.tf-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line); z-index:3; }
.tf-bar > span { display:block; height:100%; width:25%; background:var(--accent); transition:width .4s ease; }
.tf-marquee { overflow:hidden; border-bottom:1px solid var(--line); background:var(--paper); }
.tf-marquee-run { display:flex; gap:32px; white-space:nowrap; padding:12px 0; animation:tfMarq 28s linear infinite; }
@keyframes tfMarq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.tf-wrap { width:min(1120px, calc(100% - 40px)); margin:0 auto; }
section { padding:72px 0; }
.tf-sec h2 { font-family:var(--head); font-size:clamp(32px, 4vw, 52px); letter-spacing:-.03em; margin:0 0 10px; }
.tf-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:28px; }
.tf-card, .tf-plan, .tf-step, .tf-acc {
  background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:22px;
}
.tf-card h3, .tf-plan h3, .tf-step h3 { font-family:var(--head); margin:8px 0; }
.tf-card p, .tf-plan p, .tf-step p, .tf-acc p { color:var(--muted); margin:0; }
.tf-reveal { opacity:0; transform:translateY(16px); animation:tfIn .7s ease forwards; }
.tf-reveal:nth-child(2) { animation-delay:.08s; }
.tf-reveal:nth-child(3) { animation-delay:.16s; }
@keyframes tfIn { to { opacity:1; transform:none; } }
.tf-plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px; }
.tf-plan { position:relative; overflow:hidden; }
[data-layout="ticket"] .tf-plan {
  background:
    radial-gradient(12px 12px at 0 50%, var(--bg) 11px, transparent 12px),
    radial-gradient(12px 12px at 100% 50%, var(--bg) 11px, transparent 12px),
    var(--paper);
}
.tf-price { font-family:var(--head); font-size:42px; margin:0; }
.tf-plan .tf-btn { margin-top:16px; }
.tf-plan.hot { outline:2px solid var(--accent); }
.tf-steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:22px; }
.tf-n { font-family:var(--head); color:var(--accent); font-size:28px; }
.tf-acc { margin-top:12px; }
.tf-acc summary { cursor:pointer; font-weight:700; }
.tf-desk {
  display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:28px; padding:28px;
}
.tf-foot {
  border-top:1px solid var(--line); padding:28px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:14px; color:var(--muted);
}
.tf-foot strong { color:var(--ink); font-family:var(--head); }
.tf-page { padding:48px 0 10px; }
.tf-note { color:var(--muted); }
@media (max-width: 900px) {
  .tf-nav nav { display:none; }
  .tf-grid, .tf-plans { grid-template-columns:1fr; }
  .tf-steps { grid-template-columns:1fr 1fr; }
  .tf-desk { grid-template-columns:1fr; }
  .tf-hero { min-height:78vh; }
  .tf-slide h1 { font-size:40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .tf-reveal { opacity:1; transform:none; }
}

.tf-slide.is-on { opacity: 1 !important; visibility: visible; }
.tf-slide:not(.is-on) { opacity: 0 !important; }