/* =========================================================
   令和日報 AI動画自動編集システム — Case Study LP
   BLACK × RED / NEWS × AI × AUTOMATION × EDITING
   ========================================================= */
:root{
  --k0:#050505; --k1:#0a0a0a; --k2:#111111; --k3:#181818; --k4:#222;
  --w:#ffffff; --w2:#ededed;
  --g1:#aaaaaa; --g2:#888888; --g3:#555;
  --red:#e10600; --red2:#ff1a1a;
  --line:rgba(255,255,255,.12);
  --serif:'Shippori Mincho','Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
  --disp:'Bebas Neue','Oswald',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--w2);background:var(--k0);line-height:1.95;letter-spacing:.04em;overflow-x:hidden;-webkit-text-size-adjust:100%}
a{color:inherit}
img{max-width:100%;display:block}
em{font-style:normal;color:var(--red2)}
b{font-weight:500;color:var(--w)}
.mono{font-family:var(--mono)}
.disp{font-family:var(--disp);letter-spacing:.06em;font-weight:400}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);transition:background .4s,backdrop-filter .4s}
.hd.solid{background:rgba(5,5,5,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--serif);font-weight:500;font-size:.95rem;letter-spacing:.32em;text-decoration:none;color:var(--w)}
.hd a.back{font-family:var(--disp);font-size:1rem;letter-spacing:.2em;color:var(--g1);text-decoration:none;transition:color .3s}
.hd a.back:hover{color:var(--red2)}

/* ---------- common type ---------- */
.eyebrow{font-family:var(--disp);font-size:1.05rem;letter-spacing:.32em;color:var(--red2);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red)}
.ch{display:inline-flex;align-items:center;justify-content:center;width:2.1em;height:2.1em;background:var(--red);color:#fff;font-family:var(--serif);font-weight:500;font-size:.8rem;letter-spacing:0;margin-right:2px}
.h-xl{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,6.2vw,4.6rem);line-height:1.38;letter-spacing:.06em;color:var(--w);text-wrap:balance}
.h-l{font-family:var(--serif);font-weight:500;font-size:clamp(1.55rem,4.2vw,3rem);line-height:1.5;letter-spacing:.06em;color:var(--w);text-wrap:balance}
.h-m{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.6vw,1.8rem);line-height:1.6;letter-spacing:.06em;color:var(--w)}
.lead{font-size:clamp(.95rem,1.6vw,1.05rem);color:var(--g1);max-width:38em}
p+p{margin-top:1.2em}
section{position:relative;padding:clamp(90px,14vw,190px) 0}
.alt{background:var(--k1)}
.deep{background:var(--k2)}
.sec-top{margin-bottom:clamp(40px,7vw,80px)}
.sec-top .eyebrow{margin-bottom:22px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.tx{display:block;overflow:hidden}
.tx>span{display:block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.in .tx>span,.tx.in>span{transform:none}
.ln{display:block;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.ln.in{transform:none}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 70px;background:
  radial-gradient(1200px 500px at 85% 15%,rgba(225,6,0,.16),transparent 60%),var(--k0);overflow:hidden}
.hero .eyebrow{margin-bottom:34px;font-size:clamp(.8rem,1.6vw,1.05rem)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.35rem,8.4vw,6.2rem);line-height:1.28;letter-spacing:.05em;color:var(--w);margin-bottom:34px}
.hero .sub{font-size:clamp(.92rem,1.5vw,1.08rem);color:var(--g1);max-width:36em;line-height:2.1}
.hero .sub span{display:block}
.pipe{margin-top:clamp(50px,9vw,110px);position:relative}
.pipe-line{position:absolute;left:0;right:0;top:34px;height:2px;background:rgba(255,255,255,.1)}
.pipe-line i{position:absolute;left:0;top:0;bottom:0;background:var(--red);width:0;animation:pipego 7s cubic-bezier(.5,0,.2,1) 1.2s infinite}
@keyframes pipego{0%{width:0}70%{width:100%}100%{width:100%;opacity:0}}
.pipe-row{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pn{text-align:center}
.pn .ic{width:68px;height:68px;margin:0 auto 14px;background:var(--k2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;animation:pnon 7s ease 1.2s infinite}
.pn:nth-child(1) .ic{animation-delay:1.2s}.pn:nth-child(2) .ic{animation-delay:2.2s}.pn:nth-child(3) .ic{animation-delay:3.2s}
.pn:nth-child(4) .ic{animation-delay:4.2s}.pn:nth-child(5) .ic{animation-delay:5.2s}.pn:nth-child(6) .ic{animation-delay:6s}
@keyframes pnon{0%,100%{border-color:var(--line)}12%,40%{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}}
.pn .ic img{width:100%;height:100%;object-fit:cover}
.pn .ic .t{font-family:var(--disp);font-size:.78rem;letter-spacing:.06em;color:var(--w)}
.pn .ic .bars{display:flex;gap:3px;align-items:center;height:30px}
.pn .ic .bars s{display:block;width:3px;background:var(--red2);animation:bar 1.1s ease-in-out infinite}
.bars s:nth-child(1){height:10px}.bars s:nth-child(2){height:24px;animation-delay:.1s}.bars s:nth-child(3){height:16px;animation-delay:.25s}.bars s:nth-child(4){height:28px;animation-delay:.05s}.bars s:nth-child(5){height:12px;animation-delay:.35s}
@keyframes bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.pn .ic .mini{width:70%;display:grid;gap:4px}
.pn .ic .mini s{display:block;height:5px;background:var(--g3)}
.pn .ic .mini s:nth-child(2){background:var(--red);width:60%}
.pn .lb{font-family:var(--disp);font-size:.95rem;letter-spacing:.14em;color:var(--w)}
.pn .jp{font-size:.66rem;color:var(--g2);letter-spacing:.08em}
@media(max-width:640px){.pn .ic{width:44px;height:44px;margin-bottom:9px}.pipe-line{top:22px}.pn .lb{font-size:.72rem;letter-spacing:.06em}.pn .ic .t{font-size:.52rem;letter-spacing:0}.pn .jp{display:none}.pipe-row{gap:4px}}
.scroll-cue{position:absolute;left:var(--pad);bottom:22px;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:var(--g2);display:flex;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:46px;height:1px;background:var(--g2)}

/* ---------- WHY ---------- */
.big-quote{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,6vw,4.4rem);line-height:1.42;letter-spacing:.05em;color:var(--w)}
.why-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,100px);margin-top:clamp(60px,9vw,120px);align-items:start}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}}
.count{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.count .n{font-family:var(--disp);font-size:clamp(6rem,17vw,11rem);line-height:.85;color:var(--red);letter-spacing:.02em}
.count .u{font-family:var(--disp);font-size:1.3rem;letter-spacing:.24em;color:var(--g1)}
.tasks{list-style:none;border-top:1px solid var(--line)}
.tasks li{display:grid;grid-template-columns:54px 1fr;padding:15px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--w2);align-items:baseline}
.tasks li i{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--red2);letter-spacing:.1em}
.tasks li.hl{color:var(--w)}
.tasks li.hl span{border-bottom:1px solid var(--red)}
.rep{margin-top:clamp(60px,9vw,120px);padding:clamp(30px,5vw,60px);border:1px solid var(--line);background:var(--k1);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
@media(max-width:760px){.rep{grid-template-columns:1fr}}
.rep .cyc{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,2.6vw,1.7rem);line-height:1.7;color:var(--w)}
.rep .loop{font-family:var(--disp);font-size:clamp(2.4rem,6vw,4rem);letter-spacing:.1em;color:var(--red);line-height:1}
.tired{margin-top:clamp(60px,8vw,110px);max-width:34em}
.tired .h-l{margin-bottom:26px}

/* ---------- IDEA ---------- */
.idea-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,110px);align-items:start}
@media(max-width:900px){.idea-grid{grid-template-columns:1fr}}
.flow{position:relative;padding-left:34px;--p:0}
.flow::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:rgba(255,255,255,.12)}
.flow::after{content:"";position:absolute;left:11px;top:14px;width:2px;height:calc((100% - 28px)*var(--p));background:var(--red)}
.fn{position:relative;padding:14px 0 14px 4px;display:flex;align-items:center;gap:18px;color:var(--g2);transition:color .5s}
.fn::before{content:"";position:absolute;left:-30px;top:50%;width:10px;height:10px;margin-top:-5px;background:var(--k0);border:2px solid var(--g3);border-radius:50%;transition:.5s}
.fn.on{color:var(--w)}
.fn.on::before{border-color:var(--red);background:var(--red)}
.fn b{font-family:var(--serif);font-weight:500;font-size:1.25rem;letter-spacing:.1em;color:inherit}
.fn small{font-family:var(--disp);font-size:.95rem;letter-spacing:.18em;color:var(--g2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:clamp(40px,6vw,70px)}
@media(max-width:560px){.split{grid-template-columns:1fr}}
.split>div{background:var(--k1);padding:28px 26px}
.split h4{font-family:var(--disp);font-weight:400;font-size:1.05rem;letter-spacing:.24em;color:var(--red2);margin-bottom:12px}
.split ul{list-style:none;font-size:.9rem}
.split li{padding:5px 0 5px 16px;position:relative;color:var(--w2)}
.split li::before{content:"";position:absolute;left:0;top:1.15em;width:6px;height:1px;background:var(--red)}

/* ---------- ACTION ---------- */
.step{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(60px,9vw,120px) 0;border-top:1px solid var(--line);position:relative}
@media(max-width:900px){.step{grid-template-columns:1fr}}
.step .num{font-family:var(--disp);font-size:clamp(7rem,18vw,14rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);letter-spacing:.02em;transition:-webkit-text-stroke-color .8s}
.step.in .num{-webkit-text-stroke-color:rgba(255,255,255,.4)}
.step .tag{font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:.26em;color:var(--red2);margin-top:16px}
.step .sm{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.5;color:var(--w);margin-bottom:22px}
.pb{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:26px 0 8px;font-size:.92rem}
.pb dt{font-family:var(--disp);font-size:.95rem;letter-spacing:.22em;color:var(--red2);padding-top:2px}
.pb dd{color:var(--w2)}
.copy{margin-top:26px;padding-left:20px;border-left:2px solid var(--red);font-family:var(--serif);font-weight:500;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.8;color:var(--w)}
.note-s{font-size:.78rem;color:var(--g2);margin-top:14px}
.vis{margin-top:34px}
.frame{background:var(--k1);border:1px solid var(--line);padding:22px}
.lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--g2);margin-bottom:12px;display:block}
.lbl em{color:var(--red2)}

/* v-script */
.v-script{display:grid;grid-template-columns:1fr 34px 1fr;gap:14px;align-items:center}
@media(max-width:640px){.v-script{grid-template-columns:1fr;}.v-script .ar{transform:rotate(90deg);justify-self:center}}
.v-script .ar{font-family:var(--disp);color:var(--red);font-size:1.6rem;text-align:center}
.page{background:#0e0e0e;border:1px solid var(--line);min-height:170px;padding:18px}
.page.blank{position:relative}
.page.blank::after{content:"";position:absolute;left:18px;top:22px;width:2px;height:18px;background:var(--w);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.page .r{display:flex;gap:10px;align-items:center;font-size:.78rem;padding:6px 0;opacity:.3;transform:translateX(-8px);transition:.6s cubic-bezier(.16,1,.3,1)}
.page .r i{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--red2);width:34px}
.page .r s{display:block;flex:1;height:5px;background:var(--g3);text-decoration:none}
.in .page .r{opacity:1;transform:none}
.in .page .r:nth-child(2){transition-delay:.3s}.in .page .r:nth-child(3){transition-delay:.6s}.in .page .r:nth-child(4){transition-delay:.9s}.in .page .r:nth-child(5){transition-delay:1.2s}

/* v-voice */
.vo-text{font-family:var(--serif);font-size:1.2rem;color:var(--w);padding:8px 0 16px;border-bottom:1px dashed var(--g3)}
.vo-ar{font-family:var(--disp);color:var(--red);font-size:1.3rem;text-align:center;margin:8px 0}
.wave{display:flex;align-items:center;gap:3px;height:74px;overflow:hidden}
.wave s{display:block;flex:1;min-width:2px;background:var(--g3);height:20%;transform-origin:center;text-decoration:none}
.in .wave s{background:var(--red);animation:wv 1.3s ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* v-visual */
.vv{display:grid;grid-template-columns:1fr 34px 1fr;gap:14px;align-items:center}
@media(max-width:640px){.vv{grid-template-columns:1fr}.vv .ar{transform:rotate(90deg);justify-self:center}}
.vv .ar{font-family:var(--disp);color:var(--red);font-size:1.6rem;text-align:center}
.sent{font-family:var(--serif);font-size:1rem;line-height:1.9;color:var(--w2)}
.sent mark{background:transparent;color:var(--w);box-shadow:inset 0 -.6em 0 rgba(225,6,0,.55);padding:0 2px}
.gen{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:var(--k3)}
.gen img{width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.65,0,.35,1) .3s}
.in .gen img{clip-path:inset(0 0 0 0)}
.gen::after{content:"";position:absolute;top:0;bottom:0;width:2px;left:0;background:var(--red2);box-shadow:0 0 14px var(--red);opacity:0}
.in .gen::after{animation:scan 1.8s cubic-bezier(.65,0,.35,1) .3s forwards}
@keyframes scan{0%{left:0;opacity:1}98%{opacity:1}100%{left:100%;opacity:0}}
.gen .cap{position:absolute;left:8px;bottom:6px;font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:#fff;text-shadow:0 1px 4px #000}
.mini-tl{margin-top:18px;background:#000;border:1px solid var(--line);padding:10px 12px}
.mini-tl .row{display:flex;gap:4px;height:22px;margin-top:5px}
.mini-tl .row:first-of-type{margin-top:0}
.mini-tl .row b{display:block;background:var(--k4);border:1px solid #2c2c2c;font-family:var(--mono);font-size:.5rem;color:var(--g2);padding:3px 6px;font-weight:400;letter-spacing:.1em}
.mini-tl .row b.new{background:rgba(225,6,0,.22);border-color:var(--red);color:#fff;transform:translateY(-38px);opacity:0;transition:.9s cubic-bezier(.16,1,.3,1) 2.2s}
.in .mini-tl .row b.new{transform:none;opacity:1}

/* v-kagura */
.kg{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:26px;align-items:center}
@media(max-width:640px){.kg{grid-template-columns:1fr}}
.kg .pic{position:relative;aspect-ratio:450/560;overflow:hidden;border:1px solid var(--line);max-width:300px}
.kg .pic img{width:100%;height:100%;object-fit:cover}
.kg .pic::after{content:"KAGURA MIKO";position:absolute;left:10px;bottom:8px;font-family:var(--disp);font-size:.95rem;letter-spacing:.24em;color:#fff;text-shadow:0 1px 6px #000}
.chain{list-style:none}
.chain li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--w)}
.chain li i{font-style:normal;font-family:var(--disp);font-size:1rem;color:var(--red2);letter-spacing:.14em;width:2.6em}
.chain li:last-child{border-bottom:none}
.motions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.motions span{font-size:.74rem;padding:5px 12px;border:1px solid var(--g3);color:var(--w2);letter-spacing:.1em}
.motions span:nth-child(odd){border-color:rgba(225,6,0,.6)}

/* v-timeline */
.tl{background:#000;border:1px solid #262626;position:relative;overflow:hidden;padding:0 0 12px}
.tl-head{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid #1d1d1d;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--g2)}
.tl-head .rec{color:var(--red2)}
.tl-head .rec::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:8px;animation:blink 1.2s steps(1) infinite}
.tl-body{position:relative;padding:0 14px 0 88px}
.ruler{position:relative;height:26px;border-bottom:1px solid #1d1d1d;font-family:var(--mono);font-size:.55rem;color:var(--g2)}
.ruler span{position:absolute;top:8px;transform:translateX(-50%)}
.ruler span::after{content:"";position:absolute;left:50%;top:-8px;height:6px;width:1px;background:var(--g3)}
.tr{position:relative;height:38px;margin-top:8px}
.tr .nm{position:absolute;left:-76px;top:0;bottom:0;width:66px;display:flex;align-items:center;font-family:var(--disp);font-size:.85rem;letter-spacing:.16em;color:var(--g1)}
.tr .bk{position:absolute;top:0;bottom:0;background:#1b1b1b;border:1px solid #2c2c2c;font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;color:var(--g1);padding:3px 5px;overflow:hidden;white-space:nowrap}
.tr .bk.r{background:rgba(225,6,0,.2);border-color:var(--red);color:#fff}
.tr.voice .bk{background:repeating-linear-gradient(90deg,#3a3a3a 0 2px,transparent 2px 5px);background-size:auto 60%;background-position:center;background-repeat:repeat-x;border-color:#2c2c2c}
.ph-line{position:absolute;top:0;bottom:-12px;left:88px;width:2px;background:var(--red2);z-index:3;box-shadow:0 0 12px rgba(255,26,26,.7)}
.ph-line::before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:10px solid var(--red2);border-bottom:0}
.tl.play .ph-line{animation:head 12s linear infinite}
@keyframes head{0%{left:88px}100%{left:calc(100% - 14px)}}
.tcs{margin-top:20px;font-family:var(--mono);font-size:.78rem;color:var(--w2);border-top:1px solid var(--line)}
.tcs div{display:grid;grid-template-columns:58px 1fr;padding:9px 0;border-bottom:1px solid var(--line);letter-spacing:.06em}
.tcs div i{font-style:normal;color:var(--red2)}
@media(max-width:640px){
  .tl-body{padding-left:58px;padding-right:8px}
  .tr .nm{left:-52px;width:48px;font-size:.66rem;letter-spacing:.08em}
  .ph-line{left:58px}@keyframes head{0%{left:58px}100%{left:calc(100% - 8px)}}
  .tr.cap{display:none}
  .ruler span:nth-child(even){display:none}
  .tr .bk{font-size:.42rem;padding:2px 3px}
}

/* v-fcp */
.fcp{display:grid;gap:0;justify-items:center;text-align:center;padding:10px 0}
.fcp .box{width:100%;max-width:440px;border:1px solid var(--line);background:var(--k1);padding:20px 16px}
.fcp .box b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:.2em;color:var(--w)}
.fcp .box small{font-size:.7rem;color:var(--g2);letter-spacing:.1em}
.fcp .box.r{border-color:var(--red);background:rgba(225,6,0,.08)}
.fcp .dn{height:44px;width:2px;background:linear-gradient(var(--red),rgba(225,6,0,.2));position:relative;margin:0 auto}
.fcp .dn::after{content:"";position:absolute;left:-5px;bottom:-1px;border:6px solid transparent;border-top:8px solid var(--red);border-bottom:0}

/* ---------- BEFORE / AFTER ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.ba{grid-template-columns:1fr}}
.ba>div{background:var(--k0);padding:clamp(26px,4vw,50px)}
.ba .aft{background:var(--k1)}
.ba h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:.14em;color:var(--w);line-height:1}
.ba .bef h3{color:var(--g2)}
.ba .aft h3{color:var(--red2)}
.ba .sub{font-size:.8rem;color:var(--g2);margin:8px 0 26px}
.st{list-style:none;counter-reset:s}
.st li{counter-increment:s;padding:8px 0 8px 46px;position:relative;font-size:.92rem;color:var(--g1)}
.st li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:9px;font-family:var(--mono);font-size:.68rem;color:var(--g3)}
.st li:not(:last-child)::after{content:"";position:absolute;left:8px;bottom:-8px;width:1px;height:14px;background:var(--g3)}
.aft .st li{color:var(--w)}
.aft .st li::before{color:var(--red2)}
.aft .st li:not(:last-child)::after{background:var(--red)}
.ba .end{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--serif);font-weight:500;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.7;color:var(--g1)}
.ba .aft .end{color:var(--w)}

/* ---------- RESULT ---------- */
.result{text-align:left}
.result .big-quote{margin:26px 0 40px}
.res-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-top:50px}
@media(max-width:820px){.res-cols{grid-template-columns:1fr}}
.tagp{display:inline-block;font-family:var(--disp);font-size:.9rem;letter-spacing:.2em;color:var(--red2);border:1px solid var(--red);padding:0 12px;margin-left:8px;vertical-align:middle}

/* ---------- EXPAND ---------- */
.uses{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:clamp(36px,6vw,70px)}
@media(max-width:820px){.uses{grid-template-columns:repeat(2,1fr)}}
.uses li{padding:20px 18px 20px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--w);display:flex;gap:12px;align-items:baseline}
.uses li i{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--red2)}

/* ---------- TECH ---------- */
.tech{margin-top:30px;border-top:1px solid var(--line)}
.tech div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--g1)}
.tech div i{font-style:normal;font-family:var(--disp);font-size:.95rem;letter-spacing:.22em;color:var(--red2)}
@media(max-width:560px){.tech div{grid-template-columns:1fr;gap:2px}}

/* ---------- CTA ---------- */
.cta{text-align:center;background:radial-gradient(900px 400px at 50% 100%,rgba(225,6,0,.18),transparent 65%),var(--k0)}
.cta .h-xl{margin:26px auto 30px;max-width:14em}
.cta p{max-width:34em;margin:0 auto;color:var(--g1)}
.cta ul{list-style:none;max-width:24em;margin:28px auto 0;text-align:left;color:var(--w2);font-size:.95rem}
.cta ul li{padding:5px 0 5px 22px;position:relative}
.cta ul li::before{content:"";position:absolute;left:0;top:1.05em;width:10px;height:2px;background:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 44px;background:var(--red);color:#fff;text-decoration:none;font-family:var(--serif);font-weight:500;font-size:1.05rem;letter-spacing:.12em;margin-top:44px;transition:background .3s,transform .3s}
.btn:hover{background:var(--red2);transform:translateY(-3px)}
.btn2{display:block;margin-top:22px;color:var(--g1);text-decoration:none;font-size:.85rem;letter-spacing:.14em;border-bottom:1px solid var(--g3);width:max-content;margin-left:auto;margin-right:auto;padding-bottom:3px;transition:.3s}
.btn2:hover{color:#fff;border-color:var(--red)}
@media(max-width:560px){.btn{width:100%;padding:0 20px}}

footer{padding:50px var(--pad);border-top:1px solid var(--line);background:var(--k0);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:flex-end}
.foot-logo{font-family:var(--serif);font-weight:500;font-size:.9rem;letter-spacing:.3em;color:var(--w)}
.foot-logo small{display:block;font-family:var(--disp);font-size:.78rem;letter-spacing:.22em;color:var(--g2);margin-top:4px}
.copy-r{font-size:.66rem;letter-spacing:.16em;color:var(--g2);width:100%;text-align:center;margin-top:20px}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.tx>span,.ln{opacity:1!important;transform:none!important}
  .gen img{clip-path:none!important}
  .pipe-line i{width:100%}
}