/* TetraOps.AI splash. A clean light page; the mark is a real 3D object in iridescent metal. */
:root{
  color-scheme: light;
  --bg:#ffffff;
  --ink:#0b1633;
  --ink-2:#1f2a44;
  --ink-3:#4a5670;
  --brand:#1f5497;
  --brand-2:#4f8bff;
  --cyan:#12b5dc;
  --neon:#5fe0ff;
  --violet:#7c3aed;
  --line:rgba(31,84,151,.16);
  --glass:rgba(255,255,255,.64);
  --font-display:"Google Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Google Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1500px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  overflow-x:hidden;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}
h1{text-wrap:balance}

/* Ambient light: two slow-drifting glows behind everything */
.glow{position:fixed;z-index:0;pointer-events:none;border-radius:50%;will-change:transform}
.glow-a{width:70vmax;height:70vmax;left:-25vmax;top:-30vmax;background:radial-gradient(circle,rgba(79,139,255,.2),rgba(79,139,255,0) 62%);animation:driftA 22s ease-in-out infinite alternate}
.glow-b{width:60vmax;height:60vmax;right:-22vmax;bottom:-28vmax;background:radial-gradient(circle,rgba(18,181,220,.16),rgba(18,181,220,0) 62%);animation:driftB 26s ease-in-out infinite alternate}
@keyframes driftA{to{transform:translate(9vmax,6vmax)}}
@keyframes driftB{to{transform:translate(-8vmax,-7vmax)}}

.wrap{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
main{flex:1;display:flex;align-items:center}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px 8px}
.brand{display:inline-flex;text-decoration:none}
.brand img{height:24px;width:auto}
.hud-status{
  display:inline-flex;align-items:center;gap:10px;
  font:500 .66rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:999px;background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:11px 15px 11px 13px;
  box-shadow:0 8px 24px -16px rgba(31,84,151,.5);
}
.hud-status b{font:700 .72rem/1 var(--font-display);letter-spacing:.12em;color:var(--brand)}
.hud-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:beacon 2.2s ease-out infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(18,181,220,.5)}70%{box-shadow:0 0 0 8px rgba(18,181,220,0)}100%{box-shadow:0 0 0 0 rgba(18,181,220,0)}}

/* Hero: copy on the left, the object on the right */
.hero{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,5vw,80px);align-items:center;
  padding-block:clamp(12px,2.5vw,28px) clamp(20px,3vw,36px);
}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:26px;max-width:600px}
.eyebrow{margin:0;display:flex;align-items:center;gap:10px;font:600 .8rem/1.5 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow .mono{font:500 .84rem/1 var(--font-mono);color:var(--cyan);letter-spacing:0}
h1{margin:0;font:700 clamp(2.8rem,4.8vw,5.2rem)/1 var(--font-display);letter-spacing:-.022em;color:var(--ink)}
h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 50%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin:0;font-size:clamp(1.05rem,1.15vw,1.25rem);font-weight:500;line-height:1.6;color:var(--ink-2);max-width:28em}

/* Launch badge: a flat status label, not a UI chip */
.launch{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:8px 14px;border-radius:6px;background:rgba(31,84,151,.08);
}
.launch-text{
  font:600 .72rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
}

/* The object: a square stage; the 3D mark renders in the canvas, the wordmark sits beneath it */
.artifact{position:relative;justify-self:center;width:min(100%,800px,calc(100vh - 200px));aspect-ratio:1;--px:0;--py:0}
.gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.obj-mark{position:absolute;left:50%;top:14%;width:44%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 28px 36px rgba(31,84,151,.2))}
.artifact.is-3d .obj-mark{display:none}
.obj-word{position:absolute;left:50%;top:84%;width:58%;height:auto;transform:translate(calc(-50% + var(--px)*4px),calc(var(--py)*3px))}
.obj-tag{
  position:absolute;left:50%;top:92.5%;margin:0;display:flex;gap:1.7em;
  font:600 .74rem/1 var(--font-display);letter-spacing:.36em;text-transform:uppercase;color:var(--brand);white-space:nowrap;
  transform:translate(calc(-50% + var(--px)*4px),calc(var(--py)*3px));
}

/* Entrance: motion only, so the resting state is always fully visible */
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
.hero-copy>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(1){animation-delay:0s}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}

/* Footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-block:18px 26px;color:var(--ink-3);font-size:.9rem;font-weight:500}
.foot .tag-l{font:600 .66rem/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.foot .build{font:500 .62rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:12px}
  .artifact{order:-1;width:min(100%,480px)}
  .hero-copy{max-width:640px}
}
@media (max-width:560px){
  .brand img{height:18px}
  .hud-status{font-size:.58rem;padding:8px 11px 8px 10px}
  .hud-status b{font-size:.62rem}
  .launch{padding:14px 20px 14px 16px;gap:12px}
  .obj-tag{font-size:.56rem;letter-spacing:.22em;gap:1.2em}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.hud-dot,.glow,.launch{animation:none}
}