/* v20 */

/* ── Hero: time-based sequence, so no extra scroll runway under the hero ── */
.hero{height:auto!important}
.hero-in{position:relative!important}
.render-exploded{display:none}
.render-slabs{opacity:1;clip-path:none}
.hero-hotspot.is-label{pointer-events:none!important;cursor:default;opacity:0;transform:translateY(-35%);transition:opacity .6s ease,transform .8s var(--spring)}
.hero-hotspot.is-label.is-ready{opacity:1;transform:translateY(-50%)}
.hero-hotspot.is-label:hover{background:inherit;transform:translateY(-50%)}

/* ── Wall: light leaking through the mortar once the wall stands ── */
#wallglow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;filter:drop-shadow(0 0 4px rgba(253,69,51,.9)) drop-shadow(0 0 12px rgba(253,69,51,.35))}

/* ── Planning formula: experience stacks up, AI multiplies, impact grows ── */
.f2{margin-top:70px;padding:clamp(28px,3.4vw,48px);border:1px solid var(--line);border-radius:24px;
 background:radial-gradient(ellipse at 85% 50%,rgba(253,69,51,.09),transparent 60%),linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.f2-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:30px}
.f2-head .tag{font:600 13px Poppins,sans-serif;letter-spacing:.12em;color:#fd4533;margin:0}
.f2-hint{color:#c4c4cb;font-size:15px;margin:0}
.f2-grid{display:grid;grid-template-columns:minmax(0,1.15fr) 160px minmax(0,1fr);align-items:center}
.f2-stack{display:flex;flex-direction:column;gap:10px}
.f2-in{position:relative;display:grid;grid-template-columns:26px 112px minmax(0,1fr);align-items:center;gap:12px;padding:16px 20px;border-radius:10px;
 background:#1b1b1e;border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 0 #0b0b0d,0 14px 24px -12px #000;
 opacity:0;transform:translateX(-70px) rotate(-3deg);transition:opacity .5s calc(var(--i)*.22s),transform .9s var(--spring) calc(var(--i)*.22s),border-color .3s,background .3s}
.f2-in:nth-child(odd){margin-right:30px}.f2-in:nth-child(even){margin-left:30px}
.f2.in .f2-in{opacity:1;transform:none}
.f2-op{font:500 22px Poppins,sans-serif;color:#fd4533}
.f2-in b{font:700 24px Poppins,Pretendard,sans-serif;color:#fff;letter-spacing:-.02em}
.f2-l{font-size:15px;color:#d6d6da}
.f2-in.hl{border-color:#fd4533;background:#241715}
.f2-mid{position:relative;align-self:stretch;display:grid;place-items:center;min-height:240px}
.f2-beam{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.f2-beam path{fill:none;stroke:rgba(253,69,51,.6);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1s ease .85s}
.f2.in .f2-beam path{stroke-dashoffset:0}
.f2-ai{position:relative;z-index:1;width:116px;height:116px;display:grid;place-items:center}
.f2-x{position:absolute;left:50%;top:-38px;transform:translateX(-50%);font:300 30px Poppins,sans-serif;color:#fff;opacity:0;transition:opacity .4s 1s}
.f2.in .f2-x{opacity:1}
.f2-core{width:94px;height:94px;border-radius:50%;display:grid;place-content:center;text-align:center;
 background:radial-gradient(circle at 35% 30%,#ff8a72,#fd4533 45%,#a42414);box-shadow:0 0 0 7px rgba(253,69,51,.13),0 0 55px rgba(253,69,51,.55);
 opacity:0;transform:scale(.4);transition:transform .8s var(--spring) 1.05s,opacity .4s 1.05s}
.f2.in .f2-core{opacity:1;transform:none}
.f2-core b{font:800 27px/1 Poppins,sans-serif;color:#fff}.f2-core span{font-size:11px;color:#fff;margin-top:5px}
.f2-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(253,69,51,.75);opacity:0;transition:opacity .6s 1.3s;animation:f2spin 10s linear infinite}
.f2.in .f2-ring{opacity:1}
@keyframes f2spin{to{transform:rotate(360deg)}}
.f2-out{display:flex;align-items:center;gap:18px}
.f2-eq{font:300 42px Poppins,sans-serif;color:#fff;opacity:0;transition:opacity .5s 1.6s}
.f2.in .f2-eq{opacity:1}
.f2-res{flex:1;min-width:0;padding:28px 26px;border-radius:16px;background:#fd4533;color:#fff;box-shadow:0 30px 70px -30px rgba(253,69,51,.85);
 opacity:0;transform:translateY(22px) scale(.95);transition:opacity .6s 1.7s,transform .9s var(--spring) 1.7s}
.f2.in .f2-res{opacity:1;transform:none}
.f2-res-t{font-size:clamp(24px,2.3vw,34px);font-weight:800;line-height:1.25;letter-spacing:-.04em;margin:0;color:#fff}
.f2-bar{display:flex;gap:3px;height:14px;margin-top:24px;border-radius:7px;background:rgba(0,0,0,.2);overflow:hidden}
.f2-seg{flex:none;width:0;height:100%;background:rgba(255,255,255,.55);transition:width .5s ease calc(2.1s + var(--i)*.18s),background .3s}
.f2.in .f2-seg{width:10%}
.f2-seg.hl{background:#111}
.f2-boost{flex:1;height:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) 2.95s}
.f2.in .f2-boost{transform:scaleX(1)}
.f2-legend{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:#fff}
@media (max-width:820px){
 .f2-head{display:block}.f2-hint{margin-top:8px}
 .f2-grid{grid-template-columns:1fr;gap:16px}
 .f2-in{grid-template-columns:20px 84px minmax(0,1fr);padding:14px 16px}.f2-in b{font-size:19px}.f2-l{font-size:14px}
 .f2-in:nth-child(n){margin:0}
 .f2-mid{min-height:150px}.f2-beam{display:none}
}
@media (prefers-reduced-motion:reduce){.f2 *{transition:none!important}}

/* ── Situation deck: auto-roll progress ── */
.situation-deck{position:relative}
.deck-autobar{height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin-top:18px}
.deck-autobar i{display:block;height:100%;width:100%;background:#fd4533;transform:scaleX(0);transform-origin:left}
.deck-autobar.run i{animation:deckbar 3.6s linear forwards}
.deck-autobar.paused i{animation-play-state:paused}
@keyframes deckbar{to{transform:scaleX(1)}}

/* ── Services: three stone monoliths, clearly different from the glass cards around them ── */
#services .card.glass{background:linear-gradient(105deg,rgba(11,11,13,.97) 0%,rgba(11,11,13,.92) 46%,rgba(11,11,13,.74) 100%),url(img/gen/brick-surface.webp) 30% 30%/cover!important;
 border:0!important;border-radius:26px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 box-shadow:inset 0 4px 0 var(--rail,#fd4533),inset 0 0 0 1px rgba(255,255,255,.09),0 60px 120px -50px #000!important;overflow:hidden}
#services .card.c-studio{--rail:#fd4533}
#services .card.c-ads{--rail:#ffffff;background-position:0 0,70% 70%!important}
#services .card.c-desk{--rail:#8d8d95;background-position:0 0,90% 15%!important}
#services .card.glass::before{content:attr(data-wm)!important;display:block!important;position:absolute;inset:auto clamp(20px,3vw,44px) -.16em auto;padding:0;
 -webkit-mask:none!important;mask:none!important;background:none!important;z-index:0;pointer-events:none;
 font:800 clamp(110px,14vw,230px)/1 Poppins,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.09)}
#services .card.c-studio::before{-webkit-text-stroke-color:rgba(253,69,51,.22)}
#services .card .en2{font-size:22px!important}
#services .card .no{color:var(--rail)!important}
#services .card .top .motion-icon{color:var(--rail)}
@media (max-width:820px){#services .card.glass{border-radius:20px!important}#services .card.glass::before{font-size:96px}}

/* ── Value chain: white cards flip in one after another (red bars removed) ── */
.chain-line{display:none!important}
.chain{perspective:1400px}
.chain .st.glass{background:#fff!important;border:0!important;border-radius:20px!important;backdrop-filter:none!important;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)!important}
.chain .st.glass::before,.chain .st.glass::after,.chain .st>.sheen{display:none!important}
.chain .st,.chain .st *{color:#141416!important}
.chain .st .n{color:#fd4533!important;font-weight:700}
.chain .st .v{color:#0b0b0c!important}
.chain .st p{color:#4a4a50!important}
.chain .st>.motion-icon{color:#fd4533!important}
.chain .st.rv{opacity:0;transform:rotateY(-100deg) translateZ(0)!important;transform-origin:0 50%;filter:none!important;
 transition:opacity .35s ease var(--fd,0s),transform 1.1s var(--spring) var(--fd,0s)!important;backface-visibility:hidden}
.chain .st.rv:nth-child(2){--fd:0s}.chain .st.rv:nth-child(3){--fd:.28s}.chain .st.rv:nth-child(4){--fd:.56s}
.chain .st.rv.in{opacity:1;transform:none!important}

/* ── Physics block: richer content and 3D-looking falling blocks ── */
.physics-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 40px 26px}
.physics-pillars>div{padding:16px 18px;border-top:2px solid rgba(255,255,255,.18)}
.physics-pillars span{font:600 12px Poppins,sans-serif;color:#fd4533;letter-spacing:.08em}
.physics-pillars b{display:block;font-size:19px;margin:6px 0 4px;color:#fff}
.physics-pillars p{font-size:14px;color:#c4c4cb;margin:0}
.physics-world{height:440px!important;perspective:900px;
 background:radial-gradient(60% 80% at 50% -10%,rgba(255,255,255,.12),transparent 60%),radial-gradient(40% 50% at 50% 110%,rgba(253,69,51,.16),transparent 70%)}
.physics-world::before{content:'';position:absolute;left:-25%;right:-25%;bottom:0;height:70%;pointer-events:none;
 background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:64px 64px;
 transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(0deg,#000 20%,transparent);mask-image:linear-gradient(0deg,#000 20%,transparent)}
.physics-tag{z-index:1}
.physics-tag.t-white{box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 7px 0 #a9a9b0,0 22px 26px -12px rgba(0,0,0,.85)!important}
.physics-tag.t-key{box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 7px 0 #a0261a,0 22px 26px -12px rgba(0,0,0,.85)!important}
.physics-tag.t-line{box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 7px 0 #000,0 7px 0 1px rgba(255,255,255,.5),0 22px 26px -12px rgba(0,0,0,.85)!important}
@media (max-width:820px){.physics-pillars{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 22px 18px}.physics-world{height:420px!important}}

/* ── Spacing: roadmap → process ── */
#growth .grow-in{padding-bottom:40px!important}
#growth .hl{margin-bottom:0!important}
#growth .curve-v19{margin-top:24px!important}
#process .proc-in{padding-top:56px!important}

/* ── Mission → Vision: one continuous wall, the light grows from a seam into a burst ── */
#values .mv.mv-v19{gap:0!important}
.mv-v19 .mv-card:first-child{border-radius:28px 28px 0 0!important;border-bottom:0!important}
.mv-v19 .mv-card.mv-alt{border-radius:0 0 28px 28px!important;border-top:1px solid rgba(255,255,255,.05)!important;align-items:flex-start;text-align:left}
.mv-v19 .mv-card:first-child .mv-bg{background-position:70% 100%;transform-origin:70% 100%}
.mv-v19 .mv-alt .mv-bg,.mv-v19 .mv-alt.in .mv-bg{background:url(img/gen/mv-burst.jpg) 70% 0/cover no-repeat;transform:scale(1.08);transform-origin:70% 0}
.mv-v19 .mv-alt.in .mv-bg{transform:scale(1)}
.mv-v19 .mv-alt::after{background:linear-gradient(90deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.7) 36%,rgba(5,5,6,.06) 68%,rgba(5,5,6,.2)),linear-gradient(0deg,rgba(5,5,6,.5),transparent 40%)!important}
.mv-v19 .mv-alt .manifesto-label::before{margin-left:0!important}
.mv-v19 .mv-alt .mv-word{left:auto!important;right:clamp(24px,4vw,56px)}
.mv-v19 .mv-card:first-child::after{background:linear-gradient(90deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.74) 36%,rgba(5,5,6,.12) 68%,rgba(5,5,6,.3))!important}
@media (max-width:820px){.mv-v19 .mv-card:first-child{border-radius:22px 22px 0 0!important}.mv-v19 .mv-card.mv-alt{border-radius:0 0 22px 22px!important}}
#growth .curve-v19{height:auto!important;min-height:0!important;max-height:none!important;display:block!important;padding:0!important}
#growth .phs{margin-top:28px!important}