/* ============================================================
   One Zyme · Platform Solutions · Shared page system
   Imports colors_and_type.css; layered on top of the marketing
   shell from index v2.html. Used by all solution detail pages
   AND the Platform Solutions landing page.
   ============================================================ */

@import url('../../colors_and_type.css');

html,body{margin:0;overflow-x:hidden;background:var(--oz-bone);}
a{color:inherit;text-decoration:none;}
.container{max-width:1280px;margin:0 auto;padding:0 32px;}
.eyebrow{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;}

/* ─── Header (matches home) ─────────────────────── */
.header{position:sticky;top:0;z-index:50;background:rgba(10,22,40,0.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--oz-on-dark-line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:32px;}
.nav{display:flex;align-items:center;gap:32px;position:relative;}
.nav > a, .nav > .nav-trigger, .nav-item > a{font-size:14px;color:var(--oz-on-dark-2);font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:transparent;border:0;font-family:inherit;padding:0;}
.nav > a:hover, .nav > .nav-trigger:hover, .nav-item > a:hover{color:var(--oz-on-dark-1);}
.nav > a.is-current{color:var(--oz-on-dark-1);}
.nav .chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:0.45;}

/* Dropdown */
.nav-item{position:relative;}
.nav-panel{position:absolute;top:calc(100% + 14px);left:-24px;background:var(--oz-midnight);border:1px solid var(--oz-on-dark-line);border-radius:18px;padding:24px;display:none;min-width:680px;box-shadow:0 30px 60px rgba(0,0,0,0.4);z-index:60;}
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel{display:block;}
.nav-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.nav-panel-col h6{font-family:var(--oz-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--oz-cyan);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--oz-on-dark-line);}
.nav-panel-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
.nav-panel-col a{display:block;padding:8px 10px;border-radius:8px;color:var(--oz-on-dark-2);font-size:13.5px;font-weight:500;letter-spacing:-0.005em;transition:all .15s var(--oz-ease);}
.nav-panel-col a:hover{background:var(--oz-on-dark-line);color:var(--oz-bone);}
.nav-panel-col a.is-current{background:rgba(6,182,212,0.10);color:var(--oz-cyan);}
.nav-panel-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--oz-on-dark-line);display:flex;justify-content:space-between;align-items:center;gap:18px;}
.nav-panel-foot .label{font-size:13px;color:var(--oz-on-dark-3);}
.nav-panel-foot a{font-size:13px;color:var(--oz-cyan);font-weight:600;display:inline-flex;align-items:center;gap:6px;}

.header-cta{display:flex;align-items:center;gap:8px;}
.header-link{font-size:14px;color:var(--oz-on-dark-2);font-weight:500;padding:11px 8px;}
.header-link:hover{color:var(--oz-on-dark-1);}

.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:11px 18px;border-radius:9999px;transition:all .18s var(--oz-ease);cursor:pointer;border:0;font-family:inherit;}
.btn--primary{background:var(--oz-cyan);color:var(--oz-midnight);}
.btn--primary:hover{background:#22C9E0;}
.btn--ghost-dark{background:transparent;color:var(--oz-on-dark-1);border:1px solid var(--oz-on-dark-line-2);}
.btn--ghost-dark:hover{background:var(--oz-on-dark-line);}
.btn--ghost-light{background:transparent;color:var(--oz-midnight);border:1px solid var(--oz-midnight-15);}
.btn--ghost-light:hover{background:var(--oz-midnight-15);}
.btn--solid-dark{background:var(--oz-midnight);color:var(--oz-bone);}
.btn--solid-dark:hover{background:#152138;}
.btn .arr{display:inline-block;transition:transform .2s var(--oz-ease);}
.btn:hover .arr{transform:translateX(3px);}
.btn--lg{padding:14px 22px;font-size:15px;}

/* ─── Sub-bar (breadcrumb on detail pages) ─────── */
.subbar{background:var(--oz-midnight);border-bottom:1px solid var(--oz-on-dark-line);}
.subbar-inner{display:flex;justify-content:space-between;align-items:center;height:48px;font-family:var(--oz-font-mono);font-size:11px;color:var(--oz-on-dark-3);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;}
.subbar-crumbs{display:flex;align-items:center;gap:10px;}
.subbar-crumbs a{color:var(--oz-on-dark-3);}
.subbar-crumbs a:hover{color:var(--oz-on-dark-1);}
.subbar-crumbs .sep{opacity:0.5;}
.subbar-crumbs .cur{color:var(--oz-cyan);}
.subbar-cat{color:var(--oz-on-dark-3);}
.subbar-cat .dot{display:inline-block;width:6px;height:6px;border-radius:9999px;background:var(--oz-cyan);margin-right:8px;vertical-align:middle;}

/* ─── Hero ───────────────────────────────────── */
.sol-hero{position:relative;padding:96px 0 96px;overflow:hidden;
  background:
    radial-gradient(900px 540px at 78% 8%, rgba(42,74,107,0.55), transparent 65%),
    radial-gradient(700px 460px at 12% 112%, rgba(42,74,107,0.40), transparent 70%),
    var(--oz-midnight);
}
.sol-hero::before{content:"";position:absolute;right:-180px;top:50%;transform:translateY(-50%);width:900px;height:900px;border-radius:9999px;border:1px solid var(--oz-on-dark-line);}
.sol-hero::after{content:"";position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:700px;height:700px;border-radius:9999px;border:1px solid var(--oz-on-dark-line);}
.sol-hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;position:relative;z-index:2;}
.sol-hero .pill{display:inline-flex;align-items:center;gap:8px;color:var(--oz-cyan);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;margin-bottom:20px;}
.sol-hero .pill .dot{width:6px;height:6px;border-radius:9999px;background:var(--oz-cyan);}
.sol-hero h1{font-family:var(--oz-font-display);font-size:64px;line-height:1.04;letter-spacing:-0.024em;font-weight:500;color:var(--oz-bone);margin:0 0 24px;text-wrap:balance;}
.sol-hero h1 em{font-style:italic;font-weight:500;color:var(--oz-cyan);}
.sol-hero p.sub{font-size:18px;line-height:1.55;color:var(--oz-on-dark-2);max-width:560px;margin:0 0 32px;}
.sol-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}

/* ─── Section scaffolding ─────────────────────── */
section.block{padding:112px 0;}
section.block.tight{padding:88px 0;}
.section-head{margin-bottom:56px;max-width:780px;}
.section-head .pill{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--oz-cyan);border:1px solid var(--oz-cyan-ring);border-radius:9999px;padding:5px 12px;font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:20px;}
.section-head .pill.on-light{color:var(--oz-steel);border-color:var(--oz-mist-deep);}
.section-head .pill.on-light .dot{background:var(--oz-steel);}
.section-head .pill .dot{width:5px;height:5px;border-radius:9999px;background:var(--oz-cyan);}
.section-head h2{font-family:var(--oz-font-display);font-size:48px;line-height:1.05;letter-spacing:-0.022em;font-weight:500;margin:0 0 18px;text-wrap:balance;}
.section-head h2 em{font-style:italic;font-weight:500;color:var(--oz-steel);}
.section-head.on-dark h2{color:var(--oz-bone);}
.section-head.on-dark h2 em{color:var(--oz-cyan);}
.section-head p{font-size:17px;line-height:1.6;max-width:640px;margin:0;}
.section-head.on-dark p{color:var(--oz-on-dark-2);}
.section-head:not(.on-dark) p{color:var(--oz-fg-2);}

.surface-bone{background:var(--oz-bone);}
.surface-mist{background:var(--oz-mist);}
.surface-midnight{background:var(--oz-midnight);color:var(--oz-on-dark-1);}

/* ─── Workflow card grid ──────────────────────── */
.wf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.wf-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.wf-card{background:#FBF9F3;border:1px solid var(--oz-bone-line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px;min-height:220px;transition:all .25s var(--oz-ease);}
.wf-card:hover{border-color:var(--oz-midnight-15);transform:translateY(-2px);}
.wf-card .num{font-family:var(--oz-font-mono);font-size:11px;color:var(--oz-cyan);letter-spacing:0.10em;font-weight:600;}
.wf-card h4{font-family:var(--oz-font-display);font-size:22px;font-weight:500;letter-spacing:-0.016em;color:var(--oz-midnight);margin:0;line-height:1.22;}
.wf-card p{font-size:14.5px;color:var(--oz-fg-2);line-height:1.55;margin:0;}

/* ─── Q&A list ────────────────────────────────── */
.qa-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.qa-row{display:grid;grid-template-columns:24px 1fr;gap:14px;background:#FBF9F3;border:1px solid var(--oz-bone-line);border-radius:14px;padding:18px 22px;align-items:start;}
.qa-row .q-icon{width:24px;height:24px;border-radius:9999px;background:var(--oz-cyan-soft);color:var(--oz-cyan);display:flex;align-items:center;justify-content:center;font-family:var(--oz-font-mono);font-size:11px;font-weight:600;flex-shrink:0;margin-top:1px;}
.qa-row p{font-size:15px;color:var(--oz-midnight);line-height:1.5;margin:0;font-weight:500;}

/* ─── Outputs grid (4 tiles) ──────────────────── */
.out-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.out-card{background:var(--oz-bone);border:1px solid var(--oz-mist-deep);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-height:340px;transition:border-color .25s var(--oz-ease);}
.out-card:hover{border-color:var(--oz-midnight-15);}
.out-mock{background:var(--oz-midnight);padding:24px;border-bottom:1px solid var(--oz-mist-deep);min-height:200px;display:flex;flex-direction:column;gap:10px;color:var(--oz-on-dark-1);}
.out-mock .mock-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--oz-font-mono);font-size:10.5px;letter-spacing:0.10em;color:var(--oz-on-dark-3);font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--oz-on-dark-line);}
.out-mock .mock-head .tag{color:var(--oz-cyan);}
.out-body{padding:22px 26px;}
.out-body h4{font-family:var(--oz-font-display);font-size:20px;font-weight:500;color:var(--oz-midnight);margin:0 0 8px;letter-spacing:-0.014em;}
.out-body p{font-size:14px;color:var(--oz-fg-2);line-height:1.55;margin:0;}

/* Mock primitives (used in hero visuals + output mocks) */
.mock-bar{height:8px;border-radius:4px;background:var(--oz-on-dark-line);position:relative;overflow:hidden;}
.mock-bar > span{display:block;height:100%;background:var(--oz-on-dark-line-2);}
.mock-bar > span.hot{background:var(--oz-cyan);}
.mock-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:rgba(244,240,230,0.025);border:1px solid var(--oz-on-dark-line);border-radius:10px;padding:9px 12px;}
.mock-row .lab{font-family:var(--oz-font-mono);font-size:10.5px;color:var(--oz-on-dark-3);}
.mock-row .name{font-size:12.5px;color:var(--oz-on-dark-1);font-weight:500;}
.mock-row .v{font-family:var(--oz-font-mono);font-size:11px;color:var(--oz-cyan);}
.mock-row.hot{border-color:var(--oz-cyan-ring);background:rgba(6,182,212,0.05);}
.mock-pill{display:inline-block;font-family:var(--oz-font-mono);font-size:9.5px;color:var(--oz-cyan);background:var(--oz-cyan-soft);padding:3px 8px;border-radius:9999px;letter-spacing:0.04em;}
.mock-pill.dim{color:var(--oz-on-dark-3);background:transparent;border:1px solid var(--oz-on-dark-line);}

/* ─── Models & Data strip ─────────────────────── */
.md-strip{background:var(--oz-midnight);color:var(--oz-on-dark-1);padding:72px 0;position:relative;overflow:hidden;border-top:1px solid var(--oz-on-dark-line);}
.md-strip::before{content:"";position:absolute;right:-280px;top:-280px;width:680px;height:680px;border-radius:9999px;border:1px solid var(--oz-on-dark-line);}
.md-strip .container{position:relative;z-index:2;}
.md-strip-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center;}
.md-strip h3{font-family:var(--oz-font-display);font-size:32px;font-weight:500;letter-spacing:-0.020em;color:var(--oz-bone);margin:0 0 12px;line-height:1.15;}
.md-strip p{font-size:15px;color:var(--oz-on-dark-2);margin:0 0 20px;line-height:1.6;}
.md-strip a.arrow-link{color:var(--oz-cyan);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;}
.md-strip a.arrow-link:hover{gap:10px;}
.md-tags{display:flex;flex-wrap:wrap;gap:8px;}
.md-tag{font-size:12.5px;color:var(--oz-on-dark-2);background:rgba(244,240,230,0.04);border:1px solid var(--oz-on-dark-line);padding:9px 14px;border-radius:9999px;font-weight:500;letter-spacing:-0.005em;}

/* ─── Closer ──────────────────────────────────── */
.closer{padding:128px 0;background:var(--oz-midnight);text-align:center;position:relative;overflow:hidden;}
.closer h2{font-family:var(--oz-font-display);font-size:72px;line-height:1.0;letter-spacing:-0.026em;font-weight:500;color:var(--oz-bone);margin:0 0 20px;text-wrap:balance;position:relative;z-index:2;}
.closer h2 em{font-style:italic;color:var(--oz-cyan);font-weight:500;}
.closer p{font-size:18px;color:var(--oz-on-dark-2);max-width:600px;margin:0 auto 32px;line-height:1.55;position:relative;z-index:2;}
.closer-ctas{display:flex;gap:12px;justify-content:center;position:relative;z-index:2;flex-wrap:wrap;}
.closer .bg-rings{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.closer .bg-rings .r{position:absolute;border-radius:9999px;border:1px solid var(--oz-on-dark-line);}
.closer .bg-rings .r1{width:520px;height:520px;left:-260px;top:-260px;}
.closer .bg-rings .r2{width:760px;height:760px;left:-380px;top:-380px;}
.closer .bg-rings .r3{width:1020px;height:1020px;left:-510px;top:-510px;border-color:var(--oz-cyan-ring);}

/* ─── Footer ──────────────────────────────────── */
.footer{padding:72px 0 36px;background:var(--oz-midnight);border-top:1px solid var(--oz-on-dark-line);}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px;}
.footer-brand img{height:28px;margin-bottom:20px;}
.footer-brand p{font-size:14px;color:var(--oz-on-dark-3);line-height:1.55;max-width:300px;margin:0;}
.footer h5{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--oz-on-dark-2);margin:0 0 18px;}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.footer ul a{font-size:13.5px;color:var(--oz-on-dark-3);}
.footer ul a:hover{color:var(--oz-on-dark-1);}
.footer-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--oz-on-dark-line);display:flex;justify-content:space-between;font-size:12px;color:var(--oz-on-dark-3);align-items:center;}
.footer-bottom .compliance{display:flex;gap:18px;align-items:center;font-family:var(--oz-font-mono);letter-spacing:0.08em;}

/* Responsive */
@media (max-width: 1180px){
  .sol-hero-grid{grid-template-columns:1fr;gap:48px;}
  .sol-hero h1{font-size:48px;}
  .wf-grid-3, .nav-panel-grid{grid-template-columns:repeat(2,1fr);}
  .qa-list, .out-grid{grid-template-columns:1fr;}
  .md-strip-grid{grid-template-columns:1fr;}
  .closer h2{font-size:48px;}
  .section-head h2{font-size:36px;}
}