*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#ffffff;
  --bg2:#f6f6fb;
  --bg3:#eeeefc;
  --bg4:#e4e4f0;
  --br:rgba(0,0,0,0.07);
  --brm:rgba(0,0,0,0.11);
  --bra:rgba(99,91,255,0.22);
  --t1:#0d0d18;
  --t2:#52526e;
  --t3:#9898b8;
  --ac:#635bff;
  --acl:#eeecff;
  --acg:rgba(99,91,255,0.16);
  --ac2:#ff5fa0;
  --ac3:#00c4a0;
  --sbg:rgba(0,196,160,0.10);
  --sbr:rgba(0,196,160,0.35);
  --s1:0 1px 4px rgba(0,0,0,0.06);
  --s2:0 4px 20px rgba(0,0,0,0.07);
  --s3:0 8px 40px rgba(0,0,0,0.10);
  --fh:'Space Grotesk',sans-serif;
  --fb:'Plus Jakarta Sans',sans-serif;
  --r1:10px;
  --r2:14px;
  --r3:20px;
  --r4:28px;
  --main-pt:32px;
  --hdr-h:56px;
  --hdr-gap:10px;
  --container-w:960px;
}
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 1px !important;
}

html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ─── HEADER ─── */
header{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(160deg, rgba(240,238,255,0.85) 0%, rgba(253,246,255,0.85) 50%, rgba(238,255,249,0.85) 100%);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:transform .3s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Once scrolled past the hero — solid white bar with separation */
header.scrolled{
  background:var(--bg);
  border-bottom:1px solid var(--br);
  box-shadow:var(--s1);
}
/* Desktop only — auto-hide header when scrolling down, reveal on scroll up */
@media(min-width:769px){
  header.hide-on-scroll{ transform:translateY(-100%); }
}
.hdr{max-width:1440px;margin:0 auto;padding:16px 32px 0}
.hdr-top{display:flex;align-items:center;gap:16px;margin-bottom:14px}

/* LOGO */
.logo{font-family:var(--fh);font-weight:700;color:var(--t1);text-decoration:none;display:flex;align-items:center;gap:11px;white-space:nowrap;flex-shrink:0;letter-spacing:-0.3px}
.logo-icon{width:42px;height:42px;flex-shrink:0;background:linear-gradient(135deg,var(--ac),var(--ac2));border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 14px rgba(99,91,255,0.30)}
.logo-name{display:block;font-size:21px;line-height:1.1}
.logo-sub{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.09em;text-transform:uppercase;display:block;margin-top:2px;line-height:1}

/* SEARCH */
.srch{flex:1;position:relative;min-width:0;max-width:600px}
.srch-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none;display:flex;align-items:center}
.srch input{
  width:100%;padding:12px 44px 12px 44px;
  background:var(--bg2);border:1.5px solid var(--brm);
  border-radius:var(--r3);
  font-family:var(--fb);font-size:15px;font-weight:500;
  color:var(--t1);outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.srch input::placeholder{color:var(--t3);font-size:14px}
.srch input:focus{border-color:var(--ac);box-shadow:0 0 0 4px var(--acg);background:var(--bg)}
.srch-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:var(--bg4);border:none;border-radius:8px;color:var(--t2);cursor:pointer;width:26px;height:26px;display:none;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:all .12s}
.srch-x:hover{background:var(--bra);color:var(--ac)}
.srch-x.on{display:flex}

/* COUNT BADGE */
.hdr-cnt{font-size:12px;font-weight:700;color:var(--t2);white-space:nowrap;flex-shrink:0;background:var(--bg2);border:1.5px solid var(--br);padding:6px 14px;border-radius:99px;letter-spacing:.01em}

/* CATEGORY PILLS */
.cats{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:16px;scrollbar-width:none;-ms-overflow-style:none}
.cats::-webkit-scrollbar{display:none}
.cpill{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid var(--brm);background:var(--bg);color:var(--t2);font-family:var(--fb);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;box-shadow:var(--s1);user-select:none;flex-shrink:0}
.cat-more-chev{width:9px;height:6px;flex-shrink:0;transition:transform .2s ease}
.cat-more-btn.open .cat-more-chev{transform:rotate(180deg)}
.cat-more-menu{position:fixed;top:0;left:0;min-width:180px;background:var(--bg);border:1.5px solid var(--brm);border-radius:var(--r2);box-shadow:var(--s3);padding:6px;display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease;z-index:60}
.cat-more-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.cat-more-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:none;background:transparent;color:var(--t2);font-family:var(--fb);font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;white-space:nowrap;transition:background .15s}
.cat-more-item:hover{background:var(--bg2)}
.cat-more-item.on{background:var(--acl);color:var(--ac)}
.cpill:hover{border-color:var(--ac);color:var(--ac);background:var(--acl);box-shadow:0 2px 10px var(--acg)}
.cpill.on{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 4px 16px rgba(99,91,255,0.32)}

/* ─── MAIN ─── */
main{max-width:var(--container-w);margin:0 auto;padding:var(--main-pt) 32px 0}

/* HERO */
.hero{
  background:linear-gradient(140deg,#eeeaff 0%,#fff0f8 45%,#e8fff9 100%);
  border:1.5px solid rgba(99,91,255,0.10);
  border-radius:var(--r4);
  padding:40px 48px;
  margin-bottom:36px;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
  position:relative;overflow:hidden;
  box-shadow:var(--s2);
}
.hero::before{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(99,91,255,0.08),transparent 70%);top:-120px;right:-80px;pointer-events:none}
.hero::after{content:'';position:absolute;width:260px;height:260px;background:radial-gradient(circle,rgba(255,95,160,0.06),transparent 70%);bottom:-80px;left:30px;pointer-events:none}
.hero-text{}
.hero h1{font-family:var(--fh);font-size:34px;font-weight:700;letter-spacing:-.7px;color:var(--t1);margin-bottom:10px;line-height:1.18}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:15px;color:var(--t2);max-width:420px;line-height:1.75}
.hero-stats{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap}
.stat{text-align:center;background:rgba(255,255,255,0.85);border:1.5px solid rgba(99,91,255,0.10);border-radius:18px;padding:16px 26px;min-width:96px;box-shadow:var(--s1);backdrop-filter:blur(8px)}
.stat-n{font-family:var(--fh);font-size:32px;font-weight:700;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;display:block}
.stat-l{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.10em;margin-top:6px;display:block}

/* SECTION LABEL */
.slabel{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin:36px 0 14px;display:flex;align-items:center;gap:12px}
.slabel:first-child{margin-top:0}
.slabel::after{content:'';flex:1;height:1.5px;background:linear-gradient(to right,var(--br),transparent)}

/* EMOJI GRID */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:7px}
.ebtn{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;
  background:var(--bg2);border:1.5px solid transparent;
  border-radius:var(--r2);cursor:pointer;position:relative;
  user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform .13s cubic-bezier(.34,1.56,.64,1),background .12s,border-color .12s,box-shadow .12s;
}
.ebtn:hover{background:var(--bg);border-color:var(--bra);transform:translateY(-3px) scale(1.13);box-shadow:0 8px 22px rgba(99,91,255,0.14);z-index:2}
.ebtn:active{transform:scale(.91);box-shadow:none;transition-duration:.06s}
.ebtn.copied{background:var(--sbg);border-color:var(--sbr);animation:pop .32s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.30)}100%{transform:scale(1)}}

/* TOOLTIP */
.ebtn::after{content:attr(data-name);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);background:var(--t1);color:#fff;font-family:var(--fb);font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .14s;z-index:30;text-transform:capitalize;max-width:150px;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--s2)}
.ebtn::before{content:'';position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--t1);pointer-events:none;opacity:0;transition:opacity .14s;z-index:30}
.ebtn:hover::after,.ebtn:hover::before{opacity:1}

/* TOAST */
#toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--t1);color:#fff;padding:13px 24px;border-radius:99px;font-family:var(--fb);font-size:14px;font-weight:600;box-shadow:0 8px 40px rgba(0,0,0,0.16);transition:transform .30s cubic-bezier(.34,1.56,.64,1),opacity .30s;z-index:500;pointer-events:none;white-space:nowrap;opacity:0;display:flex;align-items:center;gap:10px}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.tck{width:22px;height:22px;border-radius:50%;background:var(--ac3);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;color:#fff;font-weight:700}

/* EMPTY */
.empty{text-align:center;padding:80px 20px;color:var(--t3)}
.empty-ico{font-size:56px;display:block;margin-bottom:16px}
.empty h3{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--t2);margin-bottom:8px}
.empty p{font-size:14px;color:var(--t3);line-height:1.6}
.empty-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.empty-tag{padding:6px 14px;border-radius:99px;background:var(--acl);color:var(--ac);font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:var(--fb);transition:all .12s}
.empty-tag:hover{background:var(--ac);color:#fff}

/* FOOTER */
footer{border-top:1px solid var(--br);text-align:center;padding:28px 20px;font-size:13px;color:var(--t3);font-weight:500}
footer .ac{color:var(--ac)}

/* SCROLL TOP */
#stop{position:fixed;bottom:36px;right:28px;width:44px;height:44px;background:var(--t1);border:none;border-radius:14px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;opacity:0;pointer-events:none;transition:opacity .20s,transform .20s;box-shadow:var(--s3);z-index:100}
#stop.on{opacity:1;pointer-events:auto}
#stop:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.14)}

/* ════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   320px   – very small phones (Galaxy Fold etc)
   375px   – iPhone SE / small Android
   430px   – iPhone Pro Max / large Android
   560px   – large phones (landscape)
   768px   – iPad portrait / small tablets
   1024px  – iPad landscape / small laptops
   1280px  – standard laptop
   1440px  – large laptop / desktop
   1920px  – Full HD monitor / TV
   2560px  – 4K / large TV
════════════════════════════════════════ */

/* ── 4K / Large TV (2560px+) ── */
@media(min-width:2560px){
  .hdr{max-width:2200px;padding:20px 60px 0}
  :root{--main-pt:48px}
  main{max-width:var(--container-w);padding:var(--main-pt) 60px 0}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
  .ebtn{font-size:38px;border-radius:18px}
  .hero{padding:60px 80px;border-radius:36px}
  .hero h1{font-size:52px}
  .hero p{font-size:18px}
  .stat-n{font-size:48px}
  .stat{min-width:140px;padding:22px 36px;border-radius:24px}
  .logo-icon{width:56px;height:56px;font-size:26px;border-radius:16px}
  .logo-name{font-size:30px}
  .logo-sub{font-size:12px}
  .cpill{font-size:16px;padding:10px 22px;gap:8px}
  .srch input{font-size:18px;padding:16px 52px;border-radius:28px}
  .hdr-cnt{font-size:15px;padding:8px 20px}
  .slabel{font-size:14px;margin:48px 0 18px}
  #toast{font-size:18px;padding:16px 32px;bottom:50px}
  .tck{width:30px;height:30px;font-size:16px}
  #stop{width:56px;height:56px;font-size:24px;border-radius:18px;bottom:50px;right:50px}
}

/* ── Full HD / Large Desktop (1920px) ── */
@media(min-width:1920px) and (max-width:2559px){
  .hdr{max-width:1800px;padding:18px 48px 0}
  :root{--main-pt:40px}
  main{max-width:var(--container-w);padding:var(--main-pt) 48px 0}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:9px}
  .ebtn{font-size:32px;border-radius:16px}
  .hero{padding:48px 60px;border-radius:32px}
  .hero h1{font-size:42px}
  .hero p{font-size:17px}
  .stat-n{font-size:40px}
  .stat{min-width:120px;padding:20px 30px}
  .logo-icon{width:48px;height:48px;font-size:22px}
  .logo-name{font-size:26px}
  .cpill{font-size:15px;padding:9px 20px}
  .srch input{font-size:16px;padding:14px 48px;border-radius:24px}
  .slabel{font-size:13px;margin:44px 0 16px}
}

/* ── Large Laptop / Desktop (1440px) ── */
@media(min-width:1440px) and (max-width:1919px){
  .egrid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
  .ebtn{font-size:30px}
  .hero h1{font-size:36px}
  .stat-n{font-size:34px}
}

/* ── Standard Laptop (1280px) ── */
@media(min-width:1280px) and (max-width:1439px){
  .egrid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:7px}
  .ebtn{font-size:28px}
}

/* ── Small Laptop / iPad landscape (1024px) ── */
@media(max-width:1023px){
  .hdr{padding:14px 24px 0}
  :root{--main-pt:24px}
  main{padding:var(--main-pt) 24px 0}
  .hero{padding:32px 36px}
  .hero h1{font-size:28px}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
  .ebtn{font-size:26px}
}

/* ── iPad portrait / tablets (768px) ── */
@media(max-width:767px){
  .hdr-cnt{display:none}
  .hdr{padding:12px 18px 0}
  :root{--main-pt:20px}
  main{padding:var(--main-pt) 18px 0}
  .hero{padding:26px 28px;border-radius:22px;margin-bottom:24px}
  .hero h1{font-size:24px;letter-spacing:-.4px}
  .hero p{font-size:13.5px}
  .hero-stats{gap:8px}
  .stat{padding:13px 18px;min-width:80px;border-radius:14px}
  .stat-n{font-size:26px}
  .stat-l{font-size:9.5px}
  .slabel{margin:26px 0 10px}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px}
  .ebtn{font-size:24px;border-radius:12px}
  .cpill{font-size:12.5px;padding:6px 13px}
}

/* ── Large phones landscape / small tablets (600px) ── */
@media(max-width:599px){
  .logo-sub{display:none}
  .srch input{font-size:14px}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:5px}
  .ebtn{font-size:23px}
}

/* ── Standard mobile (430px - iPhone Pro Max) ── */
@media(max-width:430px){
  .hdr{padding:11px 14px 0}
  .hdr-top{gap:10px}
  .logo-icon{width:35px;height:35px;font-size:17px;border-radius:11px}
  .logo-name{font-size:18px}
  .logo-sub{display:none}
  .srch input{font-size:13.5px;padding:10px 38px;border-radius:12px}
  .srch-ico svg{width:14px;height:14px}
  .cats{gap:4px;padding-bottom:12px}
  .cpill{font-size:12px;padding:5px 12px;gap:4px}
  :root{--main-pt:14px}
  main{padding:var(--main-pt) 12px 0}
  .hero{padding:18px 20px;border-radius:18px;margin-bottom:16px}
  .hero h1{font-size:19px;letter-spacing:-.3px;margin-bottom:6px}
  .hero p{display:none}
  .hero-stats{gap:7px}
  .stat{padding:11px 14px;min-width:72px;border-radius:12px}
  .stat-n{font-size:22px}
  .stat-l{font-size:9px;margin-top:4px}
  .slabel{margin:20px 0 9px;font-size:10px;letter-spacing:.09em}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px}
  .ebtn{font-size:23px;border-radius:11px}
  .ebtn::after,.ebtn::before{display:none}
  #toast{font-size:13px;padding:11px 18px;bottom:22px;max-width:90vw;border-radius:16px}
  #stop{width:38px;height:38px;border-radius:11px;bottom:22px;right:14px;font-size:16px}
}

/* ── Small mobile (375px - iPhone SE) ── */
@media(max-width:375px){
  .logo-name{font-size:17px}
  .logo-icon{width:32px;height:32px;font-size:15px;border-radius:10px}
  .cpill{font-size:11.5px;padding:5px 10px}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
  .ebtn{font-size:21px;border-radius:10px}
  .hero h1{font-size:17px}
  .stat-n{font-size:20px}
  .stat{min-width:66px;padding:10px 12px}
}

/* ── Very small mobile (320px - Galaxy Fold, iPod) ── */
@media(max-width:320px){
  .hdr-top{gap:8px}
  .logo-name{font-size:15px}
  .logo-icon{width:30px;height:30px;font-size:14px;border-radius:9px}
  .cpill{font-size:11px;padding:4px 9px}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:3px}
  .ebtn{font-size:19px;border-radius:9px}
  .hero{padding:14px 16px;border-radius:14px}
  .hero h1{font-size:15px}
  .stat-n{font-size:18px}
  .stat{min-width:58px;padding:8px 10px}
}

@media(prefers-reduced-motion:reduce){.ebtn,.ebtn.copied,#toast{transition:none!important;animation:none!important}}

/* ── PAGE SYSTEM ── */
#app-main { display:block; overflow-x:hidden; }
.page { display:none; min-height:100vh; max-width:var(--container-w); margin:0 auto; padding:48px 32px 100px }
.page.active { display:block }
.page-hero { margin-bottom:40px; padding-bottom:32px; border-bottom:2px solid var(--br); }
.page-badge { display:inline-flex; align-items:center; gap:7px; background:var(--acl); color:var(--ac); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 13px; border-radius:99px; margin-bottom:16px; }
.page-hero h2 { font-family:var(--fh); font-size:38px; font-weight:700; letter-spacing:-.7px; color:var(--t1); line-height:1.15; margin-bottom:12px; }
.page-hero h2 em { font-style:normal; background:linear-gradient(135deg,var(--ac),var(--ac2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-hero p { font-size:16px; color:var(--t2); line-height:1.75; max-width:580px; }
.page-updated { font-size:13px; color:var(--t3); margin-top:10px; font-weight:500; }
.page-section { margin-bottom:36px; }
.page-section h3 { font-family:var(--fh); font-size:20px; font-weight:700; color:var(--t1); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.page-section h3 .sec-ico { width:34px; height:34px; border-radius:10px; background:var(--acl); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.page-section p { font-size:15px; color:var(--t2); line-height:1.80; margin-bottom:10px; }
.page-section ul, .page-section ol { padding-left:22px; margin-top:8px; }
.page-section li { font-size:15px; color:var(--t2); line-height:1.75; margin-bottom:6px; }
.page-section a { color:var(--ac); text-decoration:none; font-weight:600; border-bottom:1px solid var(--acl); transition:border-color .15s; }
.page-section a:hover { border-color:var(--ac); }
.page-divider { height:1px; background:var(--br); margin:32px 0; }

/* ABOUT - team cards */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:16px; }
.team-card { background:var(--bg2); border:1.5px solid var(--br); border-radius:18px; padding:24px 20px; text-align:center; transition:all .18s; }
.team-card:hover { border-color:var(--bra); box-shadow:var(--s2); transform:translateY(-2px); }
.team-card .tc-ico { font-size:42px; display:block; margin-bottom:12px; }
.team-card h3 { font-family:var(--fh); font-size:16px; font-weight:700; color:var(--t1); margin-bottom:4px; }
.team-card p { font-size:13px; color:var(--t2); line-height:1.5; }

/* ABOUT - value cards */
.value-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:16px; }
.value-card { background:linear-gradient(135deg,var(--acl),#fff); border:1.5px solid rgba(99,91,255,0.12); border-radius:16px; padding:20px; transition:all .18s; }
.value-card:hover { box-shadow:var(--s2); transform:translateY(-2px); }
.value-card .vc-ico { font-size:28px; display:block; margin-bottom:10px; }
.value-card h4 { font-family:var(--fh); font-size:15px; font-weight:700; color:var(--t1); margin-bottom:6px; }
.value-card p { font-size:13px; color:var(--t2); line-height:1.55; }

/* CONTACT - form */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-top:0; }
.contact-info { }
.contact-card { display:flex; align-items:flex-start; gap:14px; background:var(--bg2); border:1.5px solid var(--br); border-radius:16px; padding:18px 20px; margin-bottom:12px; transition:all .18s; }
.contact-card:hover { border-color:var(--bra); box-shadow:var(--s1); }
.contact-card .cc-ico { width:40px; height:40px; border-radius:12px; background:var(--acl); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.contact-card h3 { font-family:var(--fh); font-size:14px; font-weight:700; color:var(--t1); margin-bottom:3px; }
.contact-card p { font-size:13px; color:var(--t2); line-height:1.5; }
.contact-card a { color:var(--ac); font-weight:600; text-decoration:none; }
.cform { background:var(--bg2); border:1.5px solid var(--br); border-radius:20px; padding:28px; }
.cform-title { font-family:var(--fh); font-size:20px; font-weight:700; color:var(--t1); margin-bottom:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fgroup { margin-bottom:14px; }
.fgroup label { display:block; font-size:13px; font-weight:600; color:var(--t2); margin-bottom:6px; letter-spacing:.01em; }
.fgroup input, .fgroup select, .fgroup textarea { width:100%; padding:11px 14px; background:var(--bg); border:1.5px solid var(--brm); border-radius:12px; font-family:var(--fb); font-size:14px; color:var(--t1); outline:none; transition:border-color .18s, box-shadow .18s; resize:vertical; }
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus { border-color:var(--ac); box-shadow:0 0 0 3.5px var(--acg); }
.fgroup textarea { min-height:110px; }
.fgroup select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239898b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }
.btn-submit { width:100%; padding:13px; background:var(--ac); color:#fff; border:none; border-radius:12px; font-family:var(--fb); font-size:15px; font-weight:700; cursor:pointer; transition:all .18s; box-shadow:0 4px 14px rgba(99,91,255,0.28); letter-spacing:.01em; }
.btn-submit:hover { background:#5650e8; transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,91,255,0.36); }
.btn-submit:active { transform:scale(.98); }
.form-success { display:none; text-align:center; padding:32px 20px; }
.form-success .fs-ico { font-size:48px; display:block; margin-bottom:12px; }
.form-success p.fs-title { font-family:var(--fh); font-size:20px; font-weight:700; color:var(--t1); margin-bottom:8px; }
.form-success p { font-size:14px; color:var(--t2); }

/* PRIVACY / DISCLAIMER - highlight box */
.highlight-box { background:linear-gradient(135deg,var(--acl),#fff0f8); border:1.5px solid rgba(99,91,255,0.14); border-radius:16px; padding:20px 24px; margin-bottom:28px; }
.highlight-box p { font-size:14px; color:var(--t2); line-height:1.70; margin:0; }
.highlight-box strong { color:var(--ac); }
.warn-box { background:linear-gradient(135deg,#fff8ec,#fff); border:1.5px solid rgba(255,160,60,0.22); border-radius:16px; padding:20px 24px; margin-bottom:28px; }
.warn-box p { font-size:14px; color:#7a5c2e; line-height:1.70; margin:0; }

/* FOOTER NAV */
#main-footer {
  background: linear-gradient(160deg, #f0eeff 0%, #fdf6ff 40%, #eefff9 80%, #f5f5ff 100%);
  border-top: 1.5px solid var(--br);
  padding: 48px 24px;
}
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:20px; max-width:920px; margin:0 auto; }

/* Social icons */
.footer-socials { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.soc-btn {
  width:40px; height:40px; border-radius:50%;
  background:var(--bg2); border:1.5px solid var(--brm);
  display:flex; align-items:center; justify-content:center;
  color:var(--t2); text-decoration:none;
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--s1);
  flex-shrink:0;
}
.soc-btn:hover {
  background:var(--ac); border-color:var(--ac);
  color:#fff; transform:translateY(-3px) scale(1.10);
  box-shadow:0 6px 18px rgba(99,91,255,0.30);
}
.soc-btn:active { transform:scale(.95); }

/* Nav links */
.footer-nav { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; align-items:center; }
.footer-nav a { background:none; border:none; font-family:var(--fb); font-size:13px; font-weight:600; color:var(--t3); cursor:pointer; padding:4px 8px; border-radius:8px; transition:all .15s; text-decoration:none; }
.footer-nav a:hover { color:var(--ac); }
.fnav-sep { color:var(--br); font-size:14px; font-weight:300; user-select:none; padding:0 2px; }

.footer-copy { font-size:12.5px; color:var(--t3); font-weight:500; text-align:center; }
.footer-copy .ac { color:var(--ac); display:inline-flex; align-items:center; vertical-align:-4px; margin:0 1px; }
.footer-copy .ac svg { width:20px; height:20px; }

/* BACK BUTTON */
.back-btn { display:inline-flex; align-items:center; gap:7px; background:var(--bg2); border:1.5px solid var(--brm); color:var(--t2); font-family:var(--fb); font-size:13px; font-weight:600; padding:8px 16px; border-radius:99px; cursor:pointer; transition:all .15s; margin-bottom:32px; box-shadow:var(--s1); }
.back-btn:hover { border-color:var(--ac); color:var(--ac); background:var(--acl); }

/* RESPONSIVE - pages */
@media(max-width:768px){
  .page { padding:32px 18px 80px }
  .page-hero h2 { font-size:28px }
  .contact-grid { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .team-grid { grid-template-columns:1fr 1fr }
  .value-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:480px){
  .page { padding:24px 14px 72px }
  .page-hero h2 { font-size:22px }
  .team-grid { grid-template-columns:1fr }
  .value-grid { grid-template-columns:1fr }
  .cform { padding:20px 16px }
  .page-section h3 { font-size:17px }
}

/* ══════════════════════════════════════
   BIG HERO SECTION
══════════════════════════════════════ */
.big-hero {
  text-align: center;
  padding: calc(72px + var(--hdr-h) + var(--hdr-gap)) 24px 56px;
  position: relative;
  overflow: hidden;
  /* gradient background — full-bleed, genuinely starts at the top of the page,
     white near the header and deepening into the brand purple/pink toward the bottom
     (same vertical-intensity pattern as the ContentStudio reference, in brand colors) */
  background: linear-gradient(180deg, #fdfcff 0%, #fdfcff 15%, #f6f2ff 35%, #ebe2fd 60%, #ddc9f5 85%, #efd1ef 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--main-pt) - var(--hdr-h));
}
.bh-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* BADGE */
.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid rgba(99,91,255,0.30);
  background: rgba(99,91,255,0.06);
  color: var(--ac);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 16px;
  border-radius: 99px;
  margin-bottom: 28px;
  backdrop-filter: blur(6px);
}

/* TITLE */
.bh-title {
  font-family: var(--fh);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.10;
  color: var(--t1);
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.bh-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bh-br { display: block; }

/* SUBTITLE */
.bh-sub {
  font-size: clamp(15px, 2vw, 18px);
  color: #3d3d54;
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

/* CTA */
.bh-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.bh-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 16px 36px;
  background: var(--ac);
  color: #fff;
  border: none;
  border-radius: 99px;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .01em;
  box-shadow: 0 6px 28px rgba(99,91,255,0.35);
  transition: all .20s cubic-bezier(.34,1.56,.64,1);
}
.bh-btn-primary:hover {
  background: #5650e8;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 36px rgba(99,91,255,0.42);
}
.bh-btn-primary:active { transform: scale(.97); }

/* TRUST LINE */
.bh-trust {
  font-size: 13px;
  color: var(--t2);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

/* EMOJI STRIP */
.bh-emojis {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.bh-emojis span {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(255,255,255,0.80);
  border: 1.5px solid rgba(99,91,255,0.10);
  border-radius: 14px;
  box-shadow: var(--s1);
  backdrop-filter: blur(8px);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  cursor: default;
  animation: floatUp 3s ease-in-out infinite;
}
.bh-emojis span:nth-child(2)  { animation-delay: .2s; }
.bh-emojis span:nth-child(3)  { animation-delay: .4s; }
.bh-emojis span:nth-child(4)  { animation-delay: .6s; }
.bh-emojis span:nth-child(5)  { animation-delay: .8s; }
.bh-emojis span:nth-child(6)  { animation-delay: 1.0s; }
.bh-emojis span:nth-child(7)  { animation-delay: 1.2s; }
.bh-emojis span:nth-child(8)  { animation-delay: 1.4s; }
.bh-emojis span:nth-child(9)  { animation-delay: 1.6s; }
.bh-emojis span:nth-child(10) { animation-delay: 1.8s; }
.bh-emojis span:nth-child(11) { animation-delay: 2.0s; }
.bh-emojis span:nth-child(12) { animation-delay: 2.2s; }
.bh-emojis span:hover { transform: translateY(-6px) scale(1.18); box-shadow: 0 10px 24px rgba(99,91,255,0.18); }

@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .big-hero { padding: calc(52px + var(--hdr-h) + var(--hdr-gap)) 20px 40px; }
  .bh-title { letter-spacing: -1px; }
  .bh-sub   { font-size: 15px; }
  .bh-btn-primary { padding: 14px 28px; font-size: 15px; }
  .bh-emojis span { width:46px; height:46px; font-size:22px; border-radius:12px; gap:8px; }
}
@media(max-width:480px) {
  .big-hero { padding: calc(40px + var(--hdr-h) + var(--hdr-gap)) 16px 32px; }
  .bh-badge { font-size: 11.5px; padding: 5px 13px; margin-bottom:20px; }
  .bh-title { letter-spacing: -.8px; margin-bottom: 16px; }
  .bh-br    { display: none; }
  .bh-sub   { font-size: 14px; margin-bottom: 26px; }
  .bh-btn-primary { padding: 13px 24px; font-size: 14px; width: 100%; justify-content:center; }
  .bh-trust { font-size: 12px; margin-bottom: 24px; }
  .bh-emojis { gap: 7px; }
  .bh-emojis span { width:42px; height:42px; font-size:20px; border-radius:10px; }
}
@media(max-width:360px) {
  .bh-emojis span { width:38px; height:38px; font-size:18px; }
  .bh-title { letter-spacing: -.5px; }
}
@media(prefers-reduced-motion:reduce) {
  .bh-emojis span { animation: none; }
}

/* ══ CLEAN HEADER (logo only) ══ */
.hdr-clean {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 14px 32px !important;
  min-height: 60px !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 12px;
}
.hdr-clean .logo { margin: 0; }

/* ══ HEADER NAV LINKS ══ */
.hdr-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 48px;
}
.hdr-nav a {
  font-family: var(--fh);
  font-weight: 600;
  font-size: 14px;
  color: var(--t2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.hdr-nav a:hover { color: var(--ac); }
@media(max-width: 640px) {
  .hdr-clean { justify-content: center !important; }
  .hdr-nav { justify-content: center; width: 100%; margin-left: 0; gap: 14px; }
  .hdr-nav a { font-size: 12.5px; }
}

/* ══ CONTENT SEARCH WRAP ══ */
.content-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 28px auto 0;
  padding: 0 16px;
}
.content-srch {
  flex: 1;
  height: 52px;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(99,91,255,0.12) !important;
  border: 2px solid var(--brm) !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.content-srch:focus-within {
  border-color: var(--ac) !important;
  box-shadow: 0 4px 24px rgba(99,91,255,0.20) !important;
}
.content-srch input {
  font-size: 15px !important;
}
.content-cnt {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

/* ══ CONTENT CATS (below search) ══ */
.content-cats {
  max-width: 760px;
  margin: 12px auto 0 !important;
  padding: 0 16px;
  justify-content: flex-start;
  border-bottom: 1.5px solid var(--br);
  padding-bottom: 12px;
}

/* ══ RESPONSIVE ══ */
/* Breathing room between category tabs and first content row */
#CT { padding-top: 28px; }
@media(max-width:430px){ #CT { padding-top: 20px; } }

@media(max-width:600px){
  .hdr-clean { min-height:54px; padding:0 16px; }
  .content-search-wrap { margin:20px auto 0; padding:0 12px; gap:8px; }
  .content-srch { height:46px; border-radius:14px !important; }
  .content-srch input { font-size:14px !important; }
  .content-cnt { min-width:60px; font-size:12px; }
  .content-cats { padding:0 12px; padding-bottom:10px; }
}
@media(max-width:400px){
  .content-cnt { display:none; }
}

/* ══════════════════════
   SETTINGS BUTTON
══════════════════════ */
.settings-btn {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--bg2);
  border: 1.5px solid var(--brm);
  color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
  box-shadow: var(--s1);
}
.settings-btn:hover {
  background: var(--acl);
  border-color: var(--ac);
  color: var(--ac);
  transform: rotate(30deg) scale(1.08);
}
.settings-btn.active {
  background: var(--ac);
  border-color: var(--ac);
  color: #fff;
  transform: rotate(60deg);
  box-shadow: 0 4px 16px rgba(99,91,255,0.32);
}

/* ══════════════════════
   SETTINGS PANEL
══════════════════════ */
.settings-panel {
  max-width: 760px;
  margin: 10px auto 0;
  padding: 0 16px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  opacity: 0;
  pointer-events: none;
}
.settings-panel.open {
  max-height: 300px;
  opacity: 1;
  pointer-events: all;
}
.settings-inner {
  background: var(--bg);
  border: 1.5px solid var(--brm);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 8px 32px rgba(99,91,255,0.10), var(--s2);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.settings-title {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 7px;
}
.settings-close {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1.5px solid var(--brm);
  color: var(--t3);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  line-height: 1;
}
.settings-close:hover { background: var(--acl); border-color: var(--ac); color: var(--ac); }
.settings-divider { height: 1px; background: var(--br); margin-bottom: 16px; }
.settings-section {}
.settings-label {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* SIZE BUTTONS */
.size-btns {
  display: flex;
  gap: 10px;
}
.size-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg2);
  border: 2px solid var(--brm);
  border-radius: 14px;
  cursor: pointer;
  transition: all .18s;
  font-family: var(--fb);
}
.size-btn:hover {
  border-color: var(--bra);
  background: var(--acl);
  transform: translateY(-2px);
}
.size-btn.size-active {
  background: var(--ac);
  border-color: var(--ac);
  box-shadow: 0 4px 16px rgba(99,91,255,0.30);
  transform: translateY(-2px);
}
.size-btn.size-active .size-name { color: #fff; }
.size-btn.size-active .size-preview { filter: none; }
.size-preview {
  display: block;
  line-height: 1;
  pointer-events: none;
}
.size-btn[data-size="small"]  .size-preview { font-size: 18px; }
.size-btn[data-size="medium"] .size-preview { font-size: 26px; }
.size-btn[data-size="large"]  .size-preview { font-size: 36px; }
.size-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--t2);
  letter-spacing: .02em;
}

/* EMOJI SIZE CLASSES on body */
body.emoji-small  .egrid { grid-template-columns: repeat(auto-fill, minmax(44px,1fr)); gap: 4px; }
body.emoji-small  .ebtn  { font-size: 20px; border-radius: 10px; }
body.emoji-medium .egrid { grid-template-columns: repeat(auto-fill, minmax(60px,1fr)); gap: 7px; }
body.emoji-medium .ebtn  { font-size: 28px; border-radius: 14px; }
body.emoji-large  .egrid { grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap: 10px; }
body.emoji-large  .ebtn  { font-size: 40px; border-radius: 18px; }

@media(max-width:600px){
  .settings-panel { padding: 0 12px; }
  .size-btn { padding: 10px 6px; border-radius: 12px; }
  .size-btn[data-size="small"]  .size-preview { font-size: 16px; }
  .size-btn[data-size="medium"] .size-preview { font-size: 22px; }
  .size-btn[data-size="large"]  .size-preview { font-size: 30px; }
  .settings-btn { width: 44px; height: 44px; border-radius: 12px; }
}

/* ══════════════════════
   SKIN TONE SWATCHES
══════════════════════ */
.skin-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.skin-btn {
  width: 46px; height: 46px;
  border-radius: 13px;
  border: 2.5px solid var(--brm);
  background: var(--bg2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  flex-shrink: 0;
}
.skin-btn:hover {
  border-color: var(--bra);
  transform: translateY(-3px) scale(1.10);
  box-shadow: 0 6px 16px rgba(99,91,255,0.15);
}
.skin-btn.skin-active {
  border-color: var(--ac);
  background: var(--acl);
  box-shadow: 0 0 0 3.5px var(--acg), 0 6px 16px rgba(99,91,255,0.20);
  transform: translateY(-3px) scale(1.10);
}
.skin-btn.skin-active::after {
  content: "";
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: var(--ac);
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.skin-emoji {
  width: 24px;
  height: 24px;
  pointer-events: none;
  display: block;
  flex-shrink: 0;
}
.skin-hint {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--t3);
  font-weight: 500;
  margin: 0;
  letter-spacing: .01em;
}

/* Make settings panel taller for skin tone section */
.settings-panel.open { max-height: 500px; }

@media(max-width:600px){
  .skin-btn { width: 42px; height: 42px; border-radius: 11px; }
  .skin-emoji { font-size: 20px; }
}
@media(max-width:380px){
  .skin-btns { gap: 6px; }
  .skin-btn { width: 38px; height: 38px; }
  .skin-emoji { font-size: 18px; }
}

/* Footer copyright */
.footer-copy {
  text-align: center;
  padding: 12px 20px 8px;
  border-top: 1px solid var(--br);
  margin-top: 8px;
}
.footer-copy p {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--t3);
  margin: 0;
}

/* ══ FOOTER LOGO ══ */
.footer-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.footer-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform .2s;
}
.footer-logo a:hover {
  transform: translateY(-2px) scale(1.03);
}
.footer-logo-icon {
  width: 44px !important;
  height: 44px !important;
  font-size: 22px !important;
  border-radius: 12px !important;
  flex-shrink: 0;
}
.footer-logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.footer-logo-name {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.footer-logo-tag {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  color: var(--t3);
  letter-spacing: 0.02em;
}

@media(max-width:480px){
  .footer-logo a { padding: 10px 18px; gap: 10px; }
  .footer-logo-icon { width: 38px !important; height: 38px !important; font-size: 19px !important; }
  .footer-logo-name { font-size: 18px; }
  .footer-logo-tag { font-size: 10px; }
}

/* ══ SVG LOGO ══ */
.svg-logo {
  display: flex !important;
  align-items: center;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
.svg-logo svg {
  height: 38px;
  width: auto;
}
.footer-logo a svg {
  height: 44px;
  width: auto;
}
/* Dark mode: wordmark adjustment */
@media(prefers-color-scheme:dark){
  .svg-logo svg text:nth-child(4),
  .footer-logo a svg text:nth-child(4) { fill: #e0e0e0; }
}
@media(max-width:600px){
  .svg-logo svg { height: 32px; }
  .footer-logo a svg { height: 38px; }
}

/* ══ PNG LOGO ══ */
.logo.svg-logo {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: none;
  border: none;
}




/* SVG logo renders crisply at any size */


/* ══ FAQ SECTION ══ */
.faq-section {
  max-width: var(--container-w);
  margin: 56px auto 24px;
  padding: 0 20px;
}
.faq-header { text-align: center; margin-bottom: 28px; }
.faq-title {
  font-family: var(--fh);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 800;
  color: var(--t1);
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}
.faq-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.faq-subtitle {
  font-family: var(--fb);
  font-size: 15px;
  color: var(--t2);
  margin: 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--bg2);
  border: 1.5px solid var(--br);
  border-radius: var(--r2);
  overflow: hidden;
  transition: border-color .18s, background .18s;
}
.faq-q-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.faq-item:has(.faq-q[aria-expanded="true"]) {
  border-color: var(--bra);
  background: var(--acl);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}
.faq-arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ac);
  box-shadow: var(--s1);
  transition: transform .25s ease, background .2s, color .2s;
}
.faq-q[aria-expanded="true"] .faq-arrow {
  transform: rotate(180deg);
  background: var(--ac);
  color: #fff;
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.faq-a p {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.6;
  color: var(--t2);
  margin: 0;
  padding: 0 18px 18px;
}
@media(max-width:480px){
  .faq-section { margin: 40px auto 16px; }
  .faq-q { font-size: 14px; padding: 14px 16px; }
  .faq-a p { font-size: 13.5px; padding: 0 16px 16px; }
}

/* ══ RATE THIS TOOL WIDGET ══ */
.rate-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 48px auto 56px;
}
.rate-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.rate-label {
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--t1);
}
.rate-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.rt-star {
  width: 24px;
  height: 24px;
  display: block;
}
.rt-star-wrap {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.rt-star-wrap .rt-star { position: absolute; top: 0; left: 0; }
.rt-star-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  overflow: hidden;
  display: block;
}
.rt-star-fill .rt-star { position: absolute; top: 0; left: 0; }
.rate-score {
  font-family: var(--fh);
  font-size: 21px;
  font-weight: 800;
  color: var(--ac);
}
.rate-count {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  color: var(--t3);
}
.rate-sub {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--t3);
  font-weight: 500;
  margin: 0;
}
@media(max-width:480px){
  .rate-widget { margin: 36px auto 44px; gap: 8px; }
  .rate-row { gap: 8px; }
  .rate-label { font-size: 16px; }
  .rt-star, .rt-star-wrap { width: 20px; height: 20px; }
  .rate-score { font-size: 18px; }
  .rate-count { font-size: 13px; }
  .rate-sub { font-size: 12.5px; }
}


/* ══ CTA (inside footer, above logo) ══ */
.cta-section {
  max-width: var(--container-w);
  margin: 0 auto 48px;
  padding: 72px 32px;
  text-align: center;
  border-radius: var(--r4);
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac2) 100%);
}
.cta-title {
  font-family: var(--fh);
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
}
.cta-title em {
  font-style: normal;
  background: #fff;
  color: var(--ac);
  padding: 4px 18px 8px;
  border-radius: 18px;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.cta-sub {
  font-family: var(--fb);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  margin: 0 0 32px;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 42px;
  background: #fff;
  color: var(--ac);
  border: none;
  border-radius: 99px;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .01em;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
}
.cta-btn:active { transform: translateY(0) scale(0.98); }

@media(max-width:768px){
  .cta-section { padding: 56px 28px; margin-bottom: 32px; border-radius: var(--r3); }
  .cta-title em { padding: 3px 14px 6px; border-radius: 14px; }
}
@media(max-width:480px){
  .cta-section { padding: 44px 22px; margin-bottom: 24px; border-radius: var(--r2); }
  .cta-title em { padding: 2px 10px 5px; border-radius: 10px; }
  .cta-btn { padding: 15px 34px; font-size: 15px; }
}

/* ══ TWEMOJI IMAGES (cross-platform emoji rendering) ══ */
img.emoji-img {
  height: 1em;
  width: 1em;
  margin: 0 .02em 0 .04em;
  vertical-align: -0.12em;
  object-fit: contain;
}
img.emoji-img:not([src]) { visibility: hidden; }

/* ══ BRAND LOGO (inline SVG) ══ */
.brand-logo {
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
}
.brand-logo svg { height: 40px; width: auto; display: block; }
.brand-logo-footer svg { height: 50px; }
@media(max-width:480px){
  .brand-logo svg { height: 32px; }
  .brand-logo-footer svg { height: 42px; }
}


/* ══ COOKIE CONSENT BANNER ══ */
#te-cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--bg);
  border-top: 1px solid var(--br);
  box-shadow: 0 -4px 24px rgba(20,20,40,0.10);
  padding: 18px 28px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--fb);
}
#te-cookie-banner.show { display: flex; }
#te-cookie-banner .tcb-text {
  font-size: 13.5px;
  color: var(--t2);
  line-height: 1.55;
  max-width: 680px;
  flex: 1;
  min-width: 220px;
}
#te-cookie-banner .tcb-text a {
  color: var(--ac);
  font-weight: 600;
  text-decoration: underline;
}
#te-cookie-banner .tcb-text a:hover { color: var(--ac2); }
#te-cookie-banner .tcb-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#te-cookie-banner button {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .18s;
  border: none;
  white-space: nowrap;
}
#te-cookie-banner .tcb-decline {
  background: transparent;
  border: 1.5px solid var(--br);
  color: var(--t2);
}
#te-cookie-banner .tcb-decline:hover {
  border-color: var(--t3);
  background: var(--bg2);
}
#te-cookie-banner .tcb-accept {
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,91,255,0.30);
}
#te-cookie-banner .tcb-accept:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,91,255,0.40);
}
@media(max-width: 640px) {
  #te-cookie-banner {
    padding: 16px 18px;
    gap: 14px;
  }
  #te-cookie-banner .tcb-btns { width: 100%; }
  #te-cookie-banner .tcb-btns button { flex: 1; padding: 11px 16px; }
}