:root { --skill-lime:#b9e43d; --skill-deep:#162224; --skill-paper:#f6f7f2; }
.skill-page,.case-page { background:var(--skill-paper); color:#1a2426; }
.skill-hero { position:relative; min-height:650px; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 18%,rgba(185,228,61,.32),transparent 23%),linear-gradient(135deg,#0e1719 0%,#1c3031 53%,#162224 100%); }
.skill-hero::before { content:""; position:absolute; inset:0; opacity:.36; 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; mask-image:linear-gradient(90deg,#000,transparent 80%); }
.skill-hero__inner { position:relative; z-index:1; width:min(1120px,calc(100% - 112px)); margin:auto; padding:145px 0 110px; }.skill-hero .eyebrow,.skill-hero__label { color:var(--skill-lime); }.skill-hero h1 { max-width:730px; margin:24px 0; font-family:Outfit,"Noto Sans JP",sans-serif; font-size:clamp(54px,8vw,112px); line-height:.99; letter-spacing:-.055em; }.skill-hero h1 em { color:var(--skill-lime); font-style:normal; }.skill-hero__lead { color:#dbe2dc; font-size:17px; line-height:2; }.skill-hero__actions { display:flex; flex-wrap:wrap; gap:26px; align-items:center; margin-top:38px; }.text-link--light { color:#fff; }.skill-hero__label { position:absolute; right:-2vw; bottom:-3vw; font-family:Outfit,sans-serif; font-size:clamp(68px,14vw,210px); font-weight:700; line-height:1; letter-spacing:-.08em; opacity:.05; white-space:nowrap; }
.skill-section { padding:clamp(80px,10vw,150px) max(28px,calc((100vw - 1120px)/2)); }.skill-intro { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:10vw; background:#fff; }.skill-section h2 { margin:10px 0 0; font-family:Outfit,"Noto Sans JP",sans-serif; font-size:clamp(38px,4vw,64px); line-height:1.15; letter-spacing:-.045em; }.skill-intro__copy { padding-top:14px; font-size:18px; line-height:2.1; }.skill-intro__copy p { margin:0 0 24px; }
.skill-flow { color:#fff; background:var(--skill-deep); }.skill-flow .eyebrow { color:var(--skill-lime); }.skill-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:62px 0 0; padding:0; list-style:none; }.skill-steps li { min-height:255px; padding:28px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.035); }.skill-steps span,.case-grid span { display:block; color:var(--skill-lime); font-family:Outfit,sans-serif; font-size:15px; font-weight:700; }.skill-steps h3 { margin:50px 0 14px; font-size:21px; }.skill-steps p { margin:0; color:#c9d1cf; line-height:1.9; }
.skill-section__heading > p:not(.eyebrow) { max-width:550px; margin:24px 0 0; color:#617073; line-height:1.9; }.skill-platforms { background:#eaf0dd; }.platform-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:52px; }.platform-card { padding:38px; background:#fff; box-shadow:0 18px 48px rgba(16,31,24,.08); }.platform-card__tag { margin:0; color:#5b7e0b; font-family:Outfit,sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; }.platform-card h3 { margin:14px 0; font-size:28px; }.platform-card > p:not(.platform-card__tag) { min-height:56px; line-height:1.8; }.platform-card code,.install-list code { display:block; margin:22px 0; padding:13px 15px; overflow:auto; color:#334445; background:#f1f4ed; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; }.button--dark { color:#fff; background:var(--skill-deep); }.button--dark:hover { color:#fff; background:#2d4748; }.download-note { margin:25px 0 0; color:#516263; font-size:14px; line-height:1.8; }
.skill-guide { display:flex; align-items:end; justify-content:space-between; gap:32px; color:#fff; background:linear-gradient(120deg,#2e4b4b,#173032); }.skill-guide .eyebrow { color:var(--skill-lime); }.skill-guide h2 { margin-top:8px; }.skill-guide > div > p:not(.eyebrow) { color:#dbe2dc; line-height:1.9; }.skill-disclaimer { padding:28px max(28px,calc((100vw - 1120px)/2)); color:#536061; background:#fff; font-size:12px; line-height:1.8; }.skill-disclaimer p { max-width:1120px; margin:0 auto; }
.case-hero { padding:clamp(130px,17vw,220px) max(28px,calc((100vw - 1120px)/2)) 100px; color:#fff; background:linear-gradient(140deg,#162224,#315154); }.case-hero .eyebrow { color:var(--skill-lime); }.case-hero h1 { margin:20px 0; font-family:Outfit,"Noto Sans JP",sans-serif; font-size:clamp(48px,7vw,90px); line-height:1.05; letter-spacing:-.055em; }.case-hero > p:last-child { margin:0; color:#d2ddda; font-size:17px; }.install-guide { background:#fff; }.install-guide__content { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.72fr); gap:48px; margin-top:56px; }.install-list { margin:0; padding:0; list-style:none; }.install-list li { display:grid; grid-template-columns:52px 1fr; gap:18px; padding:26px 0; border-top:1px solid #dce3df; }.install-list span { color:#6c960c; font-family:Outfit,sans-serif; font-weight:700; }.install-list h3 { margin:0 0 8px; font-size:20px; }.install-list p { margin:0; line-height:1.9; }.install-list code { max-width:590px; margin:16px 0 0; }.video-placeholder { min-height:310px; padding:34px; color:#fff; background:linear-gradient(145deg,#2d4748,#142527); }.video-placeholder .eyebrow { color:var(--skill-lime); }.video-placeholder h3 { margin:38px 0 14px; font-size:30px; line-height:1.35; }.video-placeholder p:last-child { color:#d3dcda; line-height:1.9; }
.use-cases { background:#ecf0e9; }.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }.case-grid article { min-height:365px; padding:30px; background:#fff; }.case-grid h3 { margin:36px 0 13px; font-size:21px; }.case-grid p { line-height:1.9; }.case-grid blockquote { margin:22px 0 0; padding:16px; color:#476063; border-left:3px solid var(--skill-lime); background:#f3f6ef; font-size:14px; line-height:1.8; }.case-cta { background:#162224; }
@media (max-width:760px) { .skill-hero { min-height:600px; }.skill-hero__inner { width:calc(100% - 56px); padding:112px 0 80px; }.skill-hero__lead { font-size:15px; }.skill-hero__lead br { display:none; }.skill-section { padding:80px 28px; }.skill-intro,.install-guide__content { grid-template-columns:1fr; gap:35px; }.skill-guide { display:block; }.skill-steps,.platform-grid,.case-grid { grid-template-columns:1fr; }.skill-steps { margin-top:38px; }.skill-steps li { min-height:0; }.skill-steps h3 { margin-top:30px; }.platform-card { padding:28px; }.platform-card > p:not(.platform-card__tag) { min-height:0; }.skill-guide .button { margin-top:24px; }.case-hero { padding:128px 28px 78px; }.case-grid { margin-top:38px; }.case-grid article { min-height:0; } }