/* ============ Tokens ============ */
:root{
  --ink:#0A0D12;
  --panel:#131720;
  --panel-2:#171C26;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --blueprint:#5B9BC4;
  --blueprint-dim:#3C6E8F;
  --ignition:#FF7A45;
  --ignition-2:#FFB07A;
  --paper:#F2F4F7;
  --body-c:#AEB6C3;
  --mute:#78849A;
  --font-display:'Chakra Petch', 'Segoe UI', sans-serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ============ Reset & Base ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(91,155,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,196,.05) 1px, transparent 1px);
  background-size:46px 46px, 46px 46px;
  color:var(--body-c);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3{ font-family:var(--font-display); color:var(--paper); font-weight:600; line-height:1.1; letter-spacing:-.01em; }
p{ max-width:60ch; }
::selection{ background:rgba(255,122,69,.28); color:var(--paper); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--panel-2); border-radius:5px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--blueprint-dim); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--ignition); outline-offset:3px; border-radius:4px; }

/* ============ Grain overlay ============ */
.grain{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Containers ============ */
.nav-inner,.hero-inner,.section-inner,.footer-inner{
  max-width:1180px; margin:0 auto; padding-inline:clamp(1.25rem,5vw,2.5rem);
}

/* ============ Eyebrow (shared kicker label) ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blueprint); margin-bottom:1.1rem;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ignition); box-shadow:0 0 8px rgba(255,122,69,.8); flex:none; }

/* ============ Nav ============ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1000; border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.nav.scrolled{ background:rgba(10,13,18,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.3); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; position:relative; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{ width:30px; height:30px; flex:none; border-radius: 6px; }
.brand-word{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; letter-spacing:.06em; color:var(--paper); }
.nav-links{ display:flex; align-items:center; gap:2.1rem; position:absolute; left:50%; transform:translateX(-50%); }
.nav-links a{ color:var(--body-c); font-size:.92rem; font-weight:500; transition:color .2s ease; }
.nav-links a:hover{ color:var(--paper); }
.nav-links a.nav-cta{
  color:var(--paper); font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.6rem 1.15rem; border:1px solid var(--border-strong); border-radius:8px; transition:all .25s ease;
}
.nav-links a.nav-cta:hover{ border-color:var(--ignition); background:rgba(255,122,69,.08); color:var(--ignition-2); }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:42px; background:transparent; border:1px solid var(--border-strong); border-radius:8px; cursor:pointer; flex:none; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--paper); transition:transform .3s ease, opacity .3s ease; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ Buttons ============ */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.95rem 1.7rem; border-radius:10px; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease; cursor:pointer; }
.btn-primary{ background:linear-gradient(135deg, var(--ignition), var(--ignition-2)); color:#1A0C04; font-weight:600; box-shadow:0 10px 28px rgba(255,122,69,.25); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,122,69,.4); }
.btn-ghost{ border-color:var(--border-strong); background:rgba(255,255,255,.02); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--blueprint); background:rgba(91,155,196,.08); transform:translateY(-2px); }

/* ============ Hero ============ */
.hero{ position:relative; overflow:hidden; padding:150px 0 70px; }
.hero-glow{ position:absolute; border-radius:50%; filter:blur(95px); pointer-events:none; z-index:0; }
.glow-a{ width:420px; height:420px; background:radial-gradient(circle, rgba(255,122,69,.24), transparent 70%); top:2%; left:-4%; }
.glow-b{ width:380px; height:380px; background:radial-gradient(circle, rgba(91,155,196,.18), transparent 70%); bottom:-8%; right:4%; }
.hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3rem; }
.hero-copy h1{ font-size:clamp(2.5rem,4.6vw + 1rem,4.4rem); margin-bottom:1.4rem; }
.hero-copy h1 .accent{ background:linear-gradient(135deg, var(--ignition), var(--ignition-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub{ font-size:clamp(1rem,.4vw + .95rem,1.14rem); color:var(--body-c); max-width:66ch; margin: 0 auto 2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.scroll-cue{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:1px; height:42px; background:var(--border-strong); overflow:hidden; z-index:1; }
.scroll-cue span{ position:absolute; top:-42px; left:0; width:100%; height:40%; background:linear-gradient(var(--ignition), transparent); animation:scrollcue 2.2s ease-in-out infinite; }

/* ============ Sections (generic) ============ */
.section{ padding:clamp(4.5rem,8vw,7rem) 0; border-top:1px solid var(--border); }
.section h2{ font-size:clamp(2rem,2.4vw + 1rem,2.85rem); margin-bottom:1rem; max-width:18ch; }
.section-sub{ color:var(--body-c); max-width:56ch; font-size:1.02rem; }

/* ============ Apps Grid & Cards ============ */
.apps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:3rem; perspective:1200px; }
.app-card{
  position:relative; display:flex; flex-direction:column; gap:1.1rem;
  background:var(--panel); border-radius:16px; padding:1.85rem;
  color:inherit; will-change:transform;
  transition:transform .3s ease, border-color .35s ease, box-shadow .35s ease, opacity .3s ease;
}
.app-card.live{ border:1px solid rgba(255,122,69,.28); }
.app-card.live:hover{ border-color:rgba(255,122,69,.6); box-shadow:0 22px 48px rgba(255,122,69,.14); }
.app-card.live{ cursor:pointer; }
.app-card.soon{ border:1px dashed rgba(91,155,196,.4); opacity:.94; }
.app-card.soon:hover{ border-color:rgba(91,155,196,.7); box-shadow:0 22px 48px rgba(91,155,196,.13); opacity:1; }
.card-top{ display:flex; align-items:center; justify-content:space-between; }
.app-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--panel-2); flex:none; }
.icon-live svg{ stroke:var(--ignition); }
.icon-soon svg{ stroke:var(--blueprint); }
.status{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .65rem; border-radius:999px; flex:none; }
.status i{ width:6px; height:6px; border-radius:50%; display:block; }
.status-live{ color:var(--ignition-2); background:rgba(255,122,69,.12); }
.status-live i{ background:var(--ignition); box-shadow:0 0 8px rgba(255,122,69,.85); animation:blink 2.2s ease-in-out infinite; }
.status-soon{ color:var(--blueprint); background:rgba(91,155,196,.12); }
.status-soon i{ background:var(--blueprint); }
.app-card h3{ font-size:1.35rem; }
.app-card p{ font-size:.96rem; color:var(--body-c); max-width:none; }
.spec-strip{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:auto; padding-top:1.05rem; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }
.spec-strip b{ display:block; color:var(--body-c); font-weight:500; text-transform:none; letter-spacing:0; font-size:.85rem; margin-top:.2rem; font-family:var(--font-body); }
.card-link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ignition-2); }
.card-link svg{ transition:transform .25s ease; }
.app-card.live:hover .card-link svg{ transform:translateX(4px); }

/* ============ Why / Values ============ */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2.2rem; margin-top:3.2rem; }
.value-icon{ width:44px; height:44px; border-radius:12px; background:var(--panel); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.value-icon svg{ stroke:var(--blueprint); }
.value h3{ font-size:1.1rem; margin-bottom:.55rem; }
.value p{ font-size:.94rem; color:var(--body-c); }

/* ============ Contact ============ */
.contact-inner{ text-align:left; }
.contact .hero-actions{ margin-top:2rem; justify-content:flex-start; }

/* ============ Footer ============ */
footer{ border-top:1px solid var(--border); padding:2.6rem 0; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.footer-inner .brand{ display:flex; align-items:center; gap:.55rem; }
.footer-inner .brand-word{ font-size:.92rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.footer-links a{ font-size:.85rem; color:var(--mute); transition:color .2s ease; }
.footer-links a:hover{ color:var(--paper); }
.copyright{ font-family:var(--font-mono); font-size:.74rem; color:var(--mute); max-width:none; }

/* ============ Scroll reveal ============ */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
.apps-grid [data-reveal]:nth-child(2){ transition-delay:.1s; }
.apps-grid [data-reveal]:nth-child(3){ transition-delay:.2s; }
.values-grid [data-reveal]:nth-child(2){ transition-delay:.08s; }
.values-grid [data-reveal]:nth-child(3){ transition-delay:.16s; }
.values-grid [data-reveal]:nth-child(4){ transition-delay:.24s; }

/* ============ Keyframes ============ */
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes scrollcue{ 0%{ top:-42px; } 100%{ top:42px; } }

/* ============ Responsive ============ */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ margin:0 auto; }
}
@media (max-width:860px){
  .nav-links{
    position:fixed; top:78px; left:0; right:0; transform:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,13,18,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden; opacity:0; padding:0 1.5rem;
    transition:max-height .35s ease, opacity .3s ease, padding .35s ease;
  }
  .nav-links.open{ max-height:420px; opacity:1; padding:1.2rem 1.5rem 1.5rem; }
  .nav-links a{ padding:.9rem 0; border-bottom:1px solid var(--border); font-size:1rem; }
  .nav-links a.nav-cta{ margin-top:.7rem; text-align:center; justify-content:center; }
  .nav-toggle{ display:flex; }
  #userName { display:none !important; }
  #loginBtn { font-size: 0.85rem !important; padding: 0.4rem 0.6rem !important; }
}
@media (max-width:640px){
  .hero{ padding:128px 0 56px; min-height:auto; }
  .scroll-cue{ display:none; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .section-inner .hero-actions .btn{ width:auto; }
}
@media (max-width:480px){
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Breadcrumb Styles */
.page-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:#8E9BAE;padding:12px 0 0;flex-wrap:wrap;}.page-breadcrumb a{color:#8E9BAE;text-decoration:none;transition:color .2s;}.page-breadcrumb a:hover{color:#FFD700;}.page-breadcrumb .sep{color:#3D4A5C;}.page-breadcrumb .current{color:#CBD5E0;}