/* Main page only (src/pages/main.html -> dist/index.html): hero globe and numbers, tracks, core technology row, video slot, solutions carousel, partner logos.
   .lbl and .h2-sub live in components.css.
   Source of values: Main.dc.html design mockup (desktop 1920) within design-rules.md */

/* Card rows that run to the right screen edge start where .inner starts */
.tech{--edge:max(var(--gutter),calc((100% - 1600px) / 2))}

/* ---------- Hero ---------- */
/* Hero kicker column, aurora and globe canvas. Same motif as the company hero, but the company hero is not final:
   kept here (not in components.css) so the two can change separately. */
/* Type order: headline, then lead (its first phrase in white), then buttons; the kicker is a label beside the headline's first line */
.hero-grid{position:relative;display:grid;grid-template-columns:420px minmax(0,1fr);align-items:start}
.hero-kicker{display:flex;align-items:baseline;gap:8px;font-family:Sora,sans-serif;font-size:20px;font-weight:500;letter-spacing:-.005em;color:rgba(255,255,255,.82);padding-top:calc(min(5.21vw,100px) * .9 - 22px)}
.hero-kicker i{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block}
.hero-copy{container-type:inline-size;display:flex;flex-direction:column;gap:40px}
.hero-copy p{margin:0;font-size:20px;line-height:1.7;color:rgba(255,255,255,.72)}
.hero .hero-kicker,.hero .hero-copy p{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .45s,transform 1s var(--ease) .45s}
.hero.ready .hero-kicker,.hero.ready .hero-copy p{opacity:1;transform:none}
.aur-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Blob color comes from the markup (--c) */
.aur{position:absolute;border-radius:50%;background:var(--c);filter:blur(130px);mix-blend-mode:screen;will-change:transform}
/* Phones, tablets and touch screens: still aurora and no breathing glow on "더보기" (battery; components.css does the same for page heroes).
   The blobs are soft radial gradients there instead of a blur: iOS Safari blurred them on the CPU (blur + blend mode)
   and froze the page for about 4 seconds at every repaint. Scaled up to cover the blur's spread */
@media (max-width:1179px),(pointer:coarse){
  .aur,.why .aur{animation:none!important;will-change:auto;filter:none;mix-blend-mode:normal;background:radial-gradient(closest-side,var(--c) 25%,transparent);transform:scale(1.5)}
  .why .aur{transform:scale(1.3)}
  .sol-more{animation:none!important}
}
.globe{position:absolute;left:0;top:0;pointer-events:none}
.mh :focus-visible{outline-color:#fff}
.mh-aur{bottom:auto;height:1350px;-webkit-mask-image:linear-gradient(#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 62%,transparent 100%)}
.mh-dots{position:absolute;left:29%;top:346px;width:1700px;height:1700px;border-radius:50%;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.55) 1.1px,transparent 1.4px);background-size:15px 15px;-webkit-mask-image:radial-gradient(circle at 60% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(circle at 60% 40%,#000 0%,transparent 70%);pointer-events:none;transition:opacity .6s var(--ease)}
.mh-dots.off{opacity:0}
.mh-top{position:relative;min-height:996px;padding:236px var(--gutter) 160px}
.hero .mh-title{display:flex;flex-direction:column;font-family:Sora,sans-serif;font-weight:400;font-size:clamp(46px,5.21vw,100px);font-size:clamp(34px,min(5.21vw,11.6cqi),100px);line-height:1.06;letter-spacing:-.035em}
/* Korean headline: Pretendard (Sora has no Hangul). Sized by the copy column so the longest line (about 8.6em) never wraps */
.hero .mh-title-ko{font-family:Pretendard,sans-serif;font-weight:600;font-size:clamp(34px,min(5vw,10.8cqi),96px);line-height:1.2;letter-spacing:-.03em;word-break:keep-all}
.hero .mh-title+.mh-lead{max-width:600px;margin-top:4px;text-wrap:pretty}
/* Rotating first line (main.js rotate): letters blur in one by one */
.hl-rot,.hl-c{display:inline-block}
.mh-acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .6s,transform 1s var(--ease) .6s}
.hero.ready .mh-acts{opacity:1;transform:none}
.btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:500;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.8);color:#fff}
/* SCROLL cue sits near the bottom of the first screen, whatever the screen height (never below the intro block) */
.mh-top .scroll-cue{bottom:auto;top:min(calc(100vh - 180px),calc(100% - 140px));top:min(calc(100svh - 180px),calc(100% - 140px))}

/* Numbers */
/* One full screen (the section snap stops here), content centred in it */
.mh-num{position:relative;min-height:100vh;min-height:100svh;padding:110px var(--gutter) 140px;display:flex;flex-direction:column;justify-content:center}
.mh-num>.inner{width:100%}
/* Label tucked close to the title, more air before the prose; the prose's closing sentence is the point, in white */
.num-head{display:flex;flex-direction:column;max-width:520px}
.num-head .lbl{margin-bottom:14px;color:rgba(255,255,255,.82)}
.num-head .h2{margin-bottom:22px}
.h2-num{font-size:36px}
.num-head p{margin:0;font-size:20px;line-height:1.75;color:rgba(255,255,255,.7)}
.num-head p strong{font-weight:500;color:#fff}
.ncards{list-style:none;margin:104px 0 0;padding:0 0 0 23%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
/* Type order inside a card: the number leads by far, then the label, then the unit, then the note.
   The number is sized from the card width (cqi) so the widest one (20,000 + unit) just fits on one line. */
.nc{container-type:inline-size;min-height:270px;padding:30px 24px 26px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column}
/* Phones, tablets and touch screens: no blur over the globe (iOS re-blurs every card on every globe frame); a darker glass instead */
@media (max-width:1179px),(pointer:coarse){.nc{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,32,42,.72)}}
.nc.reveal{transform:translateY(56px);transition-duration:1s}
.nc.reveal.in{transform:none}
.nc:nth-child(2){margin-top:56px;transition-delay:.15s}
.nc:nth-child(3){margin-top:16px;transition-delay:.3s}
.nc:nth-child(4){margin-top:72px;transition-delay:.45s}
.nc h3{margin:0 0 32px;font-size:16px;font-weight:500;line-height:1.45;letter-spacing:-.01em;color:rgba(255,255,255,.78)}
.nc .v{--n:48px;--n:clamp(30px,calc((100cqi - 36px) / 3.5),88px);margin:auto 0 0;display:flex;align-items:stretch;column-gap:6px;white-space:nowrap}
.nc .v b{font-family:Sora,sans-serif;font-weight:300;font-size:var(--n);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
/* + on top, unit word at the foot of the number; the bottom padding puts the unit on the number's baseline */
.nc .u{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(var(--n) * .11 - 2.6px);font-size:16px;font-weight:500;line-height:1;color:rgba(255,255,255,.78)}
.nc .u i{flex:1;font-style:normal;font-family:Sora,sans-serif;font-weight:300;font-size:clamp(12px,calc(var(--n) * .45),30px);line-height:.8;color:#fff}
.nc small{margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.5;color:rgba(255,255,255,.55)}

/* ---------- How We Build: five-step flow, track ranges, inquiry cards ---------- */
/* One full screen: the title, then a glass panel with the steps and the two track bars, then one inquiry button */
/* .why-pin is made taller by main.js; the section sticks to the screen top while its timeline plays (taller sections run on below the screen) */
.why-pin{position:relative;overflow-anchor:none}
.why{position:sticky;top:0;overflow:hidden;background:linear-gradient(100deg,#F4F9E8 0%,#F2F5F6 45%,#E6F2F6 100%);min-height:100vh;min-height:100svh;padding:88px var(--gutter) 72px;display:flex;flex-direction:column;justify-content:center}
.why>.inner{position:relative;width:100%}
.why .aur{mix-blend-mode:normal;filter:blur(70px)}
.why-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.why-head .lbl{margin-bottom:0}
.why-head p{margin:6px 0 0;max-width:780px;font-size:18px;line-height:1.75;color:var(--ink-2);text-wrap:balance}
/* Scroll-linked timeline (main.js, .stage): the title starts alone in the middle of the screen (--wd) and its letters light up
   one by one (.ch opacity); then it rises to its place (--wm) as the label fades in (--wl) and the paragraph fades up (--wp), 0..1.
   The flow and the button are never left half shown: past one point (.cards-in) they play a timed entrance in full */
.why.stage .why-head{transform:translateY(calc(var(--wd,0px) * (1 - var(--wm,0))))}
.why.stage .why-head .lbl{opacity:var(--wl,0)}
.why.stage .why-head p{opacity:var(--wp,0);transform:translateY(calc((1 - var(--wp,0)) * 16px))}
.why.stage .bld,.why.stage .why-cta{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.why.stage.cards-in .bld,.why.stage.cards-in .why-cta{opacity:1;transform:none}
.why.stage.cards-in .why-cta{transition-delay:.4s}
/* Inside the panel the steps come in left to right (--i), then the track bars draw out from the left */
.why.stage .bld-st{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.why.stage.cards-in .bld-st{opacity:1;transform:none;transition-delay:calc(.15s + var(--i) * .08s)}
.why.stage .bld-rg{clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .8s var(--ease)}
.why.stage.cards-in .bld-rg{clip-path:inset(0 0 0 0 round 999px)}
.why.stage.cards-in .bld-rg-a{transition-delay:.5s}
.why.stage.cards-in .bld-rg-b{transition-delay:.65s}
.why-head .h2 em{font-style:normal;color:var(--teal)}
/* SCROLL cue, bottom center, while the title types; it fades out as the title rises (only with the timeline) */
.why .scroll-cue{--cue-track:rgba(11,31,41,.16);left:50%;flex-direction:column;gap:10px;color:var(--ink-2);opacity:0;transform:translateX(-50%);pointer-events:none}
.why .scroll-cue i::after{background:var(--teal)}
.why.stage .scroll-cue{opacity:calc(1 - var(--wm,0))}
.h2.type .ch{opacity:.12}
.tracks{display:flex;flex-direction:column;gap:20px;margin-top:48px}
.bld{--gap:16px;padding:36px;border-radius:28px;background:linear-gradient(155deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.22) 100%);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
/* Five equal columns; the track bars below use the same columns so each bar sits under the steps it covers */
.bld-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
/* The line that joins the step numbers, first to last (column centres) */
.bld-steps::before{content:"";position:absolute;top:15px;left:calc((100% - 4 * var(--gap)) / 10);right:calc((100% - 4 * var(--gap)) / 10);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--deep),var(--teal));opacity:.22}
.bld-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.bld-st i{position:relative;width:32px;height:32px;margin-bottom:14px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:Sora,sans-serif;font-style:normal;font-size:13px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--teal)}
.bld-st b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.bld-st span{font-size:15px;line-height:1.5;color:var(--ink-2)}
.bld-ranges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);row-gap:10px;margin-top:28px}
.bld-rg{min-width:0;height:44px;margin:0;padding:0 16px 0 8px;border-radius:999px;color:#fff;display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.3}
/* A is the solid one (the whole job, one team), toned a little toward slate so it sits in the aurora; B is teal-tinted glass with dark text,
   so the only solid teal left in the section is the inquiry button */
.bld-rg-a{grid-column:1/-1;background:color-mix(in srgb,var(--deep) 86%,var(--ink-2))}
.bld-rg-b{grid-column:3/-1;background:color-mix(in srgb,var(--teal) 12%,rgba(255,255,255,.55));border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);color:var(--deep)}
.bld-rg i{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-family:Sora,sans-serif;font-style:normal;font-size:13px;font-weight:600}
.bld-rg b{flex:none;font-weight:600}
.bld-rg span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.78)}
.bld-rg em{flex:none;margin-left:auto;font-family:Sora,sans-serif;font-style:normal;font-size:13px;font-weight:300;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72)}
.bld-rg-b i{background:var(--teal);color:#fff}
.bld-rg-b span{color:var(--ink-2)}
.bld-rg-b em{color:var(--chip-ink)}
/* One inquiry button under the panel, with a short note in front */
.why-cta{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:12px}
.why-cta p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}

/* ---------- Core technology: card row ---------- */
/* Fills one screen: the section is at least the viewport tall and the cards grow with the screen height (714px tall at 1920x1080, 520px to 800px; width is .74 of the height).
   Photo cards on the plain mist background: the photo fills the card, a dark wash from the bottom carries the white text.
   The row is its own sideways scroller (scrollbar hidden, snaps to card starts); the page scroll passes by.
   main.js adds mouse drag, the DRAG cursor and the bar at the top right (click or drag) */
.tech{position:relative;overflow:hidden;background:var(--mist);min-height:100vh;min-height:100svh;padding:72px 0 48px;display:flex;flex-direction:column;justify-content:center}
.tech-in{position:relative}
.tech .sec-head{padding:0 var(--edge);margin-bottom:40px;gap:80px}
/* 8px on top keeps the focus ring of the first row line inside the scroller. .drag (main.js, while dragging or gliding) turns the snap off */
.tech-row{position:relative;overflow-x:auto;overflow-y:hidden;margin-top:-8px;padding:8px 0 56px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-user-select:none;user-select:none}
.tech-row::-webkit-scrollbar{display:none}
.tech-row.drag{scroll-snap-type:none;cursor:grabbing}
.tech-row.cur,.tech-row.cur *{cursor:none}
.tech-row img{-webkit-user-drag:none}
.tech-track{list-style:none;margin:0;padding:0 var(--edge);display:flex;gap:24px;width:max-content}
.tc{--th:clamp(520px,calc(100svh - 366px),800px);position:relative;isolation:isolate;flex:0 0 calc(var(--th) * .74);height:var(--th);border-radius:24px;overflow:hidden;background:#06202B;box-shadow:var(--shadow);color:#fff;scroll-snap-align:start;transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .6s var(--ease)}
.tc:hover{box-shadow:0 24px 48px rgba(11,31,41,.16)}
/* Delivery photo over the whole card (or the grid placeholder); light shade over all and a dark wash from the bottom for the text */
.tc-img{position:absolute;inset:0;z-index:-1}
.tc-img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform .8s var(--ease)}
.tc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,18,26,.18) 0%,rgba(3,18,26,.06) 30%,rgba(3,18,26,.45) 58%,rgba(3,18,26,.92) 100%)}
.tc:hover .tc-img img{transform:scale(1.04)}
/* Card number: thin white ring at the top left */
.tc-no{position:absolute;top:28px;left:28px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.85);display:grid;place-items:center;font-family:Sora,sans-serif;font-size:16px;font-weight:300;line-height:1}
/* Bottom text: field (lime), technology as the title, case caption */
.tc-txt{position:absolute;left:0;right:0;bottom:0;padding:0 30px 32px;display:flex;flex-direction:column;gap:10px}
.tc-fd{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--lime)}
.tc h3{margin:0;font-family:Sora,Pretendard,sans-serif;font-size:30px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.tc p{margin:4px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:rgba(255,255,255,.86);text-wrap:pretty}
/* Card with a delivery story: the whole card opens story-<id>.html, the ring arrow at the top right shows it and fills white on hover */
.tc-go{position:absolute;inset:0;border-radius:inherit}
.tc-go i{position:absolute;top:28px;right:28px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);color:#fff;transition:background .6s var(--ease),color .6s var(--ease)}
.tc-go svg{transition:transform .6s var(--ease)}
.tc:hover .tc-go i{background:#fff;color:var(--ink)}
.tc:hover .tc-go svg{transform:translate(2px,-2px)}
.tc:has(.tc-go:focus-visible){outline:2px solid var(--teal);outline-offset:4px}
/* Controls at the top right of the heading row: card number and bar.
   The thumb is as wide as the visible share of the row; the bar takes a click or a drag (24px tall hit area), the thumb thickens on hover */
.tech-ctrl{flex:none;display:flex;align-items:center;gap:24px;padding-bottom:8px}
.tech-prog{display:flex;align-items:baseline;gap:6px;font-family:Sora,sans-serif;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tech-prog b{color:var(--ink);font-size:15px;font-weight:600}
.tech-bar{position:relative;width:240px;height:2px;border-radius:2px;background:var(--track);cursor:pointer;touch-action:none}
.tech-bar::before{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
.tech-bar i{position:absolute;left:0;top:50%;width:30%;height:2px;border-radius:4px;background:var(--teal);transform:translateY(-50%);transition:height .3s var(--ease)}
.tech-bar:hover i,.tech-bar.drag i{height:6px}
.tech-bar.drag{cursor:grabbing}
/* DRAG cursor: a see-through ring that follows the mouse over the row (main.js sets translate, only with a mouse), shrinks a little while pressed.
   Line and text in the brand teal; a light frosted inside keeps it readable on the dark photos too.
   Position is the translate property and size the scale property: scale is applied around the ring centre, the position stays */
.tech-cur{position:fixed;left:0;top:0;z-index:30;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:2px solid var(--teal);background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 28px rgba(0,55,76,.22);color:var(--teal);display:flex;align-items:center;justify-content:center;gap:4px;font-family:Sora,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;pointer-events:none;opacity:0;scale:.4;transition:opacity .3s var(--ease),scale .3s var(--ease)}
.tech-cur.on{opacity:1;scale:1}
.tech-cur.on.down{scale:.82}

/* ---------- Video -> Solutions scene ----------
   --p 0..1: the card (1600 wide, 40px corners, white margin) grows to the full screen. --q 0..1: shade up, caption out.
   The stage is pinned (sticky) for the whole scene, so it is also the Solutions background. */
.vs{--p:0;--q:0;--ar:.4425;position:relative;background:#fff}
.vs-bg{position:absolute;inset:0}
.vs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.vbox{--h0:min(calc((100vw - var(--gutter) * 2) * var(--ar)),calc(100svh - 192px));position:absolute;left:calc(var(--gutter) * (1 - var(--p)));right:calc(var(--gutter) * (1 - var(--p)));top:calc((100svh - var(--h0)) / 2 * (1 - var(--p)));bottom:calc((100svh - var(--h0)) / 2 * (1 - var(--p)));border-radius:calc(40px * (1 - var(--p)));overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--night)}
.vmedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;padding:0;transform:scale(calc(1.06 - .06 * var(--p)))}
.vbox::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 50%,rgba(0,118,152,.35),rgba(3,18,26,.2) 60%);pointer-events:none}
.vshade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,18,26,.92) 0%,rgba(3,18,26,.55) 60%,rgba(3,18,26,.75) 100%);opacity:var(--q)}
.vtxt{position:relative;z-index:2;padding:0 16px;text-align:center;font-family:Sora,sans-serif;font-size:clamp(26px,3.02vw,58px);font-weight:500;letter-spacing:-.01em;color:rgba(255,255,255,.88);opacity:calc(1 - var(--q))}
.vtxt span{color:var(--lime)}
.vs-run{position:relative;height:100vh;height:100svh}

/* ---------- Solutions carousel ---------- */
/* .sol-pin is made taller by main.js (one screen step per card); the section sticks while the cards step through */
.sol-pin{position:relative;overflow-anchor:none}
.sol{position:sticky;top:var(--sol-top,0px);overflow:hidden;color:#fff;padding-bottom:140px}
/* Scroll-linked entrance (main.js): --ri title block, --rc cards and button, 0..1. Without the script both stay 1 */
.sol-side{opacity:var(--ri,1);transform:translateY(calc((1 - var(--ri,1)) * 40px))}
.sol-view,.sol-all{opacity:var(--rc,1);transform:translateY(calc((1 - var(--rc,1)) * 40px))}
.sol :focus-visible{outline-color:#fff}
.sol-in{position:relative;display:grid;grid-template-columns:470px minmax(0,1fr);column-gap:130px;padding:120px 0 0 var(--gutter)}
.sol-side{display:flex;flex-direction:column;gap:28px;padding-top:130px}
.sol-title{margin:0;font-family:Sora,sans-serif;font-size:52px;font-weight:400;letter-spacing:-.02em;line-height:1.2}
.sol-side p{margin:0;font-size:18px;line-height:1.75;font-weight:500;color:rgba(255,255,255,.9);text-wrap:pretty}
.sol-btns{display:flex;gap:12px;padding-top:24px}
.rbtn{width:88px;height:88px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .6s var(--ease),border-color .6s var(--ease)}
.rbtn:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.8)}
.rbtn:disabled{opacity:.35;cursor:default}
.sol-view{height:640px;overflow:hidden}
.sol-track{--step:432px;list-style:none;margin:0;padding:0;display:flex;gap:32px;align-items:flex-start;transform:translateX(calc(var(--i,0) * var(--step) * -1));transition:transform .6s var(--ease)}
/* Card size and colors only; the inside (rhythm, type, link) is components.css "Solution card", shared with the solutions page */
.sc{flex:0 0 400px;height:540px;border-radius:24px;background:rgba(6,24,32,.62);border:1px solid rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:margin-top .6s var(--ease),background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.sc.d1{margin-top:40px}
.sc.d2{margin-top:80px}
.sc.d3{margin-top:120px}
.sc .chip{align-self:flex-start;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.sc .slc-no{color:#35B7D9;transition:color .6s var(--ease)}
.sc p{color:rgba(255,255,255,.78)}
.sc .slc-img{background:#06202B}
.sc .slc-go{color:#fff}
.sc:hover .slc-go{color:var(--lime)}
.sc.on{background:#fff;border-color:#E1E7EA;color:var(--ink)}
.sc.on .chip{background:var(--chip-bg);color:var(--chip-ink);border-color:var(--chip-bg)}
.sc.on .slc-no{color:var(--teal)}
.sc.on p{color:var(--ink-2)}
.sc.on .slc-go{color:var(--teal)}
.sc.on:hover .slc-go{color:var(--deep)}
/* "더보기" card after the last solution: see-through with only a white line, fanned photos, title, the names of the cards on the Solutions page and a ring arrow.
   The title link covers the card; on hover the line and ring brighten and the arrow moves */
.sc.sc-more{background:transparent;border-color:rgba(255,255,255,.5);-webkit-backdrop-filter:none;backdrop-filter:none;align-items:center;justify-content:center;text-align:center}
.scm-ic{flex:none;margin-top:24px;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:background .6s var(--ease),border-color .6s var(--ease)}
.scm-ic svg{width:22px;height:22px;transition:transform .6s var(--ease)}
.sc-more h3{margin-top:24px}
.scm-go{color:#fff}
.scm-go:hover{color:#fff}
.scm-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.scm-go:focus-visible{outline:none}
.sc-more:has(.scm-go:focus-visible){outline:2px solid #fff;outline-offset:4px}
.sc-more p{flex:none;font-size:15px;color:rgba(255,255,255,.72)}
.sc-more:hover{border-color:rgba(255,255,255,.9)}
.sc-more:hover .scm-ic{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.9)}
.sc-more:hover .scm-ic svg{transform:translateX(4px)}
/* Deck: three more line cards behind it, each 10px further right and a little smaller (origin: right edge), so four cards stack.
   Each one shows only the strip beyond the card in front (clip), so no line runs through the see-through card. Hover fans them out */
.scm-l{--x:10px;position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(255,255,255,var(--a));transform-origin:100% 50%;transform:translateX(calc(var(--x) * var(--k))) scale(calc(1 - var(--k) * .04));clip-path:inset(-2px -2px -2px calc(100% - var(--x) - 1px));pointer-events:none;transition:transform .6s var(--ease),clip-path .6s var(--ease),border-color .6s var(--ease)}
.scm-l1{--k:1;--a:.38}
.scm-l2{--k:2;--a:.26}
.scm-l3{--k:3;--a:.16}
.sc-more:hover .scm-l{--x:16px;border-color:rgba(255,255,255,calc(var(--a) + .2))}
/* Photos of the cards on the Solutions page, fanned above the title (the last one in front); hover spreads them */
.scm-pics{position:relative;width:100%;aspect-ratio:16/10;margin-top:24px}
.scm-pics img{position:absolute;left:14%;top:10%;width:72%;height:80%;object-fit:cover;border-radius:12px;box-shadow:0 10px 24px rgba(3,18,26,.35);transition:transform .6s var(--ease)}
.scm-pics img:nth-child(1){transform:translate(-16%,4%) rotate(-8deg)}
.scm-pics img:nth-child(2){transform:translate(16%,4%) rotate(8deg)}
.sc-more:hover .scm-pics img:nth-child(1){transform:translate(-24%,2%) rotate(-11deg)}
.sc-more:hover .scm-pics img:nth-child(2){transform:translate(24%,2%) rotate(11deg)}
.sc-more:hover .scm-pics img:nth-child(3){transform:translateY(-5%)}
/* In front (last step, .on): stays see-through, the line brightens and the ring fills white (the other cards' white face) */
.sc.sc-more.on{border-color:rgba(255,255,255,.9);color:#fff}
.sc-more.on p{color:rgba(255,255,255,.72)}
.sc-more.on .slc-no{color:#35B7D9}
.sc-more.on .scm-ic{background:#fff;border-color:#fff;color:var(--ink)}
/* Label row: "+More" where the other cards have their number (right) */
.scm-top{position:absolute;top:32px;left:32px;right:32px;justify-content:flex-end}
.sol-all{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center}
/* "더보기": CTA to the Solutions page (all cards). Filled teal pill + arrow (design-rules.md buttons), a soft teal glow
   that breathes on the dark video so the eye finds it; hover lifts it to deep teal and pushes the arrow (components.css .btn svg) */
.sol-more{position:relative;min-width:220px;height:60px;padding:0 30px 0 34px;justify-content:space-between;gap:20px;font-size:17px;box-shadow:0 0 0 0 rgba(0,118,152,.55),0 12px 32px rgba(0,0,0,.35);animation:solMore 2.8s var(--ease) infinite}
.sol-more::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(255,255,255,.35);pointer-events:none}
.sol-more:hover{background:var(--deep)}
.sol-more svg{width:20px;height:20px}
.sol-more:hover,.sol-more:focus-visible{animation-play-state:paused}
@keyframes solMore{0%{box-shadow:0 0 0 0 rgba(0,118,152,.55),0 12px 32px rgba(0,0,0,.35)}70%,100%{box-shadow:0 0 0 16px rgba(0,118,152,0),0 12px 32px rgba(0,0,0,.35)}}

/* ---------- Partners: logo flow ----------
   Dark band that carries on from the Solutions video into the footer (--night to the footer color); a short fade softens
   the video's bottom edge (40px, above the "더보기" button). Logos keep their own colors on white tiles */
.partners{position:relative;background:linear-gradient(var(--night),#060B0E);padding:104px 0 128px}
.partners::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:40px;background:linear-gradient(rgba(3,18,26,0),var(--night));pointer-events:none}
.flows{display:flex;flex-direction:column;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%)}
.flow-wrap{overflow:hidden}
.flow{display:flex;width:max-content}
.flow-l{animation:flowL 175s linear infinite}
.flow-r{animation:flowR 138s linear infinite}
/* Real pointers only: on touch screens :hover sticks after a tap and the row would stay paused */
@media (hover:hover){.flow-wrap:hover .flow{animation-play-state:paused}}
/* Off screen the rows hold still (main.js adds .off): otherwise they keep the page busy from the first screen on (battery) */
.flows.off .flow{animation-play-state:paused}
.flow ul{list-style:none;margin:0;padding:0 16px 0 0;display:flex;gap:16px}
/* width, not flex-basis: WebKit sizes the max-content row from the item widths (the logo's 225px), which left a blank stretch after each list */
.flow li{flex:none;width:168px;height:72px;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;transition:background .6s var(--ease)}
.flow li:hover{background:#fff}
.flow li img{width:100%;height:100%;object-fit:contain}

@media (prefers-reduced-motion:reduce){
  .hero .hero-kicker,.hero .hero-copy p{opacity:1;transform:none;transition:none}
  .aur{animation:none!important}
  .mh-acts{opacity:1;transform:none;transition:none}
  .flow,.sol-more{animation:none!important}
  .sol-track,.sc,.scm-l,.scm-pics img{transition:none}
  .nc.reveal{transform:none}
}
@media (max-width:1440px){
  .hero-grid{grid-template-columns:300px minmax(0,1fr)}
  .ncards{padding-left:12%;gap:16px}
  .nc{padding:26px 22px 22px}
  .sol-in{grid-template-columns:400px minmax(0,1fr);column-gap:80px}
}
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr}
  .hero-kicker{margin-bottom:32px;padding-top:0}
  .hero .mh-title{font-size:clamp(34px,min(8vw,11.6cqi),88px)}
  .hero .mh-title-ko{font-size:clamp(34px,min(7.6vw,10.8cqi),84px)}
  .mh-top{min-height:0;padding-bottom:180px}
  /* One column: the cue shares the copy's left edge, so it sits in the bottom padding under the buttons instead of over them */
  .mh-top .scroll-cue{top:auto;bottom:56px}
  /* Two columns: every card takes the tallest card's height (a label or note wrapping in one card made the others look short) */
  .ncards{padding-left:0;margin-top:56px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch}
  .nc,.nc:nth-child(n){margin-top:0;min-height:0}
  .bld{padding:28px}
  .bld-st b{font-size:18px}
  .sol-in{grid-template-columns:1fr;row-gap:56px;padding-top:110px}
  .sol-side{padding:0 var(--gutter) 0 0}
  .sol-view{height:620px}
}
@media (max-width:720px){
  .scm-top{top:24px;left:20px;right:20px}
  .hero-copy{gap:28px}
  /* Bigger headline on phones: the long last line splits evenly (built by / one team.) instead of shrinking to fit */
  .hero .mh-title{font-size:clamp(34px,13.5cqi,52px)}
  .hero .mh-title .ln>span{text-wrap:balance}
  /* Korean: every line stays whole on phones (360px still fits) */
  .hero .mh-title-ko{font-size:clamp(32px,11cqi,48px);line-height:1.25}
  .hero-copy p{font-size:17px}
  .mh-lead br:last-of-type,.num-head p br{display:none}
  /* Kicker sits just above the headline as its label */
  .hero-kicker{font-size:16px;line-height:1;margin-bottom:14px}
  .num-head .h2{margin-bottom:16px}
  .globe{opacity:.55}
  .mh-top{padding:140px var(--gutter) 120px}
  .mh-num{padding-top:24px;padding-bottom:88px}
  .h2-num{font-size:28px}
  .ncards{gap:12px;margin-top:40px}
  .nc{padding:20px 18px 18px;border-radius:16px}
  .nc h3{margin-bottom:20px;font-size:14px}
  .nc .v{--n:clamp(24px,calc((100cqi - 26px) / 3.5),56px);column-gap:4px}
  .nc .u{font-size:13px}
  .nc small{margin-top:14px;padding-top:10px;font-size:12px}
  .why{padding:88px var(--gutter)}
  .why-head{align-items:flex-start;text-align:left}
  .why-head p{font-size:16px}
  /* Steps run top to bottom along a line on the left; the bars stack and keep the step numbers they cover */
  .tracks{margin-top:40px;gap:16px}
  .bld{padding:24px 20px;border-radius:24px}
  .bld-steps{grid-template-columns:minmax(0,1fr);gap:20px}
  .bld-steps::before{top:16px;bottom:16px;left:15px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--deep),var(--teal))}
  .bld-st{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:normal;text-align:left}
  .bld-st i{grid-row:1/3;margin:0}
  .bld-st b{font-size:17px}
  .bld-ranges{grid-template-columns:minmax(0,1fr);margin-top:24px}
  .bld-rg-a,.bld-rg-b{grid-column:auto}
  .bld-rg span{display:none}
  .why-cta{flex-direction:column;align-items:flex-start;gap:16px;margin-top:8px}
  .why-cta p{font-size:15px}
  .tech{padding:88px 0}
  .tech .sec-head{margin-bottom:40px;gap:20px}
  .tech-row{padding-bottom:48px}
  .tech-track{gap:16px}
  /* Narrower than the screen so about 70px of the next card shows: it tells the row moves sideways */
  .tc{flex-basis:min(270px,70vw);height:440px;border-radius:20px}
  .tc-no,.tc-go i{top:20px;width:38px;height:38px;font-size:14px}
  .tc-no{left:20px}
  .tc-go i{right:20px}
  .tc-txt{padding:0 22px 24px;gap:8px}
  .tc h3{font-size:24px}
  .tc p{font-size:14px}
  .tech-ctrl{gap:16px;padding-bottom:0}
  .tech-bar{width:120px}
  /* Phones: no video scene (HARDWARE × SOFTWARE, no grow, no run-in). The video is already full screen with its shade
     and stays as the Solutions background, which follows the tech row directly
     (!important beats the --p / --q that main.js writes on the element) */
  .vs{--p:1!important;--q:1!important;background:var(--night)}
  .vtxt,.vs-run{display:none}
  .nc.reveal{transition-duration:.5s}
  .sol{padding-bottom:40px}
  .sol-in{padding-top:88px;row-gap:40px}
  .sol-title{font-size:40px}
  .sol-side p{font-size:16px}
  .sol-btns{display:none}
  .sol-track{--step:296px;gap:16px}
  .sc{flex-basis:280px;height:440px}
  /* The desc line breaks (solutions.json \n) are set for the 400px card; the narrow card wraps on its own */
  .sc p br{display:none}
  .sc.d1{margin-top:24px}
  .sc.d2{margin-top:48px}
  .sc.d3{margin-top:72px}
  .sol-view{height:510px}
  /* Phones: the "더보기" card at the end of the row already links to the Solutions page */
  .sol-all{display:none}
  .partners{padding:72px 0 96px}
  .flows{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
  .flow li{width:132px;height:56px;padding:8px 14px;border-radius:12px}
}
@keyframes auroraA{0%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(180px,70px) scale(1.25) rotate(8deg)}100%{transform:translate(-60px,-30px) scale(.95) rotate(-6deg)}}
@keyframes auroraB{0%{transform:translate(0,0) scale(1.1) rotate(0)}50%{transform:translate(-220px,90px) scale(.9) rotate(-10deg)}100%{transform:translate(90px,-50px) scale(1.2) rotate(6deg)}}
@keyframes auroraC{0%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,-110px) scale(1.3)}100%{transform:translate(-140px,60px) scale(1.05)}}
@keyframes flowL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes flowR{from{transform:translateX(-50%)}to{transform:translateX(0)}}