/* home.css */

/* =========================
   IMPORTANT:
   - Header/Topbar styles must NOT be here.
   - Do NOT style: .topbar, .topbar-*, #menuBtn, .logo-slot, .logo-img, .brand-pill, etc.
   - Header is controlled ONLY by site-shell.css
========================= */

:root{
  --ease: cubic-bezier(.2,.9,.2,1);
  --dur: 520ms;

  /* default LIGHT (mint) */
  --bg: #EAF7F4;
  --bg2:#DFF3EE;

  --text: rgba(10, 25, 34, .88);
  --muted: rgba(10, 25, 34, .62);

  /* liquid glass */
  --glass: rgba(255,255,255,.44);
  --glass2: rgba(255,255,255,.62);
  --stroke: rgba(10, 35, 45, .12);

  /* logo-ish neon (USED for animated borders) */
  --c1: #2DE3D4;
  --c2: #44A9FF;
  --c3: #B45BFF;
  --c4: #FF6FB0;

  --shadow: 0 22px 70px rgba(10, 35, 45, .12);
  --shadow2: 0 12px 32px rgba(10, 35, 45, .10);

  --r: 18px;
  --r2: 26px;
  --blur: 16px;
}

[data-theme="dark"]{
  --bg: #071217;
  --bg2:#07161B;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.10);

  --shadow: 0 26px 90px rgba(0,0,0,.48);
  --shadow2: 0 14px 44px rgba(0,0,0,.34);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ direction:ltr; } /* always LTR */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* generic wrap */
.wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 18px 36px;
  position:relative;
  z-index:1;
}

/* remove extra top spacing ONLY for main content wrapper */
.wrap--main{
  padding-top: 6px;
}

/* grain */
.grain{
  pointer-events:none;
  position:fixed; inset:-40%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.18;
  animation: grainMove 9s steps(8) infinite;
  transform:translateZ(0);
}
@keyframes grainMove{
  0%{transform:translate(-3%, -2%)}
  20%{transform:translate(2%, -4%)}
  40%{transform:translate(5%, 3%)}
  60%{transform:translate(-4%, 6%)}
  80%{transform:translate(-6%, -3%)}
  100%{transform:translate(-3%, -2%)}
}

/* ambient blobs */
.ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.blob{ position:absolute; filter: blur(26px); opacity:.55; animation: blobFloat 8s var(--ease) infinite alternate; }
.blob.b1{ width:380px; height:380px; left:-120px; top:-80px; background: radial-gradient(circle, rgba(45,227,212,.45), transparent 60%); }
.blob.b2{ width:420px; height:420px; right:-140px; top:-70px; background: radial-gradient(circle, rgba(180,91,255,.28), transparent 62%); animation-delay: 240ms;}
.blob.b3{ width:520px; height:520px; left:30%; bottom:-260px; background: radial-gradient(circle, rgba(255,111,176,.22), transparent 62%); animation-delay: 520ms;}
@keyframes blobFloat{
  from{ transform: translateY(0) translateX(0) scale(1); }
  to{ transform: translateY(18px) translateX(10px) scale(1.04); }
}

/* liquid glass base */
.glass{
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.55), transparent 56%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.26), transparent 55%),
    radial-gradient(circle at 55% 15%, rgba(68,169,255,.10), transparent 62%);
  filter: blur(18px);
  opacity:.40;
  pointer-events:none;
}
[data-theme="dark"] .glass::before{
  opacity:.30;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.28), transparent 56%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 55% 15%, rgba(68,169,255,.16), transparent 62%);
}

/* =======================
   TOP EMPTY BOX (carousel placeholder)
   - full width (edge-to-edge)
   - big and empty (content later)
   - rotating color border (colors rotate, border stays fixed)
======================= */

@keyframes ringHue{
  from{ --ring-angle: 0deg; }
  to{ --ring-angle: 360deg; }
}

/* edge-to-edge inside centered .wrap */
.top-carousel{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  margin-top: 12px;
  border-radius: 28px;
  padding: 16px;

  min-height: 420px; /* BIG empty box */
  position: relative;
  z-index: 1;

  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  overflow:hidden;
}

/* animated ring (ONLY colors rotate) */
.top-carousel::after{
  content:"";
  position:absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ring-angle, 0deg), var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));

  /* mask = show only border ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  pointer-events:none;
  animation: ringHue 5s linear infinite;
  opacity: .95;
}

/* soft internal glow (optional but helps “big empty” look) */
.top-carousel::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 15% 25%, rgba(45,227,212,.16), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(68,169,255,.14), transparent 58%),
    radial-gradient(circle at 60% 90%, rgba(255,111,176,.10), transparent 62%);
  filter: blur(18px);
  opacity: .55;
  pointer-events:none;
}
[data-theme="dark"] .top-carousel::before{
  opacity: .48;
}

.top-carousel__inner{
  width: 95%;
  height: 100%;
  min-height: 420px;
  margin: 0 auto;
}

/* =======================
   Hero
======================= */

.hero{
  border-radius: var(--r2);
  padding: 18px;
  margin-top: 0;
}

.hero__top{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  margin-top: 6px;
  margin-bottom: 14px;
}
@media (max-width: 920px){
  .hero__top{ grid-template-columns: 1fr; }
}

.hero__text{
  border-radius: 22px;
  padding: 18px;
}
.t-title{
  margin:0 0 10px;
  font-size: 34px;
  letter-spacing: .2px;
}
.t-sub{
  margin:0 0 16px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

.cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--text);
  font-weight: 650;
  transition: transform 240ms var(--ease);
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.99); }

.btn--primary{
  border-color: color-mix(in srgb, var(--c2) 22%, var(--stroke));
  box-shadow: 0 20px 60px rgba(68,169,255,.14);
}
.btn--primary::before{
  opacity:.55;
  background:
    radial-gradient(circle at 20% 30%, rgba(45,227,212,.22), transparent 58%),
    radial-gradient(circle at 80% 70%, rgba(68,169,255,.16), transparent 58%);
}

.hero__mini{
  border-radius: 22px;
  padding: 18px;
  display:grid;
  gap:12px;
  align-content:start;
}
.mini__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pill{
  height: 10px; width: 70%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.03), rgba(0,0,0,.08));
  position:relative; overflow:hidden;
}
[data-theme="dark"] .pill{
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06), rgba(255,255,255,.18));
}
.pill::after{
  content:""; position:absolute; inset:0;
  transform: translateX(120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: shimmer 1.55s linear infinite;
  opacity:.7;
}
@keyframes shimmer{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(120%); }
}
.pill.w2{ width: 56%; }
.pill.w3{ width: 42%; }
.dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(45,227,212,.75), rgba(255,111,176,.45));
  opacity:.85;
}

/* =======================
   Interactive grid
======================= */

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
}

/* Big card */
.big{
  border-radius: 26px;
  min-height: 430px;
  padding: 18px;
  box-shadow: var(--shadow);
  transform-origin: center;
  transition: transform 260ms var(--ease);
}
.big:active{ transform: scale(.99); }

.big__shine{
  position:absolute; inset:-50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.25), transparent 55%),
    conic-gradient(from 230deg, rgba(45,227,212,.14), rgba(68,169,255,.12), rgba(180,91,255,.10), rgba(255,111,176,.10), rgba(45,227,212,.14));
  filter: blur(20px);
  opacity:.40;
  pointer-events:none;
  animation: bigGlow 6.8s var(--ease) infinite alternate;
}
@keyframes bigGlow{
  from{ transform: translate(-1.5%, -1%) rotate(-2deg); }
  to{ transform: translate(1.5%, 1%) rotate(2deg); }
}

.big__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.big__tag{
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
}
.big__status{
  width: 44px; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.03), rgba(0,0,0,.08));
}
[data-theme="dark"] .big__status{
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06), rgba(255,255,255,.18));
}

.big__title{
  margin: 0 0 10px;
  font-size: 22px;
}
.big__desc{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
  max-width: 56ch;
}
.big__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.big__visual{
  position:absolute;
  inset:auto 16px 16px 16px;
  height: 200px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16));
  overflow:hidden;
}
[data-theme="dark"] .big__visual{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}

.waves{ position:absolute; inset:0; opacity:.55; }
.wave{
  position:absolute; left:-20%;
  width: 140%; height: 28%;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: rgba(255,255,255,.10);
  animation: waveMove 4.2s var(--ease) infinite;
}
.wave:nth-child(1){ top:22%; }
.wave:nth-child(2){ top:48%; opacity:.45; animation-delay: 260ms; }
.wave:nth-child(3){ top:74%; opacity:.32; animation-delay: 520ms; }
@keyframes waveMove{
  0%{ transform: translateX(0) skewX(-12deg); }
  50%{ transform: translateX(6%) skewX(-12deg); }
  100%{ transform: translateX(0) skewX(-12deg); }
}

.badge{
  position:absolute;
  width: 120px; height: 120px;
  border-radius: 999px;
  right: 16px; bottom: 16px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.62), rgba(255,255,255,.22));
  border: 1px solid rgba(10,35,45,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
}

/* Rail */
.rail{
  display:grid;
  gap:12px;
  align-content:start;
}

.card{
  border-radius: 20px;
  min-height: 96px;
  padding: 14px;
  cursor:pointer;
  transform-origin:center;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.card:active{ transform: translateY(0) scale(.98); }

.card__icon{
  width: 34px; height: 34px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: conic-gradient(from 220deg, rgba(45,227,212,.40), rgba(68,169,255,.30), rgba(180,91,255,.22), rgba(255,111,176,.26), rgba(45,227,212,.40));
  display:inline-block;
}
.card__lines{ margin-top: 12px; display:grid; gap:10px; }
.line{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.03), rgba(0,0,0,.08));
  position:relative; overflow:hidden;
}
[data-theme="dark"] .line{
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06), rgba(255,255,255,.18));
}
.line::after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: shimmer 1.35s linear infinite;
  opacity:.7;
}
.line.w1{ width: 82%; }
.line.w2{ width: 62%; }
.line.w3{ width: 52%; }

.card__chev{
  position:absolute;
  right: 14px;
  top: 14px;
  width: 26px; height: 26px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: rgba(255,255,255,.24);
}
[data-theme="dark"] .card__chev{ background: rgba(255,255,255,.06); }

/* rail bottom */
.rail__cta{
  border-radius: 20px;
  padding: 14px;
}
.t-note{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* swap animation helper */
.swap-anim{
  animation: pop 340ms var(--ease);
}
@keyframes pop{
  0%{ transform: scale(.98); }
  60%{ transform: scale(1.01); }
  100%{ transform: scale(1); }
}

/* =======================
   Footer
======================= */

.footer{
  margin-top: 18px;
  padding-bottom: 28px;
}

.footer__panel{
  border-radius: 26px;
  padding: 18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.footer__panel::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.45), transparent 56%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(circle at 55% 15%, rgba(68,169,255,.10), transparent 62%);
  filter: blur(18px);
  opacity:.25;
  pointer-events:none;
}
[data-theme="dark"] .footer__panel::before{ opacity:.18; }

/* new grid (matches your current HTML: footer__grid--new + footer__colBox) */
.footer__grid--new{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 10px 6px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
}

@media (max-width: 1100px){
  .footer__grid--new{
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid--new > .footer__colBox[aria-label="Follow us"]{
    grid-column: 1 / -1;
  }
}

.footer__colBox{
  border-radius: 22px;
  padding: 14px;
  position: relative;
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  overflow:hidden;
}

/* rotating ring per column (ONLY colors rotate) */
.footer__colBox::after{
  content:"";
  position:absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ring-angle, 0deg), var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  pointer-events:none;
  animation: ringHue 5s linear infinite;
  opacity: .95;
}

/* footer headings */
.footer__title{
  margin: 6px 0 10px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

/* small subheads inside first column */
.footer__subhead{
  margin: 12px 0 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

/* links inside boxes */
.footer__colBox .footer__link{
  display:block;
  padding: 9px 10px;
  border-radius: 14px;
  text-decoration:none;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  box-shadow: 0 10px 24px rgba(10, 35, 45, .06);
  background: transparent;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.footer__colBox .footer__link:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--c2) 40%, var(--stroke));
  box-shadow: 0 16px 30px rgba(10, 35, 45, .12);
}

.footer__colBox .footer__link:active{ transform: translateY(0) scale(.99); }

.footer__colBox .footer__link.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events:none;
}

/* follow placeholders (4 tiles) */
.follow-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.follow-tile{
  height: 64px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  transition: transform 220ms var(--ease);
}
[data-theme="dark"] .follow-tile{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.follow-tile:hover{ transform: translateY(-1px); }
.follow-tile:active{ transform: translateY(0); }

.follow-tile::before{
  content:"";
  width: 28px;
  height: 28px;
  background: var(--social-icon) no-repeat center / contain;
  transition: transform 220ms var(--ease), filter 220ms var(--ease);
  opacity: .95;
}

.follow-tile--instagram{
  --social-icon: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20stroke%3D%22%23000000%22%20stroke-width%3D%220.00032%22%20transform%3D%22matrix(1,%200,%200,%201,%200,%200)%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke%3D%22%23CCCCCC%22%20stroke-width%3D%220.256%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%226%22%20fill%3D%22url(%23paint0_radial_87_7153)%22%3E%3C/rect%3E%20%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%226%22%20fill%3D%22url(%23paint1_radial_87_7153)%22%3E%3C/rect%3E%20%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2228%22%20height%3D%2228%22%20rx%3D%226%22%20fill%3D%22url(%23paint2_radial_87_7153)%22%3E%3C/rect%3E%20%3Cpath%20d%3D%22M23%2010.5C23%2011.3284%2022.3284%2012%2021.5%2012C20.6716%2012%2020%2011.3284%2020%2010.5C20%209.67157%2020.6716%209%2021.5%209C22.3284%209%2023%209.67157%2023%2010.5Z%22%20fill%3D%22white%22%3E%3C/path%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2021C18.7614%2021%2021%2018.7614%2021%2016C21%2013.2386%2018.7614%2011%2016%2011C13.2386%2011%2011%2013.2386%2011%2016C11%2018.7614%2013.2386%2021%2016%2021ZM16%2019C17.6569%2019%2019%2017.6569%2019%2016C19%2014.3431%2017.6569%2013%2016%2013C14.3431%2013%2013%2014.3431%2013%2016C13%2017.6569%2014.3431%2019%2016%2019Z%22%20fill%3D%22white%22%3E%3C/path%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2015.6C6%2012.2397%206%2010.5595%206.65396%209.27606C7.2292%208.14708%208.14708%207.2292%209.27606%206.65396C10.5595%206%2012.2397%206%2015.6%206H16.4C19.7603%206%2021.4405%206%2022.7239%206.65396C23.8529%207.2292%2024.7708%208.14708%2025.346%209.27606C26%2010.5595%2026%2012.2397%2026%2015.6V16.4C26%2019.7603%2026%2021.4405%2025.346%2022.7239C24.7708%2023.8529%2024.7708%2024.7708%2022.7239%2025.346C21.4405%2026%2019.7603%2026%2016.4%2026H15.6C12.2397%2026%2010.5595%2026%209.27606%2025.346C8.14708%2024.7708%207.2292%2023.8529%206.65396%2022.7239C6%2021.4405%206%2019.7603%206%2016.4V15.6ZM15.6%208H16.4C18.1132%208%2019.2777%208.00156%2020.1779%208.0751C21.0548%208.14674%2021.5032%208.27659%2021.816%208.43597C22.5686%208.81947%2023.1805%209.43139%2023.564%2010.184C23.7234%2010.4968%2023.8533%2010.9452%2023.9249%2011.8221C23.9984%2012.7223%2024%2013.8868%2024%2015.6V16.4C24%2018.1132%2023.9984%2019.2777%2023.9249%2020.1779C23.8533%2021.0548%2023.7234%2021.5032%2023.564%2021.816C23.1805%2022.5686%2022.5686%2023.1805%2021.816%2023.564C21.5032%2023.7234%2021.0548%2023.8533%2020.1779%2023.9249C19.2777%2023.9984%2018.1132%2024%2016.4%2024H15.6C13.8868%2024%2012.7223%2023.9984%2011.8221%2023.9249C10.9452%2023.8533%2010.4968%2023.7234%2010.184%2023.564C9.43139%2023.1805%208.81947%2022.5686%208.43597%2021.816C8.27659%2021.5032%208.14674%2021.0548%208.0751%2020.1779C8.00156%2019.2777%208%2018.1132%208%2016.4V15.6C8%2013.8868%208.00156%2012.7223%208.0751%2011.8221C8.14674%2010.9452%208.27659%2010.4968%208.43597%2010.184C8.81947%209.43139%209.43139%208.81947%2010.184%208.43597C10.4968%208.27659%2010.9452%208.14674%2011.8221%208.0751C12.7223%208.00156%2013.8868%208%2015.6%208Z%22%20fill%3D%22white%22%3E%3C/path%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22paint0_radial_87_7153%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(12%2023)%20rotate(-55.3758)%20scale(25.5196)%22%3E%20%3Cstop%20stop-color%3D%22%23B13589%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%220.79309%22%20stop-color%3D%22%23C62F94%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238A3AC8%22%3E%3C/stop%3E%20%3C/radialGradient%3E%20%3CradialGradient%20id%3D%22paint1_radial_87_7153%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(11%2031)%20rotate(-65.1363)%20scale(22.5942)%22%3E%20%3Cstop%20stop-color%3D%22%23E0E8B7%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%220.444662%22%20stop-color%3D%22%23FB8A2E%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%220.71474%22%20stop-color%3D%22%23E2425C%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E2425C%22%20stop-opacity%3D%220%22%3E%3C/stop%3E%20%3C/radialGradient%3E%20%3CradialGradient%20id%3D%22paint2_radial_87_7153%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(0.500002%203)%20rotate(-8.1301)%20scale(38.8909%208.31836)%22%3E%20%3Cstop%20offset%3D%220.156701%22%20stop-color%3D%22%23406ADC%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%220.467799%22%20stop-color%3D%22%236A45BE%22%3E%3C/stop%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236A45BE%22%20stop-opacity%3D%220%22%3E%3C/stop%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3C/g%3E%3C/svg%3E');
}

.follow-tile--youtube{
  --social-icon: url('data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%20-7%2048%2048%22%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%3E%3Ctitle%3EYoutube-color%3C/title%3E%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Color-%22%20transform%3D%22translate(-200.000000,%20-368.000000)%22%20fill%3D%22%23CE1312%22%3E%3Cpath%20d%3D%22M219.044,391.269916%20L219.0425,377.687742%20L232.0115,384.502244%20L219.044,391.269916%20Z%20M247.52,375.334163%20C247.52,375.334163%20247.0505,372.003199%20245.612,370.536366%20C243.7865,368.610299%20241.7405,368.601235%20240.803,368.489448%20C234.086,368%20224.0105,368%20224.0105,368%20L223.9895,368%20C223.9895,368%20213.914,368%20207.197,368.489448%20C206.258,368.601235%20204.2135,368.610299%20202.3865,370.536366%20C200.948,372.003199%20200.48,375.334163%20200.48,375.334163%20C200.48,375.334163%20200,379.246723%20200,383.157773%20L200,386.82561%20C200,390.73817%20200.48,394.64922%20200.48,394.64922%20C200.48,394.64922%20200.948,397.980184%20202.3865,399.447016%20C204.2135,401.373084%20206.612,401.312658%20207.68,401.513574%20C211.52,401.885191%20224,402%20224,402%20C224,402%20234.086,401.984894%20240.803,401.495446%20C241.7405,401.382148%20243.7865,401.373084%20245.612,399.447016%20C247.0505,397.980184%20247.52,394.64922%20247.52,394.64922%20C247.52,394.64922%20248,390.73817%20248,386.82561%20L248,383.157773%20C248,379.246723%20247.52,375.334163%20247.52,375.334163%20L247.52,375.334163%20Z%22%20id%3D%22Youtube%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

.follow-tile--telegram{
  --social-icon: url('data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%20fill%3D%22url(%23paint0_linear_87_7225)%22/%3E%3Cpath%20d%3D%22M22.9866%2010.2088C23.1112%209.40332%2022.3454%208.76755%2021.6292%209.082L7.36482%2015.3448C6.85123%2015.5703%206.8888%2016.3483%207.42147%2016.5179L10.3631%2017.4547C10.9246%2017.6335%2011.5325%2017.541%2012.0228%2017.2023L18.655%2012.6203C18.855%2012.4821%2019.073%2012.7665%2018.9021%2012.9426L14.1281%2017.8646C13.665%2018.3421%2013.7569%2019.1512%2014.314%2019.5005L19.659%2022.8523C20.2585%2023.2282%2021.0297%2022.8506%2021.1418%2022.1261L22.9866%2010.2088Z%22%20fill%3D%22white%22/%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_87_7225%22%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%2230%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2337BBFE%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23007DBB%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}

.follow-tile--whatsapp{
  --social-icon: url('data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2031C23.732%2031%2030%2024.732%2030%2017C30%209.26801%2023.732%203%2016%203C8.26801%203%202%209.26801%202%2017C2%2019.5109%202.661%2021.8674%203.81847%2023.905L2%2031L9.31486%2029.3038C11.3014%2030.3854%2013.5789%2031%2016%2031ZM16%2028.8462C22.5425%2028.8462%2027.8462%2023.5425%2027.8462%2017C27.8462%2010.4576%2022.5425%205.15385%2016%205.15385C9.45755%205.15385%204.15385%2010.4576%204.15385%2017C4.15385%2019.5261%204.9445%2021.8675%206.29184%2023.7902L5.23077%2027.7692L9.27993%2026.7569C11.1894%2028.0746%2013.5046%2028.8462%2016%2028.8462Z%22%20fill%3D%22%23BFC8D0%22/%3E%3Cpath%20d%3D%22M28%2016C28%2022.6274%2022.6274%2028%2016%2028C13.4722%2028%2011.1269%2027.2184%209.19266%2025.8837L5.09091%2026.9091L6.16576%2022.8784C4.80092%2020.9307%204%2018.5589%204%2016C4%209.37258%209.37258%204%2016%204C22.6274%204%2028%209.37258%2028%2016Z%22%20fill%3D%22url(%23paint0_linear_87_7264)%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2030C23.732%2030%2030%2023.732%2030%2016C30%208.26801%2023.732%202%2016%202C8.26801%202%202%208.26801%202%2016C2%2018.5109%202.661%2020.8674%203.81847%2022.905L2%2030L9.31486%2028.3038C11.3014%2029.3854%2013.5789%2030%2016%2030ZM16%2027.8462C22.5425%2027.8462%2027.8462%2022.5425%2027.8462%2016C27.8462%209.45755%2022.5425%204.15385%2016%204.15385C9.45755%204.15385%204.15385%209.45755%204.15385%2016C4.15385%2018.5261%204.9445%2020.8675%206.29184%2022.7902L5.23077%2026.7692L9.27993%2025.7569C11.1894%2027.0746%2013.5046%2027.8462%2016%2027.8462Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M12.5%209.49989C12.1672%208.83131%2011.6565%208.8905%2011.1407%208.8905C10.2188%208.8905%208.78125%209.99478%208.78125%2012.05C8.78125%2013.7343%209.52345%2015.578%2012.0244%2018.3361C14.438%2020.9979%2017.6094%2022.3748%2020.2422%2022.3279C22.875%2022.2811%2023.4167%2020.0154%2023.4167%2019.2503C23.4167%2018.9112%2023.2062%2018.742%2023.0613%2018.696C22.1641%2018.2654%2020.5093%2017.4631%2020.1328%2017.3124C19.7563%2017.1617%2019.5597%2017.3656%2019.4375%2017.4765C19.0961%2017.8018%2018.4193%2018.7608%2018.1875%2018.9765C17.9558%2019.1922%2017.6103%2019.083%2017.4665%2019.0015C16.9374%2018.7892%2015.5029%2018.1511%2014.3595%2017.0426C12.9453%2015.6718%2012.8623%2015.2001%2012.5959%2014.7803C12.3828%2014.4444%2012.5392%2014.2384%2012.6172%2014.1483C12.9219%2013.7968%2013.3426%2013.254%2013.5313%2012.9843C13.7199%2012.7145%2013.5702%2012.305%2013.4803%2012.05C13.0938%2010.953%2012.7663%2010.0347%2012.5%209.49989Z%22%20fill%3D%22white%22/%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_87_7264%22%20x1%3D%2226.5%22%20y1%3D%227%22%20x2%3D%224%22%20y2%3D%2228%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%235BD066%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2327B43E%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}

.follow-tile:hover::before{
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.05);
}

.follow-tile:active::before{
  transform: scale(.96) rotate(-4deg);
  filter: brightness(.98);
}

/* footer bottom */
.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 6px 6px;
}
@media (max-width: 980px){
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

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

.footer__brandIcon{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.18));
  object-fit: cover;
}

.footer__brandLine1{
  font-weight: 800;
  letter-spacing: .2px;
}
.footer__brandLine2{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.footer__legal{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer__copy{
  font-size: 12px;
  color: var(--muted);
}

.footer__badges{
  display:flex;
  gap:10px;
}
.badge-chip{
  width: 76px;
  height: 42px;
  border-radius: 16px;
}