:root{
  --ink:#101F4C;
  --ink-2:#16275C;
  --ink-3:#1D306C;
  --primary:#2B5FD0;
  --primary-dark:#1F49AC;
  --indigo-soft:#4F7DE0;
  --peri:#9DB4E8;
  --peri-light:#AFC8F5;
  --paper:#FFFFFF;
  --paper-2:#F7F8FC;
  --line:#E4E6F1;
  --line-dark:rgba(175,200,245,.16);
  --text:#3C4358;
  --muted:#767E9C;
  --muted-dark:#93A5D6;
  --display:'Montserrat',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --maxw:1240px;
  --pad:32px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);color:var(--text);background:var(--paper);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-0.022em;line-height:1.08;font-weight:600;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
::selection{background:var(--peri-light);color:var(--ink);}

/* woven linen texture for dark surfaces */
.weave{background-image:
  repeating-linear-gradient(0deg,rgba(175,200,245,.045) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(90deg,rgba(175,200,245,.035) 0 1px,transparent 1px 7px);}

.kicker{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);}
.kicker .idx{color:var(--muted);margin-right:14px;}
.rule{height:1px;background:var(--line);border:none;}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
/* The header's layout, its links' visibility and the menu button belong to site.css, which every
   page shares. The prototype's own rules for .nav, .nav-right, .nav-links and .menu-toggle stood
   here and overrode it: they made the header one flex row, so the open mobile menu was laid out
   beside the logo and half off the screen, and they hid the menu button between 661px and 960px. */
.nav-links a{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--text);position:relative;padding:6px 0;letter-spacing:.01em;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--primary);transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;padding:14px 30px;border-radius:6px;transition:background .2s,color .2s,border-color .2s,transform .15s;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline:hover{background:var(--ink);color:#fff;}
.btn-outline-light{border-color:rgba(255,255,255,.4);color:#fff;background:transparent;}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.btn .arr{transition:transform .2s;}
.btn:hover .arr{transform:translateX(3px);}
.btn-login{font-family:var(--display);font-size:14px;font-weight:600;color:var(--primary);border:1px solid var(--line);padding:10px 22px;border-radius:6px;transition:border-color .2s,background .2s;}
.btn-login:hover{border-color:var(--primary);background:var(--paper-2);}

/* ---------- Hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);background:
  linear-gradient(180deg,#FFFFFF 0%,#F3F5FC 100%);overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(43,95,208,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(43,95,208,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 80% at 70% 10%,black 30%,transparent 75%);pointer-events:none;}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:72px;align-items:center;padding-top:104px;padding-bottom:96px;}
.hero h1{font-size:clamp(40px,4.9vw,66px);font-weight:600;}
.hero h1 .accent{color:var(--primary);}
.hero .lede{margin:26px 0 40px;font-size:18.5px;line-height:1.7;color:var(--muted);max-width:500px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-proof{margin-top:60px;padding-top:32px;border-top:1px solid var(--line);display:flex;gap:56px;flex-wrap:wrap;}
.hero-proof .item strong{display:block;font-family:var(--display);font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-0.02em;line-height:1;}
.hero-proof .item span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:9px;}

/* console card */
.console{background:var(--ink);border-radius:12px;padding:0;color:var(--muted-dark);box-shadow:0 40px 80px -32px rgba(16,31,76,.5);overflow:hidden;border:1px solid var(--ink-3);}
.console-top{height:4px;background:linear-gradient(90deg,#101F4C,#3064D4);}
.console-head{display:flex;justify-content:space-between;align-items:center;padding:22px 30px;border-bottom:1px solid var(--line-dark);}
.console-head .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--peri-light);}
.console-head .live{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:#8FE3B8;}
.console-head .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8FE3B8;margin-right:8px;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.console-body{padding:34px 30px 30px;}
.cycle svg{width:100%;height:auto;display:block;overflow:visible;}
.cycle .track{stroke:rgba(175,200,245,.22);stroke-width:1.5;fill:none;}
.cycle .flow{stroke:var(--peri-light);stroke-width:1.5;fill:none;stroke-dasharray:5 9;animation:flow 2.6s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-28;}}
.cycle .node{fill:var(--ink-2);stroke:var(--peri);stroke-width:1.2;}
.cycle .glyph{stroke:var(--peri-light);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.cycle .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;fill:var(--muted-dark);text-anchor:middle;text-transform:uppercase;}
.console-rows{margin-top:30px;border-top:1px solid var(--line-dark);}
.crow{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line-dark);font-size:13.5px;}
.crow:last-child{border-bottom:none;}
.crow .k{color:var(--muted-dark);}
.crow .v{font-family:var(--mono);font-size:12.5px;color:#fff;}
.crow .v.good{color:#8FE3B8;}

/* ---------- Section scaffolding ---------- */
section.block{padding:110px 0;}
.block-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:end;margin-bottom:70px;}
.block-head h2{font-size:clamp(30px,3.4vw,44px);margin-top:20px;}
.block-head .desc{color:var(--muted);font-size:17px;max-width:480px;padding-bottom:6px;}

/* ---------- Capabilities ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.cap{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 34px 42px;position:relative;transition:background .25s;}
.cap:hover{background:var(--paper-2);}
.cap::after{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--primary);transition:width .3s ease;}
.cap:hover::after{width:100%;}
.cap .num{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.12em;}
.cap .icon{margin:26px 0 20px;width:30px;height:30px;color:var(--primary);}
.cap .icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.cap h3{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:10px;letter-spacing:-0.01em;}
.cap p{font-size:14.8px;color:var(--muted);line-height:1.6;}

/* ---------- Benefits (dark editorial) ---------- */
.benefits{background:var(--ink);color:var(--muted-dark);padding:120px 0;}
.benefits .kicker{color:var(--peri-light);}
.benefits .kicker .idx{color:rgba(175,200,245,.5);}
.benefits h2{color:#fff;}
.benefits .block-head .desc{color:var(--muted-dark);}
.ben-list{border-top:1px solid var(--line-dark);}
.ben{display:grid;grid-template-columns:110px minmax(0,.9fr) minmax(0,1.4fr);gap:36px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line-dark);transition:padding-left .25s ease;}
.ben:hover{padding-left:14px;}
.ben .bnum{font-family:var(--mono);font-size:13px;color:var(--peri);letter-spacing:.1em;}
.ben h3{color:#fff;font-size:20px;font-weight:600;letter-spacing:-0.01em;}
.ben p{font-size:15.5px;color:var(--muted-dark);line-height:1.65;}

/* ---------- About / credibility ---------- */
.about{background:var(--paper-2);border-bottom:1px solid var(--line);padding:120px 0;}
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:90px;}
.about .statement{font-family:var(--display);font-size:clamp(26px,3vw,38px);font-weight:600;color:var(--ink);line-height:1.28;letter-spacing:-0.018em;margin-top:26px;}
.about .statement .accent{color:var(--primary);}
.about .body-copy{margin-top:26px;color:var(--muted);font-size:16.5px;max-width:560px;}
.pillars{border-top:1px solid var(--line);margin-top:10px;}
.pillar{padding:26px 0;border-bottom:1px solid var(--line);}
.pillar .p-head{display:flex;align-items:baseline;gap:18px;}
.pillar .p-num{font-family:var(--mono);font-size:12px;color:var(--primary);letter-spacing:.1em;}
.pillar h3{font-size:18px;font-weight:600;letter-spacing:-0.01em;}
.pillar p{margin-top:8px;font-size:14.8px;color:var(--muted);padding-left:42px;}

/* ---------- CTA ---------- */
.cta{background:var(--ink);position:relative;overflow:hidden;padding:130px 0;}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 90% at 50% 110%,rgba(48,100,212,.28),transparent 70%);}
.cta .wrap{position:relative;text-align:center;}
.cta .kicker{color:var(--peri-light);justify-content:center;}
.cta h2{color:#fff;font-size:clamp(32px,4vw,52px);margin:22px auto 20px;max-width:640px;}
.cta p{color:var(--muted-dark);max-width:480px;margin:0 auto 44px;font-size:17px;}
.cta .hero-ctas{justify-content:center;}
.cta-line{height:4px;background:linear-gradient(90deg,#101F4C,#3064D4);}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--muted-dark);padding:78px 0 40px;border-top:1px solid var(--line-dark);}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:56px;margin-bottom:64px;}
.foot-grid .logo-w img{height:40px;width:auto;margin-bottom:20px;}
.foot-grid p{font-size:14.5px;max-width:300px;line-height:1.7;}
footer h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--peri-light);margin-bottom:20px;font-weight:500;}
footer ul{list-style:none;}
footer ul li{margin-bottom:12px;}
footer ul a{font-size:14.5px;transition:color .15s;}
footer ul a:hover{color:#fff;}
.foot-bottom{border-top:1px solid var(--line-dark);padding-top:28px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.04em;flex-wrap:wrap;gap:12px;}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .cycle .flow,.console-head .live::before{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero-inner{grid-template-columns:1fr;gap:56px;padding-top:72px;padding-bottom:72px;}
  .block-head{grid-template-columns:1fr;gap:18px;}
  .cap-grid{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;gap:52px;}
  .ben{grid-template-columns:70px 1fr;gap:20px;}
  .ben p{grid-column:2;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:660px){
  section.block,.benefits,.about,.cta{padding:76px 0;}
  .cap-grid{grid-template-columns:1fr;}
  .ben{grid-template-columns:1fr;gap:8px;}
  .ben p{grid-column:1;}
  .foot-grid{grid-template-columns:1fr;gap:40px;}
  .hero-proof{gap:34px;}
}

/* ---------- Inner-page additions ---------- */
.page-hero{position:relative;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#FFFFFF 0%,#F3F5FC 100%);overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(43,95,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,95,208,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 80% at 70% 0%,black 30%,transparent 75%);pointer-events:none;}
.page-hero .inner{position:relative;padding:96px var(--pad) 84px;max-width:820px;}
.page-hero h1{font-size:clamp(36px,4.4vw,58px);font-weight:600;margin-top:24px;}
.page-hero h1 .accent{color:var(--primary);}
.page-hero .lede{margin-top:24px;font-size:18.5px;line-height:1.7;color:var(--muted);max-width:620px;}
.nav-links a.active::after{width:100%;}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.crumb a:hover{color:var(--primary);}
.crumb .sep{margin:0 10px;color:var(--peri);}

.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.tool{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 34px;transition:background .25s;position:relative;}
.tool:hover{background:var(--paper-2);}
.tool::after{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--primary);transition:width .3s ease;}
.tool:hover::after{width:100%;}
.tool .num{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.12em;}
.tool h3{font-size:19px;font-weight:600;margin-top:22px;letter-spacing:-0.01em;line-height:1.35;}
.tool p{margin-top:10px;font-size:14.8px;color:var(--muted);}

.statement-band{background:var(--ink);padding:110px 0;}
.statement-band .q{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.2vw,40px);color:#fff;line-height:1.3;letter-spacing:-0.018em;max-width:900px;}
.statement-band .q .accent{color:var(--peri-light);}
.statement-band .sub{margin-top:26px;color:var(--muted-dark);font-size:16.5px;max-width:640px;}

/* forms */
.form-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:80px;align-items:start;}
.field{margin-bottom:26px;}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.field input,.field textarea,.field select{width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(43,95,208,.12);}
.field textarea{min-height:150px;resize:vertical;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.form-note{font-size:13px;color:var(--muted);margin-top:18px;}
.form-note a{color:var(--primary);}
.form-success{display:none;border:1px solid var(--line);border-left:3px solid var(--primary);background:var(--paper-2);border-radius:6px;padding:20px 24px;margin-top:26px;font-size:15px;color:var(--ink);}
.contact-side{border-top:1px solid var(--line);}
.side-item{padding:28px 0;border-bottom:1px solid var(--line);}
.side-item h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);font-weight:500;margin-bottom:12px;}
.side-item p,.side-item a.val{font-size:16px;color:var(--ink);font-weight:500;}
.side-item a.val:hover{color:var(--primary);}
.side-item .small{font-size:14px;color:var(--muted);font-weight:400;margin-top:6px;}

/* login */
.login-page{min-height:100vh;display:flex;flex-direction:column;background:var(--ink);}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:60px var(--pad);position:relative;}
.login-main::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 50% 115%,rgba(48,100,212,.3),transparent 70%);pointer-events:none;}
.login-card{position:relative;width:100%;max-width:440px;background:var(--paper);border-radius:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden;}
.login-card .top{height:4px;background:linear-gradient(90deg,#101F4C,#3064D4);}
.login-card .pad{padding:44px 44px 38px;}
.login-card .logo{height:44px;width:auto;margin:0 auto 10px;}
.login-card h1{font-size:22px;font-weight:600;text-align:center;letter-spacing:-0.01em;}
.login-card .sub{text-align:center;font-size:14px;color:var(--muted);margin:8px 0 32px;}
.login-actions{display:flex;justify-content:space-between;align-items:center;margin:4px 0 24px;}
.login-actions a{font-size:13.5px;color:var(--primary);font-weight:500;}
.login-actions a:hover{text-decoration:underline;}
.remember{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);}
.remember input{width:15px;height:15px;accent-color:var(--primary);}
.btn-block{width:100%;}
.divider{display:flex;align-items:center;gap:14px;margin:26px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}
.btn-ms{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:600;font-size:15px;padding:13px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:border-color .2s,background .2s;}
.btn-ms:hover{border-color:var(--peri);background:var(--paper-2);}
.login-foot{position:relative;text-align:center;padding:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted-dark);}
.login-foot a{color:var(--peri-light);}
.login-back{position:absolute;top:26px;left:32px;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);}
.login-back:hover{color:#fff;}

@media (max-width:900px){
  .form-grid{grid-template-columns:1fr;gap:52px;}
  .tool-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:660px){
  .tool-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .login-card .pad{padding:34px 26px 30px;}
  .page-hero .inner{padding:70px var(--pad) 60px;}
}

/* Contact form: honeypot (visually hidden) + error state.
   Note: the locked palette defines no error colour; this restrained red is the
   only added value, scoped to the form error only. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-error{display:none;border:1px solid var(--line);border-left:3px solid #C0392B;background:#FCF4F3;border-radius:6px;padding:16px 20px;margin-top:20px;font-size:15px;color:#9A2B20;}
