/* ONEBOX Network UI v1 — shared visual product language across the public platform */
:root{
  --obx-navy:#061f3f;
  --obx-navy-2:#0a315f;
  --obx-ink:#10221b;
  --obx-muted:#667970;
  --obx-green:#0ea56f;
  --obx-green-2:#5bd5a4;
  --obx-mint:#eaf8f1;
  --obx-bg:#f4f7f6;
  --obx-surface:#ffffff;
  --obx-line:#dce7e1;
  --obx-soft:#eef5f2;
  --obx-shadow:0 18px 54px rgba(6,31,63,.08);
  --obx-shadow-lg:0 32px 90px rgba(6,31,63,.13);
  --obx-radius:24px;
}
html{background:var(--obx-bg)}
body.obx-network-page{background:linear-gradient(180deg,#fbfdfc 0,#f4f7f6 36%,#f7f9f8 100%)!important;color:var(--obx-ink)}
body.obx-network-page *{box-sizing:border-box}
body.obx-network-page .wrap{max-width:1180px!important}

/* shared navigation */
body.obx-network-page .nav{position:sticky!important;top:10px!important;z-index:70!important;min-height:64px!important;height:auto!important;margin:10px auto 0!important;padding:8px 10px!important;border:1px solid rgba(220,231,225,.94)!important;border-radius:20px!important;background:rgba(255,255,255,.91)!important;backdrop-filter:blur(18px) saturate(1.2)!important;box-shadow:0 10px 32px rgba(6,31,63,.065)!important}
body.obx-network-page .brand{gap:10px!important;font-weight:950!important;letter-spacing:.07em!important;color:var(--obx-navy)!important}
body.obx-network-page .brand img{width:40px!important;height:40px!important;max-height:none!important;border-radius:12px!important;background:#f1f7f4!important;box-shadow:inset 0 0 0 1px #dce8e2!important;padding:3px!important}
body.obx-network-page .links,body.obx-network-page .navlinks{display:flex!important;gap:4px!important;align-items:center!important;padding:4px!important;border:1px solid #e5ede9!important;border-radius:15px!important;background:#f2f6f4!important;flex-wrap:nowrap!important}
body.obx-network-page .links a,body.obx-network-page .navlinks a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;padding:8px 11px!important;border-radius:11px!important;color:#5f7168!important;font-size:13px!important;font-weight:800!important;text-decoration:none!important;white-space:nowrap!important;transition:.16s ease!important}
body.obx-network-page .links a:hover,body.obx-network-page .navlinks a:hover{background:#fff!important;color:var(--obx-navy)!important;box-shadow:0 3px 12px rgba(6,31,63,.05)!important}
body.obx-network-page .links a[aria-current="page"],body.obx-network-page .navlinks a[aria-current="page"]{background:#fff!important;color:var(--obx-navy)!important;box-shadow:0 3px 12px rgba(6,31,63,.06)!important}
body.obx-network-page .links .btn,body.obx-network-page .navlinks .btn,body.obx-network-page #accountBtn{background:var(--obx-navy)!important;color:#fff!important;border-color:var(--obx-navy)!important;box-shadow:0 7px 18px rgba(6,31,63,.15)!important}

/* common typography and surfaces */
body.obx-network-page .eyebrow{display:inline-flex!important;align-items:center!important;gap:7px!important;color:#08754f!important;font-size:10px!important;font-weight:950!important;letter-spacing:.14em!important;text-transform:uppercase!important}
body.obx-network-page .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--obx-green);box-shadow:0 0 0 4px rgba(14,165,111,.09)}
body.obx-network-page h1,body.obx-network-page h2,body.obx-network-page h3{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:var(--obx-navy)!important}
body.obx-network-page h1{letter-spacing:-.055em!important}
body.obx-network-page h2{letter-spacing:-.04em!important}
body.obx-network-page .lead{color:var(--obx-muted)!important}
body.obx-network-page .section{padding-top:72px!important;padding-bottom:72px!important}
body.obx-network-page .soft{background:transparent!important}
body.obx-network-page .soft>.wrap,body.obx-network-page section.soft .wrap{padding-top:34px!important;padding-bottom:34px!important;border:1px solid var(--obx-line)!important;border-radius:28px!important;background:linear-gradient(145deg,#f9fcfa,#edf5f1)!important;box-shadow:0 12px 34px rgba(6,31,63,.035)!important}
body.obx-network-page .card,body.obx-network-page .step,body.obx-network-page .requirement,body.obx-network-page .form-card,body.obx-network-page .panel,body.obx-network-page .notice,body.obx-network-page .city{border-color:var(--obx-line)!important;border-radius:20px!important;background:#fff!important;box-shadow:0 8px 26px rgba(6,31,63,.045)!important}
body.obx-network-page .card,body.obx-network-page .step,body.obx-network-page .requirement{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
body.obx-network-page .card:hover,body.obx-network-page .step:hover,body.obx-network-page .requirement:hover{transform:translateY(-3px)!important;border-color:#bedaca!important;box-shadow:0 17px 40px rgba(6,31,63,.08)!important}
body.obx-network-page .btn,body.obx-network-page button{min-height:44px!important;border-radius:13px!important;font-weight:850!important;transition:transform .14s ease,box-shadow .14s ease,background .14s ease!important}
body.obx-network-page .btn:active,body.obx-network-page button:active{transform:scale(.985)!important}
body.obx-network-page .primary{background:linear-gradient(135deg,var(--obx-navy),#0b3769)!important;border-color:var(--obx-navy)!important;box-shadow:0 9px 22px rgba(6,31,63,.16)!important}

/* immersive hero layout */
body.obx-network-page .hero,body.obx-network-page .obx-capture-hero,body.obx-network-page .about-hero{position:relative!important;overflow:hidden!important;margin:16px auto 0!important;max-width:1180px!important;border:1px solid var(--obx-line)!important;border-radius:32px!important;background:radial-gradient(circle at 85% 16%,rgba(14,165,111,.20),transparent 24%),radial-gradient(circle at 96% 80%,rgba(42,103,190,.08),transparent 28%),linear-gradient(145deg,#ffffff 0%,#f2f9f5 100%)!important;box-shadow:var(--obx-shadow)!important;padding:0!important}
body.obx-network-page .hero>.wrap,body.obx-network-page .obx-capture-hero>.wrap,body.obx-network-page .about-hero>.wrap{max-width:none!important;padding:clamp(52px,6vw,78px) clamp(28px,5vw,62px)!important;display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)!important;gap:44px!important;align-items:center!important}
body.obx-network-page .hero>.wrap>*,body.obx-network-page .obx-capture-hero>.wrap>*,body.obx-network-page .about-hero>.wrap>*{grid-column:1!important}
body.obx-network-page .hero h1,body.obx-network-page .obx-capture-hero h1,body.obx-network-page .about-hero h1{font-size:clamp(48px,6.8vw,78px)!important;line-height:.96!important;max-width:800px!important;margin:14px 0 20px!important}
body.obx-network-page .hero:after,body.obx-network-page .obx-capture-hero:after,body.obx-network-page .about-hero:after{content:""!important;position:absolute!important;inset:0!important;background-image:linear-gradient(rgba(6,31,63,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(6,31,63,.025) 1px,transparent 1px)!important;background-size:42px 42px!important;mask-image:linear-gradient(90deg,transparent 45%,#000 100%)!important;-webkit-mask-image:linear-gradient(90deg,transparent 45%,#000 100%)!important;pointer-events:none!important}

/* dynamic network preview */
.obx-network-preview{grid-column:2!important;grid-row:1 / span 12!important;align-self:stretch!important;min-height:360px!important;display:flex!important;align-items:center!important;position:relative!important;z-index:2!important}
.obx-network-preview-card{width:100%;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.35);border-radius:28px;padding:20px;background:linear-gradient(155deg,rgba(6,31,63,.98),rgba(9,54,69,.96));box-shadow:0 30px 70px rgba(6,31,63,.22);color:#fff}
.obx-network-preview-card:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-90px;top:-110px;background:radial-gradient(circle,rgba(91,213,164,.24),transparent 70%)}
.obx-network-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;position:relative;z-index:2}
.obx-network-preview-head small{font-size:10px;letter-spacing:.12em;font-weight:900;color:#9be7c7}.obx-network-preview-head span{display:inline-flex;gap:6px;align-items:center;font-size:10px;color:#d7e5de}.obx-network-preview-head span:before{content:"";width:7px;height:7px;border-radius:50%;background:#61d9a9;box-shadow:0 0 0 5px rgba(97,217,169,.13)}
.obx-network-preview-main{position:relative;z-index:2;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.055);padding:18px}
.obx-network-preview-main h4{color:#fff!important;font-size:22px!important;letter-spacing:-.025em!important;margin:0 0 6px!important}.obx-network-preview-main p{margin:0;color:#c7d8d1;font-size:12px;line-height:1.5}
.obx-preview-flow{display:grid;gap:9px;margin-top:16px}.obx-preview-step{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.055)}.obx-preview-step i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(91,213,164,.16);color:#96e5c4;font-style:normal;font-size:11px;font-weight:900}.obx-preview-step b{display:block;color:#fff;font-size:12px}.obx-preview-step small{display:block;color:#9fb8ae;font-size:10px}.obx-preview-step em{font-style:normal;font-size:9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px 7px;color:#b8cec4}.obx-preview-step.active{background:rgba(91,213,164,.10);border-color:rgba(91,213,164,.20)}.obx-preview-step.active em{background:#5bd5a4;color:#082a24;border-color:#5bd5a4;font-weight:900}
.obx-preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.obx-preview-stat{padding:11px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.055)}.obx-preview-stat small{display:block;color:#91aba0;font-size:9px}.obx-preview-stat b{display:block;color:#fff;font-size:14px;margin-top:3px}.obx-preview-foot{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:#9fb8ae;font-size:9px;position:relative;z-index:2}

/* home capture */
body.obx-home-network .obx-capture-form{max-width:690px!important;background:rgba(255,255,255,.95)!important;box-shadow:0 20px 50px rgba(6,31,63,.10)!important;border-color:#d2e2da!important}
body.obx-home-network .obx-momentum{padding-top:54px!important}
body.obx-home-network .obx-momentum-shell{border-radius:28px!important;box-shadow:var(--obx-shadow)!important}
body.obx-home-network .obx-curiosity-card{background:radial-gradient(circle at 85% 15%,rgba(91,213,164,.22),transparent 26%),linear-gradient(145deg,#071f3d,#0b3b43)!important;box-shadow:var(--obx-shadow-lg)!important}

/* customer discovery */
body.obx-customer-network .steps{gap:12px!important}.obx-customer-network .step{min-height:190px!important}.obx-customer-network .num{border-radius:10px!important;background:var(--obx-mint)!important}
body.obx-customer-network #request>.wrap{padding:30px!important;border:1px solid var(--obx-line)!important;border-radius:28px!important;background:#fff!important;box-shadow:var(--obx-shadow)!important}
body.obx-customer-network .form-card{box-shadow:none!important;background:#fbfdfc!important}
body.obx-customer-network .faq details{border:1px solid var(--obx-line)!important;border-radius:15px!important;background:#fff!important;padding:15px 17px!important;margin:9px 0!important}

/* professional identity / opportunities */
body.obx-provider-network .grid{gap:12px!important}.obx-provider-network .card{min-height:190px!important}.obx-provider-network .card h3:before{display:block;width:38px;height:38px;border-radius:12px;background:var(--obx-mint);margin-bottom:14px;display:grid;place-items:center;color:#08754f;font-size:17px}.obx-provider-network .card:nth-child(1) h3:before{content:"↗"}.obx-provider-network .card:nth-child(2) h3:before{content:"★"}.obx-provider-network .card:nth-child(3) h3:before{content:"◎"}
body.obx-provider-network #apply>.wrap{padding:30px!important;border:1px solid var(--obx-line)!important;border-radius:28px!important;background:#fff!important;box-shadow:var(--obx-shadow)!important}
body.obx-provider-network .requirements{gap:12px!important}.obx-provider-network .requirement small{display:inline-flex!important;padding:5px 8px!important;border-radius:999px!important;background:var(--obx-mint)!important}

/* learning */
body.obx-learning-network .learning-shell{padding-top:34px!important;max-width:1180px!important;margin:auto!important}.obx-learning-network #skillsRoot>.panel{border-radius:28px!important;box-shadow:var(--obx-shadow)!important;padding:clamp(26px,5vw,44px)!important}.obx-learning-network .skills-form{padding:20px!important;border-radius:20px!important;background:#f7faf8!important;border:1px solid var(--obx-line)!important}.obx-learning-network .interests article{background:#fff!important}.obx-learning-network .skills-record,.obx-learning-network .skills-catalog{padding:24px!important;border:1px solid var(--obx-line)!important;border-radius:20px!important;background:#fff!important;margin-top:18px!important}.obx-learning-network .skills-qualifications{background:#f3f8f5!important}
.obx-learning-network .obx-learning-intro{margin:14px auto 28px!important;max-width:1180px;padding:34px;border-radius:28px;background:linear-gradient(145deg,#061f3f,#0a3948);color:#fff;box-shadow:var(--obx-shadow-lg);position:relative;overflow:hidden}.obx-learning-network .obx-learning-intro:after{content:"";position:absolute;right:-65px;top:-70px;width:220px;height:220px;border-radius:50%;background:rgba(91,213,164,.14)}.obx-learning-network .obx-learning-intro h1{color:#fff!important;font-size:clamp(36px,5vw,58px)!important;max-width:760px;margin:8px 0 10px}.obx-learning-network .obx-learning-intro p{max-width:700px;color:#cbdcd5;margin:0}.obx-learning-path{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:24px;max-width:760px;position:relative;z-index:2}.obx-learning-path div{padding:13px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.obx-learning-path small{display:block;color:#8ce0be;font-size:9px;font-weight:900;letter-spacing:.1em}.obx-learning-path b{display:block;color:#fff;margin-top:4px;font-size:13px}

/* business operational view */
body.obx-business-network .grid{gap:12px!important}.obx-business-network .fit{gap:10px!important}.obx-business-network .fit div{border-left:0!important;border:1px solid var(--obx-line)!important;border-radius:18px!important;box-shadow:0 7px 22px rgba(6,31,63,.035)!important}.obx-business-network .notice{background:#f7faf8!important}

/* about */
body.obx-about-network .story-shell{box-shadow:var(--obx-shadow)!important;border-radius:28px!important}.obx-about-network .not-section{margin:40px auto!important;max-width:1180px!important;border-radius:30px!important;background:radial-gradient(circle at 88% 15%,rgba(91,213,164,.14),transparent 28%),linear-gradient(145deg,#061f3f,#0a3948)!important;box-shadow:var(--obx-shadow-lg)!important}.obx-about-network .not-card{border-radius:18px!important}.obx-about-network .principle-card{box-shadow:var(--obx-shadow)!important}

/* signed-in workspace: more like a living network */
body.obx-home-network.ob-web-workspace .account-area{background:var(--obx-bg)!important}
body.obx-home-network.ob-web-workspace #accountShell{max-width:1500px!important}
body.obx-home-network.ob-web-workspace .ob-role-sidebar-card{border:1px solid var(--obx-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 32px rgba(6,31,63,.06)!important}
body.obx-home-network.ob-web-workspace .ob-role-nav button{border-radius:11px!important}
body.obx-home-network.ob-web-workspace .ob-role-nav button.active{background:linear-gradient(135deg,var(--obx-navy),#0b3a6c)!important;color:#fff!important;box-shadow:0 7px 18px rgba(6,31,63,.14)!important}
body.obx-home-network.ob-web-workspace .ob-role-hero{border-radius:20px!important;background:radial-gradient(circle at 88% 10%,rgba(91,213,164,.16),transparent 28%),linear-gradient(135deg,var(--obx-navy),#0a3c57)!important;box-shadow:0 16px 42px rgba(6,31,63,.16)!important}
body.obx-home-network.ob-web-workspace .ob-role-main .panel,body.obx-home-network.ob-web-workspace .ob-role-main .card,body.obx-home-network.ob-web-workspace .ob-role-main .form-card,body.obx-home-network.ob-web-workspace .ob-role-main .notice{border-radius:17px!important;border-color:var(--obx-line)!important;box-shadow:0 5px 18px rgba(6,31,63,.035)!important}

/* footer */
body.obx-network-page footer{max-width:1180px!important;margin:36px auto 0!important;padding:26px 22px 44px!important;color:#718079!important;font-size:12px!important}
body.obx-network-page footer .footerrow,body.obx-network-page footer .footerlinks{border-top:1px solid var(--obx-line)!important;padding-top:22px!important}

/* responsive */
@media(max-width:980px){
  body.obx-network-page .nav{top:6px!important;margin:6px 8px 0!important;border-radius:17px!important}
  body.obx-network-page .hero,body.obx-network-page .obx-capture-hero,body.obx-network-page .about-hero{margin:10px 8px 0!important;border-radius:25px!important}
  body.obx-network-page .hero>.wrap,body.obx-network-page .obx-capture-hero>.wrap,body.obx-network-page .about-hero>.wrap{grid-template-columns:1fr!important;gap:28px!important;padding:44px 24px!important}
  .obx-network-preview{grid-column:1!important;grid-row:auto!important;min-height:0!important}
  .obx-network-preview-card{max-width:680px}
  body.obx-network-page .links a:not(.btn),body.obx-network-page .navlinks a:not(.btn){display:none!important}
  body.obx-network-page .links,body.obx-network-page .navlinks{border:0!important;background:transparent!important;padding:0!important}
  .obx-learning-path{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  body.obx-network-page .hero h1,body.obx-network-page .obx-capture-hero h1,body.obx-network-page .about-hero h1{font-size:42px!important}
  .obx-network-preview-card{border-radius:22px;padding:15px}.obx-preview-stats{grid-template-columns:1fr}.obx-preview-step{grid-template-columns:28px 1fr}.obx-preview-step em{grid-column:2}
  body.obx-network-page .section{padding-top:52px!important;padding-bottom:52px!important}
  body.obx-customer-network #request>.wrap,body.obx-provider-network #apply>.wrap{padding:20px!important;border-radius:22px!important}
}
@media(prefers-reduced-motion:reduce){body.obx-network-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}