*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#07090b;color:#f4efe5;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit}.preview{background:#214c2d;color:#e5f7e9;text-align:center;padding:7px 12px;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.shell{width:min(1220px,calc(100% - 32px));margin:auto}.topbar{position:sticky;top:0;z-index:20;background:rgba(7,9,11,.96);backdrop-filter:blur(14px);border-bottom:1px solid #292f33}.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand strong{display:block;letter-spacing:.18em}.brand small{display:block;color:#798388;font:8px ui-monospace,monospace;letter-spacing:.14em;margin-top:3px}.nav nav{display:flex;gap:20px;align-items:center}.nav nav a{text-decoration:none;font:10px ui-monospace,monospace;color:#a4adb1;letter-spacing:.12em}.nav nav a:hover{color:#ff6a00}.boot{border-bottom:1px solid #23292d;color:#667177;font:10px ui-monospace,monospace;letter-spacing:.12em}.boot .shell{display:flex;gap:24px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}.boot b{color:#7be59a;font-weight:600}.eyebrow{color:#ff6a00;font:11px ui-monospace,monospace;letter-spacing:.18em}.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;border:1px solid #3b4449;text-decoration:none;font:11px ui-monospace,monospace;letter-spacing:.05em}.btn.primary{background:#ff6a00;border-color:#ff6a00;color:#111;font-weight:900}.problem-stage{background:radial-gradient(circle at 80% 15%,rgba(255,106,0,.14),transparent 25%),linear-gradient(180deg,#0c0f12,#07090b);position:relative;overflow:hidden}.problem-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(#000,transparent 62%);pointer-events:none}.problem-intro{position:relative;padding:74px 0 48px}.problem-intro h1{font-size:clamp(66px,9.5vw,146px);line-height:.78;letter-spacing:-.075em;margin:18px 0 28px;font-weight:950}.problem-intro h1 span{color:#ff6a00}.problem-lead{font-size:clamp(21px,2.1vw,31px);line-height:1.35;margin:0 0 12px;max-width:780px}.problem-copy{max-width:820px;color:#919ba0;line-height:1.65;margin:0}.problem-matrix{position:relative;border-top:1px solid #343c41}.problem-item{border-bottom:1px solid #2c3337}.problem-trigger{appearance:none;-webkit-appearance:none;width:100%;display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:center;gap:24px;border:0;border-radius:0;background:transparent;color:inherit;text-align:left;padding:24px 0;cursor:pointer;font:inherit}.problem-trigger:hover .problem-title strong,.problem-item.open .problem-title strong{color:#ff6a00}.problem-number{font:700 clamp(26px,3vw,44px) ui-monospace,monospace;color:#ff6a00;letter-spacing:-.05em}.problem-title strong{display:block;font-size:clamp(25px,3.2vw,48px);line-height:.96;letter-spacing:-.035em;transition:.2s}.problem-title small{display:block;color:#7f898e;margin-top:8px;font-size:13px;line-height:1.45}.problem-open{font:10px ui-monospace,monospace;color:#768086;letter-spacing:.12em;white-space:nowrap}.problem-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}.problem-panel-inner{overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;padding:0}.problem-item.open .problem-panel{grid-template-rows:1fr}.problem-item.open .problem-panel-inner{padding:0 0 26px 114px}.problem-panel ul{display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none}.problem-panel li{border:1px solid #3a4348;padding:8px 10px;color:#bbc3c7;font:10px ui-monospace,monospace;letter-spacing:.04em}.problem-fallback{position:relative;margin-top:36px;margin-bottom:72px;padding:28px 0 36px;border-top:1px solid #31383c}.problem-fallback span{font:10px ui-monospace,monospace;color:#707a80;letter-spacing:.13em}.problem-fallback p{font-size:clamp(28px,4vw,54px);font-weight:850;letter-spacing:-.045em;margin:8px 0 18px}.next-band{position:relative;display:grid;grid-template-columns:180px 1fr auto;gap:20px;align-items:center;padding:24px max(16px,calc((100vw - 1220px)/2));background:#ff6a00;color:#111;text-decoration:none}.next-band span{font:10px ui-monospace,monospace;letter-spacing:.13em}.next-band strong{font-size:clamp(20px,2.7vw,36px);letter-spacing:-.025em}.next-band b{font-size:28px}.section{padding:96px 0}.section-head{display:grid;grid-template-columns:70px 1fr auto;gap:16px;border-top:1px solid currentColor;padding-top:10px;margin-bottom:60px}.section-head span,.section-head small{font:10px ui-monospace,monospace;letter-spacing:.14em}.section-head b{letter-spacing:.08em}.light{background:#eee7db;color:#111}.dark{background:#0b0e10;color:#f2ecdf}.orange{background:#ff6a00;color:#111}.business-stage{background:#0b0e10;color:#f2ecdf;padding:96px 0;position:relative;overflow:hidden}.business-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 68%,rgba(255,106,0,.05) 68% 100%);pointer-events:none}.business-intro{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end;margin-bottom:54px}.business-intro h2{font-size:clamp(56px,7.8vw,116px);line-height:.82;letter-spacing:-.065em;margin:0}.business-intro h2 span{color:#ff6a00}.business-intro p{color:#9ba5aa;line-height:1.7;font-size:17px;max-width:560px}.business-environment{position:relative;border-top:1px solid #353d42;border-bottom:1px solid #353d42}.business-env-head{display:grid;grid-template-columns:120px 1fr auto;gap:24px;padding:15px 0;border-bottom:1px solid #30373b;color:#758087;font:10px ui-monospace,monospace;letter-spacing:.12em}.business-env-row{display:grid;grid-template-columns:120px 1fr 220px;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid #252c30}.business-env-row:last-child{border-bottom:0}.business-env-row span{font:700 13px ui-monospace,monospace;color:#ff6a00}.business-env-row strong{font-size:clamp(22px,2.6vw,36px);letter-spacing:-.03em}.business-env-row p{margin:0;color:#8e989d;line-height:1.5;font-size:13px}.business-retainer{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:54px}.retainer-pitch{padding:28px 0}.retainer-pitch .eyebrow{margin-top:0}.retainer-pitch h3{font-size:clamp(40px,5.2vw,76px);line-height:.9;letter-spacing:-.055em;margin:14px 0 22px}.retainer-pitch p{color:#98a2a7;line-height:1.7;max-width:560px}.retainer-flow{border-top:1px solid #353d42}.retainer-flow div{display:grid;grid-template-columns:60px 1fr auto;gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid #2d3438}.retainer-flow span{font:10px ui-monospace,monospace;color:#ff6a00}.retainer-flow strong{font-size:20px}.retainer-flow small{grid-column:2;color:#899398;line-height:1.5}.retainer-flow b{font:10px ui-monospace,monospace;color:#6f797e;letter-spacing:.1em}.retainer-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}.business-note{margin-top:44px;padding:18px 0;border-top:1px solid #2e3539;color:#7f8a90;font:10px ui-monospace,monospace;letter-spacing:.08em}.case-grid{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:end}.case-name{font-size:clamp(80px,13vw,176px);line-height:.73;letter-spacing:-.08em;font-weight:950}.case-copy{border-left:1px solid rgba(0,0,0,.35);padding-left:22px;line-height:1.65}.case-copy .mono{font:10px ui-monospace,monospace;letter-spacing:.12em}.case-copy a{text-decoration:none;font-weight:900}.lab-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px}.lab-grid h2{font-size:clamp(48px,6.5vw,92px);line-height:.86;letter-spacing:-.055em;margin:0 0 24px}.lab-grid h2 em{font-style:normal;color:#ff6a00}.lab-grid>div>p{color:#9ba5aa;line-height:1.7;font-size:17px}.lab-signals{border-top:1px solid #333a3e}.lab-signals p{display:grid;grid-template-columns:48px 1fr;margin:0!important;padding:18px 0;border-bottom:1px solid #2e3539;color:#e8e1d5!important}.lab-signals span{font:10px ui-monospace,monospace;color:#667177}.local-models{margin-top:42px;padding:16px 18px;border-left:3px solid #ff6a00;background:#11171a;display:flex;gap:20px}.local-models b{color:#ff6a00;font:10px ui-monospace,monospace;letter-spacing:.14em;white-space:nowrap}.local-models span{color:#a8b1b5;font-size:13px}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end}.contact-grid h2{font-size:clamp(68px,10vw,138px);line-height:.77;letter-spacing:-.07em;margin:0}.contact-grid h2 span{color:#ff6a00}.contact-grid p{font-size:19px;line-height:1.6}.contact-grid a{margin-right:10px;margin-top:10px}.footer{background:#050607;border-top:1px solid #242a2e;color:#687278;padding:26px 0}.footer .shell{display:flex;justify-content:space-between;gap:20px;font:10px ui-monospace,monospace;letter-spacing:.1em}@media(max-width:900px){.nav nav{display:none}.problem-trigger{grid-template-columns:62px minmax(0,1fr) auto;gap:14px}.problem-item.open .problem-panel-inner{padding-left:76px}.business-intro,.business-retainer,.case-grid,.lab-grid,.contact-grid{grid-template-columns:1fr}.business-env-row{grid-template-columns:90px 1fr}.business-env-row p{grid-column:2}.section-head{grid-template-columns:42px 1fr}.section-head small{display:none}.case-copy{border-left:0;border-top:1px solid rgba(0,0,0,.35);padding:18px 0 0}.next-band{grid-template-columns:1fr auto}.next-band span{grid-column:1/-1}}@media(max-width:560px){.shell{width:min(100% - 28px,1220px)}.nav{min-height:64px}.brand small{display:none}.boot .shell{gap:9px}.problem-intro{padding:54px 0 38px}.problem-intro h1{font-size:58px}.problem-lead{font-size:21px}.problem-trigger{grid-template-columns:46px 1fr;padding:19px 0;align-items:start}.problem-number{font-size:24px}.problem-title strong{font-size:27px}.problem-title small{font-size:12px}.problem-open{grid-column:2;margin-top:5px}.problem-panel-inner{grid-template-columns:1fr;gap:16px}.problem-item.open .problem-panel-inner{padding:0 0 22px 60px}.problem-panel ul{display:grid}.problem-fallback{margin-bottom:52px}.next-band{padding:20px 14px}.section,.business-stage{padding:72px 0}.business-intro h2{font-size:56px}.business-env-head{grid-template-columns:70px 1fr}.business-env-head span:last-child{display:none}.business-env-row{grid-template-columns:70px 1fr;gap:14px;padding:18px 0}.business-env-row strong{font-size:24px}.retainer-pitch h3{font-size:48px}.retainer-flow div{grid-template-columns:44px 1fr}.retainer-flow b{display:none}.retainer-flow small{grid-column:2}.case-name{font-size:74px}.lab-grid h2{font-size:52px}.contact-grid h2{font-size:66px}.local-models{flex-direction:column;gap:6px}.footer .shell{flex-direction:column}}
/* Feedback 2026-09-18 */
.brand-logo{width:52px;height:52px;object-fit:contain;display:block;flex:0 0 auto;border-radius:50%}
.problem-intro h1{text-align:center}
.problem-intro .eyebrow{text-align:center}
.lab-grid>div:first-child h2{text-align:center}
@media(max-width:560px){.brand-logo{width:44px;height:44px}.problem-intro h1{text-align:center}.lab-grid>div:first-child h2{text-align:center}}

/* Feedback: center and elevate intro statement */
.problem-lead{
  max-width:980px;
  margin:0 auto 22px;
  text-align:center;
  font-size:clamp(28px,3.4vw,52px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
}
.problem-copy{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  font-size:14px;
  line-height:1.7;
}
@media(max-width:560px){
  .problem-lead{
    font-size:30px;
    max-width:92%;
  }
  .problem-copy{
    max-width:92%;
    font-size:13px;
  }
}

/* Corporate footer */
.corporate-footer{background:#050607;border-top:1px solid #2b3135;color:#9ba5aa;padding:44px 0 20px}
.corporate-footer-grid{display:grid;grid-template-columns:1.15fr 1fr 1.2fr 1fr;gap:34px}
.corporate-footer-grid>div{min-width:0}
.footer-label{display:block;margin-bottom:10px;color:#69747a;font:9px ui-monospace,monospace;letter-spacing:.14em}
.footer-brand strong{display:block;color:#f2ecdf;font-size:24px;letter-spacing:.16em}
.footer-brand>span{display:block;color:#ff6a00;margin-top:4px;font-weight:700}
.footer-brand small,.footer-office small,.footer-contact small,.footer-dev small{display:block;margin-top:7px;color:#707b81;font-size:11px;line-height:1.45}
.footer-office strong,.footer-dev strong{color:#e9e2d7;font-size:15px}
.footer-contact a{display:block;color:#e9e2d7;text-decoration:none;font-size:15px}
.footer-contact a:hover{color:#ff6a00}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;margin-top:34px;padding-top:18px;border-top:1px solid #242a2e;color:#59646a;font:9px ui-monospace,monospace;letter-spacing:.08em}
@media(max-width:900px){.corporate-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.corporate-footer{padding-top:36px}.corporate-footer-grid{grid-template-columns:1fr;gap:26px}.footer-bottom{flex-direction:column;gap:8px}}

/* OCTOSEC network background — canvas only, non-interactive */
.problem-stage{isolation:isolate}
#octosec-network{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.72;
}
.problem-stage>.boot,
.problem-stage>.problem-intro,
.problem-stage>.problem-matrix,
.problem-stage>.problem-fallback,
.problem-stage>.next-band{
  position:relative;
  z-index:1;
}
@media(prefers-reduced-motion:reduce){
  #octosec-network{opacity:.45}
}


/* === OCTOSEC CINEMATIC HERO / APPROVED ARTWORK === */
#octosec-network{display:none!important}
.problem-stage{background:#07090b;isolation:auto}
.cinematic-hero{
  position:relative;
  min-height:860px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,6,7,.99) 0%,rgba(4,6,7,.95) 24%,rgba(4,6,7,.78) 41%,rgba(4,6,7,.24) 63%,rgba(4,6,7,.08) 100%),
    linear-gradient(180deg,rgba(4,6,7,.10) 0%,rgba(4,6,7,.06) 68%,rgba(4,6,7,.72) 100%),
    url('/octosec-hero_tra.png') center right/cover no-repeat;
  border-bottom:1px solid #252b2f;
}
.cinematic-hero:after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
}
.hero-nav{
  position:relative;z-index:3;
  min-height:98px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:42px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cinematic-brand{min-width:max-content}
.cinematic-brand .brand-logo{width:64px;height:64px}
.hero-nav nav{display:flex;justify-content:center;gap:32px}
.hero-nav nav a{
  color:#efe8dc;text-decoration:none;
  font:700 11px ui-monospace,monospace;letter-spacing:.10em;
}
.hero-nav nav a:hover{color:#ff6a00}
.hero-nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;
  border:1px solid #ff6a00;border-radius:999px;
  color:#f7eee2;text-decoration:none;
  font:800 10px ui-monospace,monospace;letter-spacing:.08em;
}
.cinematic-copy{
  position:relative;z-index:2;
  padding-top:86px;
  padding-bottom:40px;
}
.cinematic-location{
  color:#d0c7bb;
  font:10px ui-monospace,monospace;
  letter-spacing:.22em;
  margin:0 0 26px;
}
.cinematic-location:before{content:"";display:inline-block;width:32px;height:2px;background:#ff6a00;margin:0 14px 3px 0}
.cinematic-copy h1{
  max-width:690px;
  margin:0;
  color:#f2ebdf;
  font-size:clamp(58px,6.8vw,105px);
  line-height:.90;
  letter-spacing:-.055em;
  font-weight:950;
  text-shadow:0 3px 32px rgba(0,0,0,.45);
}
.cinematic-copy h1 span{color:#ff6a00}
.cinematic-lead{
  max-width:520px;
  margin:28px 0 25px;
  color:#c8c0b5;
  font-size:clamp(17px,1.4vw,23px);
  line-height:1.45;
}
.cinematic-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:58px;padding:0 28px;
  background:#ff6a00;color:#090b0c;text-decoration:none;
  border-radius:7px;
  font:900 12px ui-monospace,monospace;letter-spacing:.08em;
  box-shadow:0 0 30px rgba(255,106,0,.16);
}
.cinematic-cta:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(255,106,0,.26)}
.cinematic-values{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:720px;
  margin-top:18px;
  padding-bottom:42px;
}
.cinematic-values>div{
  min-height:66px;
  padding:12px 22px 12px 0;
  margin-right:22px;
  border-right:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;
}
.cinematic-values>div:last-child{border-right:0;margin-right:0}
.cinematic-values b{color:#ff6a00;font:10px ui-monospace,monospace}
.cinematic-values span{color:#efe8dc;font-size:13px;line-height:1.35}
.matrix-heading{
  padding-top:78px;
  padding-bottom:50px;
  text-align:center;
}
.matrix-heading .eyebrow{margin:0 0 18px}
.matrix-heading h2{
  margin:0 auto 22px;
  max-width:1000px;
  font-size:clamp(52px,7vw,108px);
  line-height:.88;
  letter-spacing:-.06em;
}
.matrix-heading h2 span{color:#ff6a00}
.matrix-heading>p:last-child{
  margin:0 auto;
  max-width:760px;
  color:#9ba5aa;
  font-size:clamp(17px,1.6vw,23px);
}

@media(max-width:900px){
  .hero-nav{grid-template-columns:auto auto;gap:18px;min-height:82px}
  .hero-nav nav{display:none}
  .hero-nav-cta{justify-self:end}
  .cinematic-hero{
    min-height:760px;
    background:
      linear-gradient(90deg,rgba(4,6,7,.98) 0%,rgba(4,6,7,.91) 45%,rgba(4,6,7,.50) 73%,rgba(4,6,7,.26) 100%),
      linear-gradient(180deg,rgba(4,6,7,.10),rgba(4,6,7,.72)),
      url('/octosec-hero_tra.png') 62% center/cover no-repeat;
  }
  .cinematic-copy{padding-top:66px}
  .cinematic-values{grid-template-columns:1fr;max-width:520px}
  .cinematic-values>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);margin-right:0}
}
@media(max-width:560px){
  .cinematic-hero{
    min-height:auto;
    background:
      linear-gradient(180deg,rgba(4,6,7,.80) 0%,rgba(4,6,7,.95) 56%,#07090b 100%),
      url('/octosec-hero_tra.png') 72% top/auto 410px no-repeat;
  }
  .hero-nav{min-height:72px}
  .cinematic-brand .brand-logo{width:46px;height:46px}
  .cinematic-brand small{display:none}
  .hero-nav-cta{font-size:8px;padding:0 12px}
  .cinematic-copy{padding-top:270px}
  .cinematic-copy h1{font-size:48px;line-height:.92}
  .cinematic-lead{font-size:17px}
  .cinematic-cta{width:100%}
  .cinematic-contact{font-size:12px}
  .cinematic-values{padding-bottom:28px}
  .matrix-heading{padding-top:58px;padding-bottom:36px}
  .matrix-heading h2{font-size:48px}
}

/* 2026-09-19: canonical user-uploaded hero artwork + mobile crop */
.cinematic-hero{
  background-position:center right;
}
@media(max-width:900px){
  .cinematic-hero{
    background:
      linear-gradient(90deg,rgba(4,6,7,.96) 0%,rgba(4,6,7,.84) 38%,rgba(4,6,7,.34) 70%,rgba(4,6,7,.10) 100%),
      linear-gradient(180deg,rgba(4,6,7,.03) 0%,rgba(4,6,7,.10) 65%,rgba(4,6,7,.68) 100%),
      url('/octosec-hero_tra.png') 61% center/cover no-repeat;
  }
}
@media(max-width:560px){
  .cinematic-hero{
    background:
      linear-gradient(180deg,rgba(4,6,7,.20) 0%,rgba(4,6,7,.42) 34%,rgba(4,6,7,.88) 64%,#07090b 100%),
      url('/octosec-hero_tra.png') 68% top/auto 460px no-repeat;
  }
  .cinematic-copy{padding-top:330px}
}