/* Focus Tycoon — Coming Soon (Happy Hues #13 exact palette)
   Elements:
   Background: #0f0e17
   Headline/Main: #fffffe
   Paragraph: #a7a9be
   Button: #ff8906 (text #fffffe)
   Secondaries: #f25f4c, #e53170
*/
:root{
  --bg:#0f0e17;
  --text:#fffffe;
  --muted:#a7a9be;
  --btn:#ff8906;
  --btntext:#fffffe;
  --sec:#f25f4c;
  --ter:#e53170;
  --stroke:#000000;

  /* Derived tokens */
  --panel:#151327;
  --ring: rgba(242,95,76,.35); /* from secondary */
  --grid: rgba(255,255,255,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, Inter, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  min-height:100svh;
  overflow-x:hidden;
}

/* Animated abstract background */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.orb{
  position:absolute; width:46vmax; height:46vmax; border-radius:999px;
  filter: blur(70px); opacity:.35; mix-blend:screen;
  animation: float 16s ease-in-out infinite;
}
.orb-a{ background: var(--btn); top:-12vmax; left:-14vmax; animation-delay:-2s }
.orb-b{ background: var(--sec); bottom:-16vmax; right:-20vmax; animation-duration:18s }
.orb-c{ background: var(--ter); top:40%; left:60%; width:34vmax; height:34vmax; animation-duration:22s; animation-delay:-6s }
@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0) }
  50%{ transform: translateY(-18px) translateX(10px) }
}
.grid{
  position:absolute; inset:-200% -200%;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: drift 60s linear infinite;
  mask-image: radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,.65), transparent 70%);
}
@keyframes drift{ from{ transform: translate3d(0,0,0) } to{ transform: translate3d(-44px,-44px,0) } }
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 2px);
  mix-blend-mode: overlay;
}

.wrap{max-width:980px; margin:0 auto; padding:20px 20px;}
.header{display:flex; align-items:center; justify-content:space-between; padding-top:28px;}
.brand{font-weight:900; letter-spacing:.3px}
.small-cta{
  color:var(--btntext); text-decoration:none; background:var(--btn);
  padding:9px 12px; border-radius:12px; font-weight:700;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 20px rgba(255,137,6,.24);
}
.small-cta:hover{ transform: translateY(-1px); filter:brightness(1.05) }

.main{padding:64px 20px}
h1{font-size:clamp(32px, 6vw, 56px); line-height:1.05; margin:.3em 0}
.lead{color:var(--muted); max-width:720px}

.waitlist{display:flex; gap:10px; margin:26px 0 8px}
.waitlist input[type=email]{
  background:var(--panel);
  border:1px solid #232245;
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  min-width:260px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .2s ease;
}
.waitlist input[type=email]:focus{box-shadow:0 0 0 3px var(--ring); transform: translateY(-1px)}
.waitlist button{
  background:var(--btn); color:var(--btntext); border:0; border-radius:12px;
  padding:12px 16px; font-weight:800; cursor:pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 24px rgba(255,137,6,.25);
}
.waitlist button:hover{ transform: translateY(-1px); filter:brightness(1.05) }
.waitlist button.pulse{ animation: pulse 2.2s ease-in-out infinite }
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,137,6,.35) }
  50%{ box-shadow: 0 0 0 12px rgba(255,137,6,0) }
}

.note{opacity:.85; color:var(--muted)}

.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:36px 0}
.tile{
  background:var(--panel); border:1px solid #23233f; padding:20px; border-radius:16px;
  transform: translateY(6px); opacity:0; transition: transform .5s ease, opacity .5s ease;
}
.tile.in{ transform: none; opacity:1 }
.kicker{display:inline-block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--sec); margin-bottom:6px}
.tile h3{margin:6px 0 8px}
.tile p{color:var(--muted)}

.footer{display:flex; align-items:center; justify-content:space-between; padding:40px 20px 60px; gap:16px}
.footer .legal a{color:var(--muted); text-decoration:none; margin-left:14px}
.footer .legal a[aria-disabled="true"]{pointer-events:none; opacity:.6}

@media (max-width:800px){
  .tiles{grid-template-columns:1fr}
  .waitlist{flex-direction:column; align-items:stretch}
}