.commercial-page { width:100%; }
.commercial-hero { max-width:1480px; display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.72fr); align-items:center; gap:clamp(50px,7vw,118px); margin:0 auto; padding:clamp(58px,8vw,122px) clamp(20px,5vw,76px) clamp(66px,8vw,116px); }
.commercial-copy { max-width:760px; }
.commercial-copy h1 { max-width:800px; margin-bottom:26px; font-size:clamp(54px,7vw,104px); }
.commercial-copy h1 em { display:block; color:transparent; background:linear-gradient(95deg,var(--blue),var(--cyan) 55%,var(--green)); background-clip:text; -webkit-background-clip:text; font-style:normal; }
.commercial-intro { max-width:680px; margin:0; color:var(--muted); font-size:clamp(17px,1.6vw,22px); line-height:1.7; }
.model-summary { padding:30px; border:1px solid #dce5ef; border-radius:28px; background:linear-gradient(145deg,#f8fbff,#eef5fc); box-shadow:0 24px 70px rgba(60,64,67,.11); }
.summary-head { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.14em; }
.summary-head i { color:var(--subtle); font-style:normal; }
.model-summary ol { display:grid; gap:12px; margin:22px 0; padding:0; list-style:none; }
.model-summary li { display:flex; align-items:center; gap:16px; padding:16px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.model-summary li > span { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; color:#fff; background:var(--blue); font-size:10px; font-weight:800; }
.model-summary li:nth-child(2) > span { background:var(--cyan); }.model-summary li:nth-child(3) > span { background:var(--green); }
.model-summary li div { display:grid; gap:5px; }.model-summary li strong { font-size:15px; }.model-summary li small { color:var(--subtle); font-size:11px; }
.model-summary > p { display:flex; align-items:center; gap:9px; margin:0; color:var(--subtle); font-size:11px; font-weight:700; }.model-summary > p i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(52,168,83,.1); }
.principle-strip { max-width:1388px; display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr; align-items:center; gap:20px; margin:0 auto; padding:26px 30px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 12px 40px rgba(60,64,67,.06); }
.principle-strip > span { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.12em; }.principle-strip strong { font-size:15px; }.principle-strip i { color:var(--blue); font-style:normal; }.principle-strip p { grid-column:1 / -1; margin:0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.6; }
.commercial-section { max-width:1540px; margin:0 auto; padding:clamp(74px,8vw,128px) clamp(20px,5vw,76px); }
.commercial-heading { display:grid; grid-template-columns:1fr minmax(300px,.58fr); align-items:end; gap:48px; margin-bottom:44px; }
.commercial-heading h2 { max-width:820px; margin:18px 0 0; font-size:clamp(40px,5vw,72px); line-height:.98; letter-spacing:-.045em; }.commercial-heading > p { max-width:560px; margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.engagement-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.engagement-card { min-height:590px; display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:26px; background:var(--surface); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }.engagement-card:hover { transform:translateY(-5px); border-color:#bad1ef; box-shadow:0 18px 44px rgba(60,64,67,.1); }
.card-label { display:flex; align-items:center; justify-content:space-between; }.card-label span { color:var(--subtle); font-size:11px; font-weight:800; }.card-label b { padding:7px 11px; border-radius:999px; color:var(--blue); background:var(--surface-blue); font-size:10px; letter-spacing:.08em; }
.diagnosis-card .card-label b { color:#087b8f; background:#eaf8fb; }.project-card .card-label b { color:#237b3b; background:var(--surface-green); }
.card-icon { width:128px; height:128px; display:grid; place-items:center; align-content:center; gap:2px; margin:38px auto; border:1px solid #bed4f2; border-radius:50%; color:var(--blue); background:#fff; box-shadow:0 0 0 18px rgba(26,115,232,.045); }.card-icon strong { font-size:40px; line-height:1; }.card-icon small { font-size:9px; font-weight:800; letter-spacing:.16em; }
.scan-icon { position:relative; border-radius:26px; color:var(--cyan); border-color:#b5dfe6; box-shadow:0 0 0 18px rgba(22,167,191,.045); }.scan-icon i { position:absolute; width:24px; height:24px; border-color:var(--cyan); border-style:solid; }.scan-icon i:first-child { top:18px; left:18px; border-width:2px 0 0 2px; }.scan-icon i:nth-child(2) { right:18px; bottom:18px; border-width:0 2px 2px 0; }.scan-icon i:nth-child(3) { width:70px; height:2px; background:var(--cyan); border:0; opacity:.45; }
.scan-icon strong { font-size:18px; }.contract-icon { position:relative; border-radius:24px; color:var(--green); border-color:#b9ddc6; box-shadow:0 0 0 18px rgba(52,168,83,.045); }.contract-icon i { width:62px; height:5px; border-radius:5px; background:#d9e9df; }.contract-icon i:nth-child(2) { width:44px; }.contract-icon strong { position:absolute; right:17px; bottom:16px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green); font-size:15px; }
.engagement-card h3 { margin:0 0 12px; font-size:clamp(27px,2.5vw,36px); letter-spacing:-.035em; }.engagement-card > p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }.engagement-card ul { display:grid; gap:10px; margin:24px 0; padding:20px 0 0; border-top:1px solid var(--line); list-style:none; }.engagement-card li { position:relative; padding-left:18px; color:var(--text); font-size:13px; }.engagement-card li::before { content:""; position:absolute; top:6px; left:0; width:6px; height:6px; border-radius:50%; background:var(--blue); }.diagnosis-card li::before { background:var(--cyan); }.project-card li::before { background:var(--green); }.deliverable { margin-top:auto; padding-top:24px; color:var(--subtle); font-size:10px; font-weight:800; letter-spacing:.05em; }
.participation { padding-top:36px; }.participation-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.participation-grid article { min-height:420px; display:flex; flex-direction:column; padding:clamp(30px,4vw,52px); overflow:hidden; border:1px solid var(--line); border-radius:28px; }.expert-panel { color:#fff; background:linear-gradient(145deg,#1a73e8,#3e8bf2); box-shadow:0 22px 52px rgba(26,115,232,.18); }.user-panel { background:linear-gradient(145deg,#fbfcfe,#eef3f8); }
.panel-kicker { display:flex; justify-content:space-between; gap:18px; font-size:10px; font-weight:800; letter-spacing:.15em; }.panel-kicker i { font-style:normal; letter-spacing:0; }.expert-panel .panel-kicker { color:#dceaff; }.user-panel .panel-kicker { color:var(--blue); }
.participation-grid h3 { max-width:560px; margin:72px 0 14px; font-size:clamp(30px,3.4vw,48px); letter-spacing:-.04em; }.participation-grid p { max-width:620px; margin:0; font-size:15px; line-height:1.7; }.expert-panel p { color:#e9f2ff; }.user-panel p { color:var(--muted); }
.benefit-row,.rule-list { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:30px; }.benefit-row span,.rule-list span { display:flex; align-items:center; gap:9px; padding:13px; border-radius:13px; font-size:12px; font-weight:750; }.benefit-row span { background:rgba(255,255,255,.12); }.benefit-row b { color:#cde2ff; font-size:9px; }.rule-list span { border:1px solid var(--line); background:#fff; }.rule-list i { width:7px; height:7px; border-radius:50%; background:var(--green); }
.participation-grid article > small { margin-top:auto; padding-top:28px; font-size:10px; line-height:1.5; }.expert-panel > small { color:#dceaff; }.user-panel > small { color:var(--subtle); }
.boundaries { padding-top:36px; }.boundary-card { display:grid; grid-template-columns:1fr minmax(430px,.85fr); gap:70px; padding:clamp(36px,5vw,66px); border:1px solid var(--line); border-radius:30px; background:#fff; box-shadow:0 18px 54px rgba(60,64,67,.07); }.boundary-card h2 { max-width:680px; margin:18px 0 0; font-size:clamp(36px,4.4vw,62px); line-height:1.02; letter-spacing:-.045em; }.boundary-card dl { margin:0; }.boundary-card dl div { display:flex; justify-content:space-between; gap:30px; padding:17px 0; border-bottom:1px solid var(--line); font-size:13px; }.boundary-card dl div:first-child { padding-top:0; }.boundary-card dl div:last-child { padding-bottom:0; border:0; }.boundary-card dt { color:var(--muted); }.boundary-card dd { margin:0; font-weight:750; text-align:right; }
.commercial-cta { max-width:1388px; min-height:390px; display:flex; align-items:end; justify-content:space-between; gap:50px; margin:0 auto clamp(50px,6vw,90px); padding:clamp(38px,6vw,78px); border-radius:32px; color:#fff; background:linear-gradient(135deg,#1a73e8,#4285f4); box-shadow:0 24px 60px rgba(26,115,232,.2); }.commercial-cta .section-index { margin-bottom:24px; color:#d9e9ff; }.commercial-cta h2 { max-width:790px; margin:0 0 18px; font-size:clamp(43px,6vw,84px); line-height:.95; letter-spacing:-.05em; }.commercial-cta p { max-width:650px; margin:0; color:#e7f1ff; font-size:14px; line-height:1.7; }

@media (prefers-reduced-motion:no-preference) { .commercial-copy > * { animation:hero-rise .72s cubic-bezier(.22,.61,.36,1) both; }.commercial-copy > *:nth-child(2) { animation-delay:.07s; }.commercial-copy > *:nth-child(3) { animation-delay:.14s; }.commercial-copy > *:nth-child(4) { animation-delay:.21s; }.model-summary { animation:hero-visual .9s .18s cubic-bezier(.22,.61,.36,1) both; }.commercial-cta { background-size:240% 240%; animation:cta-drift 14s ease-in-out infinite; } }
@media (max-width:1080px) { .commercial-hero { grid-template-columns:1fr; }.model-summary { max-width:720px; }.commercial-heading { grid-template-columns:1fr; }.engagement-grid { grid-template-columns:1fr; }.engagement-card { min-height:0; }.card-icon { margin-block:28px; }.boundary-card { grid-template-columns:1fr; gap:42px; } }
@media (max-width:760px) { .commercial-hero { padding:36px max(18px,env(safe-area-inset-right)) 60px max(18px,env(safe-area-inset-left)); }.commercial-copy h1 { font-size:clamp(48px,14vw,72px); }.commercial-copy .eyebrow { line-height:1.5; }.model-summary { padding:20px; border-radius:22px; }.principle-strip { grid-template-columns:1fr auto 1fr auto 1fr; margin-inline:14px; padding:22px; }.principle-strip > span { grid-column:1 / -1; }.principle-strip strong { font-size:12px; }.principle-strip p { grid-column:1 / -1; }.commercial-section { padding:68px max(18px,env(safe-area-inset-right)) 68px max(18px,env(safe-area-inset-left)); }.commercial-heading { gap:24px; margin-bottom:30px; }.engagement-card { padding:24px; border-radius:22px; }.participation { padding-top:18px; }.participation-grid { grid-template-columns:1fr; }.participation-grid article { min-height:390px; padding:30px 24px; border-radius:24px; }.participation-grid h3 { margin-top:56px; }.benefit-row,.rule-list { grid-template-columns:1fr; }.boundary-card { padding:30px 24px; border-radius:24px; }.boundary-card dl div { align-items:flex-start; }.commercial-cta { min-height:0; align-items:flex-start; flex-direction:column; margin-inline:max(14px,env(safe-area-inset-left)); padding:36px 24px; }.commercial-cta .cta-link { width:100%; justify-content:space-between; padding-inline:0; } }
@media (max-width:520px) { .nav-links a[href="../company/"] { display:none; }.principle-strip { grid-template-columns:1fr; gap:12px; }.principle-strip i { display:none; }.principle-strip strong { padding:11px 13px; border-radius:11px; background:var(--surface-blue); font-size:13px; }.boundary-card dl div { flex-direction:column; gap:6px; }.boundary-card dd { text-align:left; } }