/* =====================================================================
   Coming-Soon-Seite für syphia.ai (eigenständig, unabhängig von /website).
   Video: Videos/Maintainence Video für die Seite.mp4, unverändert, läuft in Schleife.
   Das Video ist kleiner gesetzt; seine Ränder blenden weich in den Seitenhintergrund
   (gleiche Farbe #0E0E0E + gleiches Filmkorn), darunter Countdown und Glasbox für die E-Mail.
   ===================================================================== */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(fonts/Geist-Regular.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url(fonts/Geist-Medium.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(fonts/GeistMono-Regular.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(fonts/GeistMono-Medium.woff2) format("woff2")}

:root{--bg:#0E0E0E;--paper:#F2F2F0;--mute:#A9A49D;--mute-2:#8B867F;--orange:#FF5A1F;--orange-3:#FFB08A;--err:#FF7A70}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--paper);font-family:"Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,4vh,48px) 16px;overflow-x:hidden}
main{width:100%;display:flex;flex-direction:column;align-items:center}

/* Filmkorn über der ganzen Seite: gleiches Muster wie im Video, damit der Videorand nicht auffällt */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:5;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* Video: kleiner, oben/unten leerer Rand weggeschnitten, Kanten blenden aus */
.film{position:relative;width:min(880px,100%);aspect-ratio:16/7;overflow:hidden;
  /* Kanten: links/rechts schmal, oben/unten etwas breiter ausblenden (Logo bleibt voll sichtbar) */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 16%,#000 84%,transparent);
  mask-composite:intersect}
.film video{position:absolute;left:50%;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);display:block}
@media (max-width:600px){
  /* Handy: Video etwas größer als der Schirm, damit das Logo gut lesbar ist (Rand ist ohnehin leer) */
  .film{width:calc(100% + 32px);aspect-ratio:16/8.4}
  .film video{width:122%}
}

/* Countdown */
.count{margin-top:clamp(4px,1vh,14px);text-align:center}
.count .k{font:400 11px/1 "Geist Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)}
.count .k b{color:var(--orange);font-weight:500}
.cells{margin-top:14px;display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,1.4vw,14px)}
.cell{min-width:clamp(62px,9vw,92px);text-align:center}
.cell .v{display:block;font:400 clamp(30px,5vw,52px)/1 "Geist Mono",monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cell .l{display:block;margin-top:9px;font:400 10px/1 "Geist Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)}
.sep{font:400 clamp(26px,4vw,44px)/1 "Geist Mono",monospace;color:var(--orange);opacity:.9;padding-top:2px}

/* Glasbox */
.glass-wrap{position:relative;margin-top:clamp(26px,4.5vh,44px);width:min(520px,100%)}
.glass-wrap::before{content:"";position:absolute;left:50%;top:50%;width:70%;height:80%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,90,31,.32),rgba(255,90,31,0));filter:blur(28px);pointer-events:none}
.glass{position:relative;padding:clamp(20px,3vw,28px);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 60px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.glass h2{font-weight:500;font-size:clamp(18px,2.2vw,21px);line-height:1.25;letter-spacing:-.01em}
.glass p.lead{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--mute)}
.row{margin-top:18px;display:flex;gap:8px}
.row input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);
  color:var(--paper);font:400 16px/1 "Geist",sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
.row input::placeholder{color:var(--mute-2)}
.row input:focus{border-color:rgba(255,90,31,.7);box-shadow:0 0 0 3px rgba(255,90,31,.18)}
.row input[aria-invalid="true"]{border-color:var(--err)}
.row button{height:48px;padding:0 18px;border:0;border-radius:12px;background:var(--orange);color:#0E0E0E;font:500 15px/1 "Geist",sans-serif;cursor:pointer;white-space:nowrap;transition:filter .2s,transform .1s}
.row button:hover{filter:brightness(1.08)}
.row button:active{transform:translateY(1px)}
.row button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.row button[disabled]{opacity:.6;cursor:default}
.consent{margin-top:14px;display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--mute-2);cursor:pointer}
.consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--orange)}
.consent a{color:var(--mute);text-underline-offset:2px}
.msg{margin-top:12px;min-height:1.4em;font-size:13.5px;line-height:1.45}
.msg:empty{margin-top:0;min-height:0}
.msg.ok{color:var(--orange-3)}
.msg.err{color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:440px){.row{flex-direction:column}.row input{flex:none;width:100%}.row button{width:100%}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}