/* ============================================================
   Mellivo OÜ — red / black theme
   Ring geometry reproduced from the engine spec, recoloured.
   ============================================================ */
:root{
  --bg:#0c0c0d; --panel:#151416; --panel-2:#1d1b1e;
  --ink:#f4f2f0; --muted:#928c8a; --line:rgba(255,255,255,0.14);
  --accent:#e1162c; --accent-2:#ff3340; --accent-deep:#8e0f1e;
  --font:"Helvetica Neue","Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
  width:100%; background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  scrollbar-width:none; -ms-overflow-style:none;
}
html{ scroll-behavior:smooth; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0; }
body.home{ height:350vh; }                 /* desktop scroll height drives ring rotation */
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- Header ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:1.9em 2.4em; font-size:13px; letter-spacing:0.02em;
  background:linear-gradient(180deg, rgba(12,12,13,0.86) 0%, rgba(12,12,13,0) 100%); }
.header-left{ display:flex; align-items:center; gap:3em; }
.brand{ font-weight:700; font-size:16px; letter-spacing:0.08em; display:inline-flex; align-items:center; gap:0.55em; }
.brand b{ color:var(--accent); }
.brand-dot{ font-size:9px; vertical-align:super; margin-left:2px; color:var(--accent); }
.brand-mark{ height:30px; width:auto; display:block; }
.brand-word{ font-weight:700; font-size:16px; letter-spacing:0.12em; }
.brand-word b{ color:var(--accent); }
.brand-wordmark{ height:22px; width:auto; display:block; }
@media (max-width:768px){ .brand-wordmark{ height:19px; } }
.nav{ display:flex; gap:2.2em; font-weight:500; }
.nav a{ position:relative; opacity:0.62; transition:opacity .3s ease, color .3s ease; }
.nav a.is-active, .nav a:hover{ opacity:1; }
.nav a.is-active::after, .nav a:hover::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--accent); }
.lang{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:0.45em; font-weight:600; }
.lang-opt{ background:none; border:none; color:var(--ink); font-family:var(--font); font-size:13px;
  font-weight:600; letter-spacing:0.04em; cursor:pointer; opacity:0.4; padding:0; transition:opacity .25s ease, color .25s ease; }
.lang-opt:hover{ opacity:0.8; }
.lang-opt.is-active{ opacity:1; color:var(--accent); }
.lang .sep{ opacity:0.25; }
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:18px;
  padding:0; background:none; border:none; cursor:pointer; }
.menu-toggle span{ display:block; width:100%; height:1.5px; background:var(--ink); }

/* ---------- Corners ---------- */
.corner{ position:fixed; bottom:2.2em; z-index:50; background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink);
  padding-bottom:4px; border-bottom:1px solid var(--accent); transition:opacity .3s ease; }
.corner:hover{ opacity:0.6; }
.corner i{ font-style:normal; margin-left:0.4em; color:var(--accent); }
.corner--left{ left:2.4em; }
.corner--right{ right:2.4em; }

/* ---------- Scene / Ring ---------- */
.scene{ position:fixed; inset:0; overflow:hidden; perspective:1600px; perspective-origin:50% 50%; }
.gallery{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; }

/* CARD = stable hitbox. NO backface-visibility:hidden (would hide half the ring). */
.item{ position:absolute; top:0; left:0; width:78px; height:60px; transform-style:preserve-3d; cursor:pointer; }
.item-card{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none;
  border:1px solid rgba(255,255,255,0.12); border-radius:3px; overflow:hidden;
  background:#000; transition:box-shadow .4s ease, border-color .4s ease; }
.item-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.item-card.is-active{ box-shadow:0 10px 26px -10px rgba(225,22,44,0.7); border-color:var(--accent); }

/* ---------- Centre ---------- */
.center{ position:absolute; top:43%; left:50%; transform:translate(-50%,-50%); width:min(560px,44vw);
  text-align:center; pointer-events:none; z-index:5; }
.center-eyebrow{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.4em; }
.center-title{ font-size:clamp(34px,4.4vw,62px); font-weight:600; line-height:1.02; letter-spacing:-0.02em; }
.center-title em{ font-style:italic; font-weight:400; color:var(--accent); }
.center-wordmark{ width:min(440px,54vw); height:auto; display:block; margin:0 auto; }
.center-sub{ margin-top:1.3em; font-size:14px; color:var(--muted); }
.center-default,.center-project{ transition:opacity .55s ease; }
.center-project{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; }
.center.show-project .center-default{ opacity:0; }
.center.show-project .center-project{ opacity:1; }
.preview-img{ width:160px; height:160px; flex-shrink:0; overflow:hidden; border-radius:32px; box-shadow:0 24px 60px -20px rgba(225,22,44,0.55); }
.preview-img img{ width:100%; height:100%; object-fit:cover; }
.preview-cat{ margin-top:1.3em; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.preview-title{ margin-top:0.4em; font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-0.01em; }
.preview-hint{ margin-top:0.9em; font-size:12px; letter-spacing:0.05em; color:var(--muted); }

/* ---------- Labels ---------- */
.labels{ position:absolute; inset:0; pointer-events:none; }
.label{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:14px; font-weight:500;
  letter-spacing:0.01em; pointer-events:none; opacity:0.85; color:var(--ink); }
.label .ul{ border-bottom:1px solid var(--accent); padding-bottom:2px; }
.label sup{ font-size:10px; color:var(--muted); margin-left:3px; }

/* ---------- Mobile preview (home) ---------- */
.mobile-preview{ display:none; }
.mobile-ring-hitbox{ display:none; }

@media (max-width:768px){
  body.home{ height:auto; }
  .mobile-ring-hitbox{ display:block; position:fixed; left:0; right:0; bottom:0; top:50%;
    z-index:20; touch-action:none; pointer-events:auto; }
  .scene{ height:100svh; overflow:hidden; }
  .center, .labels{ display:none; }
  .custom-cursor{ display:none !important; }
  .site-header{ padding:1.15em 1em; align-items:center; }
  .nav{ display:none; }
  .lang{ gap:0.3em; max-width:38vw; font-size:11px; }
  .lang .lang-opt{ font-size:11px; }
  .menu-toggle{ display:flex; }
  .corner{ bottom:auto; top:3.6em; font-size:13px; }
  .corner--left{ left:1em; }
  .corner--right{ right:1em; }
  .mobile-preview{ display:block; position:fixed; top:6.2em; left:0; right:0; z-index:6; padding:0 1em; pointer-events:none; }
  .mp-cat{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
  .mp-title{ font-size:23px; line-height:1.05; font-weight:600; letter-spacing:-0.01em; margin-bottom:14px; }
  .mp-img{ width:120px; aspect-ratio:1/1; overflow:hidden; border-radius:26px; background:#000; box-shadow:0 18px 44px -16px rgba(225,22,44,0.5); }
  .mp-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .mp-view{ display:inline-block; margin-top:14px; font-size:14px; font-weight:700;
    border-bottom:1px solid var(--accent); padding-bottom:2px; pointer-events:auto; }
  .mp-view i{ font-style:normal; margin-left:0.35em; color:var(--accent); }
}

/* ---------- Archive toggle (mock tick) ---------- */
.archive-toggle{ position:fixed; left:50%; bottom:2.05em; transform:translateX(-50%); z-index:55;
  display:none; align-items:center; gap:0.7em; background:rgba(20,20,22,0.7); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:0.55em 1.1em 0.55em 0.6em; cursor:pointer;
  font-family:var(--font); transition:border-color .25s ease, transform .25s ease, opacity .3s ease; }
body.page-ready .archive-toggle{ display:inline-flex; }
.archive-toggle:hover{ border-color:var(--accent); transform:translateX(-50%) translateY(-2px); }
.tick-box{ width:24px; height:24px; flex-shrink:0; border:1.5px solid var(--line); border-radius:8px;
  display:grid; place-items:center; background:transparent; transition:background .25s ease, border-color .25s ease; }
.tick-box svg{ width:15px; height:15px; opacity:0; transform:scale(0.6); transition:opacity .2s ease, transform .2s ease; }
.archive-toggle.on .tick-box{ background:var(--accent); border-color:var(--accent); }
.archive-toggle.on .tick-box svg{ opacity:1; transform:scale(1); }
.archive-toggle .lbl{ font-size:12.5px; font-weight:600; letter-spacing:0.03em; color:var(--ink); white-space:nowrap; }

/* ---------- Single-app spotlight (one spinning card) ---------- */
body.single-mode.home{ height:auto; }
body.single-mode .gallery, body.single-mode .labels{ display:none; }
body.single-mode .center{ top:50%; pointer-events:auto; }
body.single-mode .center-default{ display:none; }
body.single-mode .center-project{ position:relative; opacity:1; perspective:1000px; cursor:pointer; }
body.single-mode .preview-img{ width:clamp(190px,24vw,260px); height:clamp(190px,24vw,260px);
  border-radius:22%; transform-style:preserve-3d; will-change:transform;
  box-shadow:0 40px 90px -30px rgba(225,22,44,0.6); }
body.single-mode .preview-cat{ margin-top:1.8em; }
body.single-mode .preview-hint{ color:var(--accent); font-weight:600; }
@media (max-width:768px){
  body.single-mode .mobile-ring-hitbox{ display:none; }
  body.single-mode .mp-img{ width:clamp(150px,46vw,200px); transform-style:preserve-3d; will-change:transform;
    perspective:900px; border-radius:22%; }
}

/* ---------- Custom cursor ---------- */
.custom-cursor{ display:none; }
@media (pointer:fine) and (hover:hover){
  body.home{ cursor:none; }
  .custom-cursor{ display:block; position:fixed; top:0; left:0; width:13px; height:13px;
    border-radius:999px; background:var(--accent); pointer-events:none; z-index:99999; will-change:transform; transition:opacity .3s ease; }
  .custom-cursor.is-hidden{ opacity:0; }
}

/* ---------- Hide ring until painted ---------- */
body:not(.page-ready) .scene{ opacity:0; }

/* ---------- Loader ---------- */
.loading-screen{ position:fixed; inset:0; z-index:999999; background:var(--bg);
  display:flex; align-items:center; justify-content:center; cursor:default; }
.loading-screen.is-hidden{ pointer-events:none; }
.loading-inner{ text-align:center; opacity:0; animation:load-in .8s ease forwards; }
.loading-brand{ font-weight:700; font-size:22px; letter-spacing:0.08em; }
.loading-brand b{ color:var(--accent); }
.loading-brand span{ font-size:10px; vertical-align:super; margin-left:2px; color:var(--accent); }
.loading-logo{ width:220px; max-width:62vw; height:auto; display:block; margin:0 auto; }
.loading-text{ margin-top:1.1em; font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted); animation:load-pulse 1.8s ease-in-out infinite; }
.loading-bar{ width:120px; height:1px; margin:1.6em auto 0; background:rgba(255,255,255,0.12); overflow:hidden; }
.loading-bar span{ display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(0);
  transform-origin:left center; animation:load-bar 1.4s ease-in-out forwards; }
@keyframes load-in{ to{ opacity:1; } }
@keyframes load-pulse{ 0%,100%{ opacity:0.45; } 50%{ opacity:1; } }
@keyframes load-bar{ to{ transform:scaleX(1); } }
@media (max-width:768px){ .loading-screen{ height:100svh; } }

/* ============================================================
   DETAIL PAGE
   ============================================================ */
body.detail{ height:auto; background:var(--bg); }
.detail-main{ max-width:1120px; margin:0 auto; padding:8.5em 2.4em 4em; }

.back-link{ display:inline-flex; align-items:center; gap:0.5em; font-size:13px; font-weight:500;
  color:var(--muted); margin-bottom:2.6em; transition:color .25s ease; }
.back-link:hover{ color:var(--ink); }
.back-link i{ font-style:normal; color:var(--accent); }

/* Hero */
.app-hero{ display:grid; grid-template-columns:200px 1fr; gap:2.6em; align-items:center;
  padding-bottom:3em; border-bottom:1px solid var(--line); }
.app-hero-logo{ width:200px; height:200px; border-radius:42px; overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(225,22,44,0.55); }
.app-hero-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.app-kicker{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:0.9em; }
.app-name{ font-size:clamp(34px,5vw,58px); font-weight:700; line-height:1.02; letter-spacing:-0.02em; }
.app-tagline{ margin-top:0.8em; font-size:clamp(16px,2vw,20px); color:var(--muted); max-width:44ch; }
.store-badges{ display:flex; gap:0.9em; margin-top:1.8em; flex-wrap:wrap; }
.badge{ display:inline-flex; align-items:center; gap:0.7em; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:0.7em 1.2em; transition:border-color .25s ease, transform .25s ease; }
.badge:hover{ border-color:var(--accent); transform:translateY(-2px); }
.badge svg{ width:26px; height:26px; flex-shrink:0; fill:var(--ink); }
.badge-text{ line-height:1.1; }
.badge-text small{ display:block; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.badge-text strong{ font-size:16px; font-weight:600; }

/* Meta stats */
.app-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:2.6em 0 3em; }
.stat{ background:var(--bg); padding:1.4em 1.2em; }
.stat .k{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.stat .v{ margin-top:0.45em; font-size:20px; font-weight:600; }
.stat .v b{ color:var(--accent); }

/* Sections */
.section{ margin:3.4em 0; }
.section h2{ font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.3em; }
.about-text{ font-size:clamp(17px,2vw,22px); line-height:1.55; max-width:62ch; letter-spacing:-0.005em; }

/* Features */
.features{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.feature{ background:var(--bg); padding:1.5em 1.6em; display:flex; gap:0.9em; align-items:flex-start; }
.feature .dot{ width:9px; height:9px; border-radius:3px; background:var(--accent); margin-top:0.5em; flex-shrink:0; }
.feature span{ font-size:16px; line-height:1.4; }

/* Screenshots */
.shots{ display:flex; gap:1.1em; overflow-x:auto; padding-bottom:1em; scroll-snap-type:x mandatory; }
.shots::-webkit-scrollbar{ height:6px; }
.shots::-webkit-scrollbar-thumb{ background:var(--accent-deep); border-radius:3px; }
.shot{ flex:0 0 auto; width:230px; aspect-ratio:1/2; border-radius:26px; overflow:hidden;
  border:1px solid var(--line); scroll-snap-align:start; background:#000; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Download / QR */
.download{ margin-top:3.4em; background:linear-gradient(160deg,var(--panel) 0%,#0f0e10 100%);
  border:1px solid var(--line); border-radius:24px; padding:3em 2.6em; }
.download-head{ text-align:center; margin-bottom:2.4em; }
.download-head h2{ color:var(--ink); font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-0.02em; text-transform:none; }
.download-head p{ margin-top:0.7em; color:var(--muted); font-size:15px; }
.qr-row{ display:flex; gap:2em; justify-content:center; flex-wrap:wrap; }
.qr-card{ background:#fff; border-radius:20px; padding:1.4em; text-align:center; width:230px;
  box-shadow:0 24px 60px -26px rgba(0,0,0,0.8); }
.qr-card img{ width:180px; height:180px; display:block; margin:0 auto; image-rendering:pixelated; }
.qr-store{ display:flex; align-items:center; justify-content:center; gap:0.5em; margin-top:1em; color:#111; }
.qr-store svg{ width:20px; height:20px; fill:#111; }
.qr-store strong{ font-size:15px; font-weight:700; }
.qr-scan{ margin-top:0.3em; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#7a7a7a; }

/* More from Mellivo */
.more-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.2em; }
.more-card{ text-align:center; transition:transform .25s ease; }
.more-card:hover{ transform:translateY(-4px); }
.more-card .ml{ width:100%; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:#000;
  border:1px solid var(--line); box-shadow:0 16px 36px -20px rgba(225,22,44,0.45); }
.more-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.more-card .mn{ margin-top:0.7em; font-size:12px; color:var(--muted); }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding:2.6em 2.4em 3em; max-width:1120px; margin:4em auto 0;
  display:flex; flex-wrap:wrap; gap:1em 2em; align-items:baseline; justify-content:space-between; font-size:13px; color:var(--muted); }
.site-footer .fbrand{ color:var(--ink); font-weight:600; }
.site-footer .fbrand b{ color:var(--accent); }
.site-footer .fnote{ flex-basis:100%; font-size:11px; opacity:0.6; margin-top:0.6em; }
.site-footer .legal-links a{ color:var(--ink); transition:color .25s ease; }
.site-footer .legal-links a:hover{ color:var(--accent); }
.site-footer .social-links{ flex-basis:100%; margin:0.2em 0 0.4em; }

/* reveal-on-scroll initial state */
.reveal{ opacity:0; transform:translateY(22px); }

/* ============================================================
   BROWSE / FILTER PAGE
   ============================================================ */
body.page{ height:auto; background:var(--bg); min-height:100vh; }
.page-main{ max-width:1180px; margin:0 auto; padding:9em 2.4em 3em; }
.page-head{ margin-bottom:2.2em; }
.page-head h1{ font-size:clamp(30px,4.4vw,52px); font-weight:700; letter-spacing:-0.02em; }
.page-head p{ margin-top:0.7em; color:var(--muted); font-size:clamp(15px,1.6vw,18px); }

.filter-bar{ position:sticky; top:64px; z-index:30; display:flex; flex-wrap:wrap; gap:1.4em 2em;
  align-items:center; padding:1.1em 0; margin-bottom:1.6em; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg) 70%,rgba(12,12,13,0) 100%); }
.filter-group{ display:flex; align-items:center; gap:0.7em; flex-wrap:wrap; }
.filter-group > .fg-label{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-right:0.2em; }
.seg{ display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg button{ border:none; background:none; color:var(--muted); font-family:var(--font); font-size:13px; font-weight:600;
  padding:0.5em 1.05em; border-radius:999px; cursor:pointer; transition:color .2s ease, background .25s ease; }
.seg button.is-active{ color:#fff; background:var(--accent); }
.chip{ border:1px solid var(--line); background:transparent; color:var(--ink); font-family:var(--font); font-size:12.5px;
  font-weight:500; padding:0.5em 0.95em; border-radius:999px; cursor:pointer; transition:.2s ease; opacity:0.8; }
.chip:hover{ opacity:1; border-color:var(--muted); }
.chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; opacity:1; }
.filter-clear{ background:none; border:none; color:var(--muted); font-family:var(--font); font-size:12.5px;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.filter-clear:hover{ color:var(--ink); }
.result-count{ margin:0 0 1.6em; font-size:13px; color:var(--muted); }
.result-count b{ color:var(--accent); }

.app-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:1.6em; }
.grid-card{ display:block; text-align:center; }
.grid-card .gc-logo{ width:100%; aspect-ratio:1/1; border-radius:24%; overflow:hidden; background:#000;
  border:1px solid var(--line); box-shadow:0 18px 40px -22px rgba(225,22,44,0.5); transition:transform .3s ease, box-shadow .3s ease; }
.grid-card:hover .gc-logo{ transform:translateY(-5px); box-shadow:0 26px 54px -22px rgba(225,22,44,0.7); }
.grid-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.grid-card .gc-name{ margin-top:0.8em; font-size:14px; font-weight:600; }
.grid-card .gc-cat{ margin-top:0.2em; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.grid-empty{ padding:3em 0; color:var(--muted); font-size:15px; }

/* ============================================================
   STUDIO / CONTACT PAGE
   ============================================================ */
.studio-hero{ padding-bottom:2.6em; border-bottom:1px solid var(--line); }
.studio-hero .tag{ font-size:clamp(22px,3.2vw,40px); font-weight:600; letter-spacing:-0.02em; line-height:1.12; max-width:20ch; }
.studio-about{ font-size:clamp(16px,1.9vw,21px); line-height:1.6; max-width:64ch; color:#d9d6d4; }
.what-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.what-cell{ background:var(--bg); padding:1.7em 1.6em; }
.what-cell h3{ font-size:17px; font-weight:600; margin-bottom:0.5em; }
.what-cell h3::before{ content:""; display:block; width:26px; height:3px; background:var(--accent); border-radius:2px; margin-bottom:0.9em; }
.what-cell p{ color:var(--muted); font-size:14px; line-height:1.5; }
.contact-block{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6em; margin-top:1.4em; }
.contact-item .ck{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5em; }
.contact-item a, .contact-item span{ font-size:16px; font-weight:500; color:var(--ink); }
.contact-item a:hover{ color:var(--accent); }
/* ---------- Social links (shared component — see social.js) ---------- */
.social-links{ display:flex; align-items:center; gap:0.6em; flex-wrap:wrap; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
  color:var(--muted); transition:color .25s ease, border-color .25s ease, background .25s ease; }
.social-link svg{ width:19px; height:19px; fill:currentColor; flex-shrink:0; }
.social-link:hover{ color:var(--accent); }

/* icon-only, circular, 44x44 touch target — used in the site footer */
.social-link--icon{ width:44px; height:44px; border-radius:999px; border:1px solid var(--line); }
.social-link--icon:hover{ border-color:var(--accent); }

/* labeled, larger pill with visible platform name — used in Studio contact */
.social-link--labeled{ min-height:44px; padding:0.65em 1.1em; border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font-size:15px; font-weight:500; }
.social-link--labeled:hover{ border-color:var(--accent); color:var(--accent); }

/* compact, borderless — used only in the fixed home-page legal strip
   (desktop/pointer only: the strip itself is hidden under 768px) */
.social-link--strip{ width:26px; height:26px; color:var(--muted); }
.social-link--strip svg{ width:15px; height:15px; }
.social-link--strip:hover{ color:var(--accent); }

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal-main{ max-width:760px; margin:0 auto; padding:9em 2.4em 3em; }
.legal-main h1{ font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-0.02em; }
.legal-updated{ margin-top:0.7em; font-size:13px; color:var(--muted); }
.legal-section{ margin-top:2.4em; }
.legal-section h2{ font-size:18px; font-weight:600; margin-bottom:0.6em; text-transform:none; letter-spacing:0; color:var(--ink); }
.legal-section p{ font-size:16px; line-height:1.65; color:#cfccca; }

/* ---------- Home bottom legal links ---------- */
.legal-strip{ position:fixed; left:50%; bottom:0.55em; transform:translateX(-50%); z-index:54;
  display:none; gap:0.7em; align-items:center; font-size:11px; letter-spacing:0.04em; color:var(--muted); }
body.page-ready .legal-strip{ display:flex; }
.legal-strip a{ color:var(--muted); transition:color .25s ease; }
.legal-strip .social-links{ gap:0.35em; margin-right:0.3em; }
.legal-strip a:hover{ color:var(--accent); }
.legal-strip .dot{ opacity:0.4; }

/* ============================================================
   LEGAL DOCUMENT PAGES (Privacy Policy, Terms & Conditions, ...)
   Shared component system — reused as-is across every long-form
   legal document on the site.
   ============================================================ */
.doc-main{ max-width:820px; margin:0 auto; padding:9em 2.4em 4em; }
.doc-main h1{ font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-0.02em; }
.doc-meta{ margin-top:0.7em; font-size:13px; line-height:1.7; color:var(--muted); }
.doc-lede{ margin-top:1.4em; font-size:16px; line-height:1.65; color:#cfccca; max-width:72ch; }
.doc-rule{ border:none; border-top:1px solid var(--line); margin:2.8em 0; }

.doc-callout{ margin-top:1.6em; max-width:72ch; border:1px solid var(--accent-deep); border-radius:12px;
  background:rgba(225,22,44,0.07); padding:1.1em 1.3em; }
.doc-callout p{ font-size:15px; line-height:1.6; color:var(--ink); font-weight:600; margin:0; }

.doc-btn{ display:inline-flex; align-items:center; gap:0.55em; margin-top:1.3em; background:var(--accent);
  color:#fff; font-family:var(--font); font-weight:700; font-size:14px; letter-spacing:0.02em;
  padding:0.85em 1.5em; border-radius:999px; border:none; transition:background .25s ease, transform .25s ease; }
.doc-btn:hover{ background:var(--accent-2); transform:translateY(-2px); color:#fff; }
.doc-btn i{ font-style:normal; }
.doc-body .doc-btn{ border-bottom:none; }

.doc-summary{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.9em 1.9em 1.5em; }
.doc-summary h2, .doc-toc h2{ font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:0.7em; }
.doc-summary .intro{ font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:1.3em; }
.doc-summary ul{ margin:0; padding-left:1.2em; display:grid; gap:0.85em; }
.doc-summary li{ font-size:14.5px; line-height:1.6; color:#cfccca; }
.doc-summary li strong{ color:var(--ink); font-weight:600; }
.summary-item{ margin-top:1.2em; padding-top:1.2em; border-top:1px solid var(--line); }
.summary-item:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.summary-item .sq{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:0.35em; }
.summary-item .sa{ font-size:14.5px; line-height:1.6; color:#cfccca; }
.summary-item .sa a{ color:var(--accent); white-space:nowrap; border-bottom:1px solid var(--accent-deep); padding-bottom:1px; }
.summary-item .sa a:hover{ color:var(--accent-2); }

.doc-toc{ margin-top:0; border:1px solid var(--line); border-radius:16px; padding:1.9em; }
.doc-toc ol{ list-style:none; counter-reset:toc; display:grid; gap:0.6em; }
.doc-toc li{ counter-increment:toc; font-size:14.5px; }
.doc-toc li::before{ content:counter(toc) ". "; color:var(--accent); font-weight:600; }
.doc-toc li a{ color:var(--ink); transition:color .2s ease; }
.doc-toc li a:hover{ color:var(--accent); }

.doc-body h2{ font-size:clamp(19px,2.2vw,24px); font-weight:700; letter-spacing:-0.01em; color:var(--ink);
  margin:2.8em 0 0.9em; scroll-margin-top:80px; }
.doc-body h3{ font-size:16px; font-weight:600; color:var(--ink); margin:1.7em 0 0.6em; scroll-margin-top:80px; }
.doc-body p{ font-size:16px; line-height:1.7; color:#cfccca; margin:0.95em 0; max-width:72ch; }
.doc-body ul, .doc-body ol{ margin:0.95em 0 0.95em 1.3em; color:#cfccca; font-size:16px; line-height:1.65; max-width:72ch; }
.doc-body li{ margin:0.5em 0; }
.doc-body strong{ color:var(--ink); font-weight:600; }
.doc-body em{ font-style:italic; }
.doc-body a{ color:var(--accent); border-bottom:1px solid var(--accent-deep); padding-bottom:1px; }
.doc-body a:hover{ color:var(--accent-2); }

.table-wrap{ overflow-x:auto; margin:1.4em 0; border:1px solid var(--line); border-radius:12px; -webkit-overflow-scrolling:touch; }
.doc-body table{ width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; }
.doc-body th, .doc-body td{ text-align:left; padding:0.85em 1.1em; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
.doc-body th{ background:var(--panel); color:var(--muted); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }
.doc-body tr:last-child td{ border-bottom:none; }
.doc-body td:last-child{ color:var(--ink); font-weight:500; }

@media (max-width:768px){
  .doc-main{ padding:7.5em 1.2em 2.5em; }
  .doc-summary, .doc-toc{ padding:1.4em; }
  .doc-body h2, .doc-body h3{ scroll-margin-top:68px; }
}

@media (max-width:768px){
  .page-main{ padding:7.5em 1.2em 2.5em; }
  .filter-bar{ top:52px; gap:1em 1.2em; }
  .app-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:1.1em; }
  .what-grid{ grid-template-columns:1fr; }
  .contact-block{ grid-template-columns:1fr; }
  .legal-main{ padding:7.5em 1.2em 2.5em; }
  .legal-strip{ display:none !important; }
}

@media (max-width:768px){
  .detail-main{ padding:7em 1.2em 3em; }
  .app-hero{ grid-template-columns:1fr; gap:1.6em; text-align:left; }
  .app-hero-logo{ width:120px; height:120px; border-radius:28px; }
  .app-stats{ grid-template-columns:repeat(2,1fr); }
  .features{ grid-template-columns:1fr; }
  .more-grid{ grid-template-columns:repeat(3,1fr); }
  .download{ padding:2.2em 1.3em; }
  .site-footer{ padding:2.2em 1.2em 3em; }
}