/* =========================================================
   마켓 인사이트 라운지 — Twilight Indigo Theme
   Palette: #2D2E5F · #6B4FBB · #FF6FA1  ·  Font: Nanum Gothic
   ========================================================= */

:root{
  --indigo-900:#15163a;
  --indigo-800:#1d1e4a;
  --indigo-700:#2D2E5F;
  --violet:#6B4FBB;
  --violet-soft:#8d6fe0;
  --pink:#FF6FA1;
  --pink-soft:#ff96bd;
  --ink:#0f1030;
  --text:#ECEBFF;
  --muted:#A6A3D4;
  --muted-2:#7e7caf;
  --card:rgba(255,255,255,.045);
  --card-brd:rgba(141,111,224,.22);
  --glass-blur:saturate(140%) blur(14px);
  --grad:linear-gradient(100deg,var(--violet-soft),var(--pink));
  --grad-btn:linear-gradient(100deg,var(--violet) 0%,var(--pink) 100%);
  --shadow-lg:0 30px 70px -25px rgba(0,0,0,.7);
  --r:22px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Nanum Gothic',sans-serif;
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.pc-only{display:inline}

/* ---------- typografi accents ---------- */
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-pink{background:linear-gradient(100deg,var(--pink),#ffb27d);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   BACKGROUND ATMOSPHERE
   ========================================================= */
.bg-atmosphere{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 80% -5%,rgba(107,79,187,.35),transparent 60%),
    radial-gradient(900px 600px at 0% 25%,rgba(255,111,161,.16),transparent 55%),
    linear-gradient(180deg,#15163a 0%,#101130 40%,#0c0d26 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;animation:floatBlob 18s var(--ease) infinite}
.blob-1{width:480px;height:480px;background:radial-gradient(circle,#6B4FBB,transparent 70%);top:-120px;right:-80px}
.blob-2{width:420px;height:420px;background:radial-gradient(circle,#FF6FA1,transparent 70%);top:40%;left:-140px;animation-delay:-6s}
.blob-3{width:360px;height:360px;background:radial-gradient(circle,#4f7bff,transparent 70%);bottom:-120px;right:20%;animation-delay:-11s}
@keyframes floatBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}

.grid-overlay{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(141,111,224,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(141,111,224,.08) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%)}
.bg-chart{position:absolute;left:0;right:0;top:8%;width:100%;height:60%;opacity:.5}
.chart-line{fill:none;stroke:url(#g);stroke:rgba(255,111,161,.5);stroke-width:2.5;
  filter:drop-shadow(0 0 8px rgba(255,111,161,.5));
  stroke-dasharray:3000;stroke-dashoffset:3000;animation:drawLine 4s var(--ease) .3s forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s;
  white-space:nowrap;line-height:1}
.btn i{font-size:17px}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 12px 30px -8px rgba(255,111,161,.55),inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(255,111,161,.7);filter:brightness(1.06)}
.btn-primary.sm{padding:13px 22px;font-size:15px}
.btn-primary.lg{padding:19px 38px;font-size:18px}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--card-brd);backdrop-filter:var(--glass-blur)}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.09);border-color:var(--violet-soft)}

/* channel icon (kakao/band 的 fa 图标由 script.js 注入) */
.btn .ico-channel{font-style:normal}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:70px 0 0}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.04em;
  color:var(--pink-soft);background:rgba(255,111,161,.1);border:1px solid rgba(255,111,161,.28);
  padding:8px 16px;border-radius:999px;margin-bottom:22px}
.hero-title{font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.25;letter-spacing:-.02em}
.hero-sub{margin:22px 0 30px;font-size:clamp(15px,1.6vw,18px);color:var(--muted);max-width:520px}
.hero-sub b{color:var(--pink-soft)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badges{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin-top:28px}
.hero-badges li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.hero-badges i{color:var(--violet-soft)}

/* hero visual */
.hero-visual{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center}
.glow-ring{position:absolute;width:430px;height:430px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--violet),var(--pink),#4f7bff,var(--violet));
  filter:blur(40px);opacity:.55;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-img-wrap{position:relative;z-index:2;animation:floatY 6s var(--ease) infinite}
.hero-img{filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));transform:rotate(-1.5deg);transition:transform .5s var(--ease)}
.hero-visual:hover .hero-img{transform:rotate(0deg) scale(1.02)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;
  background:rgba(28,28,64,.72);border:1px solid var(--card-brd);backdrop-filter:var(--glass-blur);
  padding:11px 15px;border-radius:15px;box-shadow:var(--shadow-lg);animation:floatY 5s var(--ease) infinite}
.float-card i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--grad-btn);color:#fff;font-size:15px;flex-shrink:0}
.float-card b{display:block;font-size:13.5px;color:#fff}
.float-card span{display:block;font-size:11px;color:var(--muted)}
.fc-1{top:6%;left:-3%;animation-delay:-1s}
.fc-2{bottom:16%;left:-6%;animation-delay:-3s}
.fc-3{top:20%;right:-4%;animation-delay:-2s}

/* trust marquee */
.trust-marquee{margin-top:54px;overflow:hidden;border-top:1px solid rgba(141,111,224,.18);border-bottom:1px solid rgba(141,111,224,.18);
  background:rgba(255,255,255,.02);padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trust-track{display:flex;gap:46px;width:max-content;animation:marquee 26s linear infinite}
.trust-track span{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap}
.trust-track i{color:var(--pink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   STATS
   ========================================================= */
.stats{padding:60px 0 10px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{text-align:center;background:var(--card);border:1px solid var(--card-brd);border-radius:var(--r);padding:30px 16px;backdrop-filter:var(--glass-blur)}
.stat-num{font-family:'Noto Sans KR',sans-serif;font-weight:800;font-size:clamp(30px,4vw,46px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat-label{margin-top:8px;font-size:14px;color:var(--muted)}

/* =========================================================
   SECTIONS / HEADINGS
   ========================================================= */
.section{padding:90px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 56px}
.kicker{display:inline-block;font-weight:800;font-size:12.5px;letter-spacing:.22em;color:var(--violet-soft);
  border:1px solid var(--card-brd);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.section-head h2,.split-copy h2,.final-cta h2{font-family:'Noto Sans KR',sans-serif;font-weight:700;
  font-size:clamp(26px,3.6vw,40px);line-height:1.32;letter-spacing:-.02em}
.section-head p{margin-top:16px;color:var(--muted);font-size:16px}

/* =========================================================
   FEATURE GRID
   ========================================================= */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{position:relative;background:var(--card);border:1px solid var(--card-brd);border-radius:var(--r);
  padding:30px 24px;backdrop-filter:var(--glass-blur);overflow:hidden;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.feature-card::before{content:"";position:absolute;inset:0;background:radial-gradient(280px 140px at 50% -10%,rgba(255,111,161,.18),transparent 70%);opacity:0;transition:opacity .4s}
.feature-card:hover{transform:translateY(-8px);border-color:var(--violet-soft);box-shadow:var(--shadow-lg)}
.feature-card:hover::before{opacity:1}
.fi{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:#fff;
  background:var(--grad-btn);box-shadow:0 10px 24px -8px rgba(255,111,161,.6);margin-bottom:18px}
.fi.sm{width:48px;height:48px;font-size:20px;border-radius:13px;margin-bottom:0}
.feature-card h3{font-size:18px;margin-bottom:9px;color:#fff}
.feature-card p{font-size:14.5px;color:var(--muted)}

/* =========================================================
   SPLIT (image + text)
   ========================================================= */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split-grid.reverse .split-media{order:2}
.split-media{position:relative}
.split-media img{border-radius:var(--r);border:1px solid var(--card-brd);box-shadow:var(--shadow-lg);
  transform:perspective(1200px) rotateY(6deg);transition:transform .6s var(--ease)}
.split-grid.reverse .split-media img{transform:perspective(1200px) rotateY(-6deg)}
.split-media:hover img{transform:perspective(1200px) rotateY(0) scale(1.015)}
.media-tag{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:13px;color:#fff;background:rgba(20,20,50,.7);border:1px solid var(--card-brd);
  backdrop-filter:var(--glass-blur);padding:8px 14px;border-radius:999px}
.media-tag i{color:var(--pink)}
.split-copy .kicker{margin-bottom:14px}
.split-copy .lead{margin:18px 0 22px;color:var(--muted);font-size:16px}
.check-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:28px}
.check-list li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--text)}
.check-list i{color:var(--pink);font-size:17px;margin-top:3px}

/* =========================================================
   EXPERTS
   ========================================================= */
.experts-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.experts-media img{border-radius:var(--r);border:1px solid var(--card-brd);box-shadow:var(--shadow-lg)}
.experts-points{display:flex;flex-direction:column;gap:24px}
.ep{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--card-brd);
  border-radius:18px;padding:20px;backdrop-filter:var(--glass-blur);transition:transform .35s var(--ease),border-color .35s}
.ep:hover{transform:translateX(6px);border-color:var(--violet-soft)}
.ep h3{font-size:17px;color:#fff;margin-bottom:6px}
.ep p{font-size:14px;color:var(--muted)}

/* =========================================================
   REVIEWS SLIDER (Trustpilot style)
   ========================================================= */
.tp-summary{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:15px;color:var(--muted)}
.tp-summary strong{color:#fff;font-size:19px}
.tp-stars{color:#FFC24B;font-size:17px;letter-spacing:1px}
.slider{position:relative}
.slider-viewport{overflow:hidden}
.slider-track{display:flex;gap:20px;transition:transform .55s var(--ease)}
.review-card{flex:0 0 calc((100% - 60px)/4);background:#fff;color:#1a1a2e;border-radius:16px;padding:24px 22px;
  display:flex;flex-direction:column;box-shadow:0 20px 45px -20px rgba(0,0,0,.6)}
.rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rc-stars{display:inline-flex;background:#00B67A;color:#fff;gap:3px;padding:5px 8px;border-radius:6px;font-size:12px}
.rc-verified{font-size:11.5px;color:#00B67A;font-weight:800;display:flex;align-items:center;gap:5px}
.rc-title{font-weight:800;font-size:16px;margin-bottom:7px;color:#15163a}
.rc-text{font-size:14px;color:#454567;line-height:1.6;flex:1}
.rc-user{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:15px;border-top:1px solid #ececf4}
.rc-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;flex-shrink:0}
.rc-name{font-weight:800;font-size:14px;color:#15163a}
.rc-date{font-size:12px;color:#9a9ab5}
.slider-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.sld-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:16px;
  background:var(--card);border:1px solid var(--card-brd);color:#fff;backdrop-filter:var(--glass-blur);transition:.3s}
.sld-btn:hover{background:var(--grad-btn);border-color:transparent;transform:scale(1.08)}
.slider-dots{display:flex;gap:9px}
.slider-dots button{width:9px;height:9px;border-radius:50%;background:rgba(166,163,212,.35);transition:.3s}
.slider-dots button.active{background:var(--grad-btn);width:26px;border-radius:5px}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{padding:96px 0}
.final-inner{position:relative;text-align:center;max-width:860px;margin:0 auto;padding:56px 30px;border-radius:32px;
  background:linear-gradient(135deg,rgba(107,79,187,.28),rgba(255,111,161,.16));
  border:1px solid var(--card-brd);backdrop-filter:var(--glass-blur);overflow:hidden}
.final-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 240px at 50% 0,rgba(255,111,161,.3),transparent 70%)}
.final-inner>*{position:relative}
.final-inner p{margin:16px 0 30px;color:var(--muted);font-size:17px}
.cta-note{display:block;margin-top:18px;font-size:13px;color:var(--muted)}
.cta-note i{color:var(--pink)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding:60px 0 130px;border-top:1px solid rgba(141,111,224,.18);background:rgba(10,11,32,.6)}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-brand{max-width:460px}
.logo{font-family:'Noto Sans KR',sans-serif;font-weight:800;font-size:20px;display:inline-flex;align-items:center;gap:9px}
.logo i{color:var(--pink)}
.footer-brand p{margin-top:12px;font-size:13.5px;color:var(--muted-2)}
.footer-links{display:flex;flex-direction:column;gap:13px}
.flink{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);transition:color .25s;font-weight:700}
.flink i{color:var(--violet-soft)}
.flink:hover{color:#fff}
.footer-bottom{text-align:center;margin-top:40px;font-size:12.5px;color:var(--muted-2)}

/* =========================================================
   FLOATING FIXED CTA (always visible, bouncing)
   ========================================================= */
.float-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));pointer-events:none;
  background:linear-gradient(0deg,rgba(12,13,38,.92),transparent)}
.float-cta-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;max-width:560px;width:100%;
  justify-content:center;font-weight:800;font-size:16px;color:#fff;padding:16px 24px;border-radius:999px;
  background:var(--grad-btn);box-shadow:0 14px 34px -8px rgba(255,111,161,.7),inset 0 0 0 1px rgba(255,255,255,.14);
  animation:bounce 1.6s var(--ease) infinite}
.float-cta-btn .cta-channel-img{width:26px;height:26px;border-radius:7px;flex-shrink:0;background:#fff;padding:1px}
.float-cta-btn .cta-arrow{transition:transform .3s}
.float-cta-btn:hover{filter:brightness(1.07)}
.float-cta-btn:hover .cta-arrow{transform:translateX(5px)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* =========================================================
   MODALS
   ========================================================= */
.modal-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,24,.72);backdrop-filter:blur(6px);padding:22px}
.modal-overlay.open{display:flex;animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;width:100%;max-width:600px;max-height:82vh;overflow-y:auto;
  background:linear-gradient(160deg,#1c1d48,#15163a);border:1px solid var(--card-brd);border-radius:22px;padding:34px 30px;box-shadow:var(--shadow-lg)}
.modal h3{font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:23px;margin-bottom:18px;color:#fff;padding-right:30px}
.modal-body{font-size:14px;color:var(--muted);line-height:1.8}
.modal-body h4{color:var(--pink-soft);font-size:15px;margin:18px 0 7px}
.modal-body p{margin-bottom:8px}
.modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--card-brd);color:#fff;font-size:16px;transition:.25s}
.modal-close:hover{background:var(--pink);transform:rotate(90deg)}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE  —  TABLET
   ========================================================= */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:10px;text-align:center}
  .hero-copy{order:2}
  .hero-visual{order:1;min-height:330px}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-badges{justify-content:center}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .split-grid,.experts-wrap{grid-template-columns:1fr;gap:30px}
  .split-grid.reverse .split-media{order:0}
  .split-media img,.split-grid.reverse .split-media img{transform:none}
  .review-card{flex:0 0 calc((100% - 20px)/2)}
}

/* =========================================================
   RESPONSIVE  —  MOBILE ( compact )
   ========================================================= */
@media(max-width:600px){
  .container,.hero-inner{padding:0 16px}
  .pc-only{display:none}

  /* hero */
  .hero{padding:34px 0 0}
  .eyebrow{margin-bottom:14px;font-size:12px;padding:7px 13px}
  .hero-title{font-size:30px;line-height:1.22}
  .hero-sub{font-size:14.5px;margin:14px auto 20px}
  .hero-visual{min-height:260px;margin-bottom:6px}
  .glow-ring{width:280px;height:280px}
  .hero-actions{flex-direction:column;gap:11px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-badges{gap:14px 18px;margin-top:20px;justify-content:center}
  .hero-badges li{font-size:12.5px}
  /* 移动端缩小浮动卡，避免拥挤 */
  .float-card{padding:8px 11px;gap:8px;border-radius:12px}
  .float-card i{width:28px;height:28px;font-size:13px}
  .float-card b{font-size:11.5px}
  .float-card span{font-size:9.5px}
  .fc-1{top:0;left:-6px}
  .fc-2{bottom:6%;left:-8px}
  .fc-3{top:12%;right:-6px}

  .trust-marquee{margin-top:30px;padding:12px 0}
  .trust-track{gap:30px}
  .trust-track span{font-size:12.5px}

  /* stats */
  .stats{padding:34px 0 0}
  .stats-grid{gap:11px}
  .stat{padding:20px 10px;border-radius:16px}
  .stat-label{font-size:12px}

  /* sections */
  .section{padding:54px 0}
  .section-head{margin-bottom:34px}
  .section-head p{font-size:14.5px}
  .kicker{font-size:11px;margin-bottom:13px}

  /* features 2 列紧凑 */
  .feature-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .feature-card{padding:20px 15px;border-radius:16px}
  .fi{width:46px;height:46px;font-size:20px;border-radius:13px;margin-bottom:13px}
  .feature-card h3{font-size:15px}
  .feature-card p{font-size:12.7px;line-height:1.55}

  /* split */
  .split-grid,.experts-wrap{gap:22px}
  .split-copy .lead{font-size:14.5px;margin:14px 0 18px}
  .check-list{gap:10px;margin-bottom:22px}
  .check-list li{font-size:14px}
  .split-copy .btn{width:100%;justify-content:center}
  .media-tag{font-size:11.5px;padding:6px 11px;top:12px;left:12px}

  /* experts */
  .ep{padding:16px;gap:13px}
  .ep h3{font-size:15px}
  .ep p{font-size:13px}

  /* reviews — 1 per row */
  .review-card{flex:0 0 100%;padding:22px 20px}
  .slider-ctrl{gap:14px;margin-top:26px}
  .sld-btn{width:42px;height:42px}

  /* final cta */
  .final-cta{padding:56px 0}
  .final-inner{padding:38px 22px;border-radius:24px}
  .final-inner p{font-size:15px}
  .btn-primary.lg{font-size:16px;padding:16px 26px;width:100%;justify-content:center}

  /* footer + floating cta spacing */
  .footer{padding:44px 0 120px}
  .footer-inner{gap:26px}
  .footer-links{flex-direction:row;flex-wrap:wrap;gap:10px 18px}

  .float-cta{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .float-cta-btn{font-size:13.5px;padding:14px 16px;gap:9px}
  .float-cta-btn .cta-channel-img{width:22px;height:22px}
  .float-cta-btn .cta-arrow{display:none}

  .modal{padding:28px 22px}
  .modal h3{font-size:20px}
}

@media(max-width:360px){
  .hero-title{font-size:26px}
  .feature-card h3{font-size:14px}
  .float-cta-btn{font-size:12.5px}
}

/* reduce-motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}