/* IAN · KYC TOEFL — landing pages (black · crimson · editorial) */
:root{
  --bg:#0a0a0a; --ink:#f3eee8; --mute:#8b8580; --faint:#4a4644; --hair:#1f1d1c;
  --red:#dc2639; --red-hi:#ff4a5c; --red-lo:#8f1420;
  --disp:"Anton","Bebas Neue",Impact,"Noto Sans KR",sans-serif;
  --it:"Instrument Serif","Fraunces",Georgia,serif;
  --tx:"Inter","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--tx);letter-spacing:-.005em}
:lang(ko) body{word-break:keep-all}
a{text-decoration:none}
.w{max-width:1180px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.w{padding:0 16px}}

/* nav */
.n{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.n .w{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:baseline;gap:12px;color:var(--ink)}
.logo b{font-family:var(--disp);font-weight:400;font-size:28px;letter-spacing:.04em;line-height:1}
.logo b i{font-style:normal;color:var(--red)}
.logo small{font-size:10px;font-weight:600;letter-spacing:.32em;color:var(--mute)}
@media (max-width:480px){.logo small{display:none}}
.n nav{display:flex;align-items:center;gap:24px}
.n nav a{font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--mute);transition:color .2s}
.n nav a:hover{color:var(--ink)}
.n nav a.cta{color:var(--ink);border:1px solid var(--red);padding:9px 14px;border-radius:999px}
.n nav a.cta:hover{background:var(--red)}
@media (max-width:560px){.n nav{gap:14px}.n nav .opt{display:none}}

/* type */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.34em;color:var(--red);text-transform:uppercase}
.mega{font-family:var(--disp);font-weight:400;line-height:.82;letter-spacing:-.01em}
.mega .r{color:var(--red)}
.mega .s{color:var(--faint)}
.it{font-family:var(--it);font-style:italic;font-weight:400}
.hd{font-family:var(--disp);font-weight:400;letter-spacing:.005em;line-height:.95;text-transform:uppercase}
:lang(ko) .hd{font-family:"Noto Sans KR",var(--tx);font-weight:900;text-transform:none;letter-spacing:-.04em;line-height:1.1}

/* buttons */
.go{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 30px;border-radius:999px;background:var(--red);color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em;transition:background .2s,transform .2s}
.go:hover{background:var(--red-hi)}
.go i{font-style:normal;transition:transform .25s}.go:hover i{transform:translateX(5px)}
.fine{margin-top:16px;font-size:12px;color:var(--mute);letter-spacing:.02em}

/* hero */
.hero{position:relative;overflow:hidden;padding:72px 0 88px;border-bottom:1px solid var(--hair)}
.hero::before{content:"";position:absolute;right:-12%;top:-30%;width:900px;height:900px;background:radial-gradient(closest-side,rgba(220,38,57,.16),transparent);pointer-events:none}
.hero .w{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:900px){.hero .w{grid-template-columns:1fr;gap:44px}.hero{padding:44px 0 56px}}
.hero .mega{font-size:clamp(150px,19vw,250px);margin:22px 0 10px}
.hero h1{font-size:clamp(40px,5vw,64px);line-height:1;margin-bottom:22px}
.hero h1 .it{color:var(--red);text-transform:none}
.hero p.l{font-size:16px;line-height:1.65;color:#bdb6ae;max-width:430px;margin-bottom:34px}
.hero p.l b{color:var(--ink);font-weight:600}

/* demo widget */
.demo{background:#111;border:1px solid var(--hair);border-radius:22px;padding:26px 24px 22px;box-shadow:0 50px 90px -50px #000}
.demo .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-bottom:14px;letter-spacing:.04em}
.demo .q{font-family:var(--it);font-size:24px;line-height:1.35;margin-bottom:16px}
.demo .lab{font-size:12px;font-weight:600;color:var(--red);margin-bottom:8px}
.demo .slots{display:flex;flex-wrap:wrap;gap:8px;min-height:62px;padding:11px;border:1px dashed #2d2a29;border-radius:14px;margin-bottom:14px;align-items:center}
.demo .pool{display:flex;flex-wrap:wrap;gap:8px;min-height:46px;margin-bottom:16px}
.chip{font:500 16px/1 var(--tx);color:var(--ink);background:#181717;border:1px solid #2d2a29;border-radius:999px;padding:11px 16px;cursor:pointer;transition:border-color .15s,opacity .15s}
.chip:hover{border-color:var(--red)}
.slots .chip{border-color:var(--red-lo);background:#1d1012}
.demo .row{display:flex;gap:10px}
.demo .row button{flex:1;height:48px;border-radius:999px;font:600 14px var(--tx);cursor:pointer;border:1px solid #2d2a29;background:transparent;color:var(--ink)}
.demo .row button.go{display:block;background:var(--red);border-color:var(--red);color:#fff;padding:0}
.demo .fb{min-height:22px;margin-top:12px;font-size:13.5px;line-height:1.55}
.demo .fb.ok{color:#9fd18b}.demo .fb.no{color:#ff7b86}

/* gates */
.gates{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair)}
@media (max-width:760px){.gates{grid-template-columns:1fr}}
.gate{padding:64px 40px;border-left:1px solid var(--hair);position:relative}
.gate:first-child{border-left:0}
@media (max-width:760px){.gate{border-left:0;border-top:1px solid var(--hair);padding:44px 16px}.gate:first-child{border-top:0}}
.gate .no{font-family:var(--disp);font-size:15px;color:var(--red);letter-spacing:.1em;margin-bottom:22px}
.gate .hd{font-size:clamp(38px,4.4vw,58px);margin-bottom:14px}
.gate p{font-size:14px;color:var(--mute);letter-spacing:.02em}
.gates-cap{text-align:center;padding:26px 16px;border-bottom:1px solid var(--hair);font-family:var(--it);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:#cfc8c0}
.gates-cap em{color:var(--red);font-style:italic}

/* screens */
.screens{padding:96px 0;border-bottom:1px solid var(--hair)}
.screens .top{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:46px}
.screens .top .hd{font-size:clamp(40px,5vw,66px)}
.reel{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:900px){.reel{grid-template-columns:repeat(4,64%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 -16px;padding-left:16px;padding-right:16px}.reel figure{scroll-snap-align:start}}
.reel figure{margin:0}
.reel .ph{border-radius:26px;padding:7px;background:linear-gradient(160deg,#272222,#0d0d0d 45%);box-shadow:0 0 0 1px rgba(220,38,57,.18),0 40px 70px -40px #000}
.reel img{display:block;width:100%;aspect-ratio:520/1000;object-fit:cover;object-position:top;border-radius:20px;filter:grayscale(1) contrast(1.08) brightness(.92)}
.reel figcaption{margin-top:16px;display:flex;gap:10px;align-items:baseline}
.reel figcaption b{font-family:var(--disp);font-weight:400;font-size:13px;color:var(--red);letter-spacing:.1em}
.reel figcaption span{font-size:14px;font-weight:600}

/* ian */
.ian{padding:110px 0;border-bottom:1px solid var(--hair);overflow:hidden}
.ian .w{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
@media (max-width:760px){.ian .w{grid-template-columns:1fr;gap:20px}.ian{padding:70px 0}}
.ian .mega{font-size:clamp(130px,17vw,230px)}
.ian p{font-family:var(--it);font-style:italic;font-size:clamp(26px,3vw,40px);line-height:1.2;max-width:560px}
.ian p em{color:var(--red)}
:lang(ko) .ian p{font-family:"Noto Sans KR",var(--tx);font-style:normal;font-weight:700;letter-spacing:-.03em;font-size:clamp(24px,2.8vw,34px);line-height:1.35}
.ian small{display:block;margin-top:18px;font-size:12px;letter-spacing:.24em;color:var(--mute)}

/* final */
.final{padding:110px 0 120px;text-align:center}
.final .hd{font-size:clamp(48px,7vw,96px);margin-bottom:34px}
.final .hd .it{color:var(--red);text-transform:none}

/* footer */
.ft{border-top:1px solid var(--hair);padding:30px 0 40px}
.ft .w{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mute);letter-spacing:.06em}
.ft a{color:var(--mute)}.ft a:hover{color:var(--ink)}
.ft .logo b{font-size:20px}
:lang(ko) .it,:lang(ko) .gates-cap{font-family:"Noto Sans KR",var(--tx);font-style:normal;letter-spacing:-.03em}
:lang(ko) .gates-cap{font-weight:700;font-size:clamp(18px,2vw,24px)}
:lang(ko) .gates-cap em{font-style:normal}