/* =====================================================================
   CREATOLOGY — MAROON COSMIC / LIVING C
   Redesigned Stylesheet — Dark Cosmic + Deep Maroon + Premium
   Living C Signature Visual
   ===================================================================== */
/* Fonts are loaded via a preconnected <link> in includes/header.php — not re-imported here (that used to duplicate the request and block CSS parsing on it). */
:root{
  --bg-primary:#050505;
  --bg-secondary:#0D0909;
  --bg-surface:#171012;
  --bg-elevated:#221419;
  --text-primary:#FFFFFF;
  --text-secondary:#A9A1A3;
  --text-muted:#6B6466;
  --accent-maroon:#7A1024;
  --accent-maroon-deep:#4A0715;
  --accent-maroon-dark:#26040B;
  --accent-maroon-light:#A01830;
  --accent-maroon-soft:rgba(122,16,36,0.18);
  --accent-maroon-glow:rgba(122,16,36,0.35);
  --accent-vivid:#D1262B;
  --accent-vivid-light:#F0464B;
  --accent-vivid-soft:rgba(209,38,43,0.14);
  --accent-vivid-glow:rgba(209,38,43,0.45);
  --off-white:#F5F2F2;
  --soft-gray:#A9A1A3;
  --border-subtle:rgba(255,255,255,0.09);
  --border-medium:rgba(255,255,255,0.14);
  --border-maroon:rgba(122,16,36,0.3);
  --glow-maroon:0 0 40px rgba(122,16,36,0.35);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --red:#7A1024;
  --red-dark:#4A0715;
  --red-light:#A01830;
  --ink:#080607;
  --ink-soft:#0C0809;
  --paper:#080607;
  --paper-soft:#0C0809;
  --line:var(--border-medium);
  --text:#FFFFFF;
  --text-soft:#A9A1A3;
  --bg:var(--bg-primary);
  --surface:var(--bg-surface);
  --text-main:var(--text-primary);
  --border:var(--border-medium);
  --shadow:0 10px 40px -12px rgba(0,0,0,0.6);
  --text-strong:rgba(255,255,255,0.85);
}

/* =====================================================================
   LIGHT THEME — activated via [data-theme="light"] on <html>, toggled
   by the .theme-toggle button in main.js. Brand accent colors stay
   close to the dark theme so the identity is recognizable; surfaces,
   text and borders flip to light equivalents for readability.
   ===================================================================== */
[data-theme="light"]{
  --bg-primary:#FAFAF9;
  --bg-secondary:#F1ECEC;
  --bg-surface:#FFFFFF;
  --bg-elevated:#F6EFF0;
  --text-primary:#1C1416;
  --text-secondary:#5C4C4E;
  --text-muted:#8C7B7D;
  --accent-maroon:#7A1024;
  --accent-maroon-deep:#4A0715;
  --accent-maroon-dark:#26040B;
  --accent-maroon-light:#8C1229;
  --accent-maroon-soft:rgba(122,16,36,0.08);
  --accent-maroon-glow:rgba(122,16,36,0.18);
  --accent-vivid:#B81F24;
  --accent-vivid-light:#93171B;
  --accent-vivid-soft:rgba(184,31,36,0.08);
  --accent-vivid-glow:rgba(184,31,36,0.25);
  --soft-gray:#5C4C4E;
  --border-subtle:rgba(20,10,12,0.08);
  --border-medium:rgba(20,10,12,0.14);
  --border-maroon:rgba(122,16,36,0.22);
  --glow-maroon:0 0 40px rgba(122,16,36,0.14);
  --ink:#FFFFFF;
  --ink-soft:#FAFAF9;
  --paper:#FFFFFF;
  --paper-soft:#FAFAF9;
  --text:#1C1416;
  --text-soft:#5C4C4E;
  --shadow:0 10px 40px -12px rgba(20,10,12,0.12);
  --text-strong:rgba(20,10,12,0.72);
}
[data-theme="light"] body::before{
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(122,16,36,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(74,7,21,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(122,16,36,0.03) 0%, transparent 50%);
}
[data-theme="light"] .navbar.scrolled{ background:rgba(250,250,249,0.9); box-shadow:0 2px 20px rgba(20,10,12,0.06); }
[data-theme="light"] .hero-bg-type{ color:rgba(20,10,12,0.04); -webkit-text-stroke:1px rgba(20,10,12,0.08); }
@media(max-width:960px){
  [data-theme="light"] .nav-links{ background:rgba(250,250,249,0.97); }
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-primary);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(122,16,36,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(74,7,21,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(122,16,36,0.06) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; transition:color .25s ease; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; margin:0 0 .5rem; line-height:1.1; letter-spacing:-0.02em; }
p{ margin:0 0 1rem; color:var(--text-secondary); line-height:1.7; font-size:0.95rem; }
.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }
.section{ padding:120px 0; position:relative; }
.section-divider{ height:1px; background:linear-gradient(90deg,transparent,var(--border-maroon),transparent); margin:0 64px; opacity:0.5; }
.eyebrow{
  font-family:var(--font-display);
  color:var(--accent-maroon-light);
  font-size:0.75rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:linear-gradient(90deg,var(--accent-maroon),transparent); }
.section-title{ font-size:clamp(2.2rem,5vw,3.8rem); color:var(--text-primary); font-weight:700; letter-spacing:-0.03em; line-height:1.05; }
.section-title .hl{ color:var(--accent-maroon-light); }
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mb-0{ margin-bottom:0; }
.d-flex{ display:flex; }
.justify-between{ justify-content:space-between; }
.align-center{align-items:center; }
.gap-3{ gap:12px; }
/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 32px; border-radius:999px; font-family:var(--font-body); font-size:0.85rem;
  font-weight:500; border:1px solid transparent; cursor:pointer; transition:all .35s cubic-bezier(.16,1,.3,1);
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.12) 50%,transparent 60%); transform:translateX(-100%); transition:transform .6s ease; }
.btn:hover::before{ transform:translateX(100%); }
.btn-primary{ background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); color:#fff; box-shadow:0 4px 20px rgba(122,16,36,0.35); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(122,16,36,0.55); background:linear-gradient(135deg,var(--accent-maroon-light),var(--accent-maroon)); }
.btn-outline{ background:transparent; border-color:var(--border-medium); color:var(--text-primary); }
.btn-outline:hover{ border-color:var(--accent-maroon); color:var(--accent-maroon-light); background:var(--accent-maroon-soft); }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,0.2); color:#fff; }
.btn-outline-light:hover{ background:rgba(122,16,36,0.15); border-color:var(--accent-maroon); color:var(--accent-maroon-light); transform:translateY(-2px); }
.btn-wa-outline:hover{ border-color:#25D366; color:#25D366; background:rgba(37,211,102,0.1); }
.btn-sm{ padding:10px 22px; font-size:0.78rem; }
.btn-block{ width:100%; }
.btn i{ transition:transform .3s ease; }
.btn:hover i{ transform:translateX(3px); }
/* Navbar */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:1000; background:transparent; transition:all .4s cubic-bezier(.16,1,.3,1); border-bottom:1px solid transparent; }
.navbar.scrolled{ background:rgba(8,6,7,0.88); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-maroon); }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:36px; width:auto; filter:brightness(1.1) saturate(1.2); }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:0.88rem; color:var(--text-secondary); position:relative; padding:6px 0; transition:color .3s ease; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:linear-gradient(90deg,var(--accent-maroon),var(--accent-maroon-light)); transition:width .35s cubic-bezier(.16,1,.3,1); }
.nav-links a:hover, .nav-links a.active{ color:var(--text-primary); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--text-secondary); border:1px solid var(--border-subtle); background:transparent; transition:all .3s ease; cursor:pointer; }
.icon-btn:hover{ border-color:var(--accent-maroon); color:var(--accent-maroon-light); background:var(--accent-maroon-soft); }
.badge-count{ position:absolute; top:-2px; right:-2px; background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); color:#fff; font-size:0.62rem; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; }
.nav-toggle{ display:none; background:none; border:none; color:var(--text-primary); font-size:1.4rem; cursor:pointer; width:42px; height:42px; align-items:center; justify-content:center; }
.user-menu{ position:relative; }
.user-menu-btn img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--border-medium); }
.user-menu-btn:hover img{ border-color:var(--accent-maroon); }
.user-dropdown{ position:absolute; right:0; top:56px; background:var(--bg-elevated); border:1px solid var(--border-maroon); border-radius:var(--radius-md); min-width:200px; padding:10px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .3s ease; }
.user-menu.open .user-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.user-dropdown a{ display:block; padding:12px 14px; border-radius:var(--radius-sm); font-size:0.88rem; color:var(--text-secondary); transition:all .2s ease; }
.user-dropdown a:hover{ background:var(--accent-maroon-soft); color:var(--accent-maroon-light); }
@media(max-width:960px){
  .nav-links{ position:fixed; top:80px; left:0; right:0; background:rgba(8,6,7,0.96); backdrop-filter:blur(20px); flex-direction:column; align-items:flex-start; padding:24px 32px; border-bottom:1px solid var(--border-maroon); transform:translateY(-130%); transition:transform .4s ease; gap:20px; }
  .nav-links.open{ transform:translateY(0); }
  .nav-toggle{ display:flex; }
}
/* Hero */
.hero{ position:relative; overflow:hidden; padding:0; min-height:100vh; display:flex; align-items:center; background:var(--bg-primary); }
.hero::before{ content:''; position:absolute; top:50%; left:65%; transform:translate(-50%,-50%); width:800px; height:800px; background:radial-gradient(circle, rgba(122,16,36,0.18) 0%, rgba(74,7,21,0.08) 40%, transparent 70%); border-radius:50%; pointer-events:none; z-index:0; }
.hero-canvas-container{ position:absolute; inset:0; z-index:1; }
#living-c-canvas{ width:100%; height:100%; display:block; }
.cosmic-dust{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cosmic-dust span{ position:absolute; width:2px; height:2px; background:rgba(255,255,255,0.3); border-radius:50%; animation:dustFloat 20s linear infinite; }
.cosmic-dust span.maroon{ background:rgba(160,24,48,0.5); box-shadow:0 0 4px rgba(122,16,36,0.4); }
@keyframes dustFloat{ 0%{ transform:translateY(100vh) translateX(0); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(-10vh) translateX(50px); opacity:0; } }
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding-top:100px; padding-bottom:80px; }
.hero-content{ position:relative; z-index:2; }
.hero-title{ font-size:clamp(2.8rem,6.5vw,5.5rem); color:var(--text-primary); margin-bottom:24px; font-weight:700; letter-spacing:-0.04em; line-height:0.98; }
.hero-title .hl{ color:var(--accent-maroon-light); }
.hero-sub{ color:var(--text-secondary); font-size:1.05rem; max-width:520px; line-height:1.7; }
.hero-cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:48px; margin-top:60px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--border-subtle); }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--text-primary); font-weight:600; }
.hero-stat span{ font-size:0.72rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.12em; margin-top:4px; display:block; }
.hero-visual{ position:relative; z-index:2; min-height:500px; }
@media(max-width:860px){ .hero{ min-height:auto; padding:120px 0 80px; } .hero-grid{ grid-template-columns:1fr; gap:40px; } .hero-visual{ min-height:350px; } }

/* Hero — Editorial / Asymmetric, digital ecosystem visual */
.hero-editorial::before{ content:none; }
.hero-editorial-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 18% 42%, var(--accent-vivid-soft) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 88% 18%, rgba(122,16,36,0.16) 0%, transparent 60%);
}
.hero-topline{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px;
  font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:22px; position:relative; z-index:2;
}
.hero-topline-line{ flex:1; min-width:30px; height:1px; background:linear-gradient(90deg,var(--border-maroon),transparent 85%); }
@media(max-width:420px){ .hero-topline{ font-size:0.64rem; gap:8px 14px; } }
.hero-bg-type{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-0.02em;
  font-size:clamp(4.5rem,17vw,13rem); white-space:nowrap; margin:0;
  color:rgba(255,255,255,0.045); -webkit-text-stroke:1px rgba(255,255,255,0.09);
}
.hero-editorial-inner{
  position:relative; z-index:2; padding:150px 0 90px;
  display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:40px;
  min-height:calc(100vh - 70px);
}
.hero-ed-left{ max-width:620px; }
.hero-ed-headline{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02; margin:0 0 24px;
}
.hl-vivid{ color:var(--accent-vivid); }
.hero-ed-desc{ font-size:1.05rem; color:var(--text-secondary); max-width:480px; margin-bottom:32px; line-height:1.65; }
.hero-ed-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:36px; }
.btn-ghost{ background:transparent; border:1px solid var(--border-medium); color:var(--text-primary); }
.btn-ghost:hover{ border-color:var(--accent-vivid); color:var(--accent-vivid-light); background:var(--accent-vivid-soft); transform:translateY(-2px); }
.hero-ed-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:0.82rem; color:var(--text-muted); }
.hero-ed-trust b{ color:var(--text-primary); font-family:var(--font-display); }
.hero-ed-trust .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-muted); flex:none; }

/* Floating digital-ecosystem card cluster (hero signature visual) */
.hero-ed-right{ position:relative; min-height:460px; }
.hero-cluster{ position:relative; width:100%; height:500px; }
.eco-card{
  position:absolute; background:linear-gradient(160deg,var(--bg-elevated),var(--bg-surface));
  border:1px solid var(--border-medium); border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.65); padding:20px 22px;
  animation:ecoFloat 7s ease-in-out infinite;
  translate:0 var(--parallax-y,0px);
}
.eco-social{ top:4%; left:0; width:235px; animation-delay:0s; --r:-2deg; }
.eco-analytics{ top:42%; right:0; width:220px; animation-delay:1.2s; --r:1.5deg; }
.eco-web{ bottom:2%; left:12%; width:270px; animation-delay:2.4s; --r:-1deg; }
.eco-chip{
  position:absolute; top:2%; right:16%; z-index:2;
  background:var(--bg-elevated); border:1px solid var(--accent-vivid); color:var(--accent-vivid-light);
  font-family:var(--font-display); font-size:0.78rem; font-weight:600; padding:10px 18px; border-radius:999px;
  box-shadow:0 0 24px var(--accent-vivid-glow); animation:ecoFloat 6s ease-in-out infinite; animation-delay:0.8s;
  translate:0 var(--parallax-y,0px);
}
@keyframes ecoFloat{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--r,0deg)); } }
.eco-card-head{ display:flex; align-items:center; gap:8px; font-size:0.82rem; margin-bottom:12px; color:var(--text-primary); }
.eco-card-head i{ color:var(--accent-vivid-light); }
.eco-dot{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF,#515BD4); display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.75rem; flex:none; }
.eco-dot i{ color:#fff; }
.eco-photo{ height:95px; border-radius:10px; margin-bottom:10px; overflow:hidden; padding:4px; background:var(--bg-elevated); border:1px solid var(--border-medium); }
.eco-photo img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; border-radius:7px; }
.eco-bars span{ display:block; height:6px; border-radius:4px; background:var(--border-medium); margin-bottom:7px; width:100%; }
.eco-card-foot{ display:flex; gap:14px; color:var(--text-muted); font-size:0.9rem; margin-top:14px; }
.eco-chart{ display:flex; align-items:flex-end; gap:7px; height:76px; }
.eco-chart span{ flex:1; background:linear-gradient(180deg,var(--accent-vivid-light),var(--accent-maroon)); border-radius:4px 4px 0 0; }
.eco-browser-bar{ display:flex; gap:5px; margin-bottom:14px; }
.eco-browser-bar span{ width:8px; height:8px; border-radius:50%; background:var(--border-medium); }
.eco-web-hero{ height:68px; border-radius:10px; margin-bottom:10px; overflow:hidden; padding:4px; background:var(--bg-elevated); border:1px solid var(--border-medium); display:flex; align-items:center; }
.eco-web-hero img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; border-radius:7px; }
.eco-web-btn{ display:block; width:38px; height:10px; border-radius:4px; background:var(--accent-vivid-light); margin-left:10px; }
.eco-web-grid{ display:flex; gap:8px; }
.eco-web-grid span{ flex:1; height:26px; border-radius:6px; background:var(--border-medium); }
@media(max-width:960px){
  .hero-editorial-inner{ grid-template-columns:1fr; min-height:auto; padding:130px 0 60px; gap:16px; }
  .hero-ed-left{ max-width:none; }
  .hero-ed-right{ min-height:380px; margin-top:16px; }
  .hero-cluster{ height:380px; }
  .eco-social{ width:200px; }
  .eco-analytics{ width:185px; }
  .eco-web{ width:225px; left:6%; }
}
@media(max-width:480px){
  .hero-cluster{ height:330px; }
  .eco-social{ width:175px; left:0; top:2%; }
  .eco-analytics{ width:160px; top:46%; }
  .eco-web{ width:190px; bottom:2%; left:4%; }
  .eco-chip{ right:6%; font-size:0.68rem; padding:8px 14px; }
  .hero-bg-type{ font-size:clamp(3rem,20vw,7rem); }
}
/* NOTE: .hero-editorial-inner / .hero-ed-right / .hero-cluster / .eco-* above
   are no longer used on the homepage (replaced by .hero-agency below) but are
   left in place in case they're ever reused — they add no weight since unused
   CSS selectors that match nothing cost the browser essentially nothing to
   parse. .hero-topline, .hero-bg-type, .hero-ed-cta and .hl-vivid ARE still
   used by the new hero, so those stay active either way. */

/* =====================================================================
   HERO — Agency style (full-bleed photo + giant headline + trust badges)
   Always renders as a dark, on-brand scene regardless of the light/dark
   site theme — same treatment as .cta-section elsewhere in this file —
   so text stays legible whether or not a photo has been uploaded, and
   in either theme. Zero extra requests when no photo is set: the
   background is a pure CSS gradient plus the existing .hero-bg-type
   watermark text.
   ===================================================================== */
.hero-agency{
  align-items:stretch;
  background:
    radial-gradient(ellipse 90% 70% at 25% 0%, rgba(122,16,36,0.35) 0%, transparent 60%),
    linear-gradient(160deg, var(--accent-maroon-dark) 0%, #0A0506 55%, #050505 100%);
}
.hero-agency::before{ content:none; }
.hero-agency-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%; z-index:0;
}
.hero-agency-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,3,4,0.72) 0%, rgba(5,3,4,0.32) 32%, rgba(5,3,4,0.5) 68%, rgba(5,3,4,0.92) 100%),
    linear-gradient(90deg, rgba(5,3,4,0.7) 0%, rgba(5,3,4,0.1) 45%, rgba(5,3,4,0.45) 100%);
}
.hero-agency-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:100vh; padding:140px 0 56px; gap:40px;
}
.hero-agency-row{ display:flex; gap:32px; }
.hero-agency-row-top{ justify-content:space-between; align-items:flex-start; }
.hero-agency-row-bottom{ justify-content:space-between; align-items:flex-end; }
.hero-agency-lead-wrap{ max-width:420px; }
.hero-agency-lead{ color:rgba(255,255,255,0.82); font-size:1rem; line-height:1.7; margin:14px 0 26px; }
.hero-agency-wa{ color:#fff; border-color:rgba(255,255,255,0.28); }
.hero-agency-wa:hover{ background:rgba(37,211,102,0.16); border-color:#25D366; color:#25D366; }
.hero-agency-features{
  list-style:none; margin:8px 0 0; padding:0; flex:none;
  display:grid; grid-template-columns:repeat(2,auto); gap:12px 34px;
}
.hero-agency-features li{
  position:relative; padding-left:16px; font-size:0.8rem; font-weight:500;
  letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.85);
  font-family:var(--font-display); white-space:nowrap;
}
.hero-agency-features li::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#F0464B;
}
.hero-agency-bottom-left{ max-width:640px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:14px;
  background:rgba(5,3,4,0.55); border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(6px); border-radius:999px; padding:8px 22px 8px 8px; margin-bottom:22px;
}
.hero-badge-icon{
  width:38px; height:38px; border-radius:50%; flex:none; font-size:0.95rem;
  background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep));
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.hero-badge b{ display:block; font-family:var(--font-display); font-size:0.86rem; color:#fff; font-weight:600; }
.hero-badge span{ font-size:0.72rem; color:rgba(255,255,255,0.65); }
.hero-agency-headline{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em;
  line-height:0.98; font-size:clamp(2.6rem,7vw,5.5rem); color:#fff; margin:0;
}
.hero-agency .hl-vivid{ color:#F0464B; }
.hero-agency-rating{ text-align:right; flex:none; }
.hero-agency-rating b{ font-family:var(--font-display); font-size:2.3rem; font-weight:700; color:#fff; }
.hero-agency-rating b span{ font-size:1rem; font-weight:500; color:rgba(255,255,255,0.6); }
.hero-agency-rating .stars{ color:#FFC02E; font-size:0.82rem; margin:4px 0; letter-spacing:2px; }
.hero-agency-rating-label{ display:block; font-size:0.78rem; color:rgba(255,255,255,0.65); max-width:170px; margin-left:auto; line-height:1.4; }
@media(max-width:860px){
  .hero-agency-inner{ padding:120px 0 40px; gap:28px; }
  .hero-agency-row-top{ flex-direction:column; gap:24px; }
  .hero-agency-row-bottom{ flex-direction:column; align-items:flex-start; gap:20px; }
  .hero-agency-rating{ text-align:left; }
  .hero-agency-rating-label{ margin-left:0; }
  .hero-agency-features{ grid-template-columns:1fr 1fr; gap:10px 24px; }
}
@media(max-width:480px){
  .hero-agency-features li{ font-size:0.72rem; white-space:normal; }
  .hero-badge{ padding:6px 16px 6px 6px; gap:10px; }
  .hero-badge-icon{ width:32px; height:32px; font-size:0.82rem; }
}

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.marketplace-layout{ grid-template-columns:260px 1fr; gap:30px; align-items:flex-start; }
@media(max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
.card{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; transition:all .4s cubic-bezier(.16,1,.3,1); position:relative; }
.card::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--accent-maroon-soft),transparent); opacity:0; transition:opacity .4s ease; pointer-events:none; }
.card:hover{ transform:translateY(-6px); border-color:var(--accent-maroon); box-shadow:0 20px 60px rgba(0,0,0,0.35), var(--glow-maroon); }
.card:hover::before{ opacity:1; }
.card-body{ padding:28px; position:relative; z-index:1; }
.card-icon{ width:56px; height:56px; border-radius:var(--radius-md); background:var(--accent-maroon-soft); color:var(--accent-maroon-light); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:20px; transition:all .4s ease; }
.card:hover .card-icon{ background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); color:#fff; box-shadow:var(--glow-maroon); }
.card h3{ font-size:1.2rem; font-weight:600; margin-bottom:10px; }
.service-card{ display:flex; flex-direction:column; }
.service-card .thumb{ position:relative; height:210px; overflow:hidden; }
.service-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.service-card:hover .thumb img{ transform:scale(1.08); }
.service-card .cat-tag{ position:absolute; top:14px; left:14px; background:rgba(8,6,7,0.75); backdrop-filter:blur(10px); color:var(--text-primary); font-size:0.7rem; padding:6px 14px; border-radius:999px; text-transform:uppercase; border:1px solid var(--border-subtle); }
.service-card .card-body{ display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.service-card .card-body h3{ margin-bottom:8px; }
.service-card .card-body p{ color:var(--text-muted); font-size:.92rem; line-height:1.55; margin-bottom:0; }
.service-card .card-body > .btn,
.service-card .card-body > .actions{ margin-top:auto; }

/* Harga coret (original price) + harga asli (current/real price) —
   shown as its own clear block below the description, not as a small
   badge on top of the photo. */
.price-wrap{ display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price-original{ text-decoration:line-through; opacity:.6; font-size:0.62em; font-weight:400; }
.price-final{ font-weight:700; }
.price-final-row{ display:inline-flex; align-items:baseline; gap:8px; }
.price-discount{ background:#1a8a4a; color:#fff; font-size:0.5em; font-weight:700; padding:3px 9px; border-radius:999px; vertical-align:middle; }
.price-unit{ font-weight:400; font-size:0.55em; color:var(--text-muted); text-transform:none; }

.price-block{ margin:16px 0; padding:14px 16px; background:var(--accent-maroon-soft); border:1px solid var(--border-subtle); border-radius:var(--radius-sm, 10px); }
.price-block .price-final{ font-family:var(--font-display); font-size:1.5rem; color:var(--accent-maroon-light); }
/* Stack harga coret ABOVE harga asli — flex-direction:column is required
   here because a flex child's own `display:block` is ignored inside an
   inline-flex row parent, so the previous version never actually stacked. */
.price-block .price-wrap{ flex-direction:column; align-items:flex-start; gap:6px; }
.price-block .price-original{ font-size:0.95rem; opacity:.7; }
.price-block .price-discount{ font-size:0.7rem; }

.price-detail .price-wrap{ flex-direction:column; align-items:flex-start; gap:4px; }
.price-detail .price-original{ font-size:0.5em; color:var(--text-muted); opacity:1; }
.price-detail .price-discount{ font-size:0.45em; vertical-align:middle; }
.feature-row{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border-subtle); }
.feature-row:last-child{ border-bottom:none; }
.feature-row i{ color:var(--accent-maroon-light); margin-top:3px; font-size:1.1rem; }
.feature-row b{ display:block; font-size:1rem; margin-bottom:4px; color:var(--text-primary); }
.feature-row p{ color:var(--text-strong); }
/* Process Section */
.process-timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:64px; position:relative; }
.process-timeline::before{ content:''; position:absolute; top:28px; left:10%; right:10%; height:2px; background:var(--border-subtle); z-index:0; }
.process-step{ text-align:center; position:relative; z-index:1; padding:0 12px; }
.process-step-num{ width:56px; height:56px; border-radius:50%; background:var(--bg-surface); border:2px solid var(--border-medium); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text-secondary); transition:all .4s ease; }
.process-step.active .process-step-num, .process-step:hover .process-step-num{ background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); border-color:var(--accent-maroon); color:#fff; box-shadow:var(--glow-maroon); }
.process-step h4{ font-size:0.95rem; font-weight:600; margin-bottom:6px; }
.process-step p{ font-size:0.82rem; margin:0; color:var(--text-muted); }
@media(max-width:768px){ .process-timeline{ grid-template-columns:1fr; gap:24px; } .process-timeline::before{ display:none; } .process-step{ display:flex; align-items:center; gap:20px; text-align:left; } .process-step-num{ margin:0; flex-shrink:0; } }
/* Portfolio */
/* Portfolio — uniform auto-fill grid. Each card gets a guaranteed minimum
   width (320px); the browser fits as many per row as space allows and
   wraps the rest to the next row. Unlike a fixed-span bento layout, this
   can never collapse a card into a narrow sliver regardless of how many
   portfolio items exist. */
.portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:26px; margin-top:48px; }
.portfolio-card{ position:relative; display:block; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; transition:all .5s ease; min-height:340px; }
.portfolio-card .portfolio-bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .6s ease; }
.portfolio-card:hover .portfolio-bg{ transform:scale(1.05); }
.portfolio-card .portfolio-bg i{ font-size:3.5rem; color:var(--accent-maroon); opacity:0.25; transition:all .4s ease; }
.portfolio-card:hover .portfolio-bg i{ opacity:0.4; transform:scale(1.1); }
.portfolio-card .portfolio-bg img{ width:68%; height:68%; object-fit:contain; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.45)); transition:all .4s ease; }
.portfolio-card:hover .portfolio-bg img{ transform:scale(1.06); }
.portfolio-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(8,6,7,0.92) 100%); pointer-events:none; }
.portfolio-card .portfolio-content{ position:absolute; bottom:0; left:0; right:0; padding:28px; z-index:2; transform:translateY(10px); transition:transform .4s ease; }
.portfolio-card:hover .portfolio-content{ transform:translateY(0); }
.portfolio-card .portfolio-tag{ display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent-maroon-light); margin-bottom:10px; }
.portfolio-card h3{ font-size:1.5rem; color:var(--text-primary); margin-bottom:6px; font-weight:600; }
.portfolio-card p{ margin:0; font-size:0.92rem; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.portfolio-card .ig-badge{ position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transform:scale(0.7); transition:all .35s ease; z-index:3; }
.portfolio-card:hover .ig-badge{ opacity:1; transform:scale(1); box-shadow:var(--glow-maroon); }
.portfolio-card:hover{ border-color:var(--accent-maroon); }
@media(max-width:480px){ .portfolio-grid{ grid-template-columns:1fr; } }
/* Testimonials */
.testi-card{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; transition:all .4s ease; height:100%; }
.testi-card:hover{ transform:translateY(-6px); border-color:var(--accent-maroon); box-shadow:0 20px 60px rgba(0,0,0,0.35), var(--glow-maroon); }
.testi-photo{ position:relative; height:240px; overflow:hidden; }
.testi-photo img{ width:100%; height:100%; object-fit:cover; }
.testi-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(8,6,7,0.88) 100%); }
.testi-photo .quote-mark{ position:absolute; top:18px; left:20px; font-size:2.5rem; color:var(--accent-maroon-light); font-family:Georgia, serif; z-index:2; opacity:0.7; }
.testi-photo .testi-name-overlay{ position:absolute; bottom:18px; left:20px; right:20px; color:#fff; z-index:2; }
.testi-photo .testi-name-overlay b{ display:block; font-family:var(--font-display); font-weight:600; }
.testi-body{ padding:24px 28px; }
.testi-card .stars{ color:var(--accent-maroon-light); margin-bottom:14px; font-size:0.85rem; }
.testi-carousel{ position:relative; overflow:hidden; }
.testi-track{ display:flex; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.testi-slide{ flex:0 0 33.333%; padding:0 14px; }
@media(max-width:780px){ .testi-slide{ flex:0 0 100%; } }
.testi-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px; }
.testi-prev,.testi-next{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border-medium); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s ease; }
.testi-prev:hover,.testi-next:hover{ border-color:var(--accent-maroon); color:var(--accent-maroon-light); background:var(--accent-maroon-soft); }
.testi-dots{ display:flex; gap:8px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-medium); border:none; cursor:pointer; transition:all .3s ease; }
.testi-dot.active{ background:var(--accent-maroon); width:24px; border-radius:4px; box-shadow:var(--glow-maroon); }
/* FAQ */
.accordion-item{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); margin-bottom:14px; background:var(--bg-surface); transition:all .3s ease; }
.accordion-item.open{ border-color:var(--accent-maroon); }
.accordion-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 28px; cursor:pointer; font-weight:500; color:var(--text-primary); }
.accordion-head i{ transition:all .35s ease; color:var(--accent-maroon-light); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent-maroon-soft); }
.accordion-item.open .accordion-head i{ transform:rotate(45deg); background:var(--accent-maroon); color:#fff; }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; padding:0 28px; }
.accordion-item.open .accordion-body{ max-height:400px; padding-bottom:24px; }
/* Forms */
.form-group{ margin-bottom:22px; }
.form-label{ display:block; font-size:0.82rem; font-weight:500; margin-bottom:8px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.06em; }
.form-control{ width:100%; padding:14px 18px; border-radius:var(--radius-sm); border:1px solid var(--border-medium); background:var(--bg-surface); color:var(--text-primary); font-family:var(--font-body); font-size:0.94rem; transition:all .3s ease; }
.form-control:focus{ outline:none; border-color:var(--accent-maroon); box-shadow:0 0 0 4px var(--accent-maroon-soft); background:var(--bg-elevated); }
.auth-card{ max-width:460px; margin:80px auto; background:var(--bg-surface); border:1px solid var(--border-medium); border-radius:var(--radius-xl); padding:48px; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
/* Tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--border-medium); border-radius:var(--radius-md); background:var(--bg-surface); }
table{ width:100%; border-collapse:collapse; font-size:0.9rem; }
thead th{ text-align:left; background:var(--bg-elevated); padding:16px 20px; font-family:var(--font-display); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary); border-bottom:1px solid var(--border-medium); font-weight:500; }
tbody td{ padding:16px 20px; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); }
tbody tr:hover{ background:var(--bg-elevated); }
tbody tr:hover td{ color:var(--text-primary); }
.status-pill{ display:inline-block; padding:5px 14px; border-radius:999px; font-size:0.7rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; background:rgba(255,255,255,0.07); color:var(--text-secondary); }
.status-active,.status-paid,.status-completed,.status-published{ background:rgba(34,197,94,0.15); color:#4ADE80; }
.status-pending,.status-waiting_payment,.status-draft{ background:rgba(245,158,11,0.15); color:#FBBF24; }
.status-processing,.status-in_progress{ background:rgba(59,130,246,0.15); color:#60A5FA; }
.status-inactive,.status-hidden{ background:rgba(255,255,255,0.08); color:var(--text-muted); }
.status-failed,.status-expired,.status-cancelled,.status-banned{ background:rgba(224,54,74,0.16); color:#F87171; }
/* Order Stepper (timeline) */
.order-stepper{ display:flex; justify-content:space-between; margin:28px 0 32px; padding:0 4px; }
.order-step{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.order-step .line{ position:absolute; top:19px; left:-50%; width:100%; height:2px; background:var(--border-medium); z-index:1; }
.order-step:first-child .line{ display:none; }
.order-step.done .line, .order-step.current .line{ background:var(--accent-maroon); }
.order-step .dot{ width:40px; height:40px; border-radius:50%; background:var(--bg-elevated); border:2px solid var(--border-medium); display:flex; align-items:center; justify-content:center; font-size:0.95rem; color:var(--text-muted); position:relative; z-index:2; margin-bottom:12px; transition:all .35s ease; }
.order-step.done .dot{ background:var(--accent-maroon); border-color:var(--accent-maroon); color:#fff; }
.order-step.current .dot{ background:var(--bg-elevated); border-color:var(--accent-maroon-light); color:var(--accent-maroon-light); box-shadow:0 0 0 4px var(--accent-maroon-soft); animation:stepPulse 2s ease-in-out infinite; }
@keyframes stepPulse{ 0%,100%{ box-shadow:0 0 0 4px var(--accent-maroon-soft); } 50%{ box-shadow:0 0 0 8px transparent; } }
.order-step span{ font-size:0.72rem; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; max-width:110px; line-height:1.4; }
.order-step.done span{ color:var(--text-secondary); }
.order-step.current span{ color:var(--accent-maroon-light); font-weight:700; }
@media(max-width:560px){
  .order-stepper{ padding:0; }
  .order-step .dot{ width:32px; height:32px; font-size:0.8rem; margin-bottom:8px; }
  .order-step .line{ top:15px; }
  .order-step span{ font-size:0.62rem; max-width:76px; }
}
/* CTA Section */
.cta-section{ background:linear-gradient(135deg,var(--accent-maroon-dark),var(--accent-maroon-deep)); position:relative; overflow:hidden; }
.cta-section::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(122,16,36,0.4) 0%, transparent 70%); pointer-events:none; }
.cta-section .section-title{ color:#fff; }
.cta-section p{ color:rgba(255,255,255,0.75); }
.cta-section .eyebrow{ color:rgba(255,255,255,0.7); }
.cta-section .btn-primary{ background:#fff; color:var(--accent-maroon-deep); box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.cta-section .btn-primary:hover{ background:var(--off-white); transform:translateY(-2px); }
/* Footer */
.footer{ background:var(--bg-secondary); color:var(--text-secondary); padding:80px 0 32px; position:relative; border-top:1px solid var(--border-subtle); }
.footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent-maroon),transparent); opacity:0.4; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; margin-bottom:60px; }
.footer h4{ color:var(--text-primary); font-size:0.9rem; font-weight:600; margin-bottom:20px; }
.footer a{ color:var(--text-secondary); display:block; padding:6px 0; font-size:0.9rem; transition:all .25s ease; }
.footer a:hover{ color:var(--accent-maroon-light); transform:translateX(4px); }
.footer-social{ display:flex; gap:12px; margin-top:24px; }
.footer-social a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--border-medium); display:flex; align-items:center; justify-content:center; padding:0; }
.footer-social a:hover{ border-color:var(--accent-maroon); background:var(--accent-maroon-soft); color:var(--accent-maroon-light); box-shadow:var(--glow-maroon); transform:none; }
.footer-bottom{ border-top:1px solid var(--border-subtle); padding-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:var(--text-muted); }
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
/* Back to top */
.back-to-top{ position:fixed; bottom:30px; right:30px; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(122,16,36,0.45); opacity:0; visibility:hidden; transform:translateY(12px); transition:all .35s ease; z-index:900; border:none; cursor:pointer; }
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-4px); box-shadow:0 12px 40px rgba(122,16,36,0.6); }
/* WA Float */
.wa-float{ position:fixed; bottom:30px; left:30px; width:48px; height:48px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.25rem; box-shadow:0 6px 20px rgba(37,211,102,0.35); z-index:900; transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease; opacity:0; transform:translateY(12px) scale(0.9); pointer-events:none; }
.wa-float.wa-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.wa-float:hover{ transform:translateY(-4px) scale(1.05); box-shadow:0 10px 28px rgba(37,211,102,0.5); }
.wa-tooltip{
  position:absolute; left:70px; top:50%; transform:translateY(-50%) translateX(-6px);
  background:#1c1c1c; color:#fff; padding:8px 14px; border-radius:8px;
  font-size:0.8rem; font-weight:500; white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  box-shadow:0 10px 25px rgba(0,0,0,0.35);
}
.wa-float:hover .wa-tooltip{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
@media(max-width:768px){ .wa-tooltip{ display:none; } }
/* Toast */
.toast-wrap{ position:fixed; top:100px; right:30px; z-index:2000; display:flex; flex-direction:column; gap:12px; }
.toast{ min-width:300px; background:var(--bg-elevated); border:1px solid var(--border-medium); border-left:3px solid var(--accent-maroon); border-radius:var(--radius-sm); padding:16px 20px; box-shadow:0 20px 60px rgba(0,0,0,0.5); display:flex; align-items:flex-start; gap:12px; animation:toastIn .4s ease; backdrop-filter:blur(20px); }
.toast-body{ display:flex; flex-direction:column; gap:8px; }
.toast-action a{ font-family:var(--font-display); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent-vivid-light); display:inline-flex; align-items:center; gap:6px; }
.toast-action a:hover{ color:#fff; }
.toast.success{ border-left-color:var(--accent-maroon-light); }
.toast.success i{ color:var(--accent-maroon-light); }
.toast.error{ border-left-color:#ef4444; }
.toast.error i{ color:#ef4444; }
.toast i{ color:var(--accent-maroon-light); font-size:1.1rem; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(40px);} to{ opacity:1; transform:translateX(0);} }
/* Loading */
#loading-screen{ position:fixed; inset:0; background:var(--bg-primary); z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .5s ease, visibility .5s ease; }
#loading-screen.hide{ opacity:0; visibility:hidden; }
.loader-logo{ width:140px; animation:pulse 1.5s ease-in-out infinite; filter:brightness(1.1) saturate(1.2); }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.06); opacity:0.7; } }
/* Page Header */
.page-header{ background:var(--bg-secondary); color:var(--text-primary); padding:140px 0 80px; text-align:center; position:relative; overflow:hidden; }
.page-header::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 0%,var(--accent-maroon-soft),transparent 60%); }
.page-header h1{ font-size:clamp(2.2rem,5vw,3.5rem); font-weight:700; letter-spacing:-0.03em; position:relative; z-index:1; }
.page-header p{ color:var(--text-secondary); position:relative; z-index:1; }
.breadcrumb{ font-size:0.8rem; color:var(--text-muted); margin-top:12px; position:relative; z-index:1; }
.breadcrumb a{ color:var(--accent-maroon-light); }
/* Scroll Reveal */
.reveal-init{ opacity:0; transform:translateY(30px); transition:all .7s cubic-bezier(.16,1,.3,1); }
.reveal-active{ opacity:1; transform:translateY(0); }
/* Misc */
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.pagination a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); border:1px solid var(--border-medium); font-size:0.88rem; color:var(--text-secondary); transition:all .25s ease; }
.pagination a:hover{ border-color:var(--accent-maroon); color:var(--accent-maroon-light); }
.pagination a.active{ background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); color:#fff; border-color:transparent; box-shadow:var(--glow-maroon); }
.chip{ display:inline-flex; align-items:center; padding:10px 18px; border-radius:999px; border:1px solid var(--border-medium); font-size:0.82rem; margin:4px 6px 4px 0; cursor:pointer; transition:all .25s ease; color:var(--text-secondary); }
.chip.active,.chip:hover{ background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); border-color:transparent; color:#fff; box-shadow:var(--glow-maroon); }
.qty-box{ display:flex; align-items:center; border:1px solid var(--border-medium); border-radius:var(--radius-sm); background:var(--bg-surface); }
.qty-box button{ width:38px; height:38px; background:var(--bg-elevated); border:none; cursor:pointer; color:var(--text-secondary); transition:all .2s ease; }
.qty-box button:hover{ background:var(--accent-maroon-soft); color:var(--accent-maroon-light); }
.qty-box input{ width:50px; text-align:center; border:none; background:transparent; color:var(--text-primary); }
.courier-option{ display:flex; align-items:center; gap:16px; padding:16px 20px; border:1px solid var(--border-medium); border-radius:var(--radius-md); cursor:pointer; transition:all .3s ease; margin-bottom:12px; }
.courier-option:hover{ border-color:var(--accent-maroon); background:var(--accent-maroon-soft); }
.courier-option input[type="radio"]{ accent-color:var(--accent-maroon); }
.courier-option b{ color:var(--text-primary); }
.courier-option span{ color:var(--accent-maroon-light); font-weight:600; }
/* Admin */
.admin-wrap{ display:flex; min-height:100vh; }
.admin-sidebar{ width:260px; background:var(--bg-secondary); border-right:1px solid var(--border-subtle); padding:24px 0; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:100; transition:transform .3s ease; }
.admin-sidebar .brand{ padding:0 24px 24px; border-bottom:1px solid var(--border-subtle); margin-bottom:16px; }
.admin-nav{ padding:0 12px; }
.admin-nav a{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--radius-sm); color:var(--text-secondary); font-size:0.88rem; transition:all .25s ease; margin-bottom:4px; }
.admin-nav a:hover, .admin-nav a.active{ background:var(--accent-maroon-soft); color:var(--accent-maroon-light); }
.admin-main{ margin-left:260px; flex:1; padding:32px; min-height:100vh; }
.admin-nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--border-medium); border-radius:var(--radius-sm); background:var(--bg-surface); color:var(--text-primary); cursor:pointer; }
@media(max-width:960px){ .admin-sidebar{ transform:translateX(-100%); } .admin-sidebar.open{ transform:translateX(0); } .admin-main{ margin-left:0; padding:20px; } .admin-nav-toggle{ display:flex; } }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:16px; }
.admin-content{ position:relative; }
.user-menu-btn{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.nav-group-title{ padding:18px 16px 6px; font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:32px; }
.stat-card{ display:flex; align-items:center; gap:16px; background:var(--bg-surface); border:1px solid var(--border-medium); border-radius:var(--radius-md); padding:20px; transition:all .3s ease; }
.stat-card:hover{ border-color:var(--accent-maroon); transform:translateY(-4px); box-shadow:0 16px 40px -18px rgba(0,0,0,0.55); }
.stat-card .icon{ flex:none; width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,0.5); }
.stat-card > div:last-child{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.stat-card > div:last-child b{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--text-primary); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-card > div:last-child span{ font-size:0.74rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; }

/* ============ Homepage Redesign — Editorial Agency ============ */
/* Brand statement */
.statement-section{ padding:100px 0; text-align:center; }
.statement-text{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; line-height:1.05;
  text-transform:uppercase; font-size:clamp(2rem,6.5vw,5rem); color:var(--text-muted); margin:0 0 18px;
}
.statement-text.statement-emphasis{ color:var(--text-primary); margin-bottom:0; }

/* Services — editorial interactive list */
.section-lead{ max-width:640px; }
.service-list{ border-top:1px solid var(--border-subtle); margin-top:48px; }
.service-row{
  display:flex; align-items:center; gap:28px; padding:30px 12px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--border-subtle); transition:padding .35s cubic-bezier(.16,1,.3,1);
}
.service-row::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,var(--accent-vivid-soft),transparent 70%);
  transform:translateX(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.service-row:hover::before{ transform:translateX(0); }
.service-row:hover{ padding-left:26px; }
.service-row-num{
  font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--text-muted);
  transition:all .35s ease; position:relative; z-index:1; flex:none; width:44px;
}
.service-row:hover .service-row-num{ color:var(--accent-vivid-light); font-size:1.3rem; }
.service-row-name{
  font-family:var(--font-display); font-size:clamp(1.15rem,2.4vw,1.8rem); font-weight:600;
  color:var(--text-secondary); transition:color .35s ease; position:relative; z-index:1;
  flex:none; width:clamp(190px,30%,360px);
}
.service-row:hover .service-row-name{ color:var(--text-primary); }
.service-row-desc{ font-size:0.9rem; color:var(--text-muted); flex:1; position:relative; z-index:1; }
.service-row-arrow{
  font-size:1.1rem; color:var(--text-muted); transform:translateX(-8px); opacity:0; flex:none;
  transition:all .35s cubic-bezier(.16,1,.3,1); position:relative; z-index:1;
}
.service-row:hover .service-row-arrow{ opacity:1; transform:translateX(0); color:var(--accent-vivid-light); }
@media(max-width:780px){
  .service-row{ flex-wrap:wrap; gap:6px 16px; padding:22px 6px; }
  .service-row:hover{ padding-left:6px; }
  .service-row-name{ width:auto; flex:1; }
  .service-row-desc{ width:100%; padding-left:44px; font-size:0.84rem; flex:none; }
  .service-row-arrow{ display:none; }
}

/* Portfolio — Selected Work, normal & tidy cards */
.case-study-list{ margin-top:56px; display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.case-study-card{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:32px; transition:all .3s ease; }
.case-study-card:hover{ border-color:var(--accent-vivid); transform:translateY(-4px); box-shadow:0 20px 50px -20px rgba(0,0,0,0.6); }
.case-study-top{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.case-study-avatar{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent-vivid),var(--accent-maroon));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:#fff;
  overflow:hidden;
}
.case-study-avatar.has-logo{ background:#fff; padding:6px; box-sizing:border-box; }
.case-study-avatar img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.case-study-tag{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent-vivid-light); display:block; margin-bottom:4px; }
.case-study-card h3{ font-family:var(--font-display); font-size:1.25rem; font-weight:700; margin:0; letter-spacing:-0.01em; }
.case-study-card p{ color:var(--text-secondary); font-size:0.92rem; line-height:1.7; margin:0 0 16px; }
.case-study-result{ display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-primary); background:var(--bg-elevated); border:1px solid var(--border-subtle); padding:7px 14px; border-radius:999px; margin-bottom:14px; }
.case-study-result i{ color:var(--accent-vivid-light); }
.case-study-link{ font-family:var(--font-display); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-primary); display:inline-flex; align-items:center; gap:8px; }
.case-study-link i{ transition:transform .3s ease; }
.case-study-link:hover{ color:var(--accent-vivid-light); }
.case-study-link:hover i{ transform:translateX(4px); }
.more-clients{ margin-top:48px; padding-top:32px; border-top:1px solid var(--border-subtle); display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.more-clients > span:first-child{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-right:8px; }
.more-client-chip{ font-size:0.85rem; color:var(--text-secondary); background:var(--bg-surface); border:1px solid var(--border-subtle); padding:7px 16px; border-radius:999px; }
@media(max-width:780px){ .case-study-list{ grid-template-columns:1fr; } }

/* Why Creatology — editorial pillars */
.why-list{ margin-top:48px; border-top:1px solid var(--border-subtle); }
.why-row{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:44px 12px; border-bottom:1px solid var(--border-subtle); }
.why-label{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-0.02em; margin:0; }
.why-desc{ color:var(--text-secondary); font-size:1rem; max-width:420px; margin:0; line-height:1.7; }
@media(max-width:700px){ .why-row{ grid-template-columns:1fr; gap:12px; padding:32px 6px; } }

/* Final CTA */
.cta-giant{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,7vw,5rem); line-height:1.05; letter-spacing:-0.02em; margin:20px 0 32px; color:#fff; }
.cta-giant .hl-vivid{ color:var(--accent-vivid-light); }

/* =====================================================================
   GALERI KARYA — 3D Coverflow showcase (homepage) + filter chips
   ===================================================================== */
.gallery-filter-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-bottom:36px; }
.gallery-filter-bar .chip{ background:none; font-family:var(--font-body); }

.gallery-showcase{ overflow:hidden; }
.cf-stage-wrap{ position:relative; width:100%; max-width:1100px; margin:0 auto; height:480px; }
.cf-stage{ position:relative; width:100%; height:440px; perspective:1400px; }

.cf-item{
  position:absolute !important; top:50%; left:50%; width:280px !important; height:400px !important;
  margin-top:-200px; margin-left:-140px; border-radius:var(--radius-lg);
  overflow:hidden !important; background:var(--bg-surface); border:1px solid var(--border-subtle);
  transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1), filter .7s ease;
  cursor:pointer;
}
.cf-item img{ position:absolute !important; top:0; right:0; bottom:0; left:0; width:100% !important; height:100% !important; max-width:none; object-fit:cover !important; }
.cf-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 35%, rgba(8,6,7,0.92) 100%); }

.cf-item.cf-center{ transform:translateX(0) scale(1) rotateY(0deg); opacity:1; z-index:30; filter:brightness(1); cursor:default; box-shadow:0 25px 60px rgba(0,0,0,.6), var(--glow-maroon); }
.cf-item.cf-near-r{ transform:translateX(230px) scale(.82) rotateY(-22deg); opacity:.6; z-index:20; filter:brightness(.6); }
.cf-item.cf-near-l{ transform:translateX(-230px) scale(.82) rotateY(22deg); opacity:.6; z-index:20; filter:brightness(.6); }
.cf-item.cf-far-r{ transform:translateX(410px) scale(.66) rotateY(-32deg); opacity:.3; z-index:10; filter:brightness(.4); }
.cf-item.cf-far-l{ transform:translateX(-410px) scale(.66) rotateY(32deg); opacity:.3; z-index:10; filter:brightness(.4); }
.cf-item.cf-hidden{ transform:translateX(0) scale(.3); opacity:0; z-index:0; pointer-events:none; }

.cf-item-overlay{ position:relative; z-index:1; width:100%; height:100%; padding:20px; display:flex; flex-direction:column; justify-content:space-between; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.cf-item.cf-center .cf-item-overlay{ opacity:1; transform:translateY(0); pointer-events:auto; }
.cf-item-tag{ align-self:flex-end; font-size:.76rem; font-weight:600; color:var(--accent-maroon-light); background:rgba(0,0,0,.45); padding:5px 12px; border-radius:999px; }
.cf-item-body{ text-align:center; }
.cf-item-body h3{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:#fff; margin:0 0 6px; text-shadow:0 3px 12px rgba(0,0,0,.8); }
.cf-item-body p{ font-size:.84rem; color:rgba(255,255,255,.85); margin:0 0 12px; line-height:1.4; }
.cf-item-cta{ display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:999px; background:linear-gradient(135deg,var(--accent-maroon),var(--accent-maroon-deep)); color:#fff; font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; box-shadow:var(--glow-maroon); }

.cf-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid var(--border-medium); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:40; transition:all .25s ease; }
.cf-arrow:hover{ background:var(--accent-maroon); border-color:transparent; }
.cf-arrow-prev{ left:6px; } .cf-arrow-next{ right:6px; }

.cf-dots{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; }
.cf-dots button{ height:8px; width:8px; border-radius:999px; background:rgba(255,255,255,.25); border:none; cursor:pointer; transition:all .3s ease; padding:0; }
.cf-dots button.active{ width:26px; background:var(--accent-maroon-light); box-shadow:0 0 10px var(--accent-maroon-glow); }

@media(max-width:860px){
  .cf-stage-wrap,.cf-stage{ height:400px; }
  .cf-item{ width:230px !important; height:340px !important; margin-top:-170px; margin-left:-115px; }
  .cf-item.cf-near-r{ transform:translateX(150px) scale(.78) rotateY(-20deg); }
  .cf-item.cf-near-l{ transform:translateX(-150px) scale(.78) rotateY(20deg); }
  .cf-item.cf-far-r,.cf-item.cf-far-l{ opacity:0; pointer-events:none; }
  .cf-arrow{ width:38px; height:38px; }
}
@media(max-width:560px){
  .cf-stage-wrap,.cf-stage{ height:360px; }
  .cf-item{ width:190px !important; height:300px !important; margin-top:-150px; margin-left:-95px; }
  .cf-item.cf-near-r{ transform:translateX(105px) scale(.7) rotateY(-18deg); }
  .cf-item.cf-near-l{ transform:translateX(-105px) scale(.7) rotateY(18deg); }
  .cf-item-body h3{ font-size:1.1rem; }
}

/* =====================================================================
   HERO-V2 — Creative Agency style (sesuai referensi foto)
   Full-bleed dark-red hero dengan background image, diagonal streaks,
   headline besar, dan stats bar di bagian bawah.
   ===================================================================== */
.hero-v2{
  position:relative; overflow:hidden; min-height:100vh;
  display:flex; align-items:center; padding:120px 0 60px;
  background:#1a0308;
}
.hero-v2-bg{ position:absolute; inset:0; z-index:0; }
.hero-v2-img{
  position:absolute; top:0; right:0; bottom:0; width:62%; height:100%;
  object-fit:cover; object-position:center top; opacity:.95;
}
.hero-v2-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(26,3,8,0.97) 0%, rgba(60,6,16,0.85) 32%, rgba(122,16,36,0.35) 58%, rgba(122,16,36,0.05) 78%, transparent 100%),
    linear-gradient(180deg, rgba(26,3,8,0.55) 0%, transparent 30%, transparent 60%, rgba(26,3,8,0.85) 100%);
}
.hero-v2-streaks{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-v2-streaks span{
  position:absolute; top:-20%; height:160%; width:140px;
  background:linear-gradient(90deg, transparent, rgba(255,120,120,0.10), transparent);
  transform:rotate(18deg); filter:blur(6px);
}
.hero-v2-streaks span:nth-child(1){ left:18%; width:90px; animation:streakDrift 9s ease-in-out infinite alternate; }
.hero-v2-streaks span:nth-child(2){ left:38%; width:160px; opacity:.7; animation:streakDrift 12s ease-in-out infinite alternate-reverse; }
.hero-v2-streaks span:nth-child(3){ left:60%; width:70px; opacity:.5; animation:streakDrift 7s ease-in-out infinite alternate; }
.hero-v2-streaks span:nth-child(4){ left:78%; width:120px; opacity:.6; animation:streakDrift 10s ease-in-out infinite alternate-reverse; }
@keyframes streakDrift{ from{ transform:rotate(18deg) translateX(-20px);} to{ transform:rotate(18deg) translateX(30px);} }
.hero-v2-vignette{
  position:absolute; inset:0;
  box-shadow:inset 0 0 220px 60px rgba(10,1,3,0.75);
  pointer-events:none;
}
.hero-v2-inner{ position:relative; z-index:2; display:flex; flex-direction:column; width:100%; }
.hero-v2-top{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  flex-wrap:wrap; margin-bottom:28px;
}
.hero-v2-desc{
  max-width:340px; margin:0; color:rgba(255,255,255,0.78);
  font-size:0.92rem; line-height:1.65;
}
.hero-v2-cta{ display:flex; align-items:center; gap:14px; }
.btn-hero-pill{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#D1262B,#A01830); color:#fff;
  padding:12px 26px; border-radius:999px; font-size:0.82rem; font-weight:600;
  letter-spacing:0.02em; box-shadow:0 6px 24px rgba(209,38,43,0.45);
  transition:all .3s ease; border:1px solid rgba(255,255,255,0.15);
}
.btn-hero-pill:hover{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(209,38,43,0.6); color:#fff; }
.btn-hero-pill i{ font-size:0.7rem; }
.btn-hero-play{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:rgba(255,255,255,0.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.25); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .3s ease; font-size:0.8rem;
}
.btn-hero-play:hover{ background:#D1262B; border-color:#D1262B; transform:scale(1.08); color:#fff; }
.btn-hero-play i{ margin-left:2px; }
.hero-v2-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:999px; font-size:0.75rem; font-weight:500;
  color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(8px);
  transition:all .3s ease;
}
.hero-tag i{ color:#ff6b6b; font-size:0.7rem; }
.hero-tag:hover{ background:rgba(209,38,43,0.25); border-color:rgba(209,38,43,0.5); }
.hero-v2-title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(3.2rem,10.5vw,8.5rem); line-height:0.92; margin:0 0 40px;
  color:#fff; text-transform:uppercase;
  text-shadow:0 4px 40px rgba(0,0,0,0.5);
}
.hero-v2-stats{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:0;
  background:rgba(255,255,255,0.06); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.14); border-radius:18px;
  padding:22px 28px; margin-top:auto; max-width:860px;
}
.hstat{ display:flex; align-items:center; gap:14px; padding:0 20px; }
.hstat:first-child{ padding-left:0; }
.hstat + .hstat{ border-left:1px solid rgba(255,255,255,0.14); }
.hstat-avatar{ width:56px; height:56px; border-radius:14px; overflow:hidden; flex:none; border:2px solid rgba(255,255,255,0.2); }
.hstat-avatar img{ width:100%; height:100%; object-fit:cover; }
.hstat-text{ display:flex; flex-direction:column; gap:2px; }
.hstat-label{ font-size:0.7rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.08em; }
.hstat-value{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:#fff; line-height:1; }
.hstat-value small{ font-size:0.7rem; font-weight:400; color:rgba(255,255,255,0.65); display:block; margin-top:2px; }
.hstat-rating{ flex-direction:column; align-items:flex-start; gap:6px; }
.hstat-stars{ color:#FBBF24; font-size:0.75rem; letter-spacing:2px; }
.hstat-value-big{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:#fff; line-height:1; }
.hstat-of{ font-size:0.9rem; color:rgba(255,255,255,0.5); font-weight:400; }
.hstat-faces{ display:flex; margin-top:2px; }
.hstat-faces span{
  width:22px; height:22px; border-radius:50%; border:2px solid rgba(26,3,8,0.9);
  margin-left:-6px; background:linear-gradient(135deg,#A01830,#4A0715);
}
.hstat-faces span:first-child{ margin-left:0; }
.hstat-faces span:nth-child(2){ background:linear-gradient(135deg,#D1262B,#7A1024); }
.hstat-faces span:nth-child(3){ background:linear-gradient(135deg,#ff6b6b,#A01830); }
.hstat-faces span:nth-child(4){ background:linear-gradient(135deg,#4A0715,#26040B); }
.hstat-faces span:nth-child(5){ background:linear-gradient(135deg,#F0464B,#D1262B); }
.hstat-world{ flex-direction:column; align-items:flex-start; gap:4px; }
.hstat-world .hstat-label{ line-height:1.4; text-transform:none; letter-spacing:0; font-size:0.75rem; }
.hero-v2-scroll{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,0.35);
  border-radius:14px; z-index:3; display:flex; justify-content:center; padding-top:7px;
}
.hero-v2-scroll span{
  width:4px; height:8px; border-radius:2px; background:rgba(255,255,255,0.7);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{transform:translateY(0);opacity:1;} 70%{transform:translateY(12px);opacity:0;} 100%{transform:translateY(0);opacity:0;} }
.cta-banner{
  background:linear-gradient(135deg,#7A1024,#4A0715);
  border:1px solid rgba(255,255,255,0.1); border-radius:24px;
  padding:48px 56px; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap; position:relative; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(122,16,36,0.5);
}
.cta-banner::before{
  content:''; position:absolute; top:-50%; right:-10%; width:400px; height:400px;
  background:radial-gradient(circle, rgba(255,100,100,0.25), transparent 70%);
  border-radius:50%; pointer-events:none;
}
.section-lead p{ color:var(--text-secondary); max-width:560px; margin:16px auto 0; }
[data-theme="light"] .hero-v2{ background:#2a050b; }
[data-theme="light"] .hero-v2-desc{ color:rgba(255,255,255,0.85); }
@media(max-width:960px){
  .hero-v2{ padding:85px 0 50px; min-height:auto; }
  .hero-v2-img{ width:100%; opacity:.5; object-position:center; }
  .hero-v2-overlay{ background:linear-gradient(180deg, rgba(26,3,8,0.85) 0%, rgba(60,6,16,0.75) 50%, rgba(26,3,8,0.92) 100%); }
  .hero-v2-top{ flex-direction:column; align-items:flex-start; gap:18px; }
  .hero-v2-stats{ grid-template-columns:1fr; gap:18px; padding:24px; }
  .hstat{ padding:0; }
  .hstat + .hstat{ border-left:none; border-top:1px solid rgba(255,255,255,0.14); padding-top:16px; }
  .hstat-rating, .hstat-world{ flex-direction:row; align-items:center; gap:16px; }
  .hero-v2-scroll{ display:none; }
  .cta-banner{ padding:36px 28px; }
}
@media(max-width:480px){
  .hero-v2-title{ font-size:clamp(2.6rem,14vw,4rem); }
  .hero-tag{ padding:6px 14px; font-size:0.7rem; }
  .hero-v2-stats{ padding:20px; }
}

/* =====================================================================
   MOBILE POLISH — everything below only fires at ≤860px, so desktop
   (anything above these breakpoints) renders exactly as before. Goal:
   tighten the oversized desktop-scaled spacing that makes pages feel
   cluttered/disjointed on small screens, and fix a couple of layouts
   that had no small-screen fallback at all.
   ===================================================================== */
@media(max-width:768px){
  /* Desktop sections use 120px top/bottom padding — on a short phone
     viewport that reads as a huge, disconnected gap between sections.
     Tightening it here makes the page feel like one continuous flow
     instead of a stack of oversized blocks. */
  .section{ padding:64px 0; }
  .page-header{ padding:110px 0 48px; }
  .footer{ padding:56px 0 28px; }
  .footer-grid{ margin-bottom:36px; }
}
@media(max-width:640px){
  /* 32px of side padding eats a big chunk of a 360-400px phone screen —
     20px gives text/cards more room without touching tablet/desktop. */
  .container{ padding:0 20px; }
  .section-divider{ margin:0 20px; }
  .section-lead{ max-width:none; }
  /* Gear icon + avatar + hamburger all sit in one row on mobile —
     a little tighter so they don't crowd the logo on narrow phones. */
  .nav-actions{ gap:8px; }
  .icon-btn{ width:38px; height:38px; }
  .user-menu-btn img{ width:34px; height:34px; }
  /* Toast was a fixed 300px anchored to the right edge — on phones
     narrower than ~330px that runs off-screen; this makes it a full-width
     bar with even side margins instead. */
  .toast-wrap{ left:16px; right:16px; top:88px; }
  .toast{ min-width:0; width:100%; }
}
@media(max-width:860px){
  /* Marketplace's sidebar+listing layout was a hard-coded 260px/1fr grid
     with no small-screen fallback, so the filter sidebar and the listing
     squeezed into the same row on phones. Stack it instead. */
  .marketplace-layout{ grid-template-columns:1fr; }
}