@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg:#080808;
  --bg-elevated:#0f0f14;
  --bg-card:#13131a;
  --surface:#1a1a22;
  --accent:#2eb8d6;
  --accent-dim:rgba(46,184,214,0.06);
  --accent-glow:rgba(46,184,214,0.12);
  --accent-border:rgba(46,184,214,0.25);
  --text:#f2f2f0;
  --text-dim:rgba(242,242,240,0.55);
  --text-faint:rgba(242,242,240,0.30);
  --text-ghost:rgba(242,242,240,0.14);
  --hairline:rgba(255,255,255,0.05);
  --hairline-hover:rgba(255,255,255,0.10);
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:'Space Grotesk',-apple-system,sans-serif;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-quint:cubic-bezier(0.23,1,0.32,1);
  --radius:6px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-full:999px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;cursor:none;min-height:100vh;letter-spacing:-0.01em}
::selection{background:rgba(46,184,214,0.2);color:var(--text)}
img{max-width:100%;height:auto;display:block}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text-ghost);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}

.grain-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px}

.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:10000;width:0%;transition:width 0.1s linear;box-shadow:0 0 10px rgba(46,184,214,0.3)}

.reveal{opacity:0;transform:translateY(50px);transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.15s}
.reveal-delay-2{transition-delay:0.3s}
.reveal-delay-3{transition-delay:0.45s}
.reveal-delay-4{transition-delay:0.6s}
.text-reveal{overflow:hidden}
.text-reveal>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-out-expo)}
.text-reveal.visible>span{transform:translateY(0)}

.cursor-glass{position:fixed;top:0;left:0;width:22px;height:22px;border-radius:50%;pointer-events:none;z-index:100001;transform:translate(-50%,-50%);background:rgba(255,255,255,0.06);backdrop-filter:blur(6px) saturate(1.3);-webkit-backdrop-filter:blur(6px) saturate(1.3);border:1px solid rgba(255,255,255,0.18);box-shadow:0 4px 16px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.1);transition:width 0.35s var(--ease-out-expo),height 0.35s var(--ease-out-expo),background 0.35s,border-color 0.35s,box-shadow 0.35s;will-change:transform}
body.hovering .cursor-glass{width:48px;height:48px;background:rgba(46,184,214,0.08);border-color:rgba(46,184,214,0.4);box-shadow:0 8px 32px rgba(46,184,214,0.15),inset 0 1px 1px rgba(255,255,255,0.15)}
body.clicking .cursor-glass{width:14px;height:14px;background:rgba(46,184,214,0.2);border-color:rgba(46,184,214,0.6);box-shadow:0 0 20px rgba(46,184,214,0.3)}
@media (pointer:coarse){.cursor-glass{display:none!important}body{cursor:auto!important}}

.marquee-section{padding:4rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden;background:var(--bg-elevated)}
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 24s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,5.5rem);font-weight:600;letter-spacing:-0.03em;color:transparent;-webkit-text-stroke:1px var(--text-ghost);white-space:nowrap;padding:0 3rem;transition:color 0.4s ease,-webkit-text-stroke-color 0.4s ease;cursor:none}
.marquee-item:hover{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

section{position:relative;padding:10rem 0}
@media (max-width:768px){section{padding:6rem 0}}

.section-tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:0.65rem;font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:var(--accent);margin-bottom:2.5rem}
.section-tag::before{content:'';width:24px;height:1px;background:var(--accent)}

.btn-primary{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:0.85rem;font-weight:600;letter-spacing:0.01em;padding:16px 36px;background:var(--text);color:var(--bg);border-radius:var(--radius-full);border:none;cursor:none;transition:transform 0.3s var(--ease-out-expo),box-shadow 0.3s ease;position:relative;overflow:hidden}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.btn-primary:active{transform:scale(0.98)}
.btn-secondary{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:0.85rem;font-weight:600;letter-spacing:0.01em;padding:16px 36px;background:transparent;color:var(--text);border:1px solid var(--hairline-hover);border-radius:var(--radius-full);cursor:none;transition:all 0.3s var(--ease-out-quint)}
.btn-secondary:hover{border-color:var(--text);background:rgba(242,242,240,0.03);transform:translateY(-2px)}
.btn-full{width:100%;justify-content:center}

.modal-overlay{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;background:rgba(8,8,8,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity 0.4s ease}
.modal-overlay.active{display:flex;opacity:1}
.modal-box{position:relative;max-width:440px;width:90%;padding:3.5rem 2.5rem;border:1px solid var(--hairline);border-radius:var(--radius-xl);background:var(--bg-elevated);text-align:center;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.5);transform:scale(0.95);transition:transform 0.4s var(--ease-out-expo)}
.modal-overlay.active .modal-box{transform:scale(1)}
.modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.modal-icon{width:52px;height:52px;margin:0 auto 1.5rem;border-radius:50%;background:linear-gradient(135deg,var(--accent),rgba(46,184,214,0.6));display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--bg);box-shadow:0 0 30px var(--accent-glow)}
.modal-box h2{font-size:1.3rem;margin-bottom:0.75rem;font-family:var(--font-display);font-weight:600}
.modal-box p{font-size:0.9rem;color:var(--text-dim);margin-bottom:2rem;line-height:1.7;margin-left:auto;margin-right:auto;max-width:32ch}
.order-num-box{border:1px solid var(--hairline);border-radius:var(--radius);padding:1rem;margin-bottom:2rem;background:var(--accent-dim)}
.order-num-box .label{display:block;font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px}
.order-num-box .num{font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:0.1em;color:var(--accent)}

.form-input{width:100%;padding:16px 20px;background:var(--bg-card);border:1px solid var(--hairline);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);font-size:0.92rem;outline:none;transition:all 0.3s var(--ease-out-quint);cursor:none;line-height:1.5}
.form-input::placeholder{color:var(--text-ghost)}
.form-input:focus{border-color:var(--accent);background:var(--bg-elevated);box-shadow:0 0 0 3px var(--accent-dim)}
.form-textarea{min-height:130px;resize:vertical}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23444' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:42px}
select.form-input option{background:var(--bg-card);color:var(--text)}

.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:2rem 0;transition:padding 0.4s var(--ease-out-expo),background 0.4s ease,border-color 0.4s ease;border-bottom:1px solid transparent}
.navbar.scrolled{padding:1rem 0;background:rgba(8,8,8,0.85);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-bottom-color:var(--hairline)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;padding:0 3rem}
@media (max-width:768px){.nav-inner{padding:0 1.5rem}}
.nav-logo{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-0.02em;color:var(--text);display:flex;align-items:center;gap:2px;position:relative;z-index:2;text-decoration:none}
.nav-logo span{color:var(--accent);font-weight:500}
.nav-logo sup{font-size:0.5rem;color:var(--text-faint);margin-left:3px;font-weight:400;letter-spacing:0;text-decoration:none}
.nav-links{display:flex;gap:3rem;list-style:none;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{font-family:var(--font-body);font-size:0.82rem;font-weight:500;letter-spacing:0.02em;color:var(--text-dim);position:relative;padding:4px 0;transition:color 0.3s ease;text-decoration:none;border-bottom:none}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:none}
.nav-cta{font-family:var(--font-display);font-size:0.75rem;font-weight:600;letter-spacing:0.05em;padding:10px 24px;border:1px solid var(--hairline-hover);border-radius:var(--radius-full);color:var(--text);background:transparent;transition:all 0.3s var(--ease-out-quint);position:relative;overflow:hidden;cursor:none;text-decoration:none}
.nav-cta::before{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform 0.4s var(--ease-out-expo);z-index:-1;border-radius:var(--radius-full)}
.nav-cta:hover{border-color:var(--accent);color:var(--bg)}
.nav-cta:hover::before{transform:scaleX(1);transform-origin:left}
.mobile-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001}
.mobile-toggle span{display:block;width:22px;height:1.5px;background:var(--text);transition:all 0.3s var(--ease-out-expo)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--bg);z-index:999;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:140px;padding-bottom:3rem;gap:1.75rem;opacity:0;visibility:hidden;transition:opacity 0.5s ease,visibility 0.5s;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-nav.active{display:flex;opacity:1;visibility:visible}
.mobile-nav a{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.2rem);font-weight:500;color:var(--text);opacity:0;transform:translateY(12px);transition:opacity 0.4s ease,transform 0.4s var(--ease-out-expo),color 0.3s ease;text-decoration:none;letter-spacing:-0.02em;position:relative;padding:0.5rem 0}
.mobile-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--accent);transition:width 0.4s var(--ease-out-expo)}
.mobile-nav a:hover{color:var(--accent)}
.mobile-nav a:hover::after{width:100%}
.mobile-nav.active a{opacity:0.85;transform:translateY(0)}
.mobile-nav.active a:hover{opacity:1}
.mobile-nav.active a:nth-child(1){transition-delay:0.08s}
.mobile-nav.active a:nth-child(2){transition-delay:0.13s}
.mobile-nav.active a:nth-child(3){transition-delay:0.18s}
.mobile-nav.active a:nth-child(4){transition-delay:0.23s}
.mobile-nav.active a:nth-child(5){transition-delay:0.28s}
.mobile-nav.active a:nth-child(6){transition-delay:0.33s}
.mobile-nav.active a:nth-child(7){transition-delay:0.38s}
.mobile-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;position:relative;width:28px;height:20px;align-items:center;justify-content:center}
.mobile-toggle span{display:block;width:22px;height:1.5px;background:var(--text);transition:all 0.3s var(--ease-out-expo);border-radius:1px}
.mobile-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mobile-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:768px){.nav-links,.nav-cta{display:none}.mobile-toggle{display:flex}}

.footer{padding:8rem 0 3rem;border-top:1px solid var(--hairline);background:var(--bg)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:5rem;margin-bottom:6rem}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:4rem}}
@media (max-width:500px){.footer-top{grid-template-columns:1fr}}
.footer-brand .nav-logo{font-size:1.3rem;margin-bottom:1rem}
.footer-brand p{font-size:0.9rem;color:var(--text-faint);line-height:1.7;max-width:280px}
.footer-links h4{font-family:var(--font-display);font-size:0.6rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-ghost);margin-bottom:1.5rem}
.footer-links a{display:block;font-size:0.85rem;color:var(--text-dim);padding:8px 0;transition:color 0.25s ease;text-decoration:none;border-bottom:none}
.footer-links a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:3rem;border-top:1px solid var(--hairline)}
@media (max-width:600px){.footer-bottom{flex-direction:column;gap:1.5rem;text-align:center}}
.footer-bottom p{font-size:0.75rem;color:var(--text-ghost)}
.footer-socials{display:flex;gap:1rem}
.footer-socials a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--hairline);color:var(--text-faint);font-size:0.85rem;transition:all 0.3s ease;text-decoration:none}
.footer-socials a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}html{scroll-behavior:auto}.marquee-track{animation:none}}

/* ─── SLAM TYPING PHYSICS ─── */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select.form-input{
  caret-color:var(--accent);
  font-variation-settings:'wght' 400;
  letter-spacing:-0.02em;
  transform:scale(1) translateY(0);
  text-shadow:none;
  transition:font-variation-settings 0.6s var(--ease-out-expo),
             letter-spacing 0.6s var(--ease-out-expo),
             transform 0.6s var(--ease-out-expo),
             text-shadow 0.4s ease,
             box-shadow 0.6s var(--ease-out-expo),
             border-color 0.3s var(--ease-out-quint),
             background 0.4s ease;
}
input.typing-slam,
textarea.typing-slam,
select.typing-slam{
  font-variation-settings:'wght' 580;
  letter-spacing:0.08em;
  transform:scale(1.025) translateY(-3px);
  text-shadow:0 0 16px rgba(46,184,214,0.5),0 0 4px rgba(46,184,214,0.3);
  box-shadow:0 12px 40px rgba(46,184,214,0.18),0 0 0 3px rgba(46,184,214,0.35),inset 0 1px 0 rgba(255,255,255,0.03);
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--bg-card) 0%,rgba(46,184,214,0.04) 100%);
}