/* Krira Digital v7: premium chapters. Brand: navy + one blue accent + steel. */
:root{--gold-free:0;--glow:rgba(10,132,237,.35);--hair:rgba(150,175,204,.22)}

/* ---------- hero polish ---------- */
.hero{padding-bottom:0}
.hero h1{font-size:clamp(2.3rem,1.3rem + 3vw,3.9rem);line-height:1.03;letter-spacing:-.035em}
@media (min-width:981px){.hero-in{grid-template-columns:1.15fr 1fr}}
.hero .lede{font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);max-width:34ch;color:var(--d-muted)}
.hero .machine{box-shadow:0 60px 120px -40px rgba(10,132,237,.35),0 40px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07)}
.marquee{margin-top:clamp(48px,7vw,88px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee-track span{padding:18px 28px;color:var(--d-muted);font-size:.8rem;letter-spacing:.18em;white-space:nowrap;position:relative}
.marquee-track span::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border:1px solid var(--blue-2);transform:rotate(45deg)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- chapters ---------- */
.chap{position:relative;padding:clamp(88px,11vw,160px) 0;isolation:isolate;overflow:hidden}
.chap-light{background:var(--paper);color:var(--ink)}
.chap-light::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.35;-webkit-mask-image:radial-gradient(80% 60% at 70% 0%,#000,transparent 75%);mask-image:radial-gradient(80% 60% at 70% 0%,#000,transparent 75%)}
.chap-ink,.chap-stage{background:var(--n-950);color:var(--d-ink)}
.chap-n{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.74rem;letter-spacing:.2em;margin-bottom:22px}
.chap-ink .chap-n,.chap-stage .chap-n{color:var(--d-muted)}
.chap-n span{color:var(--blue);font-weight:600}
.chap-n::after{content:"";height:1px;width:72px;background:linear-gradient(90deg,var(--blue),transparent)}
.chap-title{font-size:clamp(2.2rem,1.2rem + 4vw,4.4rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;max-width:16ch}
.chap-title .dim{color:var(--muted);font-weight:700}
.chap-title.light{color:#fff}
.chap-title .accent,.cta-giant .accent{background:linear-gradient(92deg,#7cc4ff,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}

/* 01 pains */
.pains{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.pain{padding:32px 28px 8px 0;display:grid;gap:6px}
.pain+.pain{padding-left:28px;border-left:1px solid var(--line)}
.pain i{font-size:2.1rem;color:var(--blue);margin-bottom:14px}
.pain b{font-size:1.25rem;font-variation-settings:"wdth" 112;letter-spacing:-.01em}
.pain span{color:var(--muted)}
@media (max-width:760px){.pains{grid-template-columns:1fr}.pain+.pain{padding-left:0;border-left:0;border-top:1px solid var(--line)}.pain{padding:24px 0}}

/* 02 stage */
.stage-glow{position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;background:radial-gradient(50% 40% at 50% 38%,rgba(10,132,237,.22),transparent 70%),radial-gradient(30% 20% at 50% 55%,rgba(124,196,255,.12),transparent 70%)}
.stage{position:relative;margin:clamp(40px,5vw,64px) auto 0;max-width:980px}
.stage .live3d{border-radius:18px;background:radial-gradient(70% 70% at 50% 45%,#dfe7ef,#9fb0c1 75%,#6f8296);box-shadow:0 80px 140px -60px rgba(10,132,237,.55),inset 0 0 0 1px rgba(255,255,255,.35)}
.callouts{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.callouts li{position:absolute;font-size:.72rem;letter-spacing:.1em;color:#0567c2;background:rgba(255,255,255,.82);border:1px solid rgba(5,103,194,.35);padding:5px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.callouts li::before{content:"";position:absolute;width:26px;height:1px;background:rgba(5,103,194,.5);top:50%}
.callouts .c1{top:9%;left:42%}.callouts .c1::before{left:-30px}
.callouts .c2{top:22%;right:7%}.callouts .c2::before{left:-30px}
.callouts .c3{bottom:16%;left:6%}.callouts .c3::before{right:-30px}
.callouts .c4{bottom:9%;right:12%}.callouts .c4::before{left:-30px}
@media (max-width:640px){.callouts .c2,.callouts .c4{display:none}.callouts li{font-size:.62rem}}
.deck{position:relative;display:grid;grid-template-columns:1fr 240px;gap:28px;align-items:end;margin:clamp(56px,7vw,96px) auto 0;max-width:1060px;perspective:1600px}
.deck figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.deck-main{transform:rotateX(8deg) rotateY(-6deg);transform-origin:center bottom}
.deck-phone{transform:rotateX(6deg) rotateY(-10deg) translateY(-30px);border-radius:28px!important;border:6px solid #1a2a3c!important}
.deck img{width:100%;height:auto;display:block}
.stage-note{margin-top:36px;text-align:center;color:var(--d-muted);font-size:.66rem;letter-spacing:.14em}
@media (max-width:860px){.deck{grid-template-columns:1fr;perspective:none}.deck figure{transform:none!important}.deck-phone{max-width:240px;justify-self:center}}

/* 03 bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);gap:16px;margin-top:clamp(48px,6vw,80px)}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.tile:hover{transform:translateY(-4px);border-color:rgba(10,132,237,.5);box-shadow:0 30px 60px -36px rgba(10,132,237,.45)}
.tile i{font-size:1.9rem;color:var(--blue);margin-bottom:auto}
.tile b{font-size:1.15rem;font-variation-settings:"wdth" 112;letter-spacing:-.01em;margin-top:18px}
.tile span{color:var(--muted);font-size:.95rem}
.tile-draw{grid-column:span 2;grid-row:span 2;padding:0;overflow:hidden;background:#f4f7fa;justify-content:space-between}
.tile-draw img{width:100%;height:auto;flex:1;object-fit:contain;padding:18px 18px 0}
.tile-draw>div{padding:22px 26px 26px;display:grid;gap:4px;border-top:1px solid #dbe3eb;background:#fff}
.tile-draw b{color:#0b1622;margin:0}.tile-draw span{color:#566373}
.tile-dark{background:var(--n-900);border-color:var(--n-800);grid-column:span 3}
.tile-dark b{color:#fff}.tile-dark span{color:var(--d-muted)}.tile-dark i{color:var(--blue-2)}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.tile-draw{grid-column:span 2;grid-row:auto}.tile-dark{grid-column:span 1}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.tile-draw,.tile-dark{grid-column:auto}.tile{min-height:150px}}

/* 04 packages on ink */
.pkx .sec-head{margin-bottom:clamp(40px,5vw,64px)}
.pkx .sec-lede{color:var(--d-muted)}
.pkx .pk{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--hair);border-radius:18px;padding:30px}
.pkx .pk h3{color:#fff;font-size:1.35rem}
.pkx .pk h3 span{color:var(--d-muted)}
.pkx .pk-n{color:var(--d-muted)}
.pkx .pk-price{color:#fff;font-size:clamp(2rem,1.4rem + 1.6vw,2.7rem)}
.pkx .pk-intro{color:var(--d-ink)}
.pkx .pk-list{border-top-color:var(--hair)}
.pkx .pk-list li{color:var(--d-muted);font-size:.92rem}
.pkx .pk-list li::before{border-color:var(--blue-2)}
.pkx .pk-foot{color:var(--d-ink);border-top-color:var(--hair)}
.pkx .pk-pick{background:linear-gradient(180deg,rgba(10,132,237,.16),rgba(10,132,237,.04));border:1px solid rgba(59,161,255,.7);box-shadow:0 60px 120px -50px var(--glow),inset 0 1px 0 rgba(255,255,255,.12)}
.pkx .pk-ent{background:rgba(255,255,255,.03);border-color:var(--hair);border-radius:18px}
.pkx .pk-ent h3{color:#fff}
.pkx .pk-ent p:not(.pk-n){color:var(--d-muted)}
.pkx .pk-add li{color:var(--d-ink);border-bottom-color:var(--hair)}

/* 05 steps */
.steps{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:38px;height:1px;background:repeating-linear-gradient(90deg,var(--blue) 0 10px,transparent 10px 16px);opacity:.6}
.steps li{position:relative;padding-right:24px;display:grid;gap:6px}
.steps .sn{font-family:var(--mono);font-size:.8rem;width:76px;height:76px;display:grid;place-items:center;border:1px solid var(--blue);border-radius:50%;background:var(--paper);color:var(--blue);font-size:1.6rem;font-weight:600;margin-bottom:18px;position:relative}
.steps b{font-size:1.2rem;font-variation-settings:"wdth" 112;letter-spacing:-.01em}
.steps li>span:last-child{color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:40px}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* about */
.about7{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.about7{grid-template-columns:1fr}}

/* contact */
.cta-giant{font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);line-height:1;letter-spacing:-.04em;font-weight:800;color:#fff;margin:10px 0 20px}
.contact{padding:clamp(110px,13vw,190px) 0}

/* reduced motion */
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.tile,.tile:hover{transition:none;transform:none}}