.hero{--flow-space:calc(170px + 32vw)}
.hero-content{padding-top:var(--flow-space);width:90%;display:grid;grid-template-columns:1.1fr 1fr;column-gap:6%;align-items:start}
.hero-content>.eyebrow{grid-column:1/-1;grid-row:1}
.hero-content>.education-headline{grid-column:1;grid-row:2/5;margin-top:24px;margin-bottom:0}
.hero-content>.hero-ko{grid-column:2;grid-row:2;margin-top:24px}
.hero-content>.hero-desc{grid-column:2;grid-row:3}
.hero-content>.hero-actions{grid-column:2;grid-row:4}
.hero-shade{background:linear-gradient(180deg,#080d1b 0px,#080d1b00 100px,#080d1b00 calc(var(--flow-space) - 170px),#080d1b30 calc(var(--flow-space) - 100px),#080d1b85 calc(var(--flow-space) - 45px),#080d1be8 calc(var(--flow-space) + 10px),#080d1b calc(var(--flow-space) + 90px),#080d1b 100%)}
.hero-static{left:1%;right:1%;top:calc(96px + 5vw);font-size:34vw;text-align:center}
.hero-desc{font-size:20px;line-height:1.7}
.note-art{position:relative;padding:0;background:#080d1b;min-height:470px;aspect-ratio:4/3;border-radius:18px;isolation:isolate;overflow:hidden}
.note-art-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.note-art-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080d1b99,transparent 70%);z-index:1;pointer-events:none}
.note-art-kicker{position:absolute;top:30px;left:30px;right:25px;z-index:2;font:500 14px/1.5 var(--font-display);letter-spacing:.04em;color:#dbe8fc}
.note-art-title{position:absolute;left:30px;top:34%;z-index:2;font:600 clamp(68px,6.3vw,100px)/.98 var(--font-display);letter-spacing:-.06em;color:#eafffb;text-shadow:0 0 20px #080d1b}
.note-art-stamp{position:absolute;right:25px;bottom:22px;z-index:2;font:500 14px/1.5 var(--font-display);letter-spacing:.04em;color:#dbe8fc}
.platform-loop{display:grid;grid-template-columns:.85fr auto 1.35fr auto 1.35fr auto .85fr;gap:14px;align-items:stretch;margin:30px 0 45px;padding:30px;border:1px solid #41577a;border-radius:20px;background:radial-gradient(ellipse at 35% 0%,#77efdb1b,transparent 45%),radial-gradient(ellipse at 70% 100%,#a989ff25,transparent 48%),#10192d;box-shadow:0 16px 38px #13203b15;color:#e9f2ff}
.platform-loop>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px 12px;min-width:0;min-height:150px;font:700 20px/1.5 var(--font-body);color:#ccdaee;background:#ffffff05;border:1px solid #ffffff20;border-radius:12px}
.platform-loop>i{align-self:center;font-size:26px;color:#abbddb;line-height:1}
.platform-loop>span.flow-note-step{background:linear-gradient(145deg,#77efdb20,#15263b);border:1px solid #77efdb99;color:#b9fff0}
.platform-loop>span.flow-studio-step{background:linear-gradient(145deg,#a989ff2b,#25223f);border:1px solid #a989ff99;color:#e3d6ff}
.platform-loop b{font:700 clamp(30px,2.6vw,42px)/1.15 var(--font-display);letter-spacing:-.055em;white-space:nowrap}
.platform-loop small{font:700 26px/1.5 var(--font-heading);letter-spacing:-.04em}
@media(max-width:1100px){.note-art{min-height:420px}.note-art-title{font-size:76px}.platform-loop{grid-template-columns:1fr;gap:12px;padding:22px}.platform-loop>i{justify-self:center;transform:rotate(90deg)}.platform-loop>span{min-height:80px}.platform-loop>span.flow-note-step,.platform-loop>span.flow-studio-step{min-height:142px}}
@media(max-width:800px){
 .hero{--flow-space:320px}.hero-content{padding-top:var(--flow-space);width:88%;display:block}
 .hero-content>.education-headline{margin:22px 0 20px}.hero-content>.hero-ko{margin-top:0}
 .hero-shade{background:linear-gradient(180deg,#080d1b 0px,#080d1b00 95px,#080d1b00 230px,#080d1b30 265px,#080d1b85 295px,#080d1be8 330px,#080d1b 400px,#080d1b 100%)}
 .hero-static{left:5%;right:5%;top:145px;font-size:29vw}
 .hero-desc{font-size:17px;line-height:1.7}
 .note-art{min-height:390px;aspect-ratio:auto;border-radius:12px}.note-art-image{object-position:58% center}
 .note-art-kicker{top:25px;left:24px;right:24px;font-size:14px}.note-art-title{left:24px;top:36%;font-size:74px}.note-art-stamp{font-size:14px}
 .platform-loop{grid-template-columns:1fr;gap:12px;padding:22px;margin:25px 0 35px;border-radius:16px}
 .platform-loop>span{font-size:20px;min-height:80px;padding:20px 15px;gap:10px}.platform-loop>span.flow-note-step,.platform-loop>span.flow-studio-step{min-height:142px}
 .platform-loop>i{justify-self:center;transform:rotate(90deg);font-size:25px;line-height:1}.platform-loop b{font-size:34px}.platform-loop small{font-size:26px}
}