/* ============================================================
   ID SIGN — COMPLETE THEME ENGINE (7 themes, every detail)
   Loaded AFTER style.css → overrides & extends variables.
   Themes: ios-spacegrey, ios-glass, ios-dark-glass, spotify,
           dola, dark-navy, windows11
   ============================================================ */

/* ---------- Extended design tokens (used by all themes) ---------- */
:root{
  --font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --header-bg:var(--surface);
  --header-blur:0px;
  --header-border:1px solid var(--border);
  --card-bg:var(--surface);
  --card-border:1px solid var(--border);
  --icon-color:var(--accent);
  --icon-bg:color-mix(in srgb, var(--accent) 12%, transparent);
  --input-bg:var(--surface-2);
  --btn-primary-bg:var(--accent);
  --btn-primary-fg:#fff;
  --scrollbar-thumb:var(--border);
  --scrollbar-track:transparent;
  --selection-bg:color-mix(in srgb, var(--accent) 28%, transparent);
  --selection-fg:var(--fg);
  --hero-gradient:none;
  --body-overlay:none;
  --tab-active-bg:var(--accent);
  --tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.35);
  --link-color:var(--accent);
  --chip-bg:var(--surface-2);
  --chip-fg:var(--muted);
}

/* Global refinements that follow tokens */
html{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);}
body{font-family:var(--font-body);background:var(--bg);color:var(--fg);transition:background .45s ease,color .45s ease;}
::selection{background:var(--selection-bg);color:var(--selection-fg);}
a{color:var(--link-color);}
.service-icon,.tl-icon,.ci-ico{color:var(--icon-color);background:var(--icon-bg);}
input,textarea,select{background:var(--input-bg);color:var(--fg);border:1px solid var(--border);border-radius:var(--r-sm);}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ring);outline-offset:1px;border-color:transparent;}
.btn-primary,.dc-send,.btn-edit{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-radius:var(--cta-radius);}
.tab-btn.active{background:var(--tab-active-bg);color:var(--tab-active-fg);border-color:var(--tab-active-bg);}
.wa-float{box-shadow:0 4px 14px var(--wa-glow);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--scrollbar-track);}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:999px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* ============================================================
   1. iOS SPACE GREY  (Apple light, refined)
   ============================================================ */
[data-theme="ios-spacegrey"]{
  --bg:#f5f5f7;--fg:#1d1d1f;--muted:#6e6e73;
  --surface:#ffffff;--surface-2:#e8e8ed;
  --primary:#1d1d1f;--on-primary:#f5f5f7;
  --border:#d2d2d7;--accent:#0071e3;--ring:#0071e3;
  --r-sm:.75rem;--r-md:1rem;--r-lg:1.5rem;--r-xl:2rem;
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --hero-weight:700;--cta-radius:9999px;
  --font-body:'Plus Jakarta Sans','SF Pro Display','Inter',system-ui,sans-serif;
  --header-bg:rgba(245,245,247,.72);--header-blur:24px;
  --icon-color:#0071e3;--icon-bg:rgba(0,113,227,.1);
  --scrollbar-thumb:#c7c7cc;--selection-bg:rgba(0,113,227,.25);
  --tab-active-bg:#1d1d1f;--tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.35);
}
[data-theme="ios-spacegrey"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--header-blur)) saturate(180%);border-bottom:1px solid rgba(0,0,0,.06);}
[data-theme="ios-spacegrey"] .service-card,[data-theme="ios-spacegrey"] .value-card,[data-theme="ios-spacegrey"] .tl-card,[data-theme="ios-spacegrey"] .gallery-card,[data-theme="ios-spacegrey"] .client-logo,[data-theme="ios-spacegrey"] .dropcard,[data-theme="ios-spacegrey"] .contact-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);}
[data-theme="ios-spacegrey"] .section-bordered,[data-theme="ios-spacegrey"] .section-bordered-top{background:var(--surface-2);border-color:var(--border);}
[data-theme="ios-spacegrey"] .footer{background:#1d1d1f;color:#f5f5f7;border-top:none;}
[data-theme="ios-spacegrey"] .footer .footer-bottom{color:#a1a1a6;}

/* ============================================================
   2. iOS GLASS  (light frosted glass + color blobs)
   ============================================================ */
[data-theme="ios-glass"]{
  --bg:#eef3fb;--fg:#1c1c1e;--muted:#6b7280;
  --surface:rgba(255,255,255,.5);--surface-2:rgba(255,255,255,.3);
  --primary:#5E93F0;--on-primary:#ffffff;
  --border:rgba(255,255,255,.65);--accent:#5E93F0;--ring:#5E93F0;
  --r-sm:.875rem;--r-md:1.25rem;--r-lg:1.75rem;--r-xl:2.25rem;
  --shadow-card:0 8px 32px rgba(94,147,240,.14),0 2px 8px rgba(0,0,0,.04);
  --hero-weight:700;--cta-radius:9999px;
  --header-bg:rgba(255,255,255,.4);--header-blur:34px;
  --icon-color:#5E93F0;--icon-bg:rgba(94,147,240,.14);
  --input-bg:rgba(255,255,255,.45);
  --scrollbar-thumb:rgba(94,147,240,.3);--selection-bg:rgba(94,147,240,.2);
  --tab-active-bg:#5E93F0;--tab-active-fg:#fff;
}
[data-theme="ios-glass"] body, body[data-theme="ios-glass"]{position:relative;}
body[data-theme="ios-glass"]::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%,rgba(94,147,240,.16),transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 20%,rgba(175,82,222,.13),transparent 60%),
    radial-gradient(ellipse 55% 50% at 50% 95%,rgba(255,159,10,.12),transparent 60%),
    linear-gradient(180deg,#eef3fb,#e8eef8);
}
[data-theme="ios-glass"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--header-blur)) saturate(180%);border-bottom:1px solid rgba(255,255,255,.55);}
[data-theme="ios-glass"] .service-card,[data-theme="ios-glass"] .value-card,[data-theme="ios-glass"] .tl-card,[data-theme="ios-glass"] .gallery-card,[data-theme="ios-glass"] .client-logo,[data-theme="ios-glass"] .dropcard,[data-theme="ios-glass"] .contact-info,[data-theme="ios-glass"] .modal,[data-theme="ios-glass"] .admin-panel,[data-theme="ios-glass"] .edit-panel-body{background:rgba(255,255,255,.45);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.6);}
[data-theme="ios-glass"] .section-bordered,[data-theme="ios-glass"] .section-bordered-top{background:rgba(255,255,255,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.4);}
[data-theme="ios-glass"] .footer{background:rgba(255,255,255,.35);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid rgba(255,255,255,.45);}

/* ============================================================
   3. iOS DARK GLASS
   ============================================================ */
[data-theme="ios-dark-glass"]{
  --bg:#000000;--fg:#f2f2f7;--muted:#98989d;
  --surface:rgba(28,28,30,.7);--surface-2:rgba(58,58,60,.6);
  --primary:#ffffff;--on-primary:#000;
  --border:rgba(84,84,88,.6);--accent:#0a84ff;--ring:#0a84ff;
  --r-sm:.875rem;--r-md:1.25rem;--r-lg:1.75rem;--r-xl:2.25rem;
  --shadow-card:0 8px 32px rgba(0,0,0,.5);
  --hero-weight:700;--cta-radius:9999px;
  --header-bg:rgba(0,0,0,.55);--header-blur:30px;
  --icon-color:#0a84ff;--icon-bg:rgba(10,132,255,.15);
  --input-bg:rgba(58,58,60,.6);
  --scrollbar-thumb:rgba(84,84,88,.8);--selection-bg:rgba(10,132,255,.3);
  --tab-active-bg:#0a84ff;--tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.4);
}
body[data-theme="ios-dark-glass"]::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 12%,rgba(10,132,255,.22),transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 85%,rgba(191,90,242,.18),transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 10%,rgba(255,159,10,.1),transparent 60%);
}
[data-theme="ios-dark-glass"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--header-blur)) saturate(180%);border-bottom:1px solid rgba(84,84,88,.5);}
[data-theme="ios-dark-glass"] .service-card,[data-theme="ios-dark-glass"] .value-card,[data-theme="ios-dark-glass"] .tl-card,[data-theme="ios-dark-glass"] .gallery-card,[data-theme="ios-dark-glass"] .client-logo,[data-theme="ios-dark-glass"] .dropcard,[data-theme="ios-dark-glass"] .contact-info,[data-theme="ios-dark-glass"] .modal,[data-theme="ios-dark-glass"] .admin-panel,[data-theme="ios-dark-glass"] .edit-panel-body{background:rgba(28,28,30,.65);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(84,84,88,.5);}
[data-theme="ios-dark-glass"] .section-bordered,[data-theme="ios-dark-glass"] .section-bordered-top{background:rgba(28,28,30,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(84,84,88,.4);}
[data-theme="ios-dark-glass"] .footer{background:rgba(0,0,0,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(84,84,88,.5);}
[data-theme="ios-dark-glass"] .gallery-card img{filter:brightness(.92);}

/* ============================================================
   4. SPOTIFY
   ============================================================ */
[data-theme="spotify"]{
  --bg:#121212;--fg:#ffffff;--muted:#b3b3b3;
  --surface:#181818;--surface-2:#282828;
  --primary:#1db954;--on-primary:#000;
  --border:#282828;--accent:#1db954;--ring:#1db954;
  --r-sm:.5rem;--r-md:.75rem;--r-lg:1rem;--r-xl:1.25rem;
  --shadow-card:0 8px 24px rgba(0,0,0,.5);
  --hero-weight:800;--cta-radius:9999px;
  --font-body:'Poppins','Plus Jakarta Sans',system-ui,sans-serif;
  --header-bg:rgba(18,18,18,.85);--header-blur:20px;
  --icon-color:#1db954;--icon-bg:rgba(29,185,84,.14);
  --input-bg:#282828;
  --scrollbar-thumb:#4d4d4d;--selection-bg:rgba(29,185,84,.3);
  --tab-active-bg:#1db954;--tab-active-fg:#000;
  --btn-primary-bg:#1db954;--btn-primary-fg:#000;
  --wa-glow:rgba(29,185,84,.4);
}
[data-theme="spotify"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #282828;}
[data-theme="spotify"] .service-card,[data-theme="spotify"] .value-card,[data-theme="spotify"] .tl-card,[data-theme="spotify"] .gallery-card,[data-theme="spotify"] .client-logo,[data-theme="spotify"] .dropcard,[data-theme="spotify"] .contact-info{background:#181818;border:1px solid #282828;border-radius:var(--r-lg);transition:background .25s ease,transform .25s ease;}
[data-theme="spotify"] .service-card:hover,[data-theme="spotify"] .gallery-card:hover{background:#282828;transform:translateY(-4px);}
[data-theme="spotify"] .section-bordered,[data-theme="spotify"] .section-bordered-top{background:#181818;border-color:#282828;}
[data-theme="spotify"] .footer{background:#000;border-top:1px solid #282828;}
[data-theme="spotify"] .btn-primary,[data-theme="spotify"] .dc-send,[data-theme="spotify"] .btn-edit{font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:.8rem;}
[data-theme="spotify"] h1,[data-theme="spotify"] h2,[data-theme="spotify"] h3{letter-spacing:-.02em;}

/* ============================================================
   5. DOLA  (warm cream + terracotta)
   ============================================================ */
[data-theme="dola"]{
  --bg:#faf7f2;--fg:#2b2b2b;--muted:#7a7268;
  --surface:#ffffff;--surface-2:#f0ebe2;
  --primary:#2b2b2b;--on-primary:#faf7f2;
  --border:#e5ddd0;--accent:#e8633c;--ring:#e8633c;
  --r-sm:.6rem;--r-md:.9rem;--r-lg:1.2rem;--r-xl:1.6rem;
  --shadow-card:0 4px 18px rgba(120,90,60,.1);
  --hero-weight:650;--cta-radius:.75rem;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --header-bg:rgba(250,247,242,.85);--header-blur:18px;
  --icon-color:#e8633c;--icon-bg:rgba(232,99,60,.1);
  --input-bg:#fff;
  --scrollbar-thumb:#d8cdbd;--selection-bg:rgba(232,99,60,.22);
  --tab-active-bg:#2b2b2b;--tab-active-fg:#faf7f2;
  --wa-glow:rgba(37,211,102,.3);
}
[data-theme="dola"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid var(--border);}
[data-theme="dola"] .service-card,[data-theme="dola"] .value-card,[data-theme="dola"] .tl-card,[data-theme="dola"] .gallery-card,[data-theme="dola"] .client-logo,[data-theme="dola"] .dropcard,[data-theme="dola"] .contact-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);}
[data-theme="dola"] .section-bordered,[data-theme="dola"] .section-bordered-top{background:var(--surface-2);border-color:var(--border);}
[data-theme="dola"] .footer{background:#2b2b2b;color:#f0ebe2;border-top:none;}
[data-theme="dola"] .footer .footer-bottom{color:#a89f92;}

/* ============================================================
   6. DARK NAVY  (deep elegant navy + cyan accent)
   ============================================================ */
[data-theme="dark-navy"]{
  --bg:#0a1628;--fg:#e6edf5;--muted:#8aa0b8;
  --surface:#11203a;--surface-2:#1a2d4d;
  --primary:#e6edf5;--on-primary:#0a1628;
  --border:#1e3355;--accent:#38bdf8;--ring:#38bdf8;
  --r-sm:.5rem;--r-md:.75rem;--r-lg:1rem;--r-xl:1.5rem;
  --shadow-card:0 8px 30px rgba(0,0,0,.45);
  --hero-weight:700;--cta-radius:.5rem;
  --font-body:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  --header-bg:rgba(10,22,40,.8);--header-blur:20px;
  --icon-color:#38bdf8;--icon-bg:rgba(56,189,248,.12);
  --input-bg:#1a2d4d;
  --scrollbar-thumb:#1e3355;--selection-bg:rgba(56,189,248,.25);
  --tab-active-bg:#38bdf8;--tab-active-fg:#0a1628;
  --wa-glow:rgba(37,211,102,.35);
}
body[data-theme="dark-navy"]::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%,rgba(56,189,248,.12),transparent 60%),
    radial-gradient(ellipse 50% 45% at 10% 100%,rgba(99,102,241,.12),transparent 60%);
}
[data-theme="dark-navy"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #1e3355;}
[data-theme="dark-navy"] .service-card,[data-theme="dark-navy"] .value-card,[data-theme="dark-navy"] .tl-card,[data-theme="dark-navy"] .gallery-card,[data-theme="dark-navy"] .client-logo,[data-theme="dark-navy"] .dropcard,[data-theme="dark-navy"] .contact-info{background:linear-gradient(160deg,#132442,#0f1d36);border:1px solid #1e3355;border-radius:var(--r-lg);}
[data-theme="dark-navy"] .section-bordered,[data-theme="dark-navy"] .section-bordered-top{background:rgba(17,32,58,.6);border-color:#1e3355;}
[data-theme="dark-navy"] .footer{background:#060d1a;border-top:1px solid #1e3355;}
[data-theme="dark-navy"] .gallery-card img{filter:saturate(.9) brightness(.95);}

/* ============================================================
   7. WINDOWS 11  (Mica / Acrylic, Segoe, rounded 8px)
   ============================================================ */
[data-theme="windows11"]{
  --bg:#f3f3f3;--fg:#1a1a1a;--muted:#5c5c5c;
  --surface:rgba(255,255,255,.8);--surface-2:#e9e9e9;
  --primary:#0078d4;--on-primary:#ffffff;
  --border:#d1d1d1;--accent:#0078d4;--ring:#0078d4;
  --r-sm:.5rem;--r-md:.5rem;--r-lg:.5rem;--r-xl:.75rem;
  --shadow-card:0 2px 6px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
  --hero-weight:600;--cta-radius:.4rem;
  --font-family:'Segoe UI Variable','Segoe UI','Inter',system-ui,sans-serif;
  --font-body:'Segoe UI Variable','Segoe UI','Inter',system-ui,sans-serif;
  --header-bg:rgba(243,243,243,.75);--header-blur:30px;
  --icon-color:#0078d4;--icon-bg:rgba(0,120,212,.08);
  --input-bg:#fff;
  --scrollbar-thumb:#c1c1c1;--selection-bg:rgba(0,120,212,.2);
  --tab-active-bg:#0078d4;--tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="windows11"]{background:linear-gradient(135deg,#e8eef7 0%,#f3f3f3 40%,#eef2f9 100%);background-attachment:fixed;}
[data-theme="windows11"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--header-blur)) saturate(150%);border-bottom:1px solid rgba(0,0,0,.08);}
[data-theme="windows11"] .service-card,[data-theme="windows11"] .value-card,[data-theme="windows11"] .tl-card,[data-theme="windows11"] .gallery-card,[data-theme="windows11"] .client-logo,[data-theme="windows11"] .dropcard,[data-theme="windows11"] .contact-info{background:rgba(255,255,255,.75);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.05);border-radius:var(--r-lg);}
[data-theme="windows11"] .section-bordered,[data-theme="windows11"] .section-bordered-top{background:rgba(255,255,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:#d1d1d1;}
[data-theme="windows11"] .footer{background:rgba(243,243,243,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid #d1d1d1;color:#1a1a1a;}
[data-theme="windows11"] .btn-primary,[data-theme="windows11"] .dc-send,[data-theme="windows11"] .btn-edit{font-weight:600;}
[data-theme="windows11"] .btn-primary:hover,[data-theme="windows11"] .dc-send:hover{background:#106ebe;}

/* ---------- CHROME LOGO BUG FIX (critical) ----------
   .stagger > * sets opacity:0 + rise animation.
   body.hero-anim-on .hero-logo overrides animation with v8-float
   (transform only), leaving opacity stuck at 0 → invisible.
   Fix: force opacity:1 and combine both animations. */
.stagger > .hero-logo{opacity:1 !important;}
.hero-logo{display:block;}
body.hero-anim-on .hero-logo{
  animation:rise 520ms cubic-bezier(.2,0,0,1) 40ms forwards, v8-float 3.5s ease-in-out 650ms infinite !important;
}
/* Ensure hero-logo has intrinsic size so Chrome never collapses it */
.hero-logo{width:100%;max-width:280px;aspect-ratio:1379/908;object-fit:contain;}
@media(min-width:768px){.hero-logo{max-width:360px;}}

/* ---------- THEME SWITCHER (header, visible to all) ---------- */
.theme-picker{position:relative;display:inline-flex;align-items:center;}
.theme-picker-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .7rem;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--fg);
  font-size:.78rem;font-weight:600;transition:transform .15s ease,box-shadow .2s ease;
}
.theme-picker-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1);}
.theme-picker-btn .tp-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#fff));box-shadow:inset 0 0 0 2px var(--surface);}
.theme-picker-menu{
  position:absolute;top:calc(100% + .6rem);right:0;z-index:200;
  min-width:240px;padding:.5rem;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.theme-picker.open .theme-picker-menu{opacity:1;transform:none;pointer-events:auto;}
.tp-item{
  display:flex;align-items:center;gap:.65rem;width:100%;
  padding:.55rem .6rem;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;border:none;color:var(--fg);font-size:.82rem;font-weight:500;
  text-align:left;transition:background .15s ease;
}
.tp-item:hover{background:var(--surface-2);}
.tp-item.active{background:var(--icon-bg);color:var(--accent);font-weight:700;}
.tp-swatch{width:26px;height:26px;border-radius:8px;flex-shrink:0;border:1px solid var(--border);position:relative;overflow:hidden;}
.tp-swatch::after{content:'';position:absolute;right:0;bottom:0;width:55%;height:55%;background:var(--sw-accent,#0071e3);border-radius:8px 0 0 0;}
.tp-check{margin-left:auto;color:var(--accent);font-weight:700;}
.tp-divider{height:1px;background:var(--border);margin:.4rem .2rem;}
.tp-label{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:.3rem .6rem .1rem;}

/* theme swatch colors */
.tp-swatch.s-ios-spacegrey{background:#f5f5f7;--sw-accent:#0071e3;}
.tp-swatch.s-ios-glass{background:linear-gradient(135deg,#dbe7ff,#fff);--sw-accent:#007AFF;}
.tp-swatch.s-ios-dark-glass{background:#1c1c1e;--sw-accent:#0a84ff;}
.tp-swatch.s-spotify{background:#121212;--sw-accent:#1db954;}
.tp-swatch.s-dola{background:#faf7f2;--sw-accent:#e8633c;}
.tp-swatch.s-dark-navy{background:#0a1628;--sw-accent:#38bdf8;}
.tp-swatch.s-windows11{background:#f3f3f3;--sw-accent:#0078d4;}

/* mobile theme picker full-width */
.mobile-theme-picker{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0;}
.mobile-theme-picker .tp-item{flex:1 1 calc(50% - .4rem);justify-content:center;}

/* reduce motion respect */
@media (prefers-reduced-motion:reduce){
  .stagger > *{animation:none;opacity:1;transform:none;}
  body.hero-anim-on .hero-logo{animation:none !important;}
}

/* ============================================================
   v30 — POLISH: iOS Glass (more glassy) + 3 NEW THEMES
   ============================================================ */

/* ---------- iOS GLASS — enhanced glassmorphism ---------- */
body[data-theme="ios-glass"]::before{
  background:
    radial-gradient(ellipse 55% 45% at 12% 8%, rgba(0,122,255,.28),transparent 55%),
    radial-gradient(ellipse 45% 40% at 88% 12%, rgba(175,82,222,.24),transparent 55%),
    radial-gradient(ellipse 50% 45% at 78% 88%, rgba(255,159,10,.2),transparent 55%),
    radial-gradient(ellipse 45% 40% at 15% 90%, rgba(52,199,89,.18),transparent 55%),
    linear-gradient(160deg,#e8f0ff 0%,#f5f0ff 45%,#fff5e8 100%);
  background-attachment:fixed;
}
[data-theme="ios-glass"] .header{background:rgba(255,255,255,.45);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 1px 12px rgba(0,0,0,.04);}
[data-theme="ios-glass"] .service-card,[data-theme="ios-glass"] .value-card,[data-theme="ios-glass"] .tl-card,[data-theme="ios-glass"] .gallery-card,[data-theme="ios-glass"] .client-logo,[data-theme="ios-glass"] .dropcard,[data-theme="ios-glass"] .contact-info,[data-theme="ios-glass"] .modal,[data-theme="ios-glass"] .admin-panel,[data-theme="ios-glass"] .edit-panel-body{
  background:rgba(255,255,255,.55);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 32px rgba(31,38,135,.1),inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="ios-glass"] .section-bordered,[data-theme="ios-glass"] .section-bordered-top{background:rgba(255,255,255,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.5);}
[data-theme="ios-glass"] .footer{background:rgba(255,255,255,.4);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-top:1px solid rgba(255,255,255,.55);}
[data-theme="ios-glass"] .tab-btn{background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
[data-theme="ios-glass"] .theme-picker-menu{background:rgba(255,255,255,.6);backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.7);}

/* ============================================================
   NEW 1: METAL GUN  (brushed gunmetal, dark industrial)
   ============================================================ */
[data-theme="metal-gun"]{
  --bg:#1a1d21;--fg:#e4e7eb;--muted:#8a929c;
  --surface:#25292e;--surface-2:#2f343a;
  --primary:#e4e7eb;--on-primary:#1a1d21;
  --border:#3a3f46;--accent:#f0a13c;--ring:#f0a13c;
  --r-sm:.4rem;--r-md:.6rem;--r-lg:.9rem;--r-xl:1.2rem;
  --shadow-card:0 4px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  --hero-weight:700;--cta-radius:.4rem;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --header-bg:rgba(26,29,33,.85);--header-blur:18px;
  --icon-color:#f0a13c;--icon-bg:rgba(240,161,60,.12);
  --input-bg:#2f343a;
  --scrollbar-thumb:#3a3f46;--selection-bg:rgba(240,161,60,.28);
  --tab-active-bg:#f0a13c;--tab-active-fg:#1a1d21;
  --btn-primary-bg:#f0a13c;--btn-primary-fg:#1a1d21;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="metal-gun"]{background:linear-gradient(160deg,#1a1d21 0%,#23272c 50%,#1a1d21 100%);background-attachment:fixed;}
[data-theme="metal-gun"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #3a3f46;}
[data-theme="metal-gun"] .service-card,[data-theme="metal-gun"] .value-card,[data-theme="metal-gun"] .tl-card,[data-theme="metal-gun"] .gallery-card,[data-theme="metal-gun"] .client-logo,[data-theme="metal-gun"] .dropcard,[data-theme="metal-gun"] .contact-info{background:linear-gradient(160deg,#2a2e34,#22262b);border:1px solid #3a3f46;border-radius:var(--r-lg);box-shadow:var(--shadow-card);}
[data-theme="metal-gun"] .section-bordered,[data-theme="metal-gun"] .section-bordered-top{background:rgba(47,52,58,.5);border-color:#3a3f46;}
[data-theme="metal-gun"] .footer{background:#14161a;border-top:1px solid #3a3f46;}
[data-theme="metal-gun"] .service-icon{background:linear-gradient(135deg,rgba(240,161,60,.2),rgba(240,161,60,.05));}
[data-theme="metal-gun"] .gallery-card img{filter:contrast(1.05) saturate(.9);}

/* ============================================================
   NEW 2: TEAL  (fresh tosca, clean light)
   ============================================================ */
[data-theme="teal"]{
  --bg:#f0fdfa;--fg:#134e4a;--muted:#5b8a85;
  --surface:#ffffff;--surface-2:#ccfbf1;
  --primary:#0f766e;--on-primary:#ffffff;
  --border:#99f6e4;--accent:#0d9488;--ring:#0d9488;
  --r-sm:.7rem;--r-md:1rem;--r-lg:1.4rem;--r-xl:1.8rem;
  --shadow-card:0 4px 20px rgba(13,148,136,.1);
  --hero-weight:700;--cta-radius:9999px;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --header-bg:rgba(255,255,255,.75);--header-blur:20px;
  --icon-color:#0d9488;--icon-bg:rgba(13,148,136,.1);
  --input-bg:#fff;
  --scrollbar-thumb:#99f6e4;--selection-bg:rgba(13,148,136,.2);
  --tab-active-bg:#0d9488;--tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="teal"]{background:linear-gradient(180deg,#f0fdfa,#e6fffa 40%,#f0fdfa);background-attachment:fixed;}
[data-theme="teal"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #99f6e4;}
[data-theme="teal"] .service-card,[data-theme="teal"] .value-card,[data-theme="teal"] .tl-card,[data-theme="teal"] .gallery-card,[data-theme="teal"] .client-logo,[data-theme="teal"] .dropcard,[data-theme="teal"] .contact-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:transform .2s ease,box-shadow .2s ease;}
[data-theme="teal"] .service-card:hover,[data-theme="teal"] .gallery-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,148,136,.15);}
[data-theme="teal"] .section-bordered,[data-theme="teal"] .section-bordered-top{background:rgba(204,251,241,.5);border-color:#99f6e4;}
[data-theme="teal"] .footer{background:#134e4a;color:#ccfbf1;border-top:none;}
[data-theme="teal"] .footer .footer-bottom{color:#5eead4;}

/* ============================================================
   NEW 3: WHATSAPP  (chat app style)
   ============================================================ */
[data-theme="whatsapp"]{
  --bg:#ece5dd;--fg:#111b21;--muted:#667781;
  --surface:#ffffff;--surface-2:#f0f2f5;
  --primary:#075e54;--on-primary:#ffffff;
  --border:#e0e0e0;--accent:#25d366;--ring:#25d366;
  --r-sm:.5rem;--r-md:.75rem;--r-lg:1rem;--r-xl:1.25rem;
  --shadow-card:0 1px 3px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);
  --hero-weight:600;--cta-radius:9999px;
  --font-body:'Segoe UI','Helvetica Neue','Inter',system-ui,sans-serif;
  --header-bg:#075e54;--header-blur:0px;
  --icon-color:#128c7e;--icon-bg:rgba(18,140,126,.1);
  --input-bg:#fff;
  --scrollbar-thumb:#c9c9c9;--selection-bg:rgba(37,211,102,.25);
  --tab-active-bg:#25d366;--tab-active-fg:#111b21;
  --btn-primary-bg:#25d366;--btn-primary-fg:#111b21;
  --wa-glow:rgba(37,211,102,.4);
}
body[data-theme="whatsapp"]{background-color:#ece5dd;background-image:radial-gradient(rgba(7,94,84,.06) 1px,transparent 1px);background-size:22px 22px;background-attachment:fixed;}
[data-theme="whatsapp"] .header{background:#075e54;color:#fff;border-bottom:none;box-shadow:0 2px 8px rgba(0,0,0,.15);}
[data-theme="whatsapp"] .header a,[data-theme="whatsapp"] .nav-desktop a{color:rgba(255,255,255,.9);}
[data-theme="whatsapp"] .header a:hover,[data-theme="whatsapp"] .nav-desktop a:hover{color:#fff;}
[data-theme="whatsapp"] .theme-picker-btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);color:#fff;}
[data-theme="whatsapp"] .service-card,[data-theme="whatsapp"] .value-card,[data-theme="whatsapp"] .tl-card,[data-theme="whatsapp"] .gallery-card,[data-theme="whatsapp"] .client-logo,[data-theme="whatsapp"] .dropcard,[data-theme="whatsapp"] .contact-info{background:#fff;border:1px solid #e0e0e0;border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(0,0,0,.06);}
[data-theme="whatsapp"] .section-bordered,[data-theme="whatsapp"] .section-bordered-top{background:rgba(255,255,255,.6);border-color:#e0e0e0;}
[data-theme="whatsapp"] .footer{background:#075e54;color:#d1f7e0;border-top:none;}
[data-theme="whatsapp"] .footer .footer-bottom{color:#8fe6b8;}
[data-theme="whatsapp"] .btn-primary,[data-theme="whatsapp"] .dc-send{font-weight:700;letter-spacing:.02em;}

/* ---------- new swatches ---------- */
.tp-swatch.s-metal-gun{background:linear-gradient(135deg,#25292e,#1a1d21);--sw-accent:#f0a13c;}
.tp-swatch.s-teal{background:linear-gradient(135deg,#f0fdfa,#ccfbf1);--sw-accent:#0d9488;}
.tp-swatch.s-whatsapp{background:linear-gradient(135deg,#075e54 50%,#ece5dd 50%);--sw-accent:#25d366;}
.tp-swatch.s-ios-spacegrey{--sw-accent:#0071e3;}
.tp-swatch.s-ios-glass{--sw-accent:#007AFF;}
.tp-swatch.s-dola{--sw-accent:#e8633c;}
.tp-swatch.s-windows11{--sw-accent:#0078d4;}

/* ---------- footer theme button (moved from header) ---------- */
.footer-theme-wrap{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.75rem;}
.footer-theme-btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s ease;opacity:.7;
}
.footer-theme-btn:hover{opacity:1;color:var(--accent);border-color:var(--accent);transform:translateY(-1px);}
.footer-theme-btn .tp-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#fff));}
[data-theme="whatsapp"] .footer-theme-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#d1f7e0;}
[data-theme="teal"] .footer-theme-btn{background:#0f766e;border-color:#0f766e;color:#fff;opacity:.85;}
[data-theme="metal-gun"] .footer-theme-btn{background:#2f343a;border-color:#3a3f46;color:#8a929c;}

/* ============================================================
   v31 — 5 NEW THEMES + LOGO CLICK ANIMATION
   ============================================================ */

/* ---------- NEW: BLUEISH GREY ---------- */
[data-theme="blueish-grey"]{
  --bg:#eef2f7;--fg:#243044;--muted:#64748b;
  --surface:#ffffff;--surface-2:#e2e8f0;
  --primary:#243044;--on-primary:#ffffff;
  --border:#cbd5e1;--accent:#3b82f6;--ring:#3b82f6;
  --r-sm:.6rem;--r-md:.9rem;--r-lg:1.2rem;--r-xl:1.6rem;
  --shadow-card:0 2px 8px rgba(37,48,68,.06),0 12px 32px rgba(37,48,68,.08);
  --hero-weight:700;--cta-radius:.6rem;
  --font-body:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  --header-bg:rgba(255,255,255,.8);--header-blur:20px;
  --icon-color:#3b82f6;--icon-bg:rgba(59,130,246,.1);
  --input-bg:#fff;
  --scrollbar-thumb:#cbd5e1;--selection-bg:rgba(59,130,246,.22);
  --tab-active-bg:#3b82f6;--tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="blueish-grey"]{background:linear-gradient(180deg,#eef2f7,#e6edf5);background-attachment:fixed;}
[data-theme="blueish-grey"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #cbd5e1;}
[data-theme="blueish-grey"] .service-card,[data-theme="blueish-grey"] .value-card,[data-theme="blueish-grey"] .tl-card,[data-theme="blueish-grey"] .gallery-card,[data-theme="blueish-grey"] .client-logo,[data-theme="blueish-grey"] .dropcard,[data-theme="blueish-grey"] .contact-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);}
[data-theme="blueish-grey"] .section-bordered,[data-theme="blueish-grey"] .section-bordered-top{background:rgba(226,232,240,.5);border-color:#cbd5e1;}
[data-theme="blueish-grey"] .footer{background:#1e293b;color:#cbd5e1;border-top:none;}
[data-theme="blueish-grey"] .footer .footer-bottom{color:#64748b;}

/* ---------- NEW: NEXUS (futuristic dark violet) ---------- */
[data-theme="nexus"]{
  --bg:#0f0a1e;--fg:#e9e4ff;--muted:#9d94c2;
  --surface:rgba(30,22,54,.7);--surface-2:rgba(45,34,78,.6);
  --primary:#a78bfa;--on-primary:#0f0a1e;
  --border:rgba(139,92,246,.3);--accent:#8b5cf6;--ring:#a78bfa;
  --r-sm:.75rem;--r-md:1rem;--r-lg:1.4rem;--r-xl:2rem;
  --shadow-card:0 8px 32px rgba(139,92,246,.2);
  --hero-weight:800;--cta-radius:9999px;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --header-bg:rgba(15,10,30,.7);--header-blur:30px;
  --icon-color:#c084fc;--icon-bg:rgba(139,92,246,.18);
  --input-bg:rgba(45,34,78,.6);
  --scrollbar-thumb:rgba(139,92,246,.4);--selection-bg:rgba(139,92,246,.3);
  --tab-active-bg:linear-gradient(135deg,#8b5cf6,#ec4899);--tab-active-fg:#fff;
  --btn-primary-bg:linear-gradient(135deg,#8b5cf6,#ec4899);--btn-primary-fg:#fff;
  --wa-glow:rgba(37,211,102,.35);
}
body[data-theme="nexus"]::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 15% 10%,rgba(139,92,246,.3),transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 85%,rgba(236,72,153,.25),transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 10%,rgba(34,211,238,.18),transparent 60%),
    #0f0a1e;
}
[data-theme="nexus"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--header-blur)) saturate(180%);border-bottom:1px solid rgba(139,92,246,.3);}
[data-theme="nexus"] .service-card,[data-theme="nexus"] .value-card,[data-theme="nexus"] .tl-card,[data-theme="nexus"] .gallery-card,[data-theme="nexus"] .client-logo,[data-theme="nexus"] .dropcard,[data-theme="nexus"] .contact-info{background:rgba(30,22,54,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(139,92,246,.28);border-radius:var(--r-lg);}
[data-theme="nexus"] .section-bordered,[data-theme="nexus"] .section-bordered-top{background:rgba(30,22,54,.4);border-color:rgba(139,92,246,.25);}
[data-theme="nexus"] .footer{background:rgba(8,5,18,.8);border-top:1px solid rgba(139,92,246,.3);}
[data-theme="nexus"] h1,[data-theme="nexus"] .section-title{background:linear-gradient(135deg,#c4b5fd,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- NEW: PAPERLIKE (warm paper / notion) ---------- */
[data-theme="paperlike"]{
  --bg:#f7f4ee;--fg:#3d3830;--muted:#8a8275;
  --surface:#fffdf8;--surface-2:#efe9dc;
  --primary:#3d3830;--on-primary:#f7f4ee;
  --border:#e0d8c8;--accent:#b45309;--ring:#b45309;
  --r-sm:.4rem;--r-md:.6rem;--r-lg:.8rem;--r-xl:1rem;
  --shadow-card:0 1px 3px rgba(61,56,48,.08),0 4px 14px rgba(61,56,48,.06);
  --hero-weight:650;--cta-radius:.4rem;
  --font-family:'Georgia','Times New Roman',serif;
  --font-body:'Georgia','Times New Roman',serif;
  --header-bg:rgba(255,253,248,.85);--header-blur:14px;
  --icon-color:#b45309;--icon-bg:rgba(180,83,9,.1);
  --input-bg:#fffdf8;
  --scrollbar-thumb:#d8cfbc;--selection-bg:rgba(180,83,9,.2);
  --tab-active-bg:#3d3830;--tab-active-fg:#f7f4ee;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="paperlike"]{background-color:#f7f4ee;background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(180,83,9,.05) 31px,rgba(180,83,9,.05) 32px);background-attachment:fixed;}
[data-theme="paperlike"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #e0d8c8;}
[data-theme="paperlike"] .service-card,[data-theme="paperlike"] .value-card,[data-theme="paperlike"] .tl-card,[data-theme="paperlike"] .gallery-card,[data-theme="paperlike"] .client-logo,[data-theme="paperlike"] .dropcard,[data-theme="paperlike"] .contact-info{background:#fffdf8;border:1px solid #e0d8c8;border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(61,56,48,.06);}
[data-theme="paperlike"] .section-bordered,[data-theme="paperlike"] .section-bordered-top{background:rgba(239,233,220,.5);border-color:#e0d8c8;}
[data-theme="paperlike"] .footer{background:#3d3830;color:#e8e0d0;border-top:none;}
[data-theme="paperlike"] .footer .footer-bottom{color:#a89f8e;}

/* ---------- NEW: CREATIVE (vibrant playful) ---------- */
[data-theme="creative"]{
  --bg:#fff8f0;--fg:#2d1b4e;--muted:#7c6b99;
  --surface:#ffffff;--surface-2:#ffe8d6;
  --primary:#2d1b4e;--on-primary:#ffffff;
  --border:#ffd8b8;--accent:#ff6b35;--ring:#ff6b35;
  --r-sm:1rem;--r-md:1.4rem;--r-lg:1.8rem;--r-xl:2.4rem;
  --shadow-card:0 6px 0 #ffd8b8,0 10px 30px rgba(255,107,53,.15);
  --hero-weight:800;--cta-radius:9999px;
  --font-body:'Poppins','Plus Jakarta Sans',system-ui,sans-serif;
  --header-bg:rgba(255,248,240,.85);--header-blur:18px;
  --icon-color:#ff6b35;--icon-bg:rgba(255,107,53,.12);
  --input-bg:#fff;
  --scrollbar-thumb:#ffc49a;--selection-bg:rgba(255,107,53,.25);
  --tab-active-bg:#ff6b35;--tab-active-fg:#fff;
  --btn-primary-bg:linear-gradient(135deg,#ff6b35,#f7c948);--btn-primary-fg:#2d1b4e;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="creative"]::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%,rgba(255,107,53,.12) 0,transparent 25%),
    radial-gradient(circle at 90% 15%,rgba(247,201,72,.15) 0,transparent 25%),
    radial-gradient(circle at 50% 90%,rgba(139,92,246,.1) 0,transparent 30%);
}
[data-theme="creative"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:2px solid #2d1b4e;}
[data-theme="creative"] .service-card,[data-theme="creative"] .value-card,[data-theme="creative"] .tl-card,[data-theme="creative"] .gallery-card,[data-theme="creative"] .client-logo,[data-theme="creative"] .dropcard,[data-theme="creative"] .contact-info{background:#fff;border:2px solid #2d1b4e;border-radius:var(--r-lg);box-shadow:6px 6px 0 #2d1b4e;transition:transform .15s ease,box-shadow .15s ease;}
[data-theme="creative"] .service-card:hover,[data-theme="creative"] .gallery-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #2d1b4e;}
[data-theme="creative"] .section-bordered,[data-theme="creative"] .section-bordered-top{background:rgba(255,232,214,.5);border-color:#ffd8b8;}
[data-theme="creative"] .footer{background:#2d1b4e;color:#ffe8d6;border-top:none;}
[data-theme="creative"] h1,[data-theme="creative"] .section-title{letter-spacing:-.03em;}

/* ---------- NEW: ARTSY & COLORFUL ---------- */
[data-theme="artsy"]{
  --bg:#ffffff;--fg:#1a1a2e;--muted:#555577;
  --surface:#ffffff;--surface-2:#f0f0ff;
  --primary:#1a1a2e;--on-primary:#ffffff;
  --border:#e0e0f0;--accent:#e63946;--ring:#e63946;
  --r-sm:.8rem;--r-md:1.2rem;--r-lg:1.6rem;--r-xl:2rem;
  --shadow-card:0 8px 30px rgba(230,57,70,.12);
  --hero-weight:800;--cta-radius:1rem;
  --font-body:'Poppins','Plus Jakarta Sans',system-ui,sans-serif;
  --header-bg:rgba(255,255,255,.8);--header-blur:20px;
  --icon-color:#e63946;--icon-bg:rgba(230,57,70,.1);
  --input-bg:#fff;
  --scrollbar-thumb:#c0c0e0;--selection-bg:rgba(230,57,70,.2);
  --tab-active-bg:#e63946;--tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="artsy"]{background:linear-gradient(135deg,#fff 0%,#fff5f5 25%,#f0f4ff 50%,#f5fff0 75%,#fffaf0 100%);background-attachment:fixed;}
[data-theme="artsy"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #e0e0f0;}
[data-theme="artsy"] .service-card,[data-theme="artsy"] .value-card,[data-theme="artsy"] .tl-card,[data-theme="artsy"] .gallery-card,[data-theme="artsy"] .client-logo,[data-theme="artsy"] .dropcard,[data-theme="artsy"] .contact-info{background:#fff;border:1px solid #e0e0f0;border-radius:var(--r-lg);position:relative;overflow:hidden;}
[data-theme="artsy"] .service-card::before,[data-theme="artsy"] .gallery-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e63946,#f77f00,#fcbf49,#06d6a0,#118ab2,#9b5de5);}
[data-theme="artsy"] .section-bordered,[data-theme="artsy"] .section-bordered-top{background:rgba(240,240,255,.5);border-color:#e0e0f0;}
[data-theme="artsy"] .footer{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#c0c0e0;border-top:none;}
[data-theme="artsy"] .service-icon{background:linear-gradient(135deg,#e63946,#9b5de5);color:#fff;}

/* ---------- new swatches ---------- */
.tp-swatch.s-blueish-grey{background:linear-gradient(135deg,#eef2f7,#cbd5e1);--sw-accent:#3b82f6;}
.tp-swatch.s-nexus{background:linear-gradient(135deg,#0f0a1e 55%,#8b5cf6 55%);--sw-accent:#a78bfa;}
.tp-swatch.s-paperlike{background:linear-gradient(135deg,#f7f4ee,#efe9dc);--sw-accent:#b45309;}
.tp-swatch.s-creative{background:linear-gradient(135deg,#fff8f0 55%,#ff6b35 55%);--sw-accent:#ff6b35;}
.tp-swatch.s-artsy{background:linear-gradient(135deg,#fff,#e63946,#fcbf49,#06d6a0);--sw-accent:#e63946;}

/* ---------- theme changer: fixed bottom-right (subtle) ---------- */
.theme-picker.footer-picker{position:fixed;bottom:1rem;right:1rem;z-index:60;margin:0;}
.footer-theme-btn{opacity:.55;box-shadow:0 4px 14px rgba(0,0,0,.12);}
.footer-theme-btn:hover{opacity:1;}
.theme-picker.footer-picker .theme-picker-menu{right:0;transform:translateY(-6px) scale(.97);}
.theme-picker.footer-picker.open .theme-picker-menu{transform:none;}

/* ---------- LOGO CLICK ANIMATION ---------- */
.hero-logo{cursor:pointer;transition:filter .2s ease;user-select:none;-webkit-user-drag:none;}
.hero-logo:hover{filter:drop-shadow(0 6px 18px rgba(0,0,0,.18));}
@keyframes logo-pop-spin{
  0%{transform:scale(1) rotate(0deg);}
  25%{transform:scale(1.18) rotate(-12deg);}
  50%{transform:scale(.92) rotate(10deg);}
  75%{transform:scale(1.08) rotate(-4deg);}
  100%{transform:scale(1) rotate(0deg);}
}
.hero-logo.logo-animating{animation:logo-pop-spin .8s cubic-bezier(.34,1.56,.64,1);}
.logo-ripple{position:fixed;border-radius:50%;border:3px solid var(--accent);pointer-events:none;z-index:9997;transform:translate(-50%,-50%);animation:ripple-expand .9s ease-out forwards;}
@keyframes ripple-expand{0%{width:50px;height:50px;opacity:.9;}100%{width:340px;height:340px;opacity:0;}}
.logo-confetti{position:fixed;width:10px;height:10px;border-radius:3px;pointer-events:none;z-index:9997;animation:confetti-burst 1s ease-out forwards;}
@keyframes confetti-burst{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1;}100%{transform:translate(var(--dx),var(--dy)) rotate(540deg) scale(.3);opacity:0;}}
@media (prefers-reduced-motion:reduce){.hero-logo.logo-animating{animation:none;}.logo-ripple,.logo-confetti{display:none;}}

/* ============================================================
   v32 — DOODLE / BLACK-WHITE / NOIR + clean logo animation
   ============================================================ */

/* ---------- NEW: DOODLE (playful hand-drawn) ---------- */
[data-theme="doodle"]{
  --bg:#fffdf7;--fg:#2b2b2b;--muted:#7a7a6e;
  --surface:#ffffff;--surface-2:#f5f1e6;
  --primary:#2b2b2b;--on-primary:#fffdf7;
  --border:#2b2b2b;--accent:#ff5a5f;--ring:#ff5a5f;
  --r-sm:.4rem;--r-md:.6rem;--r-lg:1rem;--r-xl:1.4rem;
  --shadow-card:4px 4px 0 #2b2b2b;
  --hero-weight:800;--cta-radius:9999px;
  --font-body:'Comic Sans MS','Chalkboard SE','Plus Jakarta Sans',cursive,sans-serif;
  --header-bg:#fffdf7;--header-blur:0px;
  --icon-color:#ff5a5f;--icon-bg:#ffe0e1;
  --input-bg:#fff;
  --scrollbar-thumb:#2b2b2b;--selection-bg:rgba(255,90,95,.25);
  --tab-active-bg:#2b2b2b;--tab-active-fg:#fffdf7;
  --btn-primary-bg:#ff5a5f;--btn-primary-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
[data-theme="doodle"] .header{background:var(--header-bg);border-bottom:3px solid #2b2b2b;}
[data-theme="doodle"] .service-card,[data-theme="doodle"] .value-card,[data-theme="doodle"] .tl-card,[data-theme="doodle"] .gallery-card,[data-theme="doodle"] .client-logo,[data-theme="doodle"] .dropcard,[data-theme="doodle"] .contact-info{background:#fff;border:2.5px solid #2b2b2b;border-radius:18px 22px 16px 24px/22px 16px 24px 18px;box-shadow:4px 4px 0 #2b2b2b;transition:transform .15s ease;}
[data-theme="doodle"] .service-card:hover,[data-theme="doodle"] .gallery-card:hover{transform:translate(-2px,-2px) rotate(-.5deg);box-shadow:6px 6px 0 #2b2b2b;}
[data-theme="doodle"] .section-bordered,[data-theme="doodle"] .section-bordered-top{background:#f5f1e6;border-top:3px dashed #2b2b2b;border-bottom:3px dashed #2b2b2b;}
[data-theme="doodle"] .footer{background:#2b2b2b;color:#fffdf7;border-top:3px solid #ff5a5f;}
[data-theme="doodle"] .tab-btn{border:2px solid #2b2b2b;background:#fff;border-radius:999px;font-weight:700;}
[data-theme="doodle"] .service-icon{border:2px solid #2b2b2b;}

/* ---------- NEW: BLACK AND WHITE (pure monochrome) ---------- */
[data-theme="mono"]{
  --bg:#ffffff;--fg:#0a0a0a;--muted:#6b6b6b;
  --surface:#ffffff;--surface-2:#f0f0f0;
  --primary:#0a0a0a;--on-primary:#ffffff;
  --border:#d9d9d9;--accent:#0a0a0a;--ring:#0a0a0a;
  --r-sm:0rem;--r-md:0rem;--r-lg:0rem;--r-xl:0rem;
  --shadow-card:0 1px 0 #0a0a0a;
  --hero-weight:900;--cta-radius:0rem;
  --font-body:'Helvetica Neue','Arial Black',Inter,system-ui,sans-serif;
  --header-bg:#ffffff;--header-blur:0px;
  --icon-color:#0a0a0a;--icon-bg:#f0f0f0;
  --input-bg:#fff;
  --scrollbar-thumb:#0a0a0a;--selection-bg:#0a0a0a;--selection-fg:#fff;
  --tab-active-bg:#0a0a0a;--tab-active-fg:#fff;
  --btn-primary-bg:#0a0a0a;--btn-primary-fg:#fff;
  --wa-glow:rgba(0,0,0,.2);
}
[data-theme="mono"] .header{background:#fff;border-bottom:2px solid #0a0a0a;}
[data-theme="mono"] .service-card,[data-theme="mono"] .value-card,[data-theme="mono"] .tl-card,[data-theme="mono"] .gallery-card,[data-theme="mono"] .client-logo,[data-theme="mono"] .dropcard,[data-theme="mono"] .contact-info{background:#fff;border:2px solid #0a0a0a;border-radius:0;}
[data-theme="mono"] .gallery-card img,[data-theme="mono"] .client-logo img,[data-theme="mono"] .hero-logo{filter:grayscale(1) contrast(1.05);}
[data-theme="mono"] .section-bordered,[data-theme="mono"] .section-bordered-top{background:#f5f5f5;border-color:#0a0a0a;border-width:2px 0;}
[data-theme="mono"] .footer{background:#0a0a0a;color:#fff;border-top:2px solid #0a0a0a;}
[data-theme="mono"] .btn-primary,[data-theme="mono"] .dc-send{border:2px solid #0a0a0a;letter-spacing:.05em;text-transform:uppercase;font-weight:800;}
[data-theme="mono"] h1,[data-theme="mono"] .section-title{letter-spacing:-.04em;text-transform:uppercase;}

/* ---------- NEW: NOIR (cinematic dark + amber gold) ---------- */
[data-theme="noir"]{
  --bg:#0a0a0a;--fg:#e8e0d4;--muted:#8a8078;
  --surface:#141414;--surface-2:#1e1c1a;
  --primary:#e8e0d4;--on-primary:#0a0a0a;
  --border:#2a2622;--accent:#d4a24e;--ring:#d4a24e;
  --r-sm:.25rem;--r-md:.4rem;--r-lg:.6rem;--r-xl:.8rem;
  --shadow-card:0 8px 30px rgba(0,0,0,.6);
  --hero-weight:300;--cta-radius:.25rem;
  --font-family:'Georgia','Times New Roman',serif;
  --font-body:'Georgia','Times New Roman',serif;
  --header-bg:rgba(10,10,10,.9);--header-blur:10px;
  --icon-color:#d4a24e;--icon-bg:rgba(212,162,78,.12);
  --input-bg:#1e1c1a;
  --scrollbar-thumb:#2a2622;--selection-bg:rgba(212,162,78,.3);
  --tab-active-bg:#d4a24e;--tab-active-fg:#0a0a0a;
  --btn-primary-bg:#d4a24e;--btn-primary-fg:#0a0a0a;
  --wa-glow:rgba(37,211,102,.25);
}
body[data-theme="noir"]{background:radial-gradient(ellipse at 50% 0%,#1a1612 0%,#0a0a0a 60%);background-attachment:fixed;}
[data-theme="noir"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #2a2622;}
[data-theme="noir"] .service-card,[data-theme="noir"] .value-card,[data-theme="noir"] .tl-card,[data-theme="noir"] .gallery-card,[data-theme="noir"] .client-logo,[data-theme="noir"] .dropcard,[data-theme="noir"] .contact-info{background:linear-gradient(180deg,#161616,#111);border:1px solid #2a2622;border-radius:var(--r-lg);}
[data-theme="noir"] .section-bordered,[data-theme="noir"] .section-bordered-top{background:rgba(20,20,20,.6);border-color:#2a2622;}
[data-theme="noir"] .footer{background:#050505;border-top:1px solid #2a2622;color:#8a8078;}
[data-theme="noir"] .gallery-card img{filter:grayscale(.4) contrast(1.08) brightness(.92);}
[data-theme="noir"] h1,[data-theme="noir"] .section-title{font-weight:300;letter-spacing:.02em;}
[data-theme="noir"] .hero-logo{filter:grayscale(.3) brightness(.95);}

/* ---------- new swatches ---------- */
.tp-swatch.s-doodle{background:linear-gradient(135deg,#fffdf7 55%,#ff5a5f 55%);--sw-accent:#ff5a5f;}
.tp-swatch.s-mono{background:linear-gradient(135deg,#fff 50%,#0a0a0a 50%);--sw-accent:#0a0a0a;}
.tp-swatch.s-noir{background:linear-gradient(135deg,#0a0a0a 55%,#d4a24e 55%);--sw-accent:#d4a24e;}

/* ---------- CLEAN PROFESSIONAL LOGO CLICK ANIMATION (replaces flashy one) ---------- */
.hero-logo.logo-animating{animation:none !important;}
@keyframes logo-flip{
  0%{transform:perspective(800px) rotateY(0deg) scale(1);filter:drop-shadow(0 4px 12px rgba(0,0,0,.1));}
  50%{transform:perspective(800px) rotateY(180deg) scale(1.06);filter:drop-shadow(0 12px 28px rgba(0,0,0,.18));}
  100%{transform:perspective(800px) rotateY(360deg) scale(1);filter:drop-shadow(0 4px 12px rgba(0,0,0,.1));}
}
.hero-logo.logo-flip{animation:logo-flip .9s cubic-bezier(.4,0,.2,1);}
.logo-ring{position:fixed;border-radius:50%;border:2px solid var(--accent);pointer-events:none;z-index:9997;transform:translate(-50%,-50%);animation:ring-pulse .8s cubic-bezier(.2,.6,.3,1) forwards;}
@keyframes ring-pulse{0%{width:60px;height:60px;opacity:.7;border-width:2px;}100%{width:220px;height:220px;opacity:0;border-width:1px;}}
@media (prefers-reduced-motion:reduce){.hero-logo.logo-flip{animation:none;}.logo-ring{display:none;}}

/* ============================================================
   v33 — editor bottom-sheet, footer buttons static, bouncy logo
   ============================================================ */

/* editor: bottom sheet (wide), overrides right-drawer */
.ev2-drawer{
  top:auto !important; bottom:0; left:50% !important; right:auto !important;
  width:min(1120px,96vw) !important; height:auto !important; max-height:92vh;
  transform:translate(-50%,108%) !important;
  border-radius:22px 22px 0 0 !important; border:1px solid var(--border); border-bottom:none !important;
  box-shadow:0 -24px 70px rgba(0,0,0,.35) !important;
  transition:transform .4s cubic-bezier(.32,.72,0,1) !important;
}
.ev2-drawer.open{transform:translate(-50%,0) !important;}
.ev2-drawer::before{content:'';display:block;width:48px;height:5px;border-radius:99px;background:var(--border);margin:10px auto -6px;flex-shrink:0;}
.ev2-drawer-body{overflow-y:auto;overscroll-behavior:contain;}
.ev2-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem;}
@media (max-width:720px){.ev2-field-row{grid-template-columns:1fr;}.ev2-drawer{width:100vw !important;border-radius:18px 18px 0 0 !important;}}
.ev2-quickbar{display:flex;gap:.4rem;flex-wrap:wrap;}
.ev2-quickbar button{font-size:.68rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer;transition:all .15s;}
.ev2-quickbar button:hover{color:var(--accent);border-color:var(--accent);}

/* theme changer + editor button: STATIC in footer (not floating) */
.theme-picker.footer-picker{position:static !important;display:inline-flex !important;bottom:auto;right:auto;margin:0;z-index:auto;}
.footer-actions{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.75rem;flex-wrap:wrap;}
.footer-editor-btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s ease;opacity:.7;
}
.footer-editor-btn:hover{opacity:1;color:var(--accent);border-color:var(--accent);transform:translateY(-1px);}
[data-theme="whatsapp"] .footer-editor-btn,[data-theme="noir"] .footer-editor-btn,[data-theme="mono"] .footer-editor-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#d1f7e0;}

/* logo click: shine glow (no bounce) */
@keyframes logo-shine-glow{
  0%{filter:drop-shadow(0 0 0 rgba(227,6,19,0));transform:scale(1);}
  35%{filter:drop-shadow(0 0 22px rgba(227,6,19,.5));transform:scale(1.05);}
  70%{filter:drop-shadow(0 0 10px rgba(227,6,19,.25));transform:scale(1.01);}
  100%{filter:drop-shadow(0 0 0 rgba(227,6,19,0));transform:scale(1);}
}
.hero-logo.logo-flip{animation:logo-shine-glow .85s ease-out !important;}

/* gallery broken-image placeholder */
.gal-thumb{position:relative;background:var(--surface-2);}
.gal-thumb img.missing{display:none;}
.gal-thumb .gal-missing-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.68rem;text-align:center;padding:.5rem;}

/* ============================================================
   v34 — editor centered floating modal, theme right-aligned, dropzone fix
   ============================================================ */

/* FIX: gallery upload dropzone full-width (was broken/narrow) */
.ev2-upload-zone{display:block !important;width:100% !important;box-sizing:border-box;flex:none !important;max-width:100% !important;}
.ev2-upload-zone svg{display:block !important;margin:0 auto .4rem !important;float:none !important;}
.ev2-upload-zone strong,.ev2-upload-zone span{display:inline !important;}

/* Editor: CENTERED FLOATING MODAL (not bottom sheet, not side drawer) */
.ev2-drawer{
  top:50% !important; left:50% !important; bottom:auto !important; right:auto !important;
  width:min(1020px,94vw) !important; height:auto !important; max-height:88vh;
  transform:translate(-50%,-48%) scale(.96) !important;
  opacity:0 !important; pointer-events:none;
  border-radius:18px !important; border:1px solid var(--border) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.45) !important;
  transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .25s ease !important;
}
.ev2-drawer.open{transform:translate(-50%,-50%) scale(1) !important;opacity:1 !important;pointer-events:auto;}
.ev2-drawer::before{display:none !important;}
.ev2-drawer-body{overflow-y:auto;overscroll-behavior:contain;}
@media (max-width:720px){.ev2-drawer{width:96vw !important;max-height:92vh;}}

/* Theme changer: right-aligned in footer (static, not floating) */
.footer-actions{justify-content:flex-end !important;padding:0 1.2rem .5rem;}
.footer-theme-btn{opacity:.65;}
.footer-theme-btn:hover{opacity:1;}

/* ============================================================
   v35 — FIX theme picker + circular transparent buttons
   ============================================================ */
.theme-picker.footer-picker{position:relative !important;display:inline-flex !important;}
.footer-actions{display:flex;align-items:center;justify-content:flex-end !important;gap:.55rem;padding:0 1.2rem .6rem;}

/* circular theme button: just accent-color dot, transparent */
.footer-theme-btn{
  width:34px !important;height:34px !important;padding:0 !important;border-radius:50% !important;
  background:rgba(255,255,255,.18) !important;border:1.5px solid rgba(255,255,255,.35) !important;
  display:inline-flex !important;align-items:center;justify-content:center;opacity:.75;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.footer-theme-btn:hover{opacity:1;transform:scale(1.08);}
.footer-theme-btn .tp-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.footer-theme-btn span:not(.tp-dot){display:none !important;}

/* circular editor button (gear), transparent, same style */
.footer-editor-btn{
  width:34px !important;height:34px !important;padding:0 !important;border-radius:50% !important;
  background:rgba(255,255,255,.18) !important;border:1.5px solid rgba(255,255,255,.35) !important;
  display:inline-flex !important;align-items:center;justify-content:center;opacity:.75;color:#fff !important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.footer-editor-btn:hover{opacity:1;transform:scale(1.08);border-color:var(--accent) !important;color:var(--accent) !important;}
.footer-editor-btn span{display:none !important;}
.footer-editor-btn svg{width:15px;height:15px;}

/* theme dropdown menu: opens upward, right-aligned to button */
.theme-picker.footer-picker .theme-picker-menu{
  position:absolute !important;bottom:calc(100% + .55rem) !important;right:0 !important;top:auto !important;
  transform:translateY(8px) scale(.97) !important;transform-origin:bottom right !important;
  opacity:0 !important;pointer-events:none !important;transition:all .22s ease !important;
  min-width:200px;box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.theme-picker.footer-picker.open .theme-picker-menu{
  transform:none !important;opacity:1 !important;pointer-events:auto !important;
}

/* v36 — theme changer: floating bottom-right circular dot */
.theme-picker.footer-picker{position:fixed !important;bottom:1rem !important;right:1rem !important;left:auto !important;top:auto !important;z-index:60 !important;display:inline-flex !important;}
.footer-actions{display:none !important;}

/* ============================================================
   v37 — GREYISH / MERAH PUTIH / LILAC + simplified gallery
   ============================================================ */

/* ---------- NEW: GREYISH (neutral calm gray) ---------- */
[data-theme="greyish"]{
  --bg:#f0f0f0;--fg:#3a3a3a;--muted:#8c8c8c;
  --surface:#ffffff;--surface-2:#e4e4e4;
  --primary:#3a3a3a;--on-primary:#ffffff;
  --border:#d4d4d4;--accent:#7a7a7a;--ring:#7a7a7a;
  --r-sm:.5rem;--r-md:.8rem;--r-lg:1.1rem;--r-xl:1.5rem;
  --shadow-card:0 2px 10px rgba(0,0,0,.06);
  --hero-weight:600;--cta-radius:.5rem;
  --font-body:'Inter',system-ui,sans-serif;
  --header-bg:rgba(255,255,255,.85);--header-blur:18px;
  --icon-color:#7a7a7a;--icon-bg:rgba(122,122,122,.1);
  --input-bg:#fff;
  --scrollbar-thumb:#c4c4c4;--selection-bg:rgba(122,122,122,.2);
  --tab-active-bg:#3a3a3a;--tab-active-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="greyish"]{background:linear-gradient(180deg,#f0f0f0,#e8e8e8);background-attachment:fixed;}
[data-theme="greyish"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur));-webkit-backdrop-filter:blur(var(--header-blur));border-bottom:1px solid #d4d4d4;}
[data-theme="greyish"] .service-card,[data-theme="greyish"] .value-card,[data-theme="greyish"] .tl-card,[data-theme="greyish"] .gallery-card,[data-theme="greyish"] .client-logo,[data-theme="greyish"] .dropcard,[data-theme="greyish"] .contact-info{background:#fff;border:1px solid #d4d4d4;border-radius:var(--r-lg);}
[data-theme="greyish"] .footer{background:#2a2a2a;color:#c4c4c4;border-top:none;}

/* ---------- NEW: MERAH PUTIH (Toyota-style: clean white + bold red accent) ---------- */
[data-theme="merah-putih"]{
  --bg:#ffffff;--fg:#111111;--muted:#6e6e73;
  --surface:#ffffff;--surface-2:#f5f5f7;
  --primary:#111111;--on-primary:#ffffff;
  --border:#e5e5ea;--accent:#e30613;--ring:#e30613;
  --r-sm:.5rem;--r-md:.75rem;--r-lg:1rem;--r-xl:1.4rem;
  --shadow-card:0 2px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --hero-weight:800;--cta-radius:.35rem;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --header-bg:rgba(255,255,255,.92);--header-blur:20px;
  --icon-color:#e30613;--icon-bg:rgba(227,6,19,.08);
  --input-bg:#fafafa;
  --scrollbar-thumb:#d2d2d7;--selection-bg:rgba(227,6,19,.16);
  --tab-active-bg:#111111;--tab-active-fg:#fff;
  --btn-primary-bg:#e30613;--btn-primary-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
body[data-theme="merah-putih"]{background:#ffffff;background-attachment:fixed;}
[data-theme="merah-putih"] .header{background:#e30613 !important;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;box-shadow:0 2px 14px rgba(227,6,19,.35);}
[data-theme="merah-putih"] .header::after{display:none;}
[data-theme="merah-putih"] #header-logo img{content:url('../images/logo-header-putih.png?v=39');}
[data-theme="merah-putih"] .nav-desktop a{color:#fff;}
[data-theme="merah-putih"] .nav-desktop a:hover{color:#ffd6d6;}
[data-theme="merah-putih"] .mobile-menu-btn{color:#fff;}
[data-theme="merah-putih"] .service-card,[data-theme="merah-putih"] .value-card,[data-theme="merah-putih"] .tl-card,[data-theme="merah-putih"] .gallery-card,[data-theme="merah-putih"] .client-logo,[data-theme="merah-putih"] .dropcard,[data-theme="merah-putih"] .contact-info{background:#fff;border:1px solid #e5e5ea;border-radius:var(--r-lg);position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;}
[data-theme="merah-putih"] .service-card::before,[data-theme="merah-putih"] .value-card::before,[data-theme="merah-putih"] .tl-card::before,[data-theme="merah-putih"] .gallery-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#e30613;transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
[data-theme="merah-putih"] .service-card:hover::before,[data-theme="merah-putih"] .value-card:hover::before,[data-theme="merah-putih"] .tl-card:hover::before,[data-theme="merah-putih"] .gallery-card:hover::before{transform:scaleX(1);}
[data-theme="merah-putih"] .service-card:hover,[data-theme="merah-putih"] .gallery-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(227,6,19,.12);}
[data-theme="merah-putih"] .section-bordered,[data-theme="merah-putih"] .section-bordered-top{background:#fafafa;border-color:#e5e5ea;}
[data-theme="merah-putih"] .footer{background:#e30613;color:#fff;border-top:none;}
[data-theme="merah-putih"] .footer .footer-bottom{color:#ffd6d6;}
[data-theme="merah-putih"] .btn-primary,[data-theme="merah-putih"] .dc-send,[data-theme="merah-putih"] .btn-edit{font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:.8rem;}
[data-theme="merah-putih"] h1,[data-theme="merah-putih"] .section-title{letter-spacing:-.02em;}

/* ---------- NEW: LILAC (soft purple lavender) ---------- */
[data-theme="lilac"]{
  --bg:#f6f0fb;--fg:#3d2e54;--muted:#8a7ba3;
  --surface:rgba(255,255,255,.62);--surface-2:rgba(255,255,255,.38);
  --primary:#6d4c9e;--on-primary:#ffffff;
  --border:rgba(255,255,255,.75);--accent:#9b7ed1;--ring:#9b7ed1;
  --r-sm:.8rem;--r-md:1.1rem;--r-lg:1.5rem;--r-xl:2rem;
  --shadow-card:0 8px 32px rgba(155,126,209,.18),0 2px 8px rgba(109,76,158,.08);
  --hero-weight:700;--cta-radius:9999px;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --header-bg:rgba(246,240,251,.55);--header-blur:30px;
  --icon-color:#9b7ed1;--icon-bg:rgba(155,126,209,.14);
  --input-bg:rgba(255,255,255,.6);
  --scrollbar-thumb:#d8c8ec;--selection-bg:rgba(155,126,209,.22);
  --tab-active-bg:linear-gradient(135deg,#9b7ed1,#c8a2e8);--tab-active-fg:#fff;
  --btn-primary-bg:linear-gradient(135deg,#9b7ed1,#c8a2e8);--btn-primary-fg:#fff;
  --wa-glow:rgba(37,211,102,.3);
}
/* v48: lilac glass — ornamen blob ungu mengambang + frosted glass */
body[data-theme="lilac"]{position:relative;background:#f6f0fb;}
body[data-theme="lilac"]::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 8%,rgba(155,126,209,.35),transparent 60%),
    radial-gradient(ellipse 45% 40% at 88% 15%,rgba(200,162,232,.42),transparent 60%),
    radial-gradient(ellipse 50% 45% at 75% 92%,rgba(109,76,158,.22),transparent 60%),
    radial-gradient(ellipse 40% 35% at 18% 88%,rgba(230,180,255,.32),transparent 60%),
    linear-gradient(180deg,#f6f0fb,#efe6f8);
}
[data-theme="lilac"] .header{background:var(--header-bg);backdrop-filter:blur(var(--header-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--header-blur)) saturate(180%);border-bottom:1px solid rgba(255,255,255,.6);}
[data-theme="lilac"] .service-card,[data-theme="lilac"] .value-card,[data-theme="lilac"] .tl-card,[data-theme="lilac"] .gallery-card,[data-theme="lilac"] .client-logo,[data-theme="lilac"] .dropcard,[data-theme="lilac"] .contact-info,[data-theme="lilac"] .modal,[data-theme="lilac"] .admin-panel,[data-theme="lilac"] .edit-panel-body{background:rgba(255,255,255,.6);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-lg);}
[data-theme="lilac"] .section-bordered,[data-theme="lilac"] .section-bordered-top{background:rgba(255,255,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.5);}
[data-theme="lilac"] .footer{background:linear-gradient(135deg,#3d2e54,#6d4c9e);color:#e8ddf5;border-top:none;}

/* ---------- new swatches ---------- */
.tp-swatch.s-greyish{background:linear-gradient(135deg,#f0f0f0,#c4c4c4);--sw-accent:#7a7a7a;}
.tp-swatch.s-merah-putih{background:linear-gradient(135deg,#fff 50%,#e11d21 50%);--sw-accent:#e11d21;}
.tp-swatch.s-lilac{background:linear-gradient(135deg,#f6f0fb 55%,#9b7ed1 55%);--sw-accent:#9b7ed1;}

/* v42 — portfolio category tabs DIMUNCULKAN kembali agar bisa diedit (sembunyikan per-kategori via admin > Tab Portfolio) */

/* ============================================================
   v38 — IMAGE & ICON PROTECTION (anti right-click / drag / save)
   ============================================================ */
img,
.logo img, .hero-logo, .wa-float img, .client-logo img, .gallery-card img, .gal-thumb img,
.service-icon svg, .tl-icon svg, .ci-ico svg, .footer-logo img {
  -webkit-user-drag:none; -khtml-user-drag:none; user-drag:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  pointer-events:auto;
}
/* hide mobile theme picker inside hamburger menu (removed in JS) */
.mobile-theme-picker{display:none !important;}

/* v40 — motion overlay dimatikan total */
.motion-overlay{display:none !important;}

/* v41 — matikan semua animasi logo (bulat/klik/ripple) */
.hero-logo.logo-flip{animation:none !important;}
.logo-ring{display:none !important;}
body.hero-anim-on .hero-logo{animation:none !important;}

/* v42 — matikan TOTAL animasi logo bulat (heartbeat hover) & semua sisa animasi logo */
.logo:hover img{animation:none !important;transform:none !important;}
.logo img{animation:none !important;}
.hero-logo.logo-animating{animation:none !important;}
#header-logo img{animation:none !important;}

/* v43 — MATIKAN TOTAL semua animasi logo & elemen bulat (redefine keyframes jadi no-op) */
@keyframes heartbeat { 0%,100%{transform:scale(1);} 14%,28%,42%,70%{transform:scale(1);} }
@keyframes v8-float { 0%,100%{transform:none;filter:none;} 50%{transform:none;filter:none;} }
@keyframes v8-pulse { 0%,100%{box-shadow:none;} 50%{box-shadow:none;} }
@keyframes logo-pop-spin { 0%,100%{transform:none;} }
@keyframes logo-flip { 0%,100%{transform:none;filter:none;} }
@keyframes logo-shine-glow { 0%,100%{transform:none;filter:none;} 35%,70%{transform:none;filter:none;} }
@keyframes logo-bounce-pop { 0%,100%{transform:none;} }
@keyframes ring-pulse { 0%,100%{width:60px;height:60px;opacity:0;} }
@keyframes ripple-expand { 0%,100%{opacity:0;} }
.logo, .logo img, .hero-logo, #header-logo img, .wa-float, .wa-float img, .footer-theme-btn, .tp-dot, .admin-plus-fab, .back-to-top, .client-logo img, .gallery-card img {
  animation: none !important;
  animation-iteration-count: 1 !important;
}
.logo:hover img{animation:none !important;transform:none !important;}
.logo-ring, .logo-ripple, .logo-confetti{display:none !important;}

/* v45 — animasi slide saat pindah tab kategori portfolio */
#gallery-grid{transition:opacity .22s ease, transform .22s ease;will-change:opacity,transform;}
#gallery-grid.tab-slide-out{opacity:0;transform:translateX(-30px);pointer-events:none;}