/* Base layout and components (shared by both brands, themed via variables) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.1;margin:0 0 .5em;color:var(--heading);font-weight:var(--head-weight,700)}
h1{font-size:clamp(40px,6vw,74px);letter-spacing:var(--h1-track,-.02em)}
h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:var(--h2-track,-.015em)}
h3{font-size:21px}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em}
.container{width:min(1200px,calc(100% - 32px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--primary);color:var(--on-primary);padding:10px 14px;text-decoration:none}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:3px}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--muted);line-height:1.6}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);color:var(--header-text);border-bottom:1px solid var(--header-border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.site-nav{display:flex;align-items:center;gap:36px}
.site-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.site-nav ul a{text-decoration:none;font-weight:500;font-size:15px;opacity:.82;padding:6px 0;position:relative;transition:opacity .2s}
.site-nav ul a:hover,.site-nav ul a[aria-current="page"]{opacity:1}
.site-nav ul a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--nav-line,var(--primary))}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;color:inherit;flex-direction:column;gap:6px}
.nav-toggle span:not(.sr-only){display:block;width:26px;height:2px;background:currentColor;transition:transform .25s}
@media (max-width:920px){
  .nav-toggle{display:flex}
  .site-nav{position:fixed;top:78px;left:0;right:0;bottom:0;background:var(--header-bg-solid);flex-direction:column;align-items:stretch;padding:28px 16px 40px;gap:28px;transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s}
  .nav-open .site-nav{transform:none;visibility:visible}
  .nav-open{overflow:hidden}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav ul a{display:block;font-size:24px;padding:14px 0;border-bottom:1px solid var(--header-border);opacity:1}
  .site-nav ul a[aria-current="page"]::after{display:none}
  .site-nav .btn{align-self:flex-start}
  .nav-open .nav-toggle span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav-open .nav-toggle span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--font-btn,var(--font-body));padding:17px 28px;text-decoration:none;border:2px solid transparent;cursor:pointer;border-radius:var(--btn-radius);transition:transform .2s,background-color .2s,color .2s,border-color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:var(--ghost-hover)}
.btn-light{background:#fff;color:var(--btn-light-text,var(--primary))}
.btn-light:hover{transform:translateY(-2px);background:#eef3fb}
.btn-sm{padding:13px 20px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* Sections */
.section{padding:clamp(72px,10vw,124px) 0}
.section-alt{background:var(--surface-alt)}
.section-dark{background:var(--dark);color:var(--on-dark)}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .lead{color:var(--on-dark)}
.section-head{max-width:740px;margin-bottom:56px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p:last-child{margin-bottom:0}
.eyebrow{display:inline-block;font:var(--eyebrow-weight,600) 13px/1.3 var(--font-eyebrow);letter-spacing:var(--eyebrow-track,.14em);text-transform:uppercase;color:var(--eyebrow-color,var(--primary));margin-bottom:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* Service cards */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1080px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr}}
.card{background:var(--card-bg);border:1px solid var(--border);padding:32px 28px;border-radius:var(--radius);display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s,background-color .25s}
.card:hover{transform:translateY(-4px);border-color:var(--primary)}
.card h3{margin:8px 0 0}
.card p{color:var(--muted);font-size:15.5px;margin:0;flex:1}
.card .more{font-weight:600;font-size:14px;color:var(--link,var(--primary));display:inline-flex;gap:8px;align-items:center}
.card .more svg{width:16px;height:16px;transition:transform .2s}
.card:hover .more svg{transform:translateX(4px)}
.icon{width:54px;height:54px;display:grid;place-items:center;background:var(--icon-bg);color:var(--icon-color,var(--primary));border-radius:var(--icon-radius);flex-shrink:0}
.icon svg{width:26px;height:26px}

/* Pillars and values */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px)}
.pillars.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pillars,.pillars.two{grid-template-columns:1fr}}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--muted);margin:0}
.section-dark .pillar p{color:var(--on-dark)}
.pillar .num{display:block;font:600 14px/1 var(--font-eyebrow);color:var(--primary-on-dark,var(--primary));letter-spacing:.1em;margin-bottom:18px}

/* Process */
.process{display:grid;grid-template-columns:repeat(var(--steps,4),1fr);gap:20px}
@media (max-width:980px){.process{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.process{grid-template-columns:1fr}}
.step{background:var(--card-bg);border:1px solid var(--border);padding:32px 28px;border-radius:var(--radius);position:relative}
.step .step-num{display:block;font:700 13px/1 var(--font-eyebrow);color:var(--primary);letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);margin:0;font-size:16px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-block;padding:9px 15px;border:1px solid var(--border);font-size:14px;font-weight:500;border-radius:var(--chip-radius);background:var(--card-bg);text-decoration:none;color:var(--text);transition:border-color .2s,color .2s}
a.chip:hover{border-color:var(--primary);color:var(--primary)}

/* CTA band */
.cta-box{padding:clamp(40px,6vw,76px);background:var(--cta-bg);color:#fff;border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-box > *{position:relative;z-index:1}
.cta-box h2{color:#fff;max-width:680px;margin-bottom:12px}
.cta-box p{color:rgba(255,255,255,.82);max-width:600px;margin:0}

/* Page hero */
.page-hero{padding:clamp(64px,9vw,116px) 0 clamp(52px,7vw,84px);background:var(--page-hero-bg);color:var(--page-hero-text);position:relative;overflow:hidden}
.page-hero > .container{position:relative;z-index:1}
.page-hero h1{max-width:920px;color:inherit}
.page-hero .lead{max-width:700px;color:var(--page-hero-muted);margin:0}

/* Services detail */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.service-detail{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--border);scroll-margin-top:96px}
.service-detail:first-child{border-top:0;padding-top:0}
@media (max-width:900px){.service-detail{grid-template-columns:1fr}}
.service-detail .sd-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.service-detail .sd-num{font:600 14px/1 var(--font-eyebrow);color:var(--primary);letter-spacing:.12em}
.service-detail h2{font-size:clamp(28px,3.4vw,40px)}
.service-detail .chips{margin-top:24px}
.includes{background:var(--surface-alt);border-radius:var(--radius);padding:32px;align-self:start}
.includes h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-eyebrow);margin-bottom:18px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg)}

/* Engagement models */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.models{grid-template-columns:1fr}}
.model{background:var(--card-bg);border:1px solid var(--border);padding:36px 32px;border-radius:var(--radius)}
.model.featured{border-color:var(--primary);border-width:2px}
.model .tag{display:inline-block;font:700 12px/1 var(--font-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:16px}
.model p{color:var(--muted)}
.model .ticks{margin-top:20px}

/* FAQ */
.faq{max-width:860px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--border);padding:24px 0}
.faq summary{cursor:pointer;font:600 19px/1.4 var(--font-head);color:var(--heading);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;line-height:1;color:var(--primary);transition:transform .25s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:14px 0 0;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.45fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr}}
.form-card{background:var(--card-bg);border:1px solid var(--border);padding:clamp(24px,4vw,48px);border-radius:var(--radius-lg)}
.form-card h2{font-size:clamp(26px,3vw,34px)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-weight:600;font-size:14px;color:var(--heading)}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);border-radius:var(--input-radius);width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
.field [aria-invalid="true"]{border-color:#c62828}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;color:var(--muted);margin:4px 0 20px}
.form-note a{color:var(--link,var(--primary))}
.form-status{margin:18px 0 0;font-weight:600;min-height:1.4em}
.form-status.error{color:#c62828}
.form-status.ok{color:var(--success)}
.info-stack{display:grid;gap:20px}
.info-card{background:var(--surface-alt);padding:28px;border-radius:var(--radius)}
.info-card h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-eyebrow);margin-bottom:10px;color:var(--muted)}
.info-card p{margin:0;font-size:18px;font-weight:600;color:var(--heading)}
.info-card a{text-decoration:none}
.info-card a:hover{text-decoration:underline}
.info-card small{display:block;font-size:15px;font-weight:400;color:var(--muted);margin-top:6px}

/* Legal */
.legal-wrap{display:grid;grid-template-columns:250px 1fr;gap:clamp(32px,6vw,80px)}
@media (max-width:900px){.legal-wrap{grid-template-columns:1fr}}
.toc{position:sticky;top:110px;align-self:start;font-size:15px}
@media (max-width:900px){.toc{position:static;background:var(--surface-alt);padding:24px;border-radius:var(--radius)}}
.toc h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-eyebrow);color:var(--muted);margin-bottom:14px}
.toc ol{padding-left:20px;margin:0;display:grid;gap:8px;color:var(--muted)}
.toc a{text-decoration:none}
.toc a:hover{color:var(--primary)}
.legal{max-width:780px}
.legal .updated{font-size:15px;color:var(--muted);margin-bottom:32px}
.legal h2{font-size:clamp(22px,2.4vw,26px);margin:52px 0 16px;scroll-margin-top:100px}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{color:var(--text-soft)}
.legal ul{padding-left:22px;display:grid;gap:8px}
.legal a{color:var(--link,var(--primary))}

/* Footer */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:84px 0 0}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.3fr;gap:40px}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h3{font:600 13px/1.3 var(--font-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--footer-head);margin-bottom:20px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:15px}
.site-footer a{text-decoration:none;opacity:.82;transition:opacity .2s}
.site-footer a:hover{opacity:1}
.footer-brand p{max-width:330px;opacity:.78;margin-top:22px;font-size:15px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0 32px;margin-top:68px;border-top:1px solid var(--footer-border);font-size:14px}
.footer-bottom p{margin:0;opacity:.75;display:flex;gap:22px;flex-wrap:wrap}

/* Reveal on scroll */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* Let grid children shrink below their content width (prevents mobile overflow) */
.hero-grid > *,.split > *,.contact-grid > *,.service-detail > *,.legal-wrap > *,.footer-grid > *{min-width:0}

/* Core Bits theme: colors sampled from the logo (#087FF0 blue, #091D40 navy) */
:root{
  --primary:#087ff0;--primary-hover:#2994f6;--on-primary:#fff;--focus-ring:rgba(8,127,240,.22);
  --navy:#091d40;--dark:#071733;--bg:#fff;--surface-alt:#f2f5fa;
  --text:#0d1c36;--heading:#091d40;--muted:#4e5d78;--text-soft:#2b3a55;--border:#dce3ee;
  --card-bg:#fff;--icon-bg:rgba(8,127,240,.1);
  --radius:0;--radius-lg:0;--icon-radius:0;--btn-radius:0;--chip-radius:0;--input-radius:0;
  --font-head:"Chakra Petch",system-ui,sans-serif;--font-body:"DM Sans",system-ui,sans-serif;--font-eyebrow:"JetBrains Mono",ui-monospace,monospace;--font-btn:"Chakra Petch",system-ui,sans-serif;
  --head-weight:700;--h1-track:-.01em;--h2-track:-.005em;
  --header-bg:#091d40;--header-bg-solid:#091d40;--header-text:#fff;--header-border:rgba(255,255,255,.09);
  --footer-bg:#061430;--footer-text:#c3cfe3;--footer-head:#fff;--footer-border:rgba(255,255,255,.1);
  --page-hero-bg:#091d40;--page-hero-text:#fff;--page-hero-muted:#b2c1da;
  --cta-bg:#087ff0;--input-border:#cdd7e6;--input-bg:#fff;--ghost-hover:rgba(255,255,255,.08);
  --success:#0a7a3d;--on-dark:#b2c1da;--btn-light-text:#091d40;--link:#0668c7;
  --cut:14px;
}
.btn{--cut:9px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));letter-spacing:.04em;text-transform:uppercase;font-size:14px}
.btn-ghost{clip-path:none}
.card,.step,.model,.form-card,.cta-box,.includes,.info-card,.term{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.card:hover{background:#f7faff}
.icon{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
h1 em,h2 em{font-style:normal;color:var(--primary)}
.site-nav ul a{font-family:var(--font-head);font-size:15px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.brand img{height:34px;width:auto}

.grid-bg{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px}

/* Hero */
.cb-hero{background-color:#091d40;color:#fff;padding:clamp(72px,10vw,132px) 0 clamp(80px,10vw,128px);position:relative;overflow:hidden}
.cb-hero::before{content:"";position:absolute;right:-180px;top:50%;width:760px;height:760px;transform:translateY(-50%);background:url(../img/cb-icon-white.svg) center/contain no-repeat;opacity:.035;pointer-events:none}
.cb-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#087ff0 0 38%,transparent 38%)}
.cb-hero .container{position:relative;z-index:1}
.cb-hero h1{color:#fff;margin-bottom:24px}
.cb-hero .lead{color:#b2c1da;max-width:600px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,80px);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.hero-tags span{font:500 13px/1 var(--font-eyebrow);color:#d6e2f5;border:1px solid rgba(255,255,255,.18);padding:9px 12px}

/* Terminal panel */
.term{background:#0c2552;border:1px solid rgba(255,255,255,.1);font:14px/1.95 "JetBrains Mono",ui-monospace,monospace;color:#d3e3ff;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:#7f93b8}
.term-bar i{width:10px;height:10px;background:rgba(255,255,255,.18);display:block}
.term-bar i:first-child{background:#087ff0}
.term-bar b{margin-left:auto;font-weight:400}
.term-body{padding:22px 24px 26px;min-height:300px}
.term-body div{opacity:0;animation:termline .35s ease forwards;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-body div:nth-child(1){animation-delay:.3s}.term-body div:nth-child(2){animation-delay:.9s}
.term-body div:nth-child(3){animation-delay:1.5s}.term-body div:nth-child(4){animation-delay:2.1s}
.term-body div:nth-child(5){animation-delay:2.7s}.term-body div:nth-child(6){animation-delay:3.3s}
.term-body div:nth-child(7){animation-delay:3.9s}.term-body div:nth-child(8){animation-delay:4.5s}
.term .p{color:#4fa8ff}.term .ok{color:#5fe3a1}.term .c{color:#7f93b8}
.term .cursor{display:inline-block;width:9px;height:17px;background:#087ff0;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes termline{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}

/* Dark sections */
.section-dark{background-color:#071733}
.section-dark .pillar{border-top:1px solid rgba(255,255,255,.14);padding-top:28px}
.section-dark .pillar .num{color:#4fa8ff}

.step{border-top:3px solid var(--primary)}
.process .step:nth-child(even){background:#f7faff}

.cta-box{background-color:#087ff0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px}
.cta-box::after{content:"";position:absolute;right:-60px;bottom:-90px;width:360px;height:360px;background:url(../img/cb-icon-white.svg) center/contain no-repeat;opacity:.12}

.page-hero{background-color:#091d40;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#087ff0 0 22%,transparent 22%)}
.page-hero .eyebrow{color:#4fa8ff}

.about-panel{background:#091d40;color:#c3cfe3;padding:40px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.about-panel img{width:120px;margin-bottom:28px}
.about-panel h3{color:#fff}
.about-panel .ticks li::before{border-color:#4fa8ff}
.stack-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.stack-row .chips{max-width:760px}