/* Inkana landing (inkana.app) — 2026-11-13. Ink-island direction: design/redesign/07-direction.ko.md */
:root{--ink:#182040;--ink2:#3c4566;--mute:#55607f;--faint:#8a93ad;--blue:#1b2fb4;--blue-d:#121f80;--gold:#ffb400;--paper:#faf5e6;--card:#fffdf6;--line:#ece5d0;--sky:#c3def5;--red:#e23a2a;--night-text:#c9cee0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans KR","Noto Sans",system-ui,-apple-system,sans-serif;line-height:1.6}
:lang(en) body,body:lang(en),body:lang(id){font-family:"Noto Sans",system-ui,-apple-system,sans-serif}
img{max-width:100%}
html:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--blue)}a:hover{color:var(--blue-d)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}.skip:focus{left:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.display{font-family:"Black Han Sans",sans-serif;font-weight:400;letter-spacing:-.01em}
:lang(en) .display,:lang(id) .display{font-family:"Archivo Black",sans-serif;letter-spacing:-.02em}
.eyebrow{margin:0;font-size:15px;font-weight:700;color:var(--mute);letter-spacing:.04em}
:lang(en) .eyebrow,:lang(id) .eyebrow{text-transform:uppercase;letter-spacing:.06em}
h2.display{margin:0;font-size:clamp(30px,3.6vw,48px);line-height:1.18}
.lead{margin:0;font-size:18px;line-height:1.75;color:var(--ink2)}
.stack{display:flex;flex-direction:column;gap:16px}
.intro{max-width:720px}

/* announcement + header */
.notice{margin:0;background:var(--ink);color:var(--paper);font-size:14px;text-align:center;padding:10px 16px}
.notice strong{color:var(--gold)}
.top{background:var(--sky)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:44px;height:44px;border-radius:11px;display:block}
.brand span{font-family:"Archivo Black",sans-serif;font-size:26px;letter-spacing:-.01em}
.navlinks{display:flex;gap:32px;font-size:16px;font-weight:500}
.navlinks a{color:var(--ink);text-decoration:none}.navlinks a:hover{color:var(--blue)}
.tools{display:flex;align-items:center;gap:10px}
.langs{display:flex;background:rgba(255,255,255,.6);border-radius:999px;padding:4px}
.langs a{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:44px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);text-decoration:none}
.langs a[aria-current="page"]{background:var(--ink);color:#fff;font-weight:700}
.pill{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.pill:hover{color:#fff;background:var(--blue-d)}

/* hero */
.hero{background:linear-gradient(180deg,var(--sky) 0%,#dfeaf2 45%,var(--paper) 100%);padding:48px 0 96px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero h1{margin:0;font-size:clamp(42px,5.6vw,76px);line-height:1.12}
:lang(en) .hero h1,:lang(id) .hero h1{font-size:clamp(40px,5.2vw,72px);line-height:1.08}
.hero .lead{font-size:19px;line-height:1.7;max-width:30em}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px;border-radius:16px;border:2px dashed var(--faint);color:var(--ink2);font-weight:700;font-size:16px}
.store small{font-weight:500;color:var(--mute);font-size:14px}
.fine{margin:0;font-size:14px;color:var(--mute)}
.heroart{position:relative;min-height:760px}
.heroart .phone{position:absolute}
.heroart .a{left:2%;top:0;width:54%;max-width:320px}
.heroart .b{right:0;top:110px;width:48%;max-width:290px}
.phone{display:block;height:auto;border:9px solid #10162e;border-radius:46px;background:#10162e;box-shadow:0 30px 50px rgba(24,32,64,.22)}

section.pad{padding:96px 0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}

/* why write */
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pair{background:var(--card);border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.pair .glyphs{display:flex;align-items:baseline;gap:18px;font-family:"Klee One",serif;font-weight:600;font-size:64px;line-height:1}
.pair .glyphs i{font-style:normal;font-size:20px;color:var(--faint)}
.pair p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)}

/* marks */
.mark{background:var(--card);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.mark .box{position:relative;width:140px;height:140px}
.mark .box span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Klee One",serif;font-weight:600;font-size:88px;color:var(--blue);line-height:1}
.mark .box svg{position:absolute;inset:0}
.mark h3{margin:0;font-size:20px}
.mark p{margin:0;font-size:16px;line-height:1.65;color:var(--ink2)}

/* how */
.night{background:var(--ink);color:var(--paper);padding:104px 0}
.night .eyebrow{color:var(--gold)}
.night .lead{color:var(--night-text)}
.step{display:flex;flex-direction:column;gap:20px}
.step .phone{width:100%;max-width:260px}
.step .row{display:flex;gap:14px;align-items:baseline}
.step .n{font-family:"Archivo Black",sans-serif;font-size:28px;color:var(--gold)}
.step h3{margin:0 0 8px;font-size:22px}
.step p{margin:0;font-size:16px;line-height:1.65;color:var(--night-text)}

/* promises */
.promise{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:3px solid var(--ink)}
.promise h3{margin:0;font-size:22px}
.promise p{margin:0;font-size:16px;line-height:1.7;color:var(--ink2)}

/* courses */
.courses{background:linear-gradient(180deg,var(--paper) 0%,#d7e8f3 100%)}
.courses .shot{display:flex;justify-content:center}
.courses .shot .phone{width:100%;max-width:320px}
.list{margin:0;padding:0;list-style:none;background:var(--card);border-radius:24px;overflow:hidden}
.list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list b{font-weight:700;white-space:nowrap}
.list span{color:var(--ink2);text-align:right}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--gold);font-size:13px;font-weight:700;white-space:nowrap}
.list .tag{color:var(--gold);text-align:center}

/* pricing */
.plan{background:var(--card);border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:20px;border:2px solid var(--line)}
.plan.year{background:#fff;border-color:var(--ink)}
.plan.life{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan h3{margin:0;font-size:20px}
.plan .price{margin:0;font-family:"Archivo Black",sans-serif;font-size:44px;line-height:1}
.plan .price small{font-family:inherit;font-size:16px;font-weight:500;color:var(--mute)}
.plan .price small{font-family:"Noto Sans KR","Noto Sans",sans-serif}
.plan p{margin:0;font-size:16px;line-height:1.7;color:var(--ink2)}
.plan .price{color:var(--ink)}.plan.life .price{color:var(--paper)}
.plan.life p{color:var(--night-text)}
.plan .head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan .badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:13px;font-weight:700}

/* faq */
.faq{background:#f2ecd9}
.faq .wrap{max-width:880px;display:flex;flex-direction:column;gap:40px}
.faq .items{display:flex;flex-direction:column;gap:12px}
details{background:var(--card);border-radius:20px;padding:0 24px}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-size:18px;font-weight:700;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 24px;font-size:16px;line-height:1.7;color:var(--ink2)}

/* footer */
footer{background:var(--ink);color:var(--night-text);padding:72px 0 48px}
footer .wrap{display:flex;flex-direction:column;gap:48px}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.foot .brand span{color:var(--gold);font-size:24px}
.foot .brand img{width:40px;height:40px;border-radius:10px}
.foot nav,.foot .contact{display:flex;flex-direction:column;gap:4px;font-size:15px}
.foot nav a,.foot .contact b{color:var(--paper);text-decoration:none;min-height:32px;display:flex;align-items:center}
.foot nav a:hover{color:var(--gold)}
.foot .contact a{color:var(--gold);text-decoration:none;min-height:32px;display:flex;align-items:center}
.legal{border-top:1px solid #2f3a63;padding-top:24px;font-size:13px;line-height:1.7;color:#a9b0c8}
.legal p{margin:0 0 6px}

@media (max-width:900px){
  .wrap{padding:0 16px}
  .hero .wrap,.two,.three,.foot{grid-template-columns:minmax(0,1fr)}
  .navlinks{display:none}
  .heroart{min-height:0;height:min(132vw,600px)}
  section.pad{padding:72px 0}.night{padding:80px 0}
  .step .phone{max-width:300px}
  .list li{flex-direction:column;align-items:flex-start;gap:4px}
  .list span{text-align:left}
}
@media (max-width:420px){
  .pairs{grid-template-columns:minmax(0,1fr)}
  .pill{padding:0 14px}
  .brand span{font-size:22px}
}