/* On Level Solutions
   Shared stylesheet for index.html, engine.html, partner.html */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#060724;color:#ffffff;font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.65}
img{max-width:100%}
a{color:#A6CB90;text-decoration:none}
a:hover{color:#86BC66}
:focus-visible{outline:2px solid #A6CB90;outline-offset:3px}

@keyframes olspulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Concept bar ---------- */
.cbar{position:sticky;top:0;z-index:100;height:54px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,4vw,48px);background:rgba(6,7,36,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.10)}
.cbrand{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#ffffff;white-space:nowrap}
.cbrand b{color:#86BC66;font-weight:600}
.tabs{display:flex;gap:4px}
.tab{display:inline-flex;align-items:center;font:inherit;font-size:11px;font-weight:500;letter-spacing:.5px;padding:7px 14px;border-radius:999px;white-space:nowrap;border:1px solid transparent;color:rgba(255,255,255,.80);background:transparent;transition:.2s}
.tab:hover{color:#ffffff;background:rgba(255,255,255,.08)}
.tab.active,.tab.active:hover{font-weight:600;color:#060724;background:#86BC66}
.tab .num{opacity:.55;margin-right:6px}

/* ---------- Layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.wrap-narrow{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.navlinks{display:flex;gap:34px;align-items:center;flex-wrap:wrap}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;border-radius:999px;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s}
.btn-primary{background:#86BC66;color:#060724;padding:13px 26px}
.btn-primary:hover{background:#A6CB90;color:#060724;transform:translateY(-2px);box-shadow:0 12px 30px rgba(134,188,102,.28)}
.btn-primary.compact{padding:11px 22px;white-space:nowrap}
.btn-ghost{border:1px solid rgba(255,255,255,.18);color:#ffffff;padding:12px 25px}
.btn-ghost:hover{border-color:#86BC66;color:#A6CB90;transform:translateY(-2px)}
.navlink{color:rgba(255,255,255,.80);font-size:14px;font-weight:400;transition:color .2s}
.navlink:hover{color:#ffffff}

/* ---------- Cards ---------- */
.card-lift{transition:transform .3s,border-color .3s}
.card-lift:hover{transform:translateY(-5px);border-color:rgba(134,188,102,.45)}
.card-module{transition:transform .3s,border-color .3s,background .3s}
.card-module:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.20);background:#0E116F}
.pill{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:11px 20px;font-size:13.5px;color:#ffffff;font-weight:300;transition:.25s}
.pill:hover{border-color:#86BC66;color:#A6CB90}

/* ---------- Value words ---------- */
.vword{display:inline-flex;align-items:center;gap:12px;font-size:18px;color:#D4DFCD;font-weight:300}
.vword::before{content:"";flex:none;width:22px;height:3px;background:#86BC66}

/* ---------- Check list ---------- */
.checklist{list-style:none;display:flex;flex-direction:column;gap:14px}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:#ffffff;font-weight:300}
.checklist li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;background:rgba(134,188,102,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A6CB90' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .logo{width:210px !important}
  .cbrand{display:none}
  .cbar{justify-content:center}
  .nav{flex-wrap:wrap;gap:14px}
  .caprow{grid-template-columns:1fr !important;gap:10px !important;padding:24px 4px !important}
  .sec{padding:64px 0 !important}
}
@media(max-width:640px){
  .logo{width:168px !important}
  .navlinks a.navlink{display:none}
  .cbar{padding:0 12px;overflow-x:auto;justify-content:flex-start}
  .tabs{gap:2px}
  .tab{font-size:10px;padding:6px 9px}
  .sec{padding:52px 0 !important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

/* ---------- Contact form ---------- */
.cform{position:relative;max-width:560px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:18px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cfield{display:flex;flex-direction:column;gap:8px;min-width:0}
.cfield label{font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.80)}
.cfield label .opt{text-transform:none;letter-spacing:.2px;font-weight:300;color:rgba(255,255,255,.60)}
.cform input,.cform textarea{font-family:inherit;font-size:15px;font-weight:300;line-height:1.6;color:#ffffff;width:100%;padding:13px 15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:12px;transition:border-color .2s,background .2s}
.cform textarea{resize:vertical;min-height:112px}
.cform input:hover,.cform textarea:hover{border-color:rgba(255,255,255,.30)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:#86BC66;background:rgba(255,255,255,.07)}
.cform-bot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cform-submit{align-self:flex-start;border:0;cursor:pointer;font-family:inherit;margin-top:4px}
.cform-submit[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.cform-status{font-size:14px;font-weight:300;margin:0}
.cform-status.is-ok{color:#A6CB90}
.cform-status.is-err{color:#F0B4A8}
.cform-alt{font-size:13px;color:rgba(255,255,255,.60);font-weight:300;margin:0}
@media(max-width:600px){
  .cform-row{grid-template-columns:1fr}
  .cform-submit{align-self:stretch;justify-content:center}
}

/* ---------- Modal ---------- */
button.btn{border:0;cursor:pointer;font-family:inherit}

/* inset:0 + margin:auto centers the dialog on both axes in every engine,
   rather than relying on UA defaults, which disagree. */
.cmodal{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 40px);padding:0;color:#ffffff;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:linear-gradient(160deg,#0D0F3F,#060724 78%);box-shadow:0 40px 90px rgba(0,0,0,.55);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@supports (max-height:100dvh){.cmodal{max-height:calc(100dvh - 40px)}}
.cmodal::backdrop{background:rgba(3,4,20,.74)}
.cmodal-inner{padding:clamp(24px,4vw,40px)}
.cmodal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cmodal-title{font-size:clamp(21px,2.8vw,27px);font-weight:600;letter-spacing:-.5px;line-height:1.18}
.cmodal-sub{font-size:14.5px;color:rgba(255,255,255,.80);font-weight:300;margin:10px 0 26px;max-width:42ch}
.cmodal-x{flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:20px;line-height:1;color:#ffffff;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:50%;cursor:pointer;transition:border-color .2s,color .2s}
.cmodal-x:hover{border-color:#86BC66;color:#A6CB90}
.cmodal .cform{max-width:none;margin:0}
html.cmodal-open,html.cmodal-open body{overflow:hidden}
@keyframes cmodalin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.cmodal[open]{animation:cmodalin .28s cubic-bezier(.22,.7,.3,1)}

/* 16px inputs stop iOS Safari from zooming the page on focus */
@media(max-width:820px){
  .cform input,.cform textarea{font-size:16px}
}
@media(max-width:600px){
  .cmodal{width:calc(100vw - 20px);max-height:calc(100vh - 24px);border-radius:16px}
  @supports (max-height:100dvh){.cmodal{max-height:calc(100dvh - 24px)}}
  .cmodal-inner{padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
  .cmodal-title{font-size:20px;letter-spacing:-.3px}
  .cmodal-sub{font-size:14px;margin:8px 0 20px}
  .cmodal-x{width:42px;height:42px}
  .cform{gap:15px}
  .cform-row{gap:15px}
  .cform textarea{min-height:94px}
}

/* ---------- Hero, index.html ----------
   Full-bleed background image. The margin/padding pair breaks the section out
   of .wrap to the viewport edges, then pushes its content back onto the
   content column, so text stays aligned with the rest of the page. */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);padding-block:clamp(64px,9vw,116px);min-height:clamp(500px,58vh,680px)}
.hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:58% 26%;display:block}
/* Horizontal scrim keeps the copy legible on the left and lets the photo read
   on the right; the vertical pass blends the section into the page below. */
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,7,36,.93) 0%,rgba(6,7,36,.84) 34%,rgba(6,7,36,.50) 62%,rgba(6,7,36,.26) 100%),linear-gradient(180deg,rgba(6,7,36,.45) 0%,rgba(6,7,36,0) 24%,rgba(6,7,36,0) 72%,#060724 100%)}
.hero-inner{position:relative;z-index:2;max-width:620px;min-width:0}
@media(max-width:820px){
  .hero{min-height:0;padding-block:clamp(48px,10vw,80px)}
  .hero-media{object-position:64% 30%}
  .hero-scrim{background:linear-gradient(180deg,rgba(6,7,36,.72) 0%,rgba(6,7,36,.86) 58%,#060724 100%)}
}

/* ---------- AI section, one layout per page ---------- */

/* index: heading left, points stacked right */
.ai-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(36px,5vw,72px);align-items:start}
.ai-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.10)}
.ai-list-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:20px;align-items:start;padding:26px 4px;border-bottom:1px solid rgba(255,255,255,.10)}
.ai-list-item .bar{width:26px;height:3px;background:#86BC66;margin-top:9px}

/* engine: full-width numbered rows */
.ai-rows{border-top:1px solid rgba(255,255,255,.10)}
.ai-row{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,1.25fr);gap:32px;align-items:start;padding:32px 6px;border-bottom:1px solid rgba(255,255,255,.10);transition:background .3s}
.ai-row:hover{background:rgba(134,188,102,.04)}
.ai-row .n{font-size:clamp(30px,3.4vw,40px);font-weight:600;line-height:1;color:#86BC66;letter-spacing:-1.5px}

/* partner: one panel, three columns divided by hairlines */
.ai-panel{border:1px solid rgba(255,255,255,.18);border-radius:24px;overflow:hidden;background:linear-gradient(150deg,#00035B,#060724 82%)}
.ai-panel-head{padding:clamp(34px,5vw,56px) clamp(24px,5vw,56px) clamp(28px,4vw,44px);max-width:820px}
.ai-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
.ai-col{padding:clamp(28px,3.4vw,40px) clamp(22px,3vw,34px);border-right:1px solid rgba(255,255,255,.14)}
.ai-col:last-child{border-right:0}
.ai-col .bar{width:28px;height:3px;background:#86BC66;margin-bottom:20px}

@media(max-width:900px){
  .ai-split{grid-template-columns:1fr;gap:34px}
  .ai-cols{grid-template-columns:1fr}
  .ai-col{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .ai-col:last-child{border-bottom:0}
}
@media(max-width:820px){
  .ai-row{grid-template-columns:64px minmax(0,1fr);gap:14px 18px;padding:24px 4px}
  .ai-row p{grid-column:2}
}