/* ============================================================
   Lumi Weather — 官方網站設計系統 v2「豪華遊戲工作室」
   無框架、無外部字型、無第三方資源。
   ============================================================ */
:root{
  --ink:#2E3450; --ink2:#525a78; --muted:#8089a6;
  --night:#161B33; --night2:#1F2547;
  --line:#e8ecf6; --line2:#dde3f2;
  --bg:#fbfcff; --panel:#ffffff;
  --sky:#4a90d9; --sky-ink:#2d5e96; --sky-soft:#eaf3fc;
  --gold:#E8A800; --gold-light:#FFC93C; --gold-soft:#fff6dc;
  --green:#1E7A52; --pink:#ff8fa3;
  --glass:rgba(255,255,255,.66);
  --shadow:0 1px 2px rgba(46,52,80,.05), 0 18px 44px -20px rgba(60,90,160,.30);
  --shadow-lg:0 4px 10px rgba(46,52,80,.07), 0 44px 90px -34px rgba(60,90,160,.45);
  --radius:24px; --maxw:1060px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI","PingFang TC","Noto Sans TC","Hiragino Sans","Apple SD Gothic Neo",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.78; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--sky-ink); text-decoration:none}
img{max-width:100%}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.zh{color:var(--muted); font-weight:500}
.eyebrow{font-size:.74rem; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--sky); margin:0 0 12px}
h1{font-size:clamp(2.1rem,5.6vw,3.6rem); line-height:1.08; letter-spacing:-1px; margin:.2em 0; font-weight:800}
h2{font-size:clamp(1.45rem,3vw,2rem); letter-spacing:-.4px; margin:0 0 .5em; font-weight:800}
h3{font-size:1.06rem; margin:0 0 .3em}
p{margin:.5em 0}

/* ---------- 進場動畫（JS IntersectionObserver 配合） ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.38s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .float,.float-slow,.sway,.twinkle,.cloud,.playing .bar{animation:none !important}
}
.float{animation:float 6s ease-in-out infinite}
.float-slow{animation:float 8.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.sway{animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* ---------- 導覽列 ---------- */
header.nav{position:fixed; top:0; left:0; right:0; z-index:80; transition:.3s;
  background:transparent; border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(251,252,255,.78);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line); box-shadow:0 8px 30px -18px rgba(60,90,160,.25)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:38px; height:38px; border-radius:11px; box-shadow:0 4px 12px -2px rgba(46,52,80,.45)}
.brand .name{font-weight:800; font-size:1rem; line-height:1.15; color:var(--ink)}
.brand .name small{display:block; font-weight:600; font-size:.68rem; color:var(--ink2); letter-spacing:.5px; opacity:.8}
.nav-links{display:flex; gap:4px; align-items:center}
.nav-links a{color:var(--ink2); font-weight:700; font-size:.92rem; padding:8px 15px; border-radius:12px; transition:.15s}
.nav-links a:hover{color:var(--sky-ink); background:rgba(255,255,255,.7)}
.nav-links a.cta{color:#3a2e00; background:linear-gradient(135deg,var(--gold-light),var(--gold));
  margin-left:6px; box-shadow:0 8px 20px -10px var(--gold)}
.nav-links a.cta:hover{filter:brightness(1.05); transform:translateY(-1px)}
@media (max-width:680px){ .nav-links a:not(.cta){display:none} }

/* ---------- 英雄區（全幅場景插畫） ---------- */
.hero{position:relative; overflow:hidden; text-align:center; color:var(--ink);
  padding:150px 0 110px; isolation:isolate}
.hero .bg{position:absolute; inset:0; z-index:-3; background-size:cover; background-position:center 30%;
  transform:scale(1.04)}
.hero .veil{position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(251,252,255,.46) 58%, var(--bg) 100%)}
.hero.dark{color:#fff}
.hero.dark .veil{background:linear-gradient(180deg, rgba(18,22,48,.18) 0%, rgba(18,22,48,.5) 60%, var(--night) 100%)}
.hero.dark .eyebrow{color:var(--gold-light)}
.hero.dark .tagline{color:rgba(255,255,255,.85)}
.hero .logo{width:128px; height:128px; border-radius:32px; box-shadow:var(--shadow-lg); margin-bottom:24px}
.hero .tagline{font-size:1.15rem; color:var(--ink2); max-width:660px; margin:16px auto 0; font-weight:500}
.hero .btns{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.grad-text{background:linear-gradient(120deg, #2d5e96 0%, #4a90d9 45%, #E8A800 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-mascot{position:absolute; z-index:-1; width:clamp(110px,16vw,200px);
  filter:drop-shadow(0 18px 30px rgba(46,52,80,.28))}
.hero-mascot.l{left:max(2vw, calc(50% - 620px)); bottom:40px}
.hero-mascot.r{right:max(2vw, calc(50% - 620px)); bottom:90px}
@media (max-width:880px){ .hero-mascot{display:none} }

/* 漂浮裝飾雲（純 CSS） */
.cloud{position:absolute; z-index:-2; background:rgba(255,255,255,.55); filter:blur(22px);
  border-radius:50%; animation:drift 26s linear infinite}
.cloud.c1{width:340px; height:110px; top:14%; left:-180px}
.cloud.c2{width:260px; height:90px; top:32%; left:-260px; animation-duration:34s; animation-delay:-12s}
.cloud.c3{width:420px; height:130px; top:8%; left:-420px; animation-duration:44s; animation-delay:-26s; opacity:.7}
@keyframes drift{to{transform:translateX(calc(100vw + 480px))}}

/* 閃爍星塵 */
.spark{position:absolute; z-index:-1; width:7px; height:7px; border-radius:50%;
  background:#fff; box-shadow:0 0 12px 3px rgba(255,224,130,.9)}
.twinkle{animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15; transform:scale(.7)}50%{opacity:1; transform:scale(1.15)}}

/* ---------- 按鈕 ---------- */
.btn{display:inline-block; padding:14px 30px; border-radius:16px; font-weight:800; font-size:1rem;
  transition:.2s cubic-bezier(.2,.7,.2,1)}
.btn.primary{color:#3a2e00; background:linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:0 16px 34px -14px var(--gold), inset 0 1px 0 rgba(255,255,255,.55)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 22px 40px -14px var(--gold)}
.btn.ghost{color:var(--sky-ink); background:var(--glass); border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--shadow)}
.btn.ghost:hover{background:#fff; transform:translateY(-2px)}

/* ---------- 數據彩帶 ---------- */
.ribbon{position:relative; z-index:2; margin-top:-34px}
.ribbon-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
  background:var(--glass); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid rgba(255,255,255,.9); border-radius:26px; padding:20px 30px; box-shadow:var(--shadow-lg)}
.stat{text-align:center; flex:1 1 110px}
.stat b{display:block; font-size:1.65rem; letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--sky-ink),var(--sky)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat span{font-size:.8rem; font-weight:700; color:var(--muted); letter-spacing:.4px}

/* ---------- 區塊 ---------- */
section{padding:84px 0}
.section-tin{text-align:center; max-width:700px; margin:0 auto 50px}

/* ---------- 卡片 ---------- */
.grid{display:grid; gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){ .grid.c3,.grid.c2{grid-template-columns:1fr} }
.card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); transition:.3s cubic-bezier(.2,.7,.2,1); overflow:hidden}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--line2)}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; opacity:0; transition:.3s;
  background:linear-gradient(90deg,var(--sky),var(--gold-light))}
.card:hover::before{opacity:1}
.card .ico{width:50px; height:50px; border-radius:15px; display:grid; place-items:center; font-size:24px; margin-bottom:14px;
  background:linear-gradient(145deg,var(--sky-soft),#dcebfa); box-shadow:inset 0 1px 0 #fff, 0 6px 14px -8px rgba(74,144,217,.5)}
.card.gold .ico{background:linear-gradient(145deg,var(--gold-soft),#ffedb8); box-shadow:inset 0 1px 0 #fff, 0 6px 14px -8px rgba(232,168,0,.55)}
.card.green .ico{background:linear-gradient(145deg,#e6f4ec,#d2ecdd); box-shadow:inset 0 1px 0 #fff, 0 6px 14px -8px rgba(30,122,82,.4)}

/* ---------- 手機展示 ---------- */
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
@media (max-width:820px){ .showcase{grid-template-columns:1fr; gap:30px; text-align:center} }
.phone{position:relative; width:min(316px,82vw); margin:0 auto; border-radius:54px; padding:13px;
  background:linear-gradient(160deg,#3a4060,#191d33);
  box-shadow:0 60px 110px -42px rgba(28,34,64,.6), inset 0 1px 1px rgba(255,255,255,.25)}
.phone img{display:block; width:100%; border-radius:42px}
.phone::after{content:""; position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:96px; height:28px; border-radius:16px; background:#10131f}
.phone-buddy{position:absolute; width:130px; right:-58px; bottom:-16px;
  filter:drop-shadow(0 14px 22px rgba(46,52,80,.3))}
@media (max-width:820px){ .phone-buddy{right:-26px; width:104px} }
.checks{list-style:none; padding:0; margin:18px 0 0}
.checks li{padding:9px 0 9px 38px; position:relative; font-weight:600; color:var(--ink2)}
.checks li::before{content:"✓"; position:absolute; left:0; top:7px; width:26px; height:26px; border-radius:9px;
  display:grid; place-items:center; font-size:.85rem; font-weight:900; color:#fff;
  background:linear-gradient(135deg,#34c27d,var(--green)); box-shadow:0 5px 12px -5px var(--green)}

/* ---------- 場景藝廊 ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:880px){ .gallery{grid-template-columns:repeat(2,1fr)} }
.scene{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:3/4;
  box-shadow:var(--shadow); transition:.35s cubic-bezier(.2,.7,.2,1)}
.scene img{width:100%; height:100%; object-fit:cover; transition:.6s}
.scene:hover{transform:translateY(-6px) scale(1.012); box-shadow:var(--shadow-lg)}
.scene:hover img{transform:scale(1.06)}
.scene b{position:absolute; left:14px; bottom:12px; color:#fff; font-size:.92rem; letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.55)}

/* ---------- 夜空隱私區 ---------- */
.night{position:relative; overflow:hidden; color:#fff; border-radius:34px; isolation:isolate;
  padding:64px 48px; text-align:center; box-shadow:var(--shadow-lg)}
@media (max-width:680px){ .night{padding:46px 24px} }
.night .bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center}
.night .veil{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,24,52,.55), rgba(20,24,52,.78))}
.night h2{color:#fff}
.night p{color:rgba(255,255,255,.88); max-width:640px; margin-left:auto; margin-right:auto}
.night .zh{color:rgba(255,255,255,.62)}

/* ---------- 內容頁（FAQ / 法務） ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px; box-shadow:var(--shadow); margin:20px 0}
.panel h2{display:flex; align-items:center; gap:10px}
details{border-bottom:1px solid var(--line); padding:15px 2px; transition:.2s}
details:last-child{border-bottom:none}
summary{font-weight:700; cursor:pointer; list-style:none; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--gold); font-size:1.4rem; font-weight:800; transition:.25s}
details[open] summary::after{content:"–"}
details[open]{background:linear-gradient(180deg,rgba(234,243,252,.4),transparent); border-radius:12px; padding-left:12px; padding-right:12px}
details p{color:var(--ink2)}
.legal{max-width:840px; margin:0 auto}
.legal h2{margin-top:36px}
.legal .updated{color:var(--muted); font-size:.92rem}
.callout{background:var(--sky-soft); border:1px solid var(--line2); border-radius:18px; padding:20px 22px; margin:20px 0}
.callout.good{background:linear-gradient(145deg,#e6f4ec,#f2faf5); border-color:#cfe8da}

/* ---------- 頁尾（星夜） ---------- */
footer{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--night2),var(--night));
  padding:64px 0 44px; color:rgba(255,255,255,.55); font-size:.92rem; text-align:center}
footer .star{position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; opacity:.5}
footer .brandline{display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:22px}
footer .brandline img{width:44px; height:44px; border-radius:12px; box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
footer .brandline b{color:#fff; font-size:1.1rem; letter-spacing:.3px}
footer a{font-weight:700; color:rgba(255,255,255,.8)}
footer a:hover{color:var(--gold-light)}
.foot-links{display:flex; gap:22px; justify-content:center; margin-bottom:16px; flex-wrap:wrap}

/* ---------- 音樂按鈕 ---------- */
.music{position:fixed; right:22px; bottom:22px; z-index:90; width:58px; height:58px; border-radius:50%;
  border:1px solid rgba(255,255,255,.9); cursor:pointer;
  background:linear-gradient(145deg,#fff,#f1f5fd); color:var(--sky-ink);
  box-shadow:0 14px 34px -12px rgba(46,52,80,.5); transition:.25s; display:grid; place-items:center}
.music:hover{transform:translateY(-3px) scale(1.04)}
.music .eq{display:none; align-items:flex-end; gap:3px; height:20px}
.music .eq .bar{width:4px; border-radius:2px; background:linear-gradient(180deg,var(--gold-light),var(--gold))}
.music.playing{background:linear-gradient(145deg,var(--gold-light),var(--gold)); border-color:rgba(255,255,255,.6);
  box-shadow:0 16px 38px -12px var(--gold)}
.music.playing .note{display:none}
.music.playing .eq{display:flex}
.playing .bar{animation:eq 1s ease-in-out infinite}
.playing .bar:nth-child(1){height:9px}
.playing .bar:nth-child(2){height:17px; animation-delay:.15s}
.playing .bar:nth-child(3){height:12px; animation-delay:.3s}
.playing .bar:nth-child(4){height:18px; animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.05)}}
.music .note{font-size:22px}
.music .hint{position:absolute; right:68px; top:50%; transform:translateY(-50%); white-space:nowrap;
  background:var(--night); color:#fff; font-size:.78rem; font-weight:700; padding:7px 13px; border-radius:11px;
  opacity:0; pointer-events:none; transition:.25s}
.music:hover .hint{opacity:1}

/* 深色 hero 頁（privacy）：未捲動時導覽列轉白字 */
body.dark-hero header.nav:not(.scrolled) .brand .name,
body.dark-hero header.nav:not(.scrolled) .brand .name small{color:#fff}
body.dark-hero header.nav:not(.scrolled) .nav-links a:not(.cta){color:rgba(255,255,255,.88)}
body.dark-hero header.nav:not(.scrolled) .nav-links a:not(.cta):hover{background:rgba(255,255,255,.16); color:#fff}

/* ============ v2.1 更華麗組件 ============ */

/* Logo 光環 */
.logo-wrap{position:relative; display:inline-block; margin-bottom:26px}
.logo-wrap .halo{position:absolute; inset:-16px; border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg, rgba(255,201,60,0), rgba(255,201,60,.8), rgba(74,144,217,.55), rgba(255,201,60,0));
  filter:blur(14px); animation:spinhalo 7s linear infinite}
@keyframes spinhalo{to{transform:rotate(360deg)}}
.hero .logo{margin-bottom:0}

/* 金色流光標題 */
.grad-text{background:linear-gradient(110deg,#2d5e96 0%,#4a90d9 32%,#E8A800 55%,#FFC93C 62%,#E8A800 70%,#2d5e96 100%);
  background-size:240% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 6.5s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* Coming soon 膠囊 */
.pill{display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:9px 20px; border-radius:999px;
  background:var(--glass); border:1px solid rgba(255,255,255,.9); font-weight:800; font-size:.86rem; color:var(--ink2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--shadow)}
.pill .dot{width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:0 0 10px 2px rgba(255,201,60,.8); animation:twinkle 2.2s ease-in-out infinite}

/* 吉祥物大遊行 */
.parade{position:relative; overflow:hidden; padding:30px 0 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.parade-track{display:flex; gap:54px; width:max-content; animation:parade 36s linear infinite}
.parade:hover .parade-track{animation-play-state:paused}
@keyframes parade{to{transform:translateX(-50%)}}
.parade img{width:112px; height:112px; object-fit:contain; transition:.3s;
  filter:drop-shadow(0 12px 18px rgba(46,52,80,.22))}
.parade img:hover{transform:translateY(-10px) scale(1.08)}
@media (prefers-reduced-motion:reduce){ .parade-track{animation:none} }

/* 三步驟 */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:step}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }
.step{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 26px; box-shadow:var(--shadow); text-align:center; transition:.3s}
.step:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.step .num{counter-increment:step; display:grid; place-items:center; width:46px; height:46px; margin:0 auto 14px;
  border-radius:50%; font-weight:900; font-size:1.1rem; color:#3a2e00;
  background:linear-gradient(135deg,var(--gold-light),var(--gold)); box-shadow:0 10px 22px -10px var(--gold)}
.step .num::before{content:counter(step)}
.step img{width:96px; height:96px; object-fit:contain; margin-bottom:6px;
  filter:drop-shadow(0 10px 16px rgba(46,52,80,.2))}

/* 雙手機展示 */
.phones{position:relative; width:min(420px,90vw); margin:0 auto; min-height:560px}
.phones .phone{position:absolute; width:min(290px,62vw)}
.phones .phone.front{left:0; bottom:0; z-index:2}
.phones .phone.back{right:0; top:0; transform:rotate(6deg) scale(.92); opacity:.94; z-index:1}
@media (max-width:820px){ .phones{min-height:480px} }

/* 極光暈染背景 */
.aurora{position:relative; isolation:isolate; overflow:hidden}
.aurora::before,.aurora::after{content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); opacity:.5}
.aurora::before{width:560px; height:560px; left:-180px; top:-120px;
  background:radial-gradient(circle, rgba(174,227,255,.9), transparent 65%); animation:aurora1 16s ease-in-out infinite}
.aurora::after{width:520px; height:520px; right:-160px; bottom:-140px;
  background:radial-gradient(circle, rgba(255,214,107,.75), transparent 65%); animation:aurora2 19s ease-in-out infinite}
@keyframes aurora1{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,40px)}}
@keyframes aurora2{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,-50px)}}

/* 波浪分隔 */
.wave{display:block; width:100%; height:54px; margin-bottom:-1px}

/* 場景藝廊 8 格 */
.gallery.g8{grid-template-columns:repeat(4,1fr)}
@media (max-width:880px){ .gallery.g8{grid-template-columns:repeat(2,1fr)} }

/* 語言膠囊 */
.langs{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.langs span{padding:7px 16px; border-radius:999px; font-weight:800; font-size:.84rem; color:var(--sky-ink);
  background:var(--sky-soft); border:1px solid var(--line2)}

/* 豪華頁尾 */
footer .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; text-align:left; margin-bottom:34px}
@media (max-width:720px){ footer .foot-grid{grid-template-columns:1fr; text-align:center} }
footer .foot-grid h4{color:#fff; font-size:.95rem; letter-spacing:1.2px; text-transform:uppercase; margin:0 0 12px}
footer .foot-grid p{margin:.3em 0}
footer .foot-grid a{display:block; padding:3px 0; font-weight:600}
footer .brandline.left{justify-content:flex-start; margin-bottom:12px}
@media (max-width:720px){ footer .brandline.left{justify-content:center} }
footer .legalline{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; font-size:.85rem}