/* Shared UI: header, sub navigation, footer, back to top, buttons, chips, cards, page hero shell. Every sub page.
   Source of values: docs/design-concept-main.md section 10 */

.subnav :focus-visible,.ft :focus-visible{outline-color:#fff}
.h2{margin:0;font-size:52px;line-height:1.3;font-weight:600;letter-spacing:-.025em}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px}

.sec-head .ttl{display:flex;flex-direction:column;gap:18px}
.h2-sub{font-size:44px}
/* Section label: Sora caps after a 6px dot. Teal dot on light, lime dot on dark (design-rules.md 2) */
.lbl{display:inline-flex;align-items:center;gap:10px;font-family:Sora,sans-serif;font-size:14px;font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.dark .lbl{color:rgba(255,255,255,.72)}
.dark .lbl::before{background:var(--lime)}
.btn{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 30px;border-radius:999px;font-size:16px;font-weight:600;border:0;transition:background .6s var(--ease),color .6s var(--ease)}
.btn-pri{background:var(--teal);color:#fff}
.btn-pri:hover{background:var(--deep);color:#fff}
.btn-line{background:transparent;border:1px solid var(--ink);color:var(--ink);font-weight:500}
.btn-line:hover{background:var(--ink);color:#fff}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--chip-bg);color:var(--chip-ink);white-space:nowrap}
.ph{background-color:#06202B;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.8);text-align:center;padding:0 16px}
.circ{width:56px;height:56px;border-radius:50%;border:1px solid var(--track);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.circ:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:#fff}
.circ:disabled{opacity:.35;cursor:default}
.hero{position:relative;background:var(--night);color:#fff;overflow:hidden}
.hero h1{margin:0;font-size:54px;line-height:1.32;font-weight:600;letter-spacing:-.025em}

.hero .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.hero .ln+.ln>span{transition-delay:.12s}

.hero.ready .ln>span{transform:none}

/* Photo hero (company, cs, ...): one screen on --mist with the light header, copy on the left, three photo cards on the right.
   Markup: section.hero.photo > .inner > .hero-grid > .hero-copy (h1, p, optional .btn) + .hero-pics#heroPics > figure.hp x3.
   Photos (split layout; other layouts below): A alone on the left, vertically centered; B and C stacked on the right. The block is sized so B + C fits
   one screen: width = (100vh - hero padding) x .9, at most 760px (leaves ~760px for a 60px headline line). The grid sits at the bottom of the hero so the
   bottom edge of the photos lines up with the scroll cue (bottom padding = cue bottom, 48px); the copy stays centered on the photos. Entrance on .ready, parallax --py from common.js */
.hero.photo{background:var(--mist);color:var(--ink);padding:136px var(--gutter) 48px;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end}
.hero.photo>.inner{position:relative;z-index:1;width:100%}
/* Soft aurora behind the headline (light-background version of the main hero aurora).
   Colors follow the main #service (Why IoTPLEX) aurora, lime #8FC31F > green #22A83A > teal #007698, cut into six stops (--aur-1~6).
   Each of the five menus takes two neighboring stops in menu order, so the hue walks from lime to blue across the site:
   1 company 1+2 · 2 solutions 2+3 · 3 product 3+4 · 4 rnd 4+5 · 5 cs 5+6 (the page css picks its pair; company is the default).
   --aur-a / --aur-b are the big and small blob colors, --aur-a-op / --aur-b-op their opacities. Normal blend, kept left of the photos.
   .aur-sec gives a plain section the same aurora; the page css places its two blobs (--aur-a-*, --aur-b-*: left, top, width, height) */
.hero.photo,.aur-sec{--aur-1:#8FC31F;--aur-2:#63B82A;--aur-3:#38AD35;--aur-4:#1B9E4D;--aur-5:#0E8A72;--aur-6:#007698;
  --aur-a:var(--aur-1);--aur-b:var(--aur-2);--aur-a-op:.16;--aur-b-op:.12}
.hero.photo::before,.hero.photo::after{content:"";position:absolute;border-radius:50%;filter:blur(130px);pointer-events:none;animation:heroAur 46s ease-in-out infinite alternate}
.hero.photo::before{left:calc(var(--gutter) - 220px);top:14%;width:780px;height:520px;background:var(--aur-a);opacity:var(--aur-a-op)}
.hero.photo::after{left:calc(var(--gutter) + 180px);top:52%;width:420px;height:300px;background:var(--aur-b);opacity:var(--aur-b-op);animation-duration:40s;animation-direction:alternate-reverse}
.aur-sec{position:relative;overflow:hidden;isolation:isolate}
.aur-sec::before,.aur-sec::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(130px);pointer-events:none;animation:heroAur 46s ease-in-out infinite alternate}
.aur-sec::before{left:var(--aur-a-x);top:var(--aur-a-y);width:var(--aur-a-w);height:var(--aur-a-h);background:var(--aur-a);opacity:var(--aur-a-op)}
.aur-sec::after{left:var(--aur-b-x);top:var(--aur-b-y);width:var(--aur-b-w);height:var(--aur-b-h);background:var(--aur-b);opacity:var(--aur-b-op);animation-duration:40s;animation-direction:alternate-reverse}
.hero.photo .scroll-cue{--cue-track:rgba(11,31,41,.16);color:var(--ink-2)}
.hero.photo .scroll-cue i::after{background:var(--teal)}
/* Photo block width and the copy / photo gap, shared with the flipped hero below */
.hero.photo{--pics-w:min(760px,calc((100vh - 184px) * .9));--hero-gap:80px}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--hero-gap,80px);align-items:center}
/* Flipped hero (data-flip on section.hero.photo, cs): photos on the left, copy on the right. The aurora and the scroll cue
   follow the copy column (its left edge = gutter + photo block + gap). Below 1180px the copy comes first again */
.hero.photo[data-flip] .hero-grid{grid-template-columns:auto minmax(0,1fr)}
.hero.photo[data-flip] .hero-pics{order:-1}
.hero.photo[data-flip]{--copy-x:calc(var(--gutter) + var(--pics-w) + var(--hero-gap))}
.hero.photo[data-flip]::before{left:calc(var(--copy-x) - 220px)}
.hero.photo[data-flip]::after{left:calc(var(--copy-x) + 180px)}
.hero.photo[data-flip] .scroll-cue{left:var(--copy-x)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
/* Photo hero type: 60px / 700 headline (scales down with the copy column), 22px lead */
.hero.photo h1{font-size:clamp(42px,3.75vw,60px);line-height:1.22;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.hero-copy>p{margin:0;max-width:680px;font-size:22px;line-height:1.6;letter-spacing:-.015em;color:var(--ink-2);text-wrap:pretty}
/* Lead in several sentences (company): one <p> per sentence, 14px apart instead of the 32px copy gap */
.hero-copy>p+p{margin-top:-18px}
.hero-copy>p,.hero-copy>.btn{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .5s,transform 1.2s var(--ease) .5s}
.hero.ready .hero-copy>p,.hero.ready .hero-copy>.btn{opacity:1;transform:none}
/* Hero CTA: one step up from the 16px button to sit between the 22px lead and the 17px body; same 58px height, wider sides.
   Sub page heroes only (photo heroes here, the product panel in product.css); other buttons stay 16px */
.hero.photo .hero-copy>.btn{font-size:18px;padding:0 34px}
/* Photo layouts. split (default, rnd / cs): A tall on the left, B and C stacked on the right.
   stagger (data-layout="stagger", company): three tall cards in a row, B lowest and C highest.
   Same motion in both (toss.im/company): on entrance each card rises from its own distance (--rise 80 / 120 / 160px, one after
   another) and settles slowly on a soft ease-out; while the hero scrolls away the cards lift one after another (--cy, common.js)
   and each photo drifts inside its card (--py). transform = entrance, translate = scroll lift */
.hero-pics{width:var(--pics-w);display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:center}
.hp{position:relative;margin:0;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:#DCE4E8;box-shadow:var(--shadow);opacity:0;transform:translateY(var(--rise,48px));translate:0 var(--cy,0px);transition:opacity 1.8s var(--ease) var(--d,.15s),transform 2.8s cubic-bezier(.16,1,.3,1) var(--d,.15s)}
.hp:first-child{grid-row:1 / 3}
.hp:nth-child(1){--rise:80px;--d:.2s}
.hp:nth-child(2){--rise:120px;--d:.45s}
.hp:nth-child(3){--rise:160px;--d:.7s}
.hp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(var(--py,0px));scale:1.12}
.hero.ready .hp{opacity:1;transform:none}
/* stagger runs wider inside the margins: the copy column is cut to 43% (about the 60px headline line, ~680px at 1920) and the
   gap to 48px, and the photo row takes the rest */
.hero.photo:has(.hero-pics[data-layout="stagger"]) .hero-grid{grid-template-columns:minmax(0,43%) minmax(0,1fr);gap:48px}
.hero-pics[data-layout="stagger"]{width:min(100%,calc(var(--pics-w) + 40px));justify-self:end;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
/* The stagger block is lower than split and its card bottoms are uneven, so its hero centers the content in the screen
   (split keeps the photos' bottom edge level with the scroll cue) */
.hero.photo:has(.hero-pics[data-layout="stagger"]){justify-content:center}
.hero-pics[data-layout="stagger"] .hp{grid-row:auto;aspect-ratio:9/16}
.hero-pics[data-layout="stagger"] .hp:nth-child(1){margin-top:24px}
.hero-pics[data-layout="stagger"] .hp:nth-child(2){margin-top:152px}
.hero-pics[data-layout="stagger"] .hp:nth-child(3){margin-top:-40px}
/* Headline keywords (.kw: company, R&D, CS): point color only, no hover effect */
.hero-copy .kw{color:var(--teal)}
/* Line cue. Shared motion of the hero scroll cue (down) and the back to top button (up). Markup: src/partials/cue.mjs */
.cue{display:flex;align-items:center;gap:14px;font-family:Sora,sans-serif;font-size:12px;letter-spacing:.18em}
.cue i{position:relative;width:1px;height:44px;background:var(--cue-track);overflow:hidden}
/* The light moves with transform (of its own height: -100% is just above the line, 250% just below), so it never repaints the page */
.cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:#fff;transform:translateY(-100%);animation:cueDown 2.4s var(--ease) infinite}
.cue--up i::after{transform:translateY(250%);animation-name:cueUp}
/* The back to top button is hidden until the page is scrolled: no motion while hidden */
.totop:not(.show) i::after{animation-play-state:paused}
.scroll-cue{--cue-track:rgba(255,255,255,.25);position:absolute;left:var(--gutter);bottom:48px;color:rgba(255,255,255,.7)}
.hd{position:fixed;left:0;right:0;top:0;z-index:30;height:var(--hd-h,96px);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:transform .6s var(--ease),background .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease),-webkit-backdrop-filter .6s var(--ease),backdrop-filter .6s var(--ease)}

.hd.is-hidden{transform:translateY(-100%)}
.hd.is-glass{background:rgba(3,18,26,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(3,18,26,.18)}

body.hd-on .subnav{top:var(--hd-h,96px)}

.hd .logo img{height:46px;width:auto;filter:brightness(0) invert(1);transition:filter .6s var(--ease)}
.gnb{position:relative;display:flex;gap:40px;padding:8px;border-radius:999px;font-family:Sora,sans-serif;font-size:16px;font-weight:500;isolation:isolate}
.gnb::before{content:"";position:absolute;inset:-72px -170px;z-index:-1;background:radial-gradient(150px 60px at var(--mx,50%) var(--my,50%),rgba(53,183,217,.24),transparent 100%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.gnb:hover::before{opacity:1}
.gnb a{position:relative;padding:12px 20px;color:rgba(255,255,255,.7);transition:color .6s var(--ease)}

.gnb a:hover,.gnb a[aria-current]{color:#fff}
.gnb a[aria-current]::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--lime)}

.hd .act{display:flex;gap:12px;align-items:center}

.hd .pill{display:inline-flex;align-items:center;height:46px;padding:0 22px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:14px;font-weight:500;color:#fff;transition:background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
/* Header buttons hover: point teal (#35B7D9 on dark, --teal on the light header). Lime stays for the current mark */
.hd .pill:hover,.hd .menu-btn:hover,.hd .lang:hover{background:rgba(53,183,217,.12);border-color:#35B7D9;color:#35B7D9}

.hd .lang{width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;font-size:20px;line-height:1;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.lang-wrap{position:relative}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:152px;margin:0;padding:8px;list-style:none;border-radius:16px;background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.lang-menu button{display:block;width:100%;padding:10px 14px;border:0;border-radius:10px;background:none;text-align:left;font-size:14px;font-weight:500;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.lang-menu button:hover{background:var(--mist)}
.lang-menu button[aria-current]{color:var(--teal);font-weight:600}
.hd .menu-btn{height:46px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.hd .menu-btn .ico{display:none}

/* Full menu: every main menu and its sub items on one dark screen */
.fm{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:rgba(3,18,26,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.fm.open{opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s}
.fm :focus-visible{outline-color:#fff}
.fm-top{flex:0 0 auto;height:var(--hd-h,96px);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between}
.fm-top .logo img{height:46px;width:auto;filter:brightness(0) invert(1)}
.fm-close{width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .6s var(--ease),border-color .6s var(--ease),transform .6s var(--ease)}
.fm-close:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);transform:rotate(90deg)}
.fm-body{flex:1 0 auto;width:100%;max-width:1600px;margin:0 auto;padding:64px var(--gutter);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:80px;align-content:center}
.fm-col{display:flex;flex-direction:column;gap:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fm.open .fm-col{opacity:1;transform:none;transition-delay:calc(.12s + var(--i) * .06s)}
.fm-h{position:relative;align-self:flex-start;font-family:Sora,sans-serif;font-size:32px;font-weight:500;letter-spacing:-.01em;color:#fff;transition:color .6s var(--ease)}
.fm-h:hover{color:#35B7D9}
/* Lime dot on the main menu of the sub item under the pointer */
.fm-h::after{content:"";position:absolute;right:-14px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--lime);opacity:0;transform:scale(.4);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.fm-col:has(li a:hover,li a:focus-visible) .fm-h::after{opacity:1;transform:none}
.fm-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.fm-col li a{font-size:17px;color:#fff;transition:color .6s var(--ease)}
.fm-col li a:hover{color:#35B7D9}
.fm-foot{flex:0 0 auto;padding:32px var(--gutter) 48px;display:flex;justify-content:flex-end;align-items:center;gap:32px}
.fm-tel{font-family:Sora,sans-serif;font-size:22px;color:#fff;transition:color .6s var(--ease)}
.fm-tel:hover{color:#35B7D9}
body.fm-on{overflow:hidden}
/* Google Translate adds a top bar and tooltips; the site uses its own switch */
body{top:0!important}
.skiptranslate iframe,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
font[style]{background:none!important;box-shadow:none!important}
.subnav{position:sticky;top:0;z-index:20;background:var(--night);box-shadow:0 1px 0 rgba(255,255,255,.06);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:0 var(--gutter);transition:top .6s var(--ease),background .6s var(--ease)}
.subnav a{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 28px 26px;border-left:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);transition:color .6s var(--ease),background .6s var(--ease),padding .6s var(--ease),gap .6s var(--ease)}
.subnav a:last-child{border-right:1px solid rgba(255,255,255,.1)}
.subnav a:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.03)}

.subnav a .no{font-family:Sora,sans-serif;font-size:28px;font-weight:300;line-height:1;color:rgba(255,255,255,.22);font-variant-numeric:tabular-nums;transition:color .6s var(--ease),font-size .6s var(--ease)}

.subnav a .t{font-size:16px;font-weight:600}

.subnav a .prog{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.08)}
.subnav a .prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:#35B7D9;transition:width .3s linear}

.subnav a.on{color:#fff;background:linear-gradient(180deg,rgba(53,183,217,.18) 0%,rgba(53,183,217,.05) 100%)}
.subnav a.on .prog{background:rgba(255,255,255,.2)}
.subnav a.on .no{color:#35B7D9}
.subnav a.on::after{content:"";position:absolute;right:24px;top:30px;width:6px;height:6px;border-radius:50%;background:var(--lime);transition:top .6s var(--ease)}

.subnav.is-stuck{margin-bottom:calc(var(--subnav-full,111px) - var(--subnav-compact,59px));background:rgba(3,18,26,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.subnav.is-stuck a{flex-direction:row;align-items:center;gap:14px;padding:19px 28px}
.subnav.is-stuck a .no{font-size:18px}
.subnav.is-stuck a.on::after{top:calc(50% - 3px)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--track);background:#fff;font-size:15px;font-weight:500;color:var(--ink-2);transition:all .6s var(--ease)}
.filters button span{font-family:Sora,sans-serif;font-size:13px;color:var(--teal)}
.filters button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.filters button[aria-pressed="true"] span{color:var(--lime)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pc{position:relative;overflow:hidden;isolation:isolate;margin:0;color:var(--ink);padding:14px 14px 32px;border-radius:24px;background:#fff;display:flex;flex-direction:column;gap:24px;transition:box-shadow .6s var(--ease)}
.pc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(0,118,152,.10),transparent 60%);transition:opacity .6s var(--ease);pointer-events:none}
.pc:hover{box-shadow:var(--shadow)}
.pc:hover::before{opacity:1}

.pc .thumb{aspect-ratio:16/10;border-radius:16px;overflow:hidden}
.pc .thumb .ph{width:100%;height:100%;transition:transform .6s var(--ease)}
.pc .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pc:hover .thumb img{transform:scale(1.03)}
.pc:hover .thumb .ph{transform:scale(1.03)}

.pc .meta{padding:0 14px;display:flex;flex-direction:column;gap:12px}

.pc .info{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}
.pc .info time{font-family:Sora,sans-serif;font-weight:300;font-variant-numeric:tabular-nums}
.pc h3{margin:0;font-size:22px;line-height:1.45;font-weight:600;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;transition:color .6s var(--ease)}
.pc:hover h3{color:var(--teal)}
.pc p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ft{position:relative;overflow:hidden;background:#060B0E;color:#C3CED3}

/* Shown at its source size (1672x941) so it stays sharp; both side edges fade out (the wave touches the left edge, and wide screens see past the right one) */
.ft .bg{position:absolute;width:1672px;height:941px;top:-40px;left:200px;max-width:none;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 80%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 80%,transparent)}
.ft-main{position:relative;padding:88px var(--gutter) 72px;display:flex;align-items:flex-start;justify-content:space-between;gap:80px}
.ft-cta{display:flex;flex-direction:column;gap:24px}
.ft-cta h2{margin:0;font-size:50px;line-height:1.28;font-weight:600;letter-spacing:-.025em;color:#fff}
.ft-cta p{margin:0;max-width:460px;font-size:17px;line-height:1.75;color:#C3CED3}
.ft-acts{display:flex;align-items:center;gap:24px;margin-top:4px}
.ft-tel{display:inline-flex;align-items:center;min-height:44px;font-size:24px;font-weight:700;color:#fff}
.ft-tel:hover{color:var(--lime)}
.ft-side{flex-shrink:0;display:flex;align-items:flex-start;gap:64px;padding-top:8px}

.ft-side .rule{width:1px;align-self:stretch;background:rgba(255,255,255,.12)}
.ft-nav-wrap{display:flex;flex-direction:column;gap:28px}
.ft-logo{height:32px;width:110px;filter:brightness(0) invert(1)}
.ft-nav{display:flex;gap:96px}
.ft-nav div{display:flex;flex-direction:column;gap:2px}

.ft-nav .h{font-size:13px;font-weight:600;color:#8FA4AD;margin-bottom:8px}
.ft-nav a{font-size:15px;font-weight:500;color:#C3CED3;min-height:40px;display:inline-flex;align-items:center;transition:color .6s var(--ease)}
.ft-nav a:hover{color:#fff}

.ft-nav a.strong{font-weight:700;color:#fff}
.ft-bar{position:relative;background:#040709;border-top:1px solid rgba(255,255,255,.12);padding:22px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:40px}
.ft-info{font-size:13px;line-height:1.9;color:#8FA4AD}
.ft-lang{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:8px;font-size:13px;font-weight:600;flex-shrink:0}
.ft-lang a{color:#8FA4AD}
.ft-lang a[aria-current]{color:#fff}
.ft-lang span{color:#56707A}
.btn svg{display:inline-block;transition:transform .6s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.hd.light:not(.is-glass) .logo img{filter:none}
.hd.light:not(.is-glass) .gnb a{color:rgba(11,31,41,.55)}
.hd.light:not(.is-glass) .gnb a:hover,.hd.light:not(.is-glass) .gnb a[aria-current]{color:var(--ink)}
.hd.light:not(.is-glass) .pill,.hd.light:not(.is-glass) .lang,.hd.light:not(.is-glass) .menu-btn{border-color:rgba(11,31,41,.22);color:var(--ink)}
.hd.light:not(.is-glass) .pill:hover,.hd.light:not(.is-glass) .menu-btn:hover,.hd.light:not(.is-glass) .lang:hover{background:rgba(0,118,152,.06);border-color:var(--teal);color:var(--teal)}
.hd.light:not(.is-glass) .gnb::before{background:radial-gradient(150px 60px at var(--mx,50%) var(--my,50%),rgba(0,118,152,.12),transparent 100%)}
.totop{--cue-track:rgba(255,255,255,.35);position:fixed;right:40px;bottom:40px;z-index:25;min-height:56px;padding:6px 4px;border:0;background:transparent;color:#fff;mix-blend-mode:difference;font-weight:400;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}

.totop.show{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.totop:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tlink{font-size:16px;font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .hero.photo::before,.hero.photo::after{animation:none}
  .hero-copy>p,.hero-copy>.btn,.hp{opacity:1;transform:none;transition:none}
  .fm,.fm-col,.fm.open .fm-col{transition:none}
  .cue i::after{animation:none!important}
  .cue--up i::after{transform:none}
  .hero .ln>span{opacity:1;transform:none;clip-path:none;transition:none}
}
@media (max-width:1440px){
  .hero.photo{--hero-gap:56px}
  .gnb{gap:24px}
  .fm-body{gap:56px}
}
@media (max-width:1320px){
  .gnb{gap:0}
}
@media (max-width:1180px){
  .hero-grid,.hero.photo[data-flip] .hero-grid{grid-template-columns:1fr}
  .hero.photo,.hero.photo[data-flip]{--hero-gap:56px;--copy-x:var(--gutter)}
  .hero.photo[data-flip] .hero-pics{order:0}
  .hero.photo:has(.hero-pics[data-layout="stagger"]) .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-pics,.hero-pics[data-layout="stagger"]{width:min(100%,720px);justify-self:start}
  .h2{font-size:44px}
  .h2-sub{font-size:38px}
  .ft-main{flex-direction:column;gap:56px}
  .ft-side{gap:40px}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gnb{display:none}
  .fm-body{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 72px;align-content:start}
}
@media (max-width:720px){
  .hero.photo{padding:120px var(--gutter) 88px;min-height:100svh}
  .hero.photo::before,.hero.photo[data-flip]::before{left:-180px;width:460px;height:340px;filter:blur(100px)}
  .hero.photo::after,.hero.photo[data-flip]::after{left:80px;top:34%;width:260px;height:200px;filter:blur(90px)}
  .hero.photo h1{font-size:36px}
  .hero-copy>p{font-size:18px}
  .hero.photo .hero-copy>.btn{font-size:16px;padding:0 30px}
  .hero-copy>p br{display:none}
  .hero-pics{gap:8px}
  .hp{border-radius:16px}
  /* Mobile photo hero (every page): no entrance rise and no scroll lift on the photo cards (fade only) */
  .hero.photo .hp{--rise:0px;translate:none}
  .hero-pics[data-layout="stagger"] .hp:nth-child(1){margin-top:8px}
  .hero-pics[data-layout="stagger"] .hp:nth-child(2){margin-top:56px}
  .hero-pics[data-layout="stagger"] .hp:nth-child(3){margin-top:-16px}
  .scroll-cue{display:none}
  .ft-main{padding:64px var(--gutter) 56px}
  .ft-cta h2{font-size:32px}
  .ft-acts{gap:16px}
  .ft-acts .btn{flex:0 0 auto;height:52px;padding:0 20px;font-size:15px;gap:8px}
  .ft-tel{font-size:20px;white-space:nowrap}
  .ft-side .rule{display:none}
  .ft-nav{gap:48px}
  .ft-bar{flex-direction:column;align-items:flex-start;gap:16px}
  /* Phones: the whole wave at about half its source size (sharp, not blown up), fading out before the menu below */
  .ft .bg{width:820px;height:auto;top:-30px;left:-150px;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .hd .logo img{height:36px}
  .hd .pill{display:none}
  .hd .menu-btn{width:46px;padding:0;font-size:20px}
  .hd .menu-btn .txt{display:none}
  .hd .menu-btn .ico{display:inline}
  .hd .act{gap:8px}
  .fm-top .logo img{height:36px}
  .fm-body{grid-template-columns:1fr;gap:0;padding:24px var(--gutter)}
  .fm-col{flex-direction:row;flex-wrap:wrap;gap:18px 24px;padding:28px 0}
  .fm-h{flex:0 0 100%;font-size:24px}
  .fm-col ul{flex-direction:row;flex-wrap:wrap;gap:20px 28px}
  .fm-col li a{font-size:15px}
  .fm-foot{justify-content:space-between;padding:24px var(--gutter) 40px}
  .fm-tel{font-size:18px}
  .hero h1,.h2{font-size:34px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:28px;margin-bottom:40px}
  .subnav{padding:0}
  .subnav a{padding:14px 10px 12px;gap:4px}
  .subnav a:first-child{border-left:0}
  .subnav a:last-child{border-right:0}
  .subnav a .no{font-size:16px}
  .subnav a .t{font-size:14px}
  .subnav a.on::after{right:10px;top:16px}
  .subnav.is-stuck a{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 10px 8px}
  .subnav.is-stuck a .no{font-size:13px}
  .subnav.is-stuck a.on::after{top:12px}
  .pgrid{grid-template-columns:1fr;gap:16px}
  .pc{padding:10px 10px 24px;gap:18px;border-radius:20px}
  .pc .meta{padding:0 8px}
  .pc h3{font-size:19px}
  .totop{right:16px;bottom:16px}
  .h2-sub{font-size:30px}
}
/* Plain values (no var()), so the browser can hand the motion to the GPU */
@keyframes cueDown{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
@keyframes cueUp{from{transform:translateY(250%)}to{transform:translateY(-100%)}}
/* Phones, tablets and touch screens: the aurora holds still (its 40s drift is hardly seen, but keeps the GPU awake and drains the battery) */
/* There the blobs are also soft radial gradients instead of a blur (iOS Safari blurred them on the CPU and stalled; main.css .aur) */
@media (max-width:1179px),(pointer:coarse){
  .hero.photo::before,.hero.photo::after,.aur-sec::before,.aur-sec::after{animation:none;filter:none!important;transform:scale(1.5)}
  .hero.photo::before,.aur-sec::before{background:radial-gradient(closest-side,var(--aur-a) 25%,transparent)}
  .hero.photo::after,.aur-sec::after{background:radial-gradient(closest-side,var(--aur-b) 25%,transparent)}
}
@keyframes heroAur{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,32px) scale(1.08)}}

/* Solution card: main Solutions carousel (li.sc, main.css) and solutions page grid (li.slc, solutions.css).
   Same inside, same rhythm and type; only the card size and colors differ (page css). Markup: src/partials/solutions.mjs
   Rhythm (8px grid, proximity): label row | 28 | title | 10 | description | 28 | photo | 24 | link, 32px padding,
   so title + description read as one group and photo + link as the next.
   Type, the larger the tighter: title 28 / 600 / 1.3 / -.025em (Korean heading) > description 16 / 400 / 1.7 / -.015em
   = link 16 / 600 / 1.4 / -.015em > chip 14 / 600 / 0 and number Sora 300 14 / .02em on one label row.
   The description takes the spare height so photos and links line up; in a fixed-height card (main) the photo gives way first.
   A page css changes the steps with the variables only (--pad, --s-title, --s-desc, --s-img, --s-go, --fs-title) */
.sc,.slc{--pad:32px;--s-title:28px;--s-desc:10px;--s-img:28px;--s-go:24px;--fs-title:28px;position:relative;padding:var(--pad);display:flex;flex-direction:column}
.slc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.slc-top .chip{font-size:14px;letter-spacing:0}
.slc-no{font-family:Sora,sans-serif;font-size:14px;font-weight:300;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.sc h3,.slc h2{margin:var(--s-title) 0 0;font-size:var(--fs-title);font-weight:600;line-height:1.3;letter-spacing:-.025em}
.sc p,.slc p{flex:1 0 auto;margin:var(--s-desc) 0 0;font-size:16px;line-height:1.7;letter-spacing:-.015em}
.slc-img{flex:0 1 auto;min-height:0;margin-top:var(--s-img);aspect-ratio:16/10;border-radius:16px;overflow:hidden}
.slc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
/* The link covers the whole card (::after). Hover: the photo slowly closes in, the arrow moves on */
.slc-go{align-self:flex-start;margin-top:var(--s-go);display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.015em;transition:color .6s var(--ease)}
.slc-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.slc-go svg{transition:transform .6s var(--ease)}
.sc:hover .slc-img img,.slc:hover .slc-img img{transform:scale(1.05)}
.sc:hover .slc-go svg,.slc:hover .slc-go svg{transform:translateX(4px)}
.slc-go:focus-visible{outline:none}
.sc:has(.slc-go:focus-visible),.slc:has(.slc-go:focus-visible){outline:2px solid #fff;outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .slc-img img,.slc-go svg{transition:none}
}
@media (max-width:720px){
  .sc,.slc{--pad:24px 20px;--s-title:20px;--s-desc:8px;--s-img:20px;--s-go:18px;--fs-title:22px}
}