:root{
  --bg:            #0c1117;
  --bg-panel:      #101a22;
  --bg-panel-2:    #122330;
  --bg-panel-3:    #0d1720;
  --line:          #233446;
  --line-soft:     #1b2a35;
  --text:          #edf4f8;
  --text-dim:      #bfd0d9;
  --text-faint:    #7c8d99;
  --accent:        #f67b5a;
  --accent-strong: #ff9a7b;
  --accent-dim:    rgba(246, 123, 90, 0.15);
  --accent-line:   rgba(246, 123, 90, 0.35);
  --success:       #8ae6c0;
  --radius:        14px;
  --maxw:          1180px;
  --shadow-soft:   0 18px 42px rgba(6, 10, 14, 0.28);
  --font-display:  'Sora', 'Segoe UI', sans-serif;
  --font-body:     'Manrope', 'Segoe UI', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;
  --text-xs:       12px;
  --text-sm:       16px;
  --text-md:       16px;
  --text-lg:       20px;
  --text-xl:       28px;
  --text-2xl:      40px;
  --text-3xl:      62px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:linear-gradient(180deg, #091117 0%, #0c1117 100%);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--text-md);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--accent); color:#091017; }

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--text-xs);
  letter-spacing:0.04em;
  text-transform:none;
  color:var(--text-dim);
  display:inline-flex;
  align-items:center;
  margin-bottom:18px;
  padding:0;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.03em;
  color:var(--text);
  line-height:1.35;
}

h2{ font-size:clamp(36px, 3vw, 40px); line-height:1.18; }
h3{ font-size:var(--text-lg); line-height:1.4; }

p{ color:var(--text-dim); line-height:1.7; }
ul{ margin-left:15px; }

main{ position:relative; z-index:1; }

.lead{
  font-size:18px;
  color:var(--text-dim);
  max-width:640px;
  margin-bottom:24px;
  line-height:1.7;
}

.callout{
  margin-top:32px;
  padding-left:20px;
  border-left:2px solid var(--accent);
  font-family:var(--font-display);
  font-size:20px;
  color:var(--text);
  line-height:1.4;
  max-width:600px;
}

ul.plain{ margin:0 0 18px 20px; }
ul.plain li{ color:var(--text-dim); margin-bottom:10px; max-width:600px; }

.section{
  padding:112px 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;
}

.section-head{
  max-width:640px;
  margin-bottom:52px;
}

.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--text-sm);
  padding:13px 24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color:#0b1116;
  box-shadow:0 10px 22px rgba(246,123,90,0.12);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(246,123,90,0.16); }

.btn-ghost{
  background:rgba(255,255,255,0.02);
  color:var(--text);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.03); }

.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------------- NAV ---------------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(10,11,13,0.72);
  border-bottom:1px solid var(--line-soft);
}
nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-lg);
  letter-spacing:0.12em;
  display:flex;
  align-items:center;
  gap:10px;
  text-transform:uppercase;
}
.logo-mark{
  width:20px; height:20px;
  position:relative;
  flex-shrink:0;
}
.logo-mark svg{ width:100%; height:100%; }
.logo-mark img,
.brand-logo{
  display:block;
  width:auto;
  height:20px;
}
.logo > span{ color:#fff; }
.logo .accent{ color:#fe904d; }

.nav-links{
  display:flex;
  gap:36px;
  font-size:var(--text-sm);
  color:var(--text-dim);
  letter-spacing:0.01em;
}
.nav-links a{ transition:color .15s; }
.nav-links a:hover{ color:var(--text); }

.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-cta{ font-size:var(--text-sm); padding:10px 18px; }

.nav-mobile-toggle{ display:none; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-mobile-toggle{ display:block; background:none; border:1px solid var(--line); color:var(--text); padding:8px 12px; border-radius:var(--radius); font-size:13px; }
}

/* ---------------- HERO ---------------- */
.hero{
  padding:180px 0 90px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  position:relative;
  z-index:2;
}
.hero-content{ max-width:760px; padding-top:8px; }
.hero h1{
  font-size:clamp(48px, 5.8vw, 62px);
  line-height:1.02;
  margin-bottom:24px;
  letter-spacing:-0.045em;
  max-width:760px;
}
.hero h1 em{
  font-style:normal;
  color:var(--accent-strong);
  text-shadow:none;
}
.hero-sub{
  font-size:var(--text-lg);
  line-height:1.7;
  color:var(--text-dim);
  max-width:620px;
  margin-bottom:38px;
}
.hero-ctas{ display:flex; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
.btn-lg{ padding:15px 28px; font-size:var(--text-md); }

.hero-note{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-faint);
  letter-spacing:0.02em;
}

.hero-canvas-wrap{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  z-index:1;
  opacity:0.8;
}
#hero-canvas{ width:100%; height:100%; display:block; }

.hero-fade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(13,17,23,0.9) 0%, rgba(13,17,23,0.88) 26%, rgba(13,17,23,0.46) 56%, rgba(13,17,23,0.04) 100%);
  z-index:1;
  pointer-events:none;
}

@media (max-width:880px){
  .hero{ padding:150px 0 70px; }
  .hero-canvas-wrap{ opacity:0.35; }
  .hero-fade{ background:linear-gradient(180deg, var(--bg) 55%, rgba(10,11,13,0.4) 100%); }
}

/* ---------------- LOGOSTRIP replacement: systems strip ---------------- */
.systems-strip{
  border-bottom:1px solid var(--line-soft);
  padding:26px 0 24px;
  background:rgba(10, 16, 20, 0.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
}
.systems-strip .wrap{
  display:flex;
  align-items:center;
  gap:16px 24px;
  flex-wrap:wrap;
}
.systems-strip .label{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-faint);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-right:8px;
}
.systems-strip .tag{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-dim);
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,0.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ---------------- PROBLEM SECTION ---------------- */
.problem-layout{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
  align-items:center;
}
.problem-text p{ margin-bottom:18px; font-size:var(--text-md); max-width:540px; line-height:1.7; }
.problem-text .callout{
  margin-top:32px;
  padding-left:20px;
  border-left:2px solid var(--accent);
  font-family:var(--font-display);
  font-size:var(--text-xl);
  color:var(--text);
  line-height:1.45;
}

.diagram-box{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:20px;
  position:relative;
  aspect-ratio:1.1/1;
}
#fragment-svg{ width:100%; height:100%; }

.frag-tag{
  font-family:var(--font-mono);
  font-size:10.5px;
}
.frag-tag rect{ transition: all 1s cubic-bezier(.6,0,.2,1); }
.frag-tag text{ transition: all 1s cubic-bezier(.6,0,.2,1); fill:var(--text-dim); }

@media (max-width:900px){
  .problem-layout{ grid-template-columns:1fr; gap:48px; }
}

/* ---------------- PLATFORM SECTION ---------------- */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:none;
  background:rgba(11, 16, 21, 0.72);
}
.cap-card{
  padding:34px 28px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(16,25,33,0.88), rgba(10,15,20,0.96));
  transition:background .2s, transform .2s ease;
}
.cap-card:last-child{ border-right:none; }
.cap-card:hover{ background:linear-gradient(180deg, rgba(19,30,38,0.96), rgba(12,18,24,0.96)); transform:translateY(-2px); }
.cap-index{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-faint);
  margin-bottom:22px;
}
.cap-icon{ width:30px; height:30px; margin-bottom:20px; color:var(--accent); }
.cap-card h3{ margin-bottom:12px; }
.cap-card p{ font-size:var(--text-sm); line-height:1.55; }

@media (max-width:980px){
  .cap-grid{ grid-template-columns:1fr 1fr; }
  .cap-card{ border-bottom:1px solid var(--line); }
  .cap-card:nth-child(2n){ border-right:none; }
}
@media (max-width:600px){
  .cap-grid{ grid-template-columns:1fr; }
  .cap-card{ border-right:none !important; }
}

/* ---------------- ARCHITECTURE SECTION ---------------- */
.arch-panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:48px;
}
#arch-svg{ width:100%; height:auto; }
.arch-caption{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-faint);
  max-width:620px;
}

/* ---------------- TRUST SECTION ---------------- */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:none;
}
.trust-card{
  background:linear-gradient(180deg, rgba(16,24,33,0.86), rgba(10,15,20,0.98));
  padding:34px 30px;
  transition:background .2s ease, transform .2s ease;
}
.trust-card:hover{ background:linear-gradient(180deg, rgba(22,31,40,0.92), rgba(12,17,22,0.98)); transform:translateY(-1px); }
.trust-card h3{ font-size:var(--text-lg); margin-bottom:10px; }
.trust-card p{ font-size:var(--text-sm); margin-bottom:14px; }
.trust-stat{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--accent-strong);
  letter-spacing:0.02em;
}
@media (max-width:900px){
  .trust-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .trust-grid{ grid-template-columns:1fr; }
}

/* ---------------- FINAL CTA ---------------- */
.final-cta{
  padding:150px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(12,17,23,0.1), rgba(12,17,23,0.42));
}
.final-cta h2{ font-size:clamp(32px,4.2vw,40px); margin-bottom:20px; }
.final-cta p{ font-size:var(--text-lg); max-width:520px; margin:0 auto 40px; line-height:1.65; }
.final-cta .btn{ margin:0 auto; }
.final-glow{
  position:absolute;
  top:50%; left:50%;
  width:900px; height:500px;
  transform:translate(-50%,-50%);
  background:none;
  pointer-events:none;
  z-index:0;
}
.final-cta .wrap{ position:relative; z-index:1; }

/* ---------------- FOOTER ---------------- */
footer{ padding:56px 0 40px; }
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:40px;
  margin-bottom:48px;
}
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{ font-size:var(--text-sm); max-width:280px; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h3{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  color:var(--text);
  margin-bottom:16px;
  font-weight:600;
  letter-spacing:-0.04em;
}
.footer-col a{
  display:block;
  font-size:var(--text-sm);
  color:var(--text-dim);
  margin-bottom:11px;
  transition:color .15s;
}
.footer-col a:hover{ color:var(--text); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-faint);
  flex-wrap:wrap;
  gap:12px;
}

/* ---------------- REVEAL ANIMATIONS ---------------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; animation:none !important; }
}

/* ---------------- DEMO MODAL ---------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(6,7,8,0.72);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }

.modal-panel{
  width:100%;
  max-width:480px;
  max-height:88vh;
  overflow-y:auto;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:40px;
  position:relative;
  transform:translateY(10px);
  transition:transform .22s ease;
}
.modal-overlay.open .modal-panel{ transform:translateY(0); }

.modal-close{
  position:absolute;
  top:20px; right:20px;
  width:30px; height:30px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-dim);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  transition:all .15s;
}
.modal-close:hover{ color:var(--text); border-color:var(--text-faint); }

.modal-panel h2{ font-size:24px; margin-bottom:8px; padding-right:30px; }
.modal-sub{ font-size:14px; color:var(--text-dim); margin-bottom:28px; }

.field-group{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:8px;
}
.field-group input,
.field-group select,
.field-group textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14.5px;
  padding:11px 13px;
  transition:border-color .15s;
}
.field-group textarea{ resize:vertical; min-height:70px; }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.field-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a9da5' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}

.form-note{
  font-size:12px;
  color:var(--text-faint);
  margin-top:16px;
  line-height:1.5;
}

.form-status{
  font-family:var(--font-mono);
  font-size:12.5px;
  margin-top:14px;
  display:none;
}
.form-status.show{ display:block; }
.form-status.error{ color:var(--accent); }
.form-status.success{ color:#7fd39a; }

#demo-form .btn-primary{ width:100%; justify-content:center; margin-top:8px; }
#demo-form .btn-primary[disabled]{ opacity:0.6; cursor:not-allowed; }

.modal-success{
  text-align:center;
  padding:20px 0 8px;
}
.modal-success .check{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  color:var(--accent);
}
.modal-success h2{ font-size:20px; margin-bottom:10px; }
.modal-success p{ font-size:14px; }

@media (max-width:520px){
  .modal-panel{ padding:28px 22px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
}

@media (max-width:600px){
  .wrap{ padding:0 22px; }
  nav{ padding:0 22px; }
  .section{ padding:80px 0; }
}