:root{
  /* Genuine black background now, rather than a visibly indigo/purple dark
     tone — keeping just a hair of cool tint so it still feels connected to
     the gif rather than a flat neutral black. Section separation now relies
     on the page's existing white borders rather than subtle shade shifts. */
  --bg:#050506; --ink:#f1f2f7; --ink-soft:#9295ab; --line:#232430;
  --panel:#000000; --gray:#131419;
}
*{box-sizing:border-box;margin:0;padding:0;overflow-wrap:break-word;}
html,body{max-width:100%;overflow-x:hidden;}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;}
#app{max-width:1200px;margin:0 auto;background:var(--bg);}

header{display:flex;align-items:center;justify-content:space-between;padding:28px 44px;border-bottom:2px solid var(--ink);}
.wordmark{display:flex;align-items:center;gap:14px;}
.mark{width:36px;height:36px;border:2px solid var(--ink);border-radius:0;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;flex:0 0 auto;}
.mark img{width:22px;height:22px;object-fit:contain;}
.wordmark-text .name{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;}
.wordmark-text .sub{font-size:9.5px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-family:'JetBrains Mono',monospace;}
nav{display:flex;gap:28px;align-items:center;}
nav a{color:var(--ink);cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid transparent;opacity:.75;transition:.15s;}
nav a svg{width:18px;height:18px;}
nav a:hover{opacity:1;border-color:var(--ink);}
a:focus-visible, button:focus-visible, [onclick]:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

.hero{
  padding:110px 44px 100px;
  border-bottom:2px solid var(--ink);
  position:relative;
  background:#06070e url('night-sky-meteor.gif') center center / cover no-repeat;
}
.hero::before{
  /* Dark overlay so the heading stays readable no matter where the stars or
     meteor happen to be underneath it, rather than relying on luck. */
  content:'';
  position:absolute; inset:0;
  background:rgba(6,7,14,0.45);
}
.hero > *{ position:relative; z-index:1; }
.hero .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#bcbecf;margin-bottom:26px;font-family:'JetBrains Mono',monospace;text-align:center;}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:58px;font-weight:700;line-height:1.08;max-width:880px;margin:0 auto 30px;text-align:center;letter-spacing:-.01em;color:#fff;}
.hero h1 .rule{display:inline-block;width:64px;height:4px;background:#fff;margin:22px 0;}
.hero p{max-width:520px;margin:0 auto;color:#c7c9d6;font-size:15px;line-height:1.75;text-align:center;}

.reveal-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0);}
.section-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;text-align:center;font-family:'JetBrains Mono',monospace;}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;text-align:center;margin-bottom:54px;letter-spacing:-.01em;}

.products{padding:80px 44px;border-bottom:2px solid var(--ink);}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1080px;margin:0 auto;border:2px solid var(--ink);}
.product-card{border-right:2px solid var(--ink);transition:.15s;}
.product-card:last-child{border-right:none;}
.product-card.active{cursor:pointer;}
.product-card.active:hover{background:var(--ink);color:var(--bg);}
.product-card.active:hover .product-kicker{color:var(--bg);}
.product-card.active:hover p{color:#4a4d63;}
.product-card.active:hover .product-mark{background:var(--bg);}
.product-media{height:150px;min-height:150px;max-height:150px;flex-shrink:0;background:#fff;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:2px solid var(--ink);overflow:hidden;}
.product-media > img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;padding:14px;box-sizing:border-box;}
.product-media .product-mark{width:50px;height:50px;border-radius:0;background:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;}
.product-media .product-mark img{width:30px;height:30px;object-fit:contain;}
.product-body{padding:26px 24px 30px;}
.product-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;font-family:'JetBrains Mono',monospace;}
.product-body h3{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;margin-bottom:10px;}
.product-body p{font-size:13px;color:var(--ink-soft);line-height:1.65;margin-bottom:18px;}
.product-cta{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;font-family:'JetBrains Mono',monospace;}
.product-card.soon{opacity:1;}
.product-card.soon .product-media{background:repeating-linear-gradient(135deg,#fff,#fff 8px,#e8e8e8 8px,#e8e8e8 16px);}
.product-card.soon .product-mark{background:#fff;border-style:dashed;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;}
.soon-badge{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--bg);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;font-family:'JetBrains Mono',monospace;}

.preorder{padding:70px 44px;border-bottom:2px solid var(--ink);}
.preorder-inner{max-width:640px;margin:0 auto;text-align:center;border:2px solid var(--ink);padding:48px 40px;}
.preorder-inner .section-label{margin-bottom:10px;}
.preorder-inner h2{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em;}
.preorder-inner p{color:var(--ink-soft);font-size:14px;line-height:1.7;margin-bottom:26px;}
.preorder-btn{display:inline-block;padding:14px 32px;background:var(--ink);color:var(--bg);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;text-decoration:none;cursor:pointer;transition:.15s;border:2px solid var(--ink);}
.preorder-btn:hover{background:transparent;color:var(--ink);}
.preorder-empty{color:var(--ink-soft);font-size:13px;font-style:italic;}

.founders{padding:80px 44px;border-bottom:2px solid var(--ink);}
.founders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;max-width:820px;margin:0 auto;border:2px solid var(--ink);}
.founder-card{padding:36px 30px;text-align:center;border-right:2px solid var(--ink);}
.founder-card:last-child{border-right:none;}
.founder-photo{width:88px;height:88px;border-radius:50%;border:2px solid var(--ink);margin:0 auto 18px;overflow:hidden;background:var(--gray);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.founder-card h3{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;margin-bottom:4px;}
.founder-card .title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;font-family:'JetBrains Mono',monospace;}
.founder-card p{font-size:13px;color:var(--ink-soft);line-height:1.65;}
.founders-empty{text-align:center;color:var(--ink-soft);font-size:13px;font-style:italic;}

.contact{background:var(--panel);color:#fff;padding:80px 44px;}
.contact-inner{max-width:560px;margin:0 auto;text-align:center;}
.contact-inner .section-label{color:#999;}
.contact-inner h2{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;margin-bottom:16px;}
.contact-inner p{color:#bbb;font-size:14px;margin-bottom:26px;}
.contact-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:12px 22px;font-size:12.5px;letter-spacing:.04em;font-family:'JetBrains Mono',monospace;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:300;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.contact-links a{display:inline-block;padding:12px 26px;border:1px solid #fff;color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;text-decoration:none;transition:.15s;}
.contact-links a:hover{background:var(--ink);color:var(--panel);}
#agencyFeedbackModalBackdrop .field{margin-bottom:0;text-align:left;}
#agencyFeedbackModalBackdrop .field label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;font-family:'JetBrains Mono',monospace;}
#agencyFeedbackModalBackdrop textarea, #agencyFeedbackModalBackdrop input{
  width:100%;background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:12px 14px;font-family:'Inter',sans-serif;font-size:14px;border-radius:0;
}
#agencyFeedbackModalBackdrop textarea:focus, #agencyFeedbackModalBackdrop input:focus{outline:none;border-color:var(--ink);}
#agencyFeedbackModalBackdrop .btn.primary{
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:14px 26px;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;
  cursor:pointer;transition:.15s;
}
#agencyFeedbackModalBackdrop .btn.primary:hover{background:transparent;color:var(--ink);}

.story{background:var(--panel);color:#fff;padding:90px 44px;}
.story-inner{max-width:680px;margin:0 auto;}
.story .section-label{color:#999;}
.story h2{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;margin-bottom:28px;text-align:center;letter-spacing:-.01em;}
.story p{font-size:14px;line-height:1.9;color:#bbb;margin-bottom:18px;}
.story .impact, .story-modal .impact{color:#fff;font-weight:700;border-bottom:2px solid #fff;}
.story a.readmore{display:block;margin-top:14px;color:#fff;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid #fff;padding-bottom:2px;width:fit-content;font-family:'JetBrains Mono',monospace;transition:.15s;cursor:pointer;}
.story a.readmore:hover{color:#999;border-bottom-color:#999;letter-spacing:.14em;}

.story-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;align-items:center;justify-content:center;padding:24px;}
.story-modal-backdrop.open{display:flex;}
.story-modal{background:var(--bg);border:1px solid var(--line);max-width:680px;width:100%;max-height:85vh;position:relative;}
.story-modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--ink);font-size:28px;line-height:1;cursor:pointer;z-index:2;font-family:'Space Grotesk',sans-serif;}
.story-modal-close:hover{color:var(--ink-soft);}
.story-modal-scroll{overflow-y:auto;max-height:85vh;padding:40px 36px;}
.story-modal-h2{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;margin-bottom:28px;text-align:left;}

.timeline{position:relative;padding-left:30px;}
/* The connecting line "draws" itself downward when the modal opens, rather
   than sitting fully-formed on the page — a scaleY grow from a fixed top
   origin reads as a line being drawn, no SVG path math required. Resting
   state (scaleY 0) is the pre-animation state; JS flips .line-drawn on open
   and strips it on close so the draw replays every time the story is opened.
   A soft white glow rides along the line itself as it grows (not just a
   flat stroke), so the "drawing" reads as light tracing a path rather than
   a bar just stretching. */
.timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:linear-gradient(var(--line),var(--line));transform-origin:top;transform:scaleY(0);transition:transform 1.3s cubic-bezier(.65,0,.35,1);}
.timeline.line-drawn::before{transform:scaleY(1);background:linear-gradient(var(--ink),var(--line) 65%,var(--line));box-shadow:0 0 10px 0 rgba(241,242,247,.25);}
/* The comet: a small bright head that races down the line ahead of the fill,
   as if it's the thing actually drawing it. Pure CSS — its travel duration
   matches the line's own scaleY transition exactly, then it fades. */
.timeline::after{content:'';position:absolute;left:2px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 14px 3px rgba(241,242,247,.7),0 0 28px 8px rgba(241,242,247,.25);opacity:0;pointer-events:none;}
.timeline.line-drawn::after{animation:timeline-comet 1.3s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes timeline-comet{
  0%{top:6px;opacity:1;}
  92%{opacity:1;}
  100%{top:calc(100% - 6px);opacity:0;}
}
.timeline-item{position:relative;padding-bottom:30px;cursor:pointer;opacity:0;filter:blur(4px);transform:translateY(22px) scale(.96);transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), filter .65s cubic-bezier(.22,1,.36,1);}
.timeline-item.revealed-item{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}
.timeline-item:last-child{padding-bottom:0;}
/* A translucent panel slides in behind the content on hover, and the whole
   block lifts slightly — gives each entry real presence instead of being
   flat text sitting next to a line. */
.timeline-content{position:relative;border-radius:6px;padding:8px 12px;margin:-8px -12px;transition:background .3s ease, transform .3s cubic-bezier(.22,1,.36,1);}
.timeline-item:hover .timeline-content{background:rgba(241,242,247,.045);transform:translateX(4px);}
.timeline-dot{position:absolute;left:-30px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);transition:background .2s, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;transform:scale(0);}
.timeline-item.revealed-item .timeline-dot{transform:scale(1);box-shadow:0 0 0 4px rgba(241,242,247,.08);}
.timeline-item:hover .timeline-dot{background:var(--ink);box-shadow:0 0 0 5px rgba(241,242,247,.14),0 0 12px 2px rgba(241,242,247,.35);}
/* A sonar ping — a ring that expands and fades out of each dot right as it's
   revealed, echoing the comet having just passed through. */
.timeline-dot::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;}
.timeline-item.revealed-item .timeline-dot::after{animation:timeline-ping .8s cubic-bezier(.22,1,.36,1) .05s;}
@keyframes timeline-ping{
  0%{transform:scale(1);opacity:.8;}
  100%{transform:scale(2.6);opacity:0;}
}
.timeline-date{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;margin-bottom:4px;}
.timeline-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;transition:color .25s ease;}
.timeline-title span.arrow{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.timeline-item.expanded .timeline-title span.arrow{transform:rotate(180deg);}
.timeline-detail{font-size:13px;color:var(--ink-soft);line-height:1.7;max-height:0;overflow:hidden;margin-top:0;opacity:0;transition:max-height .4s cubic-bezier(.22,1,.36,1), margin-top .4s cubic-bezier(.22,1,.36,1), opacity .35s ease;}
.timeline-item.expanded .timeline-detail{max-height:200px;margin-top:8px;opacity:1;}
.timeline-item.expanded .timeline-title{color:var(--ink-soft);}
.timeline-item.expanded .timeline-dot{background:var(--ink);}
@media (prefers-reduced-motion: reduce){
  .timeline::before,.timeline::after,.timeline-item,.timeline-dot,.timeline-dot::after,.timeline-content{transition:none !important;animation:none !important;}
  .timeline::before{transform:scaleY(1);}
  .timeline::after{display:none;}
  .timeline-item{opacity:1;filter:none;transform:none;}
  .timeline-dot{transform:scale(1);}
}

.story-why p{font-size:13.5px;color:var(--ink-soft);line-height:1.8;margin-bottom:14px;text-align:left;}
.story-why p:last-child{margin-bottom:0;}

footer{padding:34px 44px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-soft);flex-wrap:wrap;gap:14px;font-family:'JetBrains Mono',monospace;}

@media(max-width:820px){
  .product-grid{grid-template-columns:1fr;}
  .product-card{border-right:none;border-bottom:2px solid var(--ink);}
  .product-card:last-child{border-bottom:none;}
  .hero h1{font-size:36px;}
  nav{display:none;}
  .rise-canvas-wrap{ height:260px; }
}
.rise-meaning{padding:90px 44px;border-bottom:2px solid var(--ink);background:#050506;}
.rise-canvas-wrap{position:relative;max-width:1000px;height:340px;margin:50px auto 0;}
/* A faint stage-light glow behind the letters, rather than them floating in
   flat black — gives the section some depth and a focal point instead of
   feeling like an empty void with dots in it. Fades in with the section's
   own reveal-on-scroll pass, same as everything around it. */
.rise-canvas-wrap::before{
  content:''; position:absolute; left:50%; top:46%; width:90%; height:140%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(241,242,247,.07) 0%, rgba(241,242,247,.02) 45%, transparent 72%);
  pointer-events:none; z-index:0;
}
.rise-canvas-wrap canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
#riseWordsLayer{position:absolute;top:0;left:0;width:100%;height:100%;}
.rise-word{
  position:absolute; font-family:'Georgia',serif; font-size:12px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--ink-soft); opacity:0; filter:blur(3px);
  transform:translateY(8px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1), letter-spacing .9s cubic-bezier(.22,1,.36,1);
  text-align:center; width:150px; margin-left:-75px;
}
/* Letter-spacing eases in from wide to normal as it sharpens — a small
   typographic "focus pull" so each word feels like it's resolving into
   place at the same moment the particles above it finish converging,
   rather than just fading in on its own separate timer. */
.rise-word.visible{ opacity:1; filter:blur(0); transform:translateY(0); letter-spacing:.08em; }
@media(max-width:600px){
  .rise-word{ font-size:8px; width:78px; margin-left:-39px; line-height:1.4; letter-spacing:.3em; }
  .rise-word.visible{ letter-spacing:.04em; }
}

/* Social links under Contact */
.agency-social{max-width:820px;margin:34px auto 0;text-align:center;}
.agency-social-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#999;margin-bottom:14px;}
.agency-social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.agency-social-row a{display:inline-block;padding:9px 16px;border:1px solid rgba(255,255,255,0.28);color:#ddd;font-size:12px;letter-spacing:.04em;text-decoration:none;border-radius:999px;transition:border-color .2s,color .2s,background-color .2s;}
.agency-social-row a:hover,.agency-social-row a:focus-visible{border-color:#fff;color:#fff;background:rgba(255,255,255,0.06);}
@media(max-width:480px){ .agency-social-row a{padding:8px 13px;font-size:11.5px;} }