/* N-Liquid styles */
:root{
  --accent-1: #ff9f5a; /* warm orange from artwork */
  --accent-2: #ffd57a; /* golden */
  --bg-deep: #0c0f0a;
  --ink: #f6f6f6;
  --muted: rgba(255,255,255,0.86);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg-deep);color:var(--ink)}
.hero{
  min-height:88vh;
  
  background-size:cover;background-position:center;
  position:relative;padding:22px 28px 60px;
  display:flex;flex-direction:column;
}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,.48), rgba(5,8,6,.86));backdrop-filter: blur(2px)}
.nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;width:100%}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:36px;width:36px;border-radius:10px;object-fit:cover;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.brand-name{font-family:'Playfair Display',serif;font-weight:900;letter-spacing:.2px;color:var(--accent-2)}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.btn-launch{background:linear-gradient(90deg,var(--accent-2),var(--accent-1));padding:10px 18px;border-radius:28px;color:#0b0b0b;font-weight:800;text-decoration:none;box-shadow:0 6px 26px rgba(255,160,90,.24)}

.container{position:relative;z-index:2;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 16px}
.logo-mark{height:92px;width:92px;border-radius:16px;opacity:.95}
.title{font-family:'Playfair Display',serif;font-size:72px;line-height:1.02;margin:10px 0 12px;color:#fff}
.subtitle{max-width:760px;color:var(--muted);font-size:18px;margin-bottom:20px}
.cta-row{display:flex;gap:14px;margin-bottom:18px}
.btn{padding:14px 26px;border-radius:999px;border:2px solid rgba(255,255,255,.08);background:transparent;color:var(--accent-2);text-decoration:none;font-weight:800}
.btn.solid{background:linear-gradient(90deg,var(--accent-2),var(--accent-1));color:#0b0b0b;border:none}
.ca-box{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.06);padding:8px 12px;border-radius:12px;margin:12px 0}
.ca-box .label{opacity:.8}
.ca-box code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.ca-box .copy{border:0;border-radius:999px;padding:8px 14px;background:linear-gradient(90deg,var(--accent-2),var(--accent-1));font-weight:800;cursor:pointer}

.feature-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px;align-items:center}
.feature{background:rgba(255,255,255,.05);padding:10px 14px;border-radius:10px;max-width:780px;width:100%}

.disclaimer{opacity:0.18;font-size:12px;margin-top:10px}

.sections{max-width:1100px;margin:-40px auto 40px;padding:0 16px;display:grid;gap:16px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px}
.card h2{font-family:'Playfair Display',serif;margin:0 0 8px}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:rgba(255,255,255,.04);border-radius:12px;padding:14px;text-align:center}
.stat .num{font-size:28px;font-weight:900}
.stat p{margin:6px 0 0;opacity:.8}

.links{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-block;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink);text-decoration:none;font-weight:700}

.footer{border-top:1px solid rgba(255,255,255,.08);padding:18px 16px}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;opacity:.85}

@media (max-width:900px){
  .title{font-size:44px}
  .cta-row{flex-direction:column}
  .stats-grid{grid-template-columns:1fr}
  .nav-links a:nth-child(-n+3){display:none}
}

/* rotating hero background image */
.hero{overflow:hidden;}
.hero::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:url('assets/rotating-bg.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  transform-origin:center;
  animation:slowspin 40s linear infinite;
  opacity:0.18;
  filter:contrast(1.0) brightness(1) grayscale(8%);
  z-index:1;
}

@keyframes slowspin{
  from{ transform:rotate3d(1,1,0,0deg) scale(1.05); }
  to{ transform:rotate3d(1,1,0,360deg) scale(1.05); }
}
  to{ transform:rotate(360deg) scale(1.05); }
}

/* strengthen overlay for readability and add gentle text shadows */
.overlay{background:linear-gradient(180deg, rgba(10,12,11,.70), rgba(5,8,6,.92)); z-index:2;}
.title, .subtitle{ position:relative; z-index:3; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.ca-box, .cta-row, .feature-list, .disclaimer{ position:relative; z-index:3; }

}
/* Remove hero logo explicitly (safety) */
.logo-mark{ display:none !important; }

/* Inline toast under Launch button */
.nav-links{ position:relative; }
#toast-inline{ margin-top:8px;  position:absolute; left:50%; transform:translateX(-50%); top:64px; z-index:9; }
.toast.inline{
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color:#0b0b0b;
  border:2px solid #0b0b0b;
  border-radius:14px;
  padding:14px 18px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-size:18px;
  
  transform:translateY(-8px);
  animation:toastIn .18s ease forwards, toastOut .2s ease forwards 2.2s;
 opacity:0.18; }


/* elevate nav for toast */
.nav{ z-index: 10 !important; position:relative; }


/* keyframes for inline toast */
@keyframes toastIn { 
  from { opacity:0.18; transform:translateY(-8px); }
  to { opacity:0.18; transform:translateY(0); }
}
@keyframes toastOut { 
  from { opacity:0.18; transform:translateY(0); }
  to { opacity:0.18; transform:translateY(-8px); }
}

/* Popup modal */
#popup-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
#popup-modal.popup-hidden{display:none;}
.popup-box{
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color:#0b0b0b;
  font-size:22px;
  font-weight:900;
  padding:28px 36px;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
  text-align:center;
}
.popup-box button{
  margin-top:18px;
  padding:10px 18px;
  font-weight:800;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

/* === Mobile Optimizations === */
:root{
  --tap: 48px; /* min tap target */
}

html, body { height:auto; }

/* Improve hero padding on small screens + safe areas */
.hero{
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 56px max(16px, env(safe-area-inset-left));
}

/* Keep background smooth on mobile */
.hero::before{
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation: none !important; transform: scale(1.05); }
}

/* Tighten overlay for readability on mobile */
@media (max-width: 768px){
  .overlay{ background: linear-gradient(180deg, rgba(8,10,9,.78), rgba(5,8,6,.95)); }
}

/* Brand + nav layout */
@media (max-width: 768px){
  .brand-name{ font-size: 18px; }
  .nav-links{ gap: 12px; }
  .btn-launch{ padding: 12px 14px; border-radius: 999px; }
}

/* Headline + text sizing */
@media (max-width: 768px){
  .title{ font-size: 36px; line-height: 1.08; margin-top: 8px; }
  .subtitle{ font-size: 15px; }
}

/* CTA and buttons: full-width on mobile */
@media (max-width: 768px){
  .cta-row{ flex-direction: column; width: 100%; }
  .btn, .btn.solid{ width: 100%; min-height: var(--tap); }
}

/* Contract box: wrap nicely + easy copy */
@media (max-width: 768px){
  .ca-box{ flex-wrap: wrap; gap: 8px; width: 100%; justify-content: center; }
  .ca-box code{ display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
  .ca-box .copy{ width: 100%; min-height: var(--tap); }
}

/* Cards grid was removed, but keep defaults tidy */
.card{ border-radius: 14px; }
@media (max-width: 768px){
  .sections{ margin: 0 auto 20px; padding: 0 12px; }
}

/* Footer spacing */
@media (max-width: 768px){
  .footer-inner{ gap: 8px; font-size: 13px; }
}

/* Popup modal: ensure it fits small screens */
.popup-box{ max-width: min(560px, 90vw); }
.popup-box button{ width: 100%; min-height: var(--tap); }

/* Ensure nav and popup sit above rotating bg and overlay */
.nav{ z-index: 20 !important; position: relative; }
#popup-modal{ z-index: 9999; }

/* === Responsive Enhancements === */

/* Fluid typography for headings */
.title{
  font-size: clamp(28px, 5.5vw, 72px);
  line-height: 1.08;
  margin-top: 4px;
}
.subtitle{ font-size: clamp(14px, 2.2vw, 18px); line-height: 1.45; }

/* Constrain content width on large screens, add breathing room on small */
.container{ padding: clamp(20px, 4vw, 40px) 16px; max-width: 980px; }

/* Mobile-first nav */
.menu-toggle{
  display:none;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 18px;
  cursor: pointer;
}
@media (max-width: 900px){
  .menu-toggle{ display:inline-block; z-index:21; }
  .brand{ margin-left: 8px; }
  .nav{ gap: 10px; }
  .nav-links{
    position: absolute;
    right: 16px; left: 16px; top: 64px;
    background: rgba(16,16,16,.92);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
  }
  .nav.nav-open .nav-links{ display:flex; }
  .nav-links a, .btn-launch{ width:100%; text-align:center; padding: 12px 14px; }
}

/* Touch-friendly buttons */
.btn, .btn.solid, .btn-launch{ min-height: 48px; }

/* CA box wrapping and readability */
.ca-box{ width: 100%; max-width: 820px; }
.ca-box code{ overflow-x: auto; white-space: nowrap; display:block; }

/* Ensure rotating background doesn't obscure text */
.hero::before{ opacity: 0.18; } /* keep subtle on all sizes */

/* Footer spacing and type */
.footer-inner{ font-size: clamp(12px, 1.8vw, 14px); }


/* === ANDROID / XIAOMI 14T GUARD (2025-09-26) === */
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.hero, .nav, .hero-inner, .section, .footer-inner, .ca-box { max-width: 100%; }

/* Logical padding to prevent edge clipping */
.hero, .section, .footer-inner { padding-inline: 16px; }
@supports (padding: max(0px)) {
  .hero, .section, .footer-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Headlines wrap early */
.hero h1 { max-width: 20ch; overflow-wrap: anywhere; word-break: normal; }
.hero .tagline { max-width: 36ch; overflow-wrap: anywhere; }

/* Full-width buttons on phones */
.cta-row, .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn, .btn.solid, .btn-launch { display: block; width: 100%; max-width: 520px; margin-inline: auto; white-space: normal; }

/* Contract address handling */
.ca-box code { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; word-break: break-all; }

/* Background layers shouldn't affect layout width */
.hero { overflow:hidden; position:relative; }


/* === FINAL MOBILE CLIP FIX (<=740px) === */
@media (max-width: 740px){
  .hero{ overflow: visible !important; }
  .overlay{ inset: 0 !important; transform: none !important; pointer-events: none !important; }
  .container{ width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin: 0 auto !important; }
  .title{ font-size: clamp(22px, 7vw, 32px) !important; line-height: 1.12 !important; max-width: 20ch !important; margin-left: auto !important; margin-right: auto !important; overflow-wrap:anywhere !important; }
  .subtitle{ font-size: clamp(13px, 3.9vw, 16px) !important; max-width: 36ch !important; margin-left: auto !important; margin-right: auto !important; overflow-wrap:anywhere !important; }
  .cta-row{ flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .btn, .btn.solid, .btn-launch{ width: 100% !important; max-width: none !important; white-space: normal !important; }
  .ca-box{ width: 100% !important; }
  .ca-box code{ display:block !important; max-width: 100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
}