
:root{
  --black:#020407;
  --ink:#05090e;
  --panel:#070d13;
  --panel2:#0a1118;
  --line:rgba(211,226,238,.17);
  --line-bright:rgba(226,239,248,.38);
  --text:#eef3f7;
  --muted:#8f9ca7;
  --silver:#d8e0e6;
  --chrome1:#ffffff;
  --chrome2:#8e9aa4;
  --chrome3:#e7edf1;
  --ice:#90c5e7;
  --blue:#75a9ca;
  --success:#9dcfb7;
  --warn:#d9bd82;
  --shadow:0 28px 90px rgba(0,0,0,.55);
  --max:1440px;
}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{
  margin:0;min-height:100%;overflow-x:hidden;
  background:
    radial-gradient(1100px 520px at 50% -5%,rgba(86,124,151,.13),transparent 70%),
    linear-gradient(180deg,#020407,#050a0f 48%,#020407);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.intro-active{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
img{display:block;max-width:100%}
.shell{width:min(var(--max),calc(100% - 48px));margin:auto}
.eyebrow{
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:#9ba9b3;font-weight:650;
}
.chrome-text{
  background:linear-gradient(180deg,#fff 0%,#eef3f7 24%,#8e9ba5 52%,#e2e7eb 76%,#737f89 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 20px rgba(255,255,255,.08)
}

/* INTRO */
#intro{
  position:fixed;inset:0;z-index:9999;width:100vw;height:100dvh;min-height:100dvh;
  display:grid;place-items:center;overflow:hidden;background:#000;
  transition:opacity .78s ease,visibility .78s ease;isolation:isolate;
}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;background:#000}
.intro-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.30) 100%),linear-gradient(180deg,rgba(0,0,0,.05),transparent 48%,rgba(0,0,0,.12))}
.intro-bottom{position:absolute;z-index:2;bottom:max(7dvh,34px);left:50%;transform:translateX(-50%);width:min(420px,64vw);text-align:center}
.intro-progress{height:1px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.intro-progress:after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#566a78,#fff,#7eabc5);box-shadow:0 0 14px rgba(255,255,255,.85);animation:introProgress 4.92s linear forwards}
.intro-label{margin-top:12px;font-size:8px;letter-spacing:.45em;color:#72808a;text-transform:uppercase}
.intro-skip{position:absolute;right:22px;bottom:20px;z-index:3;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.22);color:#7d8992;font-size:9px;letter-spacing:.15em;text-transform:uppercase;opacity:0;animation:skipIn .35s 1.5s forwards;cursor:pointer;padding:8px 10px}
@keyframes introProgress{to{width:100%}}
@keyframes skipIn{to{opacity:1}}

/* NAV */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:72px;
  border-bottom:1px solid rgba(226,239,248,.12);
  background:linear-gradient(180deg,rgba(2,4,7,.92),rgba(2,4,7,.68));
  backdrop-filter:blur(18px) saturate(120%);
}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:11px;min-width:165px}
.brand img{width:31px;height:31px;object-fit:contain;filter:drop-shadow(0 0 13px rgba(174,210,231,.15))}
.brand-word{font-size:20px;letter-spacing:.14em;font-weight:750}
.nav-links{display:flex;align-items:center;gap:31px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#a8b3bc}
.nav-links a{position:relative;padding:28px 0 26px}
.nav-links a:after{content:"";position:absolute;left:50%;right:50%;bottom:16px;height:1px;background:#eef4f8;transition:.25s ease}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover:after,.nav-links a.active:after{left:15%;right:15%}
.portal-link{border:1px solid rgba(227,238,245,.43);padding:12px 18px!important;min-width:160px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
.portal-link:after{display:none!important}
.mobile-toggle{display:none;background:none;border:0;color:#fff;width:42px;height:42px;font-size:24px;cursor:pointer}

/* HERO */
.hero{
  position:relative;min-height:790px;padding:150px 0 60px;border-bottom:1px solid var(--line);overflow:hidden;
  background:
    linear-gradient(90deg,#020407 0%,rgba(2,4,7,.94) 30%,rgba(2,4,7,.54) 58%,rgba(2,4,7,.82) 100%),
    url("reference-architecture.jpg") right top/auto 590px no-repeat;
}
.hero:before{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-315px;height:520px;border-radius:50%;
  border-top:1px solid rgba(199,225,242,.42);
  background:radial-gradient(ellipse at 50% 0%,rgba(82,130,161,.18),rgba(2,4,7,.94) 45%,#020407 73%);
  box-shadow:0 -8px 38px rgba(111,174,208,.12);transform:scaleX(1.2)
}
.hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0 73%,rgba(177,214,235,.05) 73.1%,transparent 73.4%),
             radial-gradient(500px 380px at 77% 32%,rgba(119,177,212,.09),transparent 67%);
  pointer-events:none
}
.hero-content{position:relative;z-index:2;max-width:720px}
.hero-title{
  margin:18px 0 16px;font-weight:460;font-size:clamp(47px,5.4vw,86px);line-height:.99;
  letter-spacing:.055em;text-transform:uppercase
}
.hero-copy{max-width:640px;color:#b5c0c8;font-size:17px;line-height:1.65;letter-spacing:.01em}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{
  height:48px;padding:0 24px;border:1px solid rgba(227,239,247,.42);color:#eef4f8;background:rgba(2,4,7,.42);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;transition:.25s ease;cursor:pointer
}
.btn:hover{transform:translateY(-2px);border-color:#fff;background:rgba(255,255,255,.07);box-shadow:0 12px 35px rgba(0,0,0,.34)}
.btn.light{background:linear-gradient(180deg,#fafcfd,#aab4bb);color:#071017;border-color:white;box-shadow:0 0 22px rgba(255,255,255,.13)}
.hero-monogram{
  position:absolute;z-index:1;right:4.5%;top:130px;width:min(39vw,560px);opacity:.18;
  filter:saturate(.35) brightness(.95) drop-shadow(0 0 42px rgba(132,190,224,.13));
  mix-blend-mode:screen;transform:translateZ(0)
}
.hero-meta{
  position:absolute;right:3.5%;top:105px;z-index:3;text-align:right;color:#7f8f9a;font-size:8px;line-height:1.7;letter-spacing:.22em;text-transform:uppercase
}
.hero-trust{
  position:absolute;right:4%;bottom:57px;z-index:3;font-size:8px;color:#7f8d97;letter-spacing:.24em;text-transform:uppercase;text-align:right
}

/* CONTENT */
.section{position:relative;padding:82px 0;border-bottom:1px solid var(--line);overflow:hidden}
.section.dark{background:linear-gradient(180deg,#04070b,#060b10)}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:28px}
.section-title{font-size:28px;font-weight:420;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0}
.section-copy{max-width:590px;color:#8998a4;line-height:1.65;font-size:14px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{
  min-height:260px;position:relative;overflow:hidden;padding:28px;border:1px solid var(--line);
  background:
    linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 38%,rgba(0,0,0,.26)),
    #050a0f;transition:.35s ease;box-shadow:inset 0 1px rgba(255,255,255,.02)
}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(450px 220px at 78% 0%,rgba(93,155,193,.12),transparent 65%);opacity:0;transition:.35s}
.card:hover{transform:translateY(-5px);border-color:rgba(225,239,248,.36);box-shadow:0 25px 55px rgba(0,0,0,.30)}
.card:hover:before{opacity:1}
.card-no{position:absolute;right:18px;top:16px;font-size:9px;color:#75838e;letter-spacing:.12em}
.card-icon{width:44px;height:44px;margin:8px 0 30px;display:grid;place-items:center;border:1px solid rgba(220,234,243,.25);transform:rotate(45deg)}
.card-icon span{transform:rotate(-45deg);font-size:18px;color:#dbe7ee}
.card h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:520;margin:0 0 15px}
.card p{color:#8998a4;line-height:1.6;font-size:12px;margin:0;max-width:260px}
.card-arrow{position:absolute;right:21px;bottom:19px;font-size:22px;color:#dbe5eb}
.standard{display:grid;grid-template-columns:1.2fr repeat(3,.8fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.standard>div{padding:28px;border-right:1px solid var(--line);min-height:145px}
.standard>div:last-child{border-right:0}
.standard h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 9px;font-weight:500}
.standard p{margin:0;color:#84939e;line-height:1.55;font-size:11px}
.standard-main h2{font-size:24px;letter-spacing:.17em;text-transform:uppercase;margin:8px 0 10px;font-weight:420}
.ref-address{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;color:#d9e5ec;border:1px solid var(--line);padding:15px;background:#020508;margin-top:17px}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.pill{border:1px solid var(--line);padding:7px 9px;font-size:8px;letter-spacing:.14em;color:#8799a5;text-transform:uppercase}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{padding:28px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.028),rgba(255,255,255,.006))}
.panel h3{font-size:17px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.panel p{color:#8797a3;line-height:1.7;font-size:13px}
.evidence-row{display:grid;grid-template-columns:110px 1fr 190px;gap:18px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(217,230,239,.09);font-size:11px}
.evidence-row:last-child{border-bottom:0}.evidence-status{text-align:right;color:#9fb6c4;font-size:9px;letter-spacing:.11em;text-transform:uppercase}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}
.form{display:grid;gap:13px}.form label{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#83929d}
.form input,.form textarea,.form select{width:100%;margin-top:7px;background:#03070a;border:1px solid var(--line);color:#e9f0f4;padding:13px 14px;outline:none;border-radius:0}
.form textarea{min-height:140px;resize:vertical}.form input:focus,.form textarea:focus,.form select:focus{border-color:rgba(201,227,244,.55)}
.notice{font-size:10px;color:#697984;line-height:1.55}
.link-list{display:grid;gap:9px;margin-top:18px}
.link-item{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 14px;border:1px solid var(--line);font-size:11px;color:#9aa9b4}
.link-item:hover{border-color:var(--line-bright);color:#eaf1f5}
.footer{padding:30px 0 35px;color:#6d7a84;font-size:10px;border-top:1px solid var(--line)}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footer-brand{display:flex;align-items:center;gap:9px}.footer-brand img{width:25px;height:25px}.footer-brand b{letter-spacing:.13em;color:#b9c4cb}
.footer-links{display:flex;gap:18px;text-transform:uppercase;letter-spacing:.12em}

/* DYNAMIC */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(91,148,183,.06),transparent 67%);transform:translate(-50%,-50%);transition:opacity .2s}
.scanline{position:fixed;left:0;right:0;height:1px;z-index:0;background:linear-gradient(90deg,transparent,rgba(176,219,244,.06),transparent);animation:scan 8s linear infinite;pointer-events:none}
@keyframes scan{from{top:0}to{top:100vh}}

/* SUBPAGE */
.page-hero{padding:150px 0 75px;border-bottom:1px solid var(--line);background:
  radial-gradient(700px 300px at 78% 15%,rgba(97,149,183,.1),transparent 70%),#03070b}
.page-hero h1{font-size:clamp(45px,6vw,78px);font-weight:420;letter-spacing:.08em;text-transform:uppercase;line-height:1.02;margin:18px 0}
.page-hero p{max-width:760px;color:#94a3ad;line-height:1.7;font-size:15px}
.muted{color:#8695a0}

/* MOBILE */
@media(max-width:1050px){
  .nav-links{gap:17px}.hero{min-height:720px;background-size:auto 520px}.hero-monogram{width:47vw;right:-2%}.cards{grid-template-columns:repeat(2,1fr)}
  .standard{grid-template-columns:1fr 1fr}.standard>div{border-bottom:1px solid var(--line)}.standard>div:nth-child(2n){border-right:0}
}
@media(max-width:760px){
  .shell{width:min(100% - 28px,var(--max))}
  .site-nav{height:64px}.brand{min-width:auto}.brand img{width:28px;height:28px}.brand-word{font-size:17px}
  .mobile-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:14px;right:14px;top:70px;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(2,5,8,.98);border:1px solid var(--line);box-shadow:var(--shadow);padding:8px 16px
  }
  .nav-links.open{display:flex}.nav-links a{padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.055)}.nav-links a:after{display:none}
  .portal-link{margin:9px 0;border-bottom:1px solid var(--line)!important}
  .hero{min-height:780px;padding:116px 0 54px;background:
      linear-gradient(180deg,rgba(2,4,7,.83),rgba(2,4,7,.65) 38%,#020407 75%),
      url("reference-architecture.jpg") 64% top/auto 410px no-repeat}
  .hero-title{font-size:clamp(37px,10vw,55px);letter-spacing:.035em;line-height:1.02;margin-top:15px}
  .hero-copy{font-size:14px;max-width:95%}.hero-monogram{width:88vw;right:-30vw;top:210px;opacity:.09}
  .hero-meta{display:none}.hero-trust{bottom:33px;right:14px}.hero-actions{gap:10px}.btn{height:45px;padding:0 17px;font-size:9px}
  .section{padding:62px 0}.section-header{display:block}.section-copy{margin-top:14px}.section-title{font-size:23px}
  .cards{grid-template-columns:1fr}.card{min-height:218px}
  .standard{grid-template-columns:1fr}.standard>div{border-right:0}
  .two-col,.contact-grid{grid-template-columns:1fr}.evidence-row{grid-template-columns:1fr}.evidence-status{text-align:left}
  .page-hero{padding:115px 0 57px}.page-hero h1{font-size:43px}
  .intro-video{object-fit:contain}.intro-bottom{bottom:10dvh;width:68vw}
  .cursor-glow{display:none}
}
@media(max-width:390px){
  .brand-word{font-size:15px}.hero-title{font-size:35px}.btn{width:100%}.hero-actions{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
