@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --bg: #08090b;
  --panel: rgba(255,255,255,.055);
  --text: #f7f7f4;
  --muted: #a9aba8;
  --orange: #ff7900;
  --orange-2: #ff9a2f;
  --line: rgba(255,255,255,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 72% 42%, rgba(255,121,0,.09), transparent 25%),
    radial-gradient(circle at 20% 85%, rgba(255,121,0,.06), transparent 24%),
    var(--bg);
  font-family: "DM Sans", system-ui, sans-serif;
}

.noise {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events:none; }
.orb-1 { width: 300px; height:300px; right:-100px; top:15%; background:rgba(255,121,0,.09); }
.orb-2 { width: 220px; height:220px; left:-120px; bottom:5%; background:rgba(255,121,0,.07); }

.page { width:min(1180px, calc(100% - 48px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; position:relative; z-index:1; }
.topbar { height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:Manrope,sans-serif; font-weight:800; letter-spacing:.18em; font-size:14px; }
.brand img { width:34px; height:43px; object-fit:contain; object-position:center; }
.status { color:#c7c9c6; font-size:12px; text-transform:uppercase; letter-spacing:.13em; display:flex; gap:9px; align-items:center; }
.status i { width:7px; height:7px; background:var(--orange); border-radius:50%; box-shadow:0 0 15px var(--orange); animation:pulse 1.7s ease-in-out infinite; }

.hero { flex:1; min-height:calc(100vh - 160px); display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:40px; padding:55px 0 30px; }
.hero-copy { max-width:610px; opacity:0; transform:translateY(20px); animation:rise .9s .12s forwards; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--orange-2); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; margin:0 0 24px; }
.eyebrow span { display:block; width:30px; height:1px; background:var(--orange); }
h1 { font-family:Manrope,sans-serif; font-size:clamp(48px, 6vw, 82px); line-height:.98; letter-spacing:-.055em; margin:0; font-weight:800; }
h1 em { font-style:normal; color:var(--orange); }
.description { max-width:520px; margin:27px 0 34px; color:var(--muted); line-height:1.7; font-size:16px; }
.progress-wrap { max-width:500px; margin-bottom:31px; }
.progress-head { display:flex; justify-content:space-between; color:#c8cac7; font-size:12px; margin-bottom:10px; }
.progress-head strong { color:var(--orange-2); font-size:13px; }
.progress-bar { height:5px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.09); }
.progress-bar span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--orange), #ffae48); box-shadow:0 0 18px rgba(255,121,0,.45); transition:width 1.5s cubic-bezier(.2,.8,.2,1); }
.actions { display:flex; flex-wrap:wrap; gap:11px; }
.button { border:1px solid var(--line); border-radius:12px; padding:13px 17px; color:var(--text); text-decoration:none; background:rgba(255,255,255,.035); font:600 13px "DM Sans"; cursor:pointer; transition:.25s ease; }
.button:hover { transform:translateY(-2px); border-color:rgba(255,121,0,.5); }
.button.primary { border-color:var(--orange); background:var(--orange); color:#111; box-shadow:0 10px 30px rgba(255,121,0,.16); }
.button.primary span { margin-left:10px; }
.button.ghost { color:#ddd; }
.microcopy { min-height:18px; margin:11px 0 0; color:var(--orange-2); font-size:12px; }

.visual { min-height:540px; position:relative; display:grid; place-items:center; perspective:1000px; }
.halo { position:absolute; width:390px; height:390px; border-radius:50%; background:rgba(255,121,0,.07); filter:blur(20px); animation:breathe 4s ease-in-out infinite; }
.grid { position:absolute; width:560px; height:560px; border-radius:50%; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(circle, #000 15%, transparent 67%); transform:rotate(8deg); }
.logo-card { width:min(430px, 70vw); aspect-ratio:4/5; display:grid; place-items:center; position:relative; border:1px solid rgba(255,255,255,.11); border-radius:34px; background:linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.018)); box-shadow:0 35px 80px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.08); transform:rotate(-4deg); overflow:hidden; animation:float 5s ease-in-out infinite; }
.logo-card::before { content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.06); border-radius:24px; }
.logo-card img { width:82%; height:82%; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 18px 25px rgba(0,0,0,.2)); position:relative; z-index:2; }
.shine { position:absolute; width:80px; height:150%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent); transform:rotate(25deg) translateX(-350px); animation:shine 5s 1s infinite; }
.ring { position:absolute; border:1px solid rgba(255,121,0,.24); border-radius:50%; pointer-events:none; }
.ring-1 { width:510px; height:510px; animation:spin 22s linear infinite; }
.ring-2 { width:630px; height:630px; border-color:rgba(255,255,255,.07); animation:spin 35s linear infinite reverse; }
.dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 15px var(--orange); }
.dot-1 { top:17%; right:17%; animation:orbit 4s ease-in-out infinite; }
.dot-2 { bottom:19%; left:11%; width:5px; height:5px; animation:orbit 5s 1s ease-in-out infinite reverse; }
.dot-3 { top:28%; left:8%; width:4px; height:4px; opacity:.55; }
.cross { position:absolute; color:rgba(255,255,255,.25); font-size:20px; font-weight:300; }
.cross-1 { top:10%; left:17%; }
.cross-2 { bottom:10%; right:12%; }

.footer { height:56px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; color:#777a77; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.footer-line { height:1px; flex:1; background:var(--line); }

@keyframes rise { to { opacity:1; transform:none; } }
@keyframes pulse { 50% { opacity:.35; transform:scale(.72); } }
@keyframes breathe { 50% { transform:scale(1.1); opacity:.75; } }
@keyframes float { 0%,100% { transform:rotate(-4deg) translateY(0); } 50% { transform:rotate(-2deg) translateY(-14px); } }
@keyframes shine { 0%,60% { transform:rotate(25deg) translateX(-350px); } 80%,100% { transform:rotate(25deg) translateX(500px); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes orbit { 50% { transform:translate(12px,-15px); } }

@media (max-width: 820px) {
  .page { width:min(100% - 30px, 620px); }
  .topbar { height:80px; }
  .hero { grid-template-columns:1fr; padding:45px 0 25px; gap:20px; }
  .visual { min-height:430px; order:-1; }
  .logo-card { width:min(330px, 65vw); }
  .ring-1 { width:390px; height:390px; }
  .ring-2 { width:470px; height:470px; }
  .grid { width:430px; height:430px; }
  .halo { width:300px; height:300px; }
  h1 { font-size:clamp(45px, 12vw, 68px); }
  .description { font-size:15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}