html[data-project="ai-platform"] {
  --aip-blue:#173f91;
  --aip-accent:#2f74ff;
  --aip-ink:#14223b;
  --aip-muted:#61708a;
  --aip-line:rgba(47,116,255,.14);
  --aip-soft:#f5f8ff;
  --aip-panel:#fbfdff;
  --aip-shadow:0 18px 54px rgba(47,92,170,.09);
}
html[data-project="ai-platform"] main,
html[data-project="ai-platform"] .case-footer { margin-left:0; }
html[data-project="ai-platform"] .case-nav { position:sticky; top:0; z-index:30; padding:0 clamp(24px,4vw,56px); background:rgba(255,255,255,.93); backdrop-filter:blur(14px); }
html[data-project="ai-platform"] body { color:var(--aip-ink); background:#fff; }
html[data-project="ai-platform"] main { overflow:clip; }

.aip-hero,.aip-value,.aip-problem,.aip-framework,.aip-demo,.aip-close,.aip-pagination { width:min(1180px,calc(100vw - 80px)); margin-inline:auto; }
.aip-section-label { display:flex; align-items:center; gap:10px; color:var(--aip-accent); }
.aip-section-label > span { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--aip-line); border-radius:50%; font:11px var(--mono); }
.aip-section-label > img { width:18px; height:18px; filter:brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(3322%) hue-rotate(211deg) brightness(103%) contrast(103%); }
.aip-section-label small { font:600 11px/1.2 var(--mono); letter-spacing:.12em; }
.aip-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(47,116,255,.16); border-radius:50%; background:rgba(244,248,255,.9); }
.aip-icon img { width:20px; height:20px; display:block; background:transparent; filter:brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(3322%) hue-rotate(211deg) brightness(96%) contrast(104%); }
.aip-icon--hero { width:40px; height:40px; border-color:rgba(47,116,255,.13); background:rgba(247,250,255,.96); }
.aip-icon--hero img { width:21px; height:21px; }
.aip-value h2,.aip-problem h2,.aip-framework h2,.aip-demo h2,.aip-close h2 { margin:16px 0 0; color:var(--aip-ink); font:650 clamp(28px,3.1vw,42px)/1.25 var(--sans); letter-spacing:-.04em; }

.aip-hero { min-height:620px; padding:72px 0 60px; display:grid; grid-template-columns:minmax(390px,.9fr) minmax(540px,1.1fr); gap:64px; align-items:start; }
.aip-hero__copy h1 { margin:28px 0 0; color:var(--aip-blue); font:700 clamp(50px,5.2vw,72px)/1.03 var(--sans); letter-spacing:-.055em; }
.aip-hero__copy h1 span { display:block; }
.aip-hero__copy > p { max-width:540px; margin:28px 0 0; color:#42516d; font-size:15px; line-height:1.9; }
.aip-meta { margin:38px 0 0; display:flex; flex-wrap:wrap; gap:28px 42px; }
.aip-meta div { display:grid; gap:5px; }
.aip-meta dt { color:#91a0bb; font:10px var(--mono); letter-spacing:.14em; }
.aip-meta dd { margin:0; color:var(--aip-blue); font-size:12px; }
.aip-hero__visual { min-height:500px; position:relative; display:grid; grid-template-columns:minmax(250px,.84fr) minmax(270px,1.16fr); align-items:center; isolation:isolate; }
.aip-hero__visual::before { content:""; position:absolute; inset:4% -16% -8% -20%; z-index:-2; background:radial-gradient(circle at 58% 47%,rgba(211,226,255,.68),rgba(247,250,255,.22) 46%,transparent 70%); }
.aip-hero__benefits { z-index:2; display:grid; gap:10px; }
.aip-hero__benefits article { min-height:76px; padding:14px 16px; display:flex; align-items:center; gap:13px; border:1px solid rgba(47,116,255,.12); border-radius:11px; background:rgba(255,255,255,.88); box-shadow:0 10px 28px rgba(62,101,180,.07); backdrop-filter:blur(10px); }
.aip-hero__benefits .aip-icon img { width:21px; height:21px; padding:0; border:0; border-radius:0; background:transparent; }
.aip-hero__benefits div { display:grid; gap:4px; }
.aip-hero__benefits strong { color:var(--aip-blue); font-size:14px; }
.aip-hero__benefits span { color:var(--aip-muted); font-size:11px; }
.aip-hero__visual figure { width:125%; margin:0 0 0 -24%; position:relative; z-index:-1; }
.aip-hero__visual figure img { width:100%; height:auto; display:block; mix-blend-mode:multiply; mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 82%,transparent 100%); opacity:.9; }

.aip-value { padding:92px 0 106px; }
.aip-value__grid { margin-top:42px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.aip-value__grid article { padding:24px 4px; display:grid; grid-template-columns:38px 1fr; gap:16px; }
.aip-value__grid article > .aip-icon { margin-top:1px; }
.aip-value__grid h3 { margin:2px 0 0; color:var(--aip-blue); font-size:17px; }
.aip-value__grid p { margin:12px 0 0; color:var(--aip-muted); font-size:13px; line-height:1.85; }
.aip-architecture { margin-top:46px; padding:30px; border:1px solid var(--aip-line); border-radius:14px; background:linear-gradient(145deg,#fff,#f8faff); box-shadow:var(--aip-shadow); }
.aip-architecture h3 { margin:0 0 24px; color:var(--aip-blue); text-align:center; font-size:18px; }
.aip-architecture__rows { display:grid; gap:8px; }
.aip-architecture__rows > div { display:grid; grid-template-columns:150px repeat(5,1fr); gap:8px; }
.aip-architecture__rows strong,.aip-architecture__rows span { min-height:52px; padding:10px 12px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(47,116,255,.08); border-radius:8px; background:#fff; color:#385282; font-size:12px; text-align:center; }
.aip-architecture__rows strong { justify-content:flex-start; gap:9px; color:var(--aip-blue); font-size:13px; }
.aip-architecture__rows strong img { width:20px; height:20px; filter:brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(3322%) hue-rotate(211deg) brightness(103%) contrast(103%); }
.aip-architecture__rows span { background:#f6f8fd; }

.aip-problem { padding:92px 0 108px; }
.aip-problem__rows { margin-top:40px; display:grid; gap:12px; }
.aip-problem__rows article { min-height:76px; padding:14px 20px; display:grid; grid-template-columns:30px 32px minmax(190px,1fr) minmax(100px,.7fr) minmax(190px,1fr) 38px; gap:16px; align-items:center; border:1px solid rgba(47,116,255,.11); border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(57,92,160,.05); }
.aip-problem__rows article > span { color:var(--aip-accent); font:11px var(--mono); }
.aip-problem__rows article > img:not(.aip-problem__result),.aip-problem__result { width:28px; height:28px; padding:2px; box-sizing:border-box; object-fit:contain; background:transparent; filter:brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(3322%) hue-rotate(211deg) brightness(103%) contrast(103%); }
.aip-problem__rows p,.aip-problem__rows h3 { margin:0; }
.aip-problem__rows p { color:#30425e; font-size:14px; font-weight:600; }
.aip-problem__rows h3 { color:var(--aip-blue); font-size:15px; }
.aip-problem__rows i { height:1px; position:relative; background:repeating-linear-gradient(90deg,var(--aip-accent) 0 3px,transparent 3px 7px); }
.aip-problem__rows i::after { content:""; position:absolute; right:0; top:-3px; border-width:3px 0 3px 6px; border-style:solid; border-color:transparent transparent transparent var(--aip-accent); }

.aip-framework { padding:92px 0 110px; display:grid; grid-template-columns:minmax(280px,.48fr) minmax(0,1.52fr); gap:70px; align-items:center; }
.aip-framework__intro p { max-width:390px; margin:28px 0 0; color:var(--aip-muted); font-size:14px; line-height:1.95; }
.aip-role-map { padding:26px; border:1px solid var(--aip-line); border-radius:14px; background:linear-gradient(145deg,#fff,#f8faff); box-shadow:var(--aip-shadow); }
.aip-role-map > strong { display:block; margin-bottom:22px; color:var(--aip-blue); text-align:center; font-size:14px; }
.aip-role-map__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.aip-role-map article { padding:24px 16px 16px; display:grid; place-items:center; text-align:center; border:1px solid rgba(47,116,255,.1); border-radius:10px; background:rgba(255,255,255,.88); }
.aip-role-map img { width:28px; height:28px; margin-bottom:12px; filter:brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(3322%) hue-rotate(211deg) brightness(103%) contrast(103%); }
.aip-role-map h3 { margin:0; color:var(--aip-blue); font-size:15px; }
.aip-role-map p { min-height:40px; margin:12px 0 14px; color:var(--aip-muted); font-size:12px; line-height:1.65; }
.aip-role-map span { width:100%; padding-top:12px; border-top:1px solid var(--aip-line); color:#52698e; font-size:11px; }

.aip-demo { width:100%; padding:96px 0 130px; }
.aip-demo > header { width:min(1180px,calc(100vw - 80px)); margin-inline:auto; }
.aip-demo__grid { width:100%; margin-top:46px; padding:0 clamp(40px,5vw,72px) 16px; display:grid; grid-template-areas:"nav" "boards"; grid-template-columns:minmax(0,1fr); row-gap:0; align-items:start; border:0; border-radius:0; background:transparent; box-shadow:none; }
.aip-demo__grid > nav { grid-area:nav; position:sticky; top:78px; z-index:12; min-height:68px; padding:8px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; border-block:1px solid rgba(47,116,255,.12); background:rgba(255,255,255,.94); box-shadow:0 12px 30px rgba(45,81,150,.06); backdrop-filter:blur(16px) saturate(1.08); }
.aip-demo__grid > nav button { min-width:0; min-height:52px; padding:10px 14px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; color:#7e8ca5; background:transparent; text-align:center; cursor:pointer; transition:color 180ms ease,background 180ms ease,transform 180ms ease,box-shadow 180ms ease; }
.aip-demo__grid > nav button:hover { color:var(--aip-blue); background:rgba(233,240,255,.72); }
.aip-demo__grid > nav button strong { font-size:13px; font-weight:600; }
.aip-demo__grid > nav button > span { display:none; }
.aip-demo__grid > nav button.is-active { color:var(--aip-blue); background:#edf3ff; box-shadow:inset 0 -2px var(--aip-accent); }
.aip-demo__boards { grid-area:boards; justify-self:center; width:100%; max-width:1180px; min-width:0; margin-inline:auto; }
.aip-demo__board { width:100%; min-width:0; padding:clamp(48px,6vw,88px) 0; scroll-margin-top:166px; content-visibility:auto; contain-intrinsic-size:auto 1200px; }
.aip-demo__board picture { display:block; width:100%; min-width:0; margin-inline:auto; }
.aip-demo__board img { display:block; width:100%; max-width:100%; min-width:0; height:auto; margin-inline:auto; object-fit:contain; object-position:top center; border:0; border-radius:0; background:transparent; box-shadow:none; }
.aip-demo__board img + img { margin-top:clamp(48px,6vw,88px); }
.aip-sr-only { width:1px; height:1px; position:absolute; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.aip-close { padding:96px 0 118px; display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:64px; }
.aip-close header > p { max-width:480px; margin:24px 0 0; color:var(--aip-muted); font-size:14px; line-height:1.9; }
.aip-close__principles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.aip-close__principles article { min-height:190px; padding:24px; border:1px solid rgba(47,116,255,.1); border-radius:12px; background:var(--aip-panel); }
.aip-close__principles span { color:var(--aip-accent); font:11px var(--mono); }
.aip-close__principles h3 { margin:28px 0 0; color:var(--aip-blue); font-size:17px; }
.aip-close__principles p { margin:12px 0 0; color:var(--aip-muted); font-size:12px; line-height:1.75; }
.aip-close__value { grid-column:2; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.aip-close__value small { margin-right:8px; color:#91a0bb; font:10px var(--mono); letter-spacing:.12em; }
.aip-close__value span { padding:8px 12px; border-radius:99px; background:#edf3ff; color:#50678e; font-size:11px; }
.aip-pagination { margin-bottom:90px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--aip-line); }
.aip-pagination a { padding:28px 0; display:flex; flex-direction:column; gap:8px; color:var(--aip-blue); }
.aip-pagination a:last-child { text-align:right; }
.aip-pagination span { font:10px var(--mono); letter-spacing:.1em; }
.aip-pagination strong { font-size:20px; }

@media(max-width:980px){
  .aip-hero { grid-template-columns:1fr; gap:36px; }
  .aip-hero__visual { min-height:410px; }
  .aip-demo__grid { padding-inline:32px; }
  .aip-close { grid-template-columns:1fr; }
  .aip-close__value { grid-column:1; }
}

@media(max-width:820px){
  .aip-hero,.aip-value,.aip-problem,.aip-framework,.aip-demo,.aip-close,.aip-pagination { width:min(88vw,680px); }
  .aip-hero { min-height:auto; padding:72px 0 78px; }
  .aip-hero__copy h1 { font-size:clamp(44px,13vw,62px); }
  .aip-hero__visual { min-height:auto; grid-template-columns:1fr; }
  .aip-hero__benefits { grid-template-columns:repeat(3,1fr); }
  .aip-hero__benefits article { min-height:98px; padding:12px; align-items:flex-start; }
  .aip-hero__visual figure { width:112%; margin:-34px -6% 0; }
  .aip-value,.aip-problem,.aip-framework,.aip-demo,.aip-close { padding:76px 0 88px; }
  .aip-value__grid { grid-template-columns:1fr; gap:8px; }
  .aip-architecture { padding:18px; overflow-x:auto; }
  .aip-architecture__rows,.aip-architecture h3 { min-width:760px; }
  .aip-architecture__rows > div { grid-template-columns:130px repeat(5,1fr); }
  .aip-problem__rows article { grid-template-columns:24px 30px 1fr 34px; gap:12px; }
  .aip-problem__rows i { grid-column:3; width:48%; }
  .aip-problem__rows h3 { grid-column:3; }
  .aip-problem__result { grid-column:4; grid-row:2 / span 2; }
  .aip-framework { grid-template-columns:1fr; gap:46px; }
  .aip-demo { width:100%; }
  .aip-demo > header { width:min(88vw,680px); }
  .aip-demo__grid { width:min(88vw,680px); margin-inline:auto; padding:10px 0; grid-template-areas:"nav" "boards"; }
  .aip-demo__grid > nav { top:66px; z-index:5; display:flex; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; background:rgba(249,251,255,.95); backdrop-filter:blur(10px); }
  .aip-demo__grid > nav::-webkit-scrollbar { display:none; }
  .aip-demo__grid > nav button { min-width:118px; }
  .aip-demo__board { padding:48px 0; scroll-margin-top:150px; }
  .aip-close__principles { grid-template-columns:1fr; }
  .aip-close__principles article { min-height:0; }
  .aip-pagination { grid-template-columns:1fr; }
  .aip-pagination a:last-child { text-align:left; }
}

@media(max-width:560px){
  .aip-hero__benefits { grid-template-columns:1fr; }
  .aip-hero__benefits article { min-height:66px; }
  .aip-role-map__grid { grid-template-columns:1fr; }
  .aip-role-map article { grid-template-columns:34px 1fr; place-items:start; text-align:left; }
  .aip-role-map img { grid-row:1 / span 3; }
  .aip-role-map p { min-height:0; margin:8px 0; }
  .aip-role-map span { grid-column:2; }
}

@media(prefers-reduced-motion:reduce){
  .aip-demo__grid > nav button { transition:none; }
}