*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#08111f;
  --bg-soft:#0d1830;
  --panel:#111d37;
  --panel-2:#162443;
  --line:rgba(173,201,255,.12);
  --line-strong:rgba(173,201,255,.2);
  --text:#e9f1ff;
  --muted:#9bb0d2;
  --muted-2:#8098b8;
  --accent:#67e8f9;
  --accent-2:#ff8a5b;
  --accent-3:#9effb5;
  --shadow:0 24px 80px rgba(0,0,0,.34);
  --radius:18px;
  --container:1200px;
  --heading:'Sora',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  background:
    radial-gradient(circle at top left, rgba(103,232,249,.16), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(255,138,91,.14), transparent 26%),
    linear-gradient(180deg, #07101d 0%, #08111f 35%, #091426 100%);
  color:var(--text);
  overflow-x:hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:10px;
  z-index:100;
  background:#ffffff;
  color:#08111f;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  text-decoration:none;
}
.skip-link:focus{
  left:10px;
}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:0;
  border-radius:16px;
}
.req{color:var(--accent-2);margin-left:2px;font-weight:700}
a{color:inherit}
canvas#field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.65}
.page{position:relative;z-index:1}
.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}

nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(8,17,31,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.brand-mark{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(103,232,249,.2), rgba(255,138,91,.22));
  border:1px solid rgba(255,255,255,.1);
  display:grid;
  place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark span{
  font-family:var(--heading);
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.12em;
}
.brand-copy strong{
  display:block;
  font-family:var(--heading);
  font-size:.9rem;
  letter-spacing:.12em;
}
.brand-copy small{
  display:block;
  color:var(--muted);
  font-size:.73rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width: 480px) {
  .brand-copy small { display: none; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .brand-mark span { font-size: 0.8rem; }
  .brand { gap: 10px; }
}

.nav-toggle {
  display: none; /* hidden on desktop */
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: var(--muted);
}

@media (max-width: 820px) {
  .nav-toggle {
    display: block;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
  }
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  padding:0;
  margin:0;
}
.nav-links a{
  text-decoration:none;
  color:var(--muted);
  font-size:.9rem;
  padding:10px 14px;
  border-radius:999px;
  transition:background .25s,color .25s,transform .25s;
}
.nav-links a:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}
.nav-cta{
  text-decoration:none;
  border:none;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  font-size:.9rem;
  background:linear-gradient(135deg,var(--accent),#86efac);
  color:#07101d;
  box-shadow:0 10px 30px rgba(103,232,249,.25);
}

@media (max-width: 600px) {
  .nav-cta { display: none; }
}


.hero{
  padding:74px 0 48px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:34px;
  align-items:stretch;
}
.hero-copy{
  padding:52px 0 24px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 18px rgba(103,232,249,.55);
}
.hero h1{
  margin:24px 0 18px;
  font-family:var(--heading);
  font-size:clamp(3rem,7vw,5.8rem);
  line-height:.96;
  letter-spacing:-.04em;
  max-width:11ch;
}
.hero h1 span{
  color:var(--accent);
}
.hero-lead{
  max-width:620px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.8;
  margin-bottom:28px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.1);
  font-weight:700;
  transition:transform .25s,background .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#9effb5);
  color:#07101d;
  border:none;
}
.btn-secondary{
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:34px;
}
.stat{
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.stat strong{
  display:block;
  font-family:var(--heading);
  font-size:2rem;
  letter-spacing:-.04em;
}
.stat span{
  color:var(--muted);
  font-size:.85rem;
  line-height: 1.4;
}


.hero-panel{
  position:relative;
  min-height:640px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    linear-gradient(145deg, rgba(22,36,67,.88), rgba(10,18,36,.95));
  overflow:hidden;
  box-shadow:var(--shadow);
}
.hero-panel::before{
  content:'';
  position:absolute;
  inset:24px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
}
.orb-a{width:220px;height:220px;top:-70px;right:-50px;background:rgba(103,232,249,.18)}
.orb-b{width:180px;height:180px;bottom:18%;left:-60px;background:rgba(255,138,91,.16)}
.hero-stack{
  position:relative;
  height:100%;
  padding:26px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:18px;
}
.live-card,.signal-card,.ops-card,.mini-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(6,14,28,.62);
  backdrop-filter:blur(10px);
}
.live-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
}
.live-card strong,.signal-card strong,.ops-card strong,.mini-card strong{
  font-family:var(--heading);
  letter-spacing:-.02em;
}
.muted{color:var(--muted)}
.signal-card{
  padding:22px;
}
.signal-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}
.signal-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.signal-pill{
  padding:16px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
}
.signal-pill b{
  display:block;
  font-family:var(--heading);
  font-size:1.15rem;
  margin-bottom:5px;
}
.ops-card{
  padding:22px;
  display:grid;
  gap:18px;
}
.ops-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}
.ops-track{
  display:grid;
  gap:12px;
}
.track-row{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:12px;
  align-items:center;
  font-size:.9rem;
  overflow: hidden;
}

.bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.bar > span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mini-card{
  padding:18px;
}

.marquee{
  margin-top:34px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:slide 24s linear infinite;
}
.marquee span{
  color:var(--muted-2);
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding-right:34px;
}
.marquee span::after{
  content:' +';
  color:var(--accent);
}
@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

section{
  padding:100px 0;
}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:30px;
  align-items:end;
  margin-bottom:36px;
}
.section-head h2{
  margin:12px 0 0;
  font-family:var(--heading);
  font-size:clamp(2rem,4vw,3.6rem);
  letter-spacing:-.04em;
  line-height:1.02;
}
.section-head p{
  color:var(--muted);
  line-height:1.8;
  margin:0;
}

.manifesto-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
}
.manifesto-card,.note-card{
  border-radius:26px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding:30px;
  box-shadow:var(--shadow);
}
.manifesto-card p{
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.9;
}
.manifesto-list{
  display:grid;
  gap:14px;
  margin-top:28px;
}
.manifesto-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.manifesto-item:first-child{border-top:none;padding-top:0}
.manifesto-bullet{
  width:32px;
  height:32px;
  flex-shrink:0;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(103,232,249,.08);
  color:var(--accent);
  font-weight:700;
}
.note-stack{
  display:grid;
  gap:14px;
}
.note-card small{
  display:block;
  color:var(--muted-2);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.note-card strong{
  display:block;
  font-family:var(--heading);
  font-size:1.3rem;
  margin-bottom:8px;
}
.note-card p{margin:0;color:var(--muted);line-height:1.7}

.service-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}
.service-card{
  grid-column:span 2;
  padding:24px;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(10,19,38,.85);
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .25s,border-color .25s,background .25s;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-strong);
  background:
    linear-gradient(180deg, rgba(103,232,249,.08), rgba(255,255,255,.025)),
    rgba(10,19,38,.95);
}
.service-card.wide{grid-column:span 3}
.service-kicker{
  color:var(--accent);
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-card h3{
  font-family:var(--heading);
  font-size:1.35rem;
  margin:16px 0 10px;
}
.service-card p{
  color:var(--muted);
  line-height:1.75;
  margin:0;
}
.service-foot{
  margin-top:18px;
  color:var(--accent-2);
  font-size:.85rem;
  font-weight:700;
}

.proof-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
  gap:24px;
}
.proof-board,.proof-side{
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.proof-board{
  padding:28px;
}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.proof-card{
  padding:22px;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.proof-card strong{
  display:block;
  font-family:var(--heading);
  font-size:2rem;
  margin-bottom:8px;
}
.proof-card p{margin:0;color:var(--muted);line-height:1.7}
.proof-side{
  padding:28px;
  display:grid;
  gap:14px;
}
.phase{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.phase strong{
  display:block;
  font-family:var(--heading);
  margin-bottom:8px;
}
.phase p{margin:0;color:var(--muted);line-height:1.7}

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.quote{
  padding:26px;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.quote-mark{
  color:var(--accent);
  font-size:1.8rem;
  line-height:1;
}
.quote p{
  color:var(--muted);
  line-height:1.9;
  margin:12px 0 18px;
}
.quote strong{
  display:block;
  font-family:var(--heading);
}
.quote span{color:var(--muted-2);font-size:.9rem}

.contact-shell{
  border-radius:30px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(103,232,249,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  padding:30px;
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:24px;
}
.contact-copy{
  padding:12px 8px 12px 0;
}
.contact-copy h2{
  margin:14px 0 12px;
  font-family:var(--heading);
  font-size:clamp(2rem,4.2vw,3.4rem);
  letter-spacing:-.04em;
  line-height:1.02;
}
.contact-copy p{
  color:var(--muted);
  line-height:1.8;
  max-width:430px;
}
.contact-points{
  display:grid;
  gap:14px;
  margin-top:26px;
}
.point{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  transition: background 0.3s, border-color 0.3s;
}
.point:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.point small{
  display:block;
  color:var(--muted-2);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size: .7rem;
}
.point strong{
  font-family:var(--heading);
  font-size:1rem;
  word-break: break-all;
}


.form-card{
  padding:24px;
  border-radius:24px;
  background:rgba(7,16,31,.58);
  border:1px solid rgba(255,255,255,.08);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}
.field label{
  font-size:.76rem;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.field input,.field select,.field textarea{
  width:100%;
  border:none;
  border-radius:16px;
  min-height:52px;
  padding:14px 16px;
  background:rgba(255,255,255,.05);
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  font:inherit;
  transition:border-color .2s,background .2s,box-shadow .2s;
  box-sizing: border-box;
}

.field select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23E9F1FF' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 9px;
}
.field select option{
  background:#0f1a31;
  color:#e9f1ff;
}
.field select option:disabled{
  color:#8fa4c8;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(103,232,249,.5);
  background:rgba(255,255,255,.07);
}
.field textarea{
  min-height:150px;
  resize:vertical;
}
.submit{
  width:100%;
  min-height:56px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#08111f;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:transform .25s,filter .25s;
}
.submit:hover{transform:translateY(-2px);filter:saturate(1.1)}
.submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.message{
  display:none;
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  font-size:.95rem;
  line-height:1.6;
}
.message.ok{display:block;background:rgba(40,196,118,.14);border:1px solid rgba(40,196,118,.28);color:#b8ffd3}
.message.err{display:block;background:rgba(255,116,116,.14);border:1px solid rgba(255,116,116,.25);color:#ffd1d1}
.consent{
  color:var(--muted-2);
  font-size:.82rem;
  line-height:1.65;
  margin-top:6px;
}

footer{
  padding:32px 0 46px;
  color:var(--muted-2);
}
.footer-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:24px;
}
.footer-row strong{color:var(--text)}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.on{
  opacity:1;
  transform:none;
}

@media (max-width: 1080px){
  .hero-grid, .manifesto-grid, .proof-wrap, .contact-grid, .section-head { grid-template-columns: 1fr; }
  .hero-panel { min-height: auto; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card, .service-card.wide { grid-column: span 1; }
  .testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .nav-inner { min-height: 70px; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 100%; position: absolute; top: 76px; left: 0; background: rgba(8, 17, 31, 0.95); padding: 20px; border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); }
  .nav-toggle { display: block; }
  .hero { padding-top: 42px; }
  .hero-copy { padding-top: 18px; }
  .hero-stats { grid-template-columns: 1fr; }
  .signal-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .track-row { grid-template-columns: 1fr; gap: 4px; }
  .track-row .bar { margin: 8px 0; }
  .contact-shell, .proof-board, .proof-side, .manifesto-card, .note-card, .quote, .service-card, .form-card { border-radius: 22px; }
  .hero-panel { border-radius: 24px; }
  section { padding: 78px 0; }
  .signal-top { flex-direction: column; gap: 10px; }
  .signal-top > div:last-child { text-align: left; }
}

@media (max-width: 600px){
   .hero h1 { font-size: 2.8rem; }
   .service-grid { grid-template-columns: 1fr; }
   .service-card, .service-card.wide { grid-column: span 1; }
   .contact-shell { padding: 20px; }
   .contact-copy h2 { font-size: 2.2rem; margin-bottom: 8px; }
   .contact-points { margin-top: 20px; gap: 10px; }
   .point { padding: 12px 14px; }
   .form-card { padding: 16px; margin-top: 10px; }
   .quote { padding: 20px; margin-bottom: 16px; }
   .footer-row { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
   .hero-panel::before { inset: 12px; border-radius: 12px; }
   .hero-stack { padding: 16px; }
   .signal-card, .ops-card { padding: 16px; }
   .stat strong { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 24px; padding-bottom: 24px; }
  .hero h1 { font-size: 2.4rem; }
  .hero-actions { gap: 12px; flex-direction: column; width: 100%; }
  .btn { width: 100%; padding: 14px 20px; }
  .nav-cta { display: none; } /* Hide CTA on very small screens to save space, or move it to the menu */
  .field input, .field select, .field textarea { padding: 12px 14px; min-height: 48px; font-size: 16px; /* Prevents iOS zoom */ }
  .submit { min-height: 52px; }
  .contact-copy h2 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  canvas#field{display:none}
  .marquee-track{animation:none;transform:none}
  .reveal,.reveal.on{opacity:1;transform:none;transition:none}
}