:root,
html[data-theme="ice"] {
  --bg: #05070c;
  --bg-2: #070b14;
  --card: rgba(10, 20, 36, 0.72);
  --card-2: rgba(14, 28, 48, 0.55);
  --stroke: rgba(92, 225, 255, 0.18);
  --stroke-strong: rgba(92, 225, 255, 0.4);
  --cyan: #5ce1ff;
  --cyan-2: #9af0ff;
  --blue: #3d8bff;
  --text: #e8f4ff;
  --muted: #8ba3b8;
  --danger: #ff6b8a;
  --ok: #5cffc5;
  --radius: 18px;
  --font: "Inter", system-ui, sans-serif;
  --display: "Outfit", "Inter", system-ui, sans-serif;
  --btn-ink: #041018;
  --btn-fill: #5ce1ff;
  --btn-fill-hover: #9af0ff;
  --glow: rgba(92, 225, 255, 0.28);
  --glow-2: rgba(61, 139, 255, 0.22);
  --nav-bg: rgba(5, 7, 12, 0.72);
  --dropdown-bg: #0b1524;
  --form-bg: rgba(8, 14, 24, 0.8);
  --form-bg-focus: rgba(8, 14, 24, 0.95);
  --grid: rgba(92, 225, 255, 0.035);
  --icon-bg: rgba(92, 225, 255, 0.08);
  --hover-fill: rgba(92, 225, 255, 0.08);
  --legal-bg: rgba(92, 225, 255, 0.08);
  --lang-sep: rgba(92, 225, 255, 0.35);
  --focus-ring: rgba(92, 225, 255, 0.15);
  --card-hover-shadow: 0 16px 50px rgba(92, 225, 255, 0.1);
  --body-grad:
    radial-gradient(1200px 700px at 10% -10%, rgba(61, 139, 255, 0.16), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(92, 225, 255, 0.1), transparent 45%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(61,139,255,0.18), rgba(92,225,255,0.1));
  --hero-glow: drop-shadow(0 0 40px rgba(92, 225, 255, 0.28));
  --brand-glow: drop-shadow(0 0 12px rgba(92, 225, 255, 0.25));
  --kicker-grad: linear-gradient(90deg, #5ce1ff, #9af0ff);
  --theme-meta: #05070c;

  /* Relieful 3D. Calculat pentru scris deschis pe fundal inchis: reflex alb
     sus, umbra neagra dedesubt. Temele deschise il sting punand `none`. */
  --relief-title:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 3px 0 rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.42),
    0 0 18px var(--glow);
  --relief-hero:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 4px 0 rgba(0, 0, 0, 0.32),
    0 7px 0 rgba(0, 0, 0, 0.16),
    0 16px 32px rgba(0, 0, 0, 0.5),
    0 0 28px var(--glow);
  --relief-lead: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px var(--glow-2);
  --relief-muted: 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 10px rgba(0, 0, 0, 0.22);
  --relief-body: 0 1px 1px rgba(0, 0, 0, 0.32);
  --relief-nav:
    0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 0 rgba(0, 0, 0, 0.38),
    0 0 12px var(--glow-2);
  --relief-kicker: drop-shadow(0 0 8px var(--glow-2));
}


html[data-theme="3d"] {
  --bg: #04060c;
  --bg-2: #070b16;
  --card: rgba(12, 22, 40, 0.78);
  --card-2: rgba(18, 32, 54, 0.6);
  --stroke: rgba(92, 225, 255, 0.28);
  --stroke-strong: rgba(154, 240, 255, 0.55);
  --cyan: #7af0ff;
  --cyan-2: #d6fbff;
  --blue: #4d9dff;
  --text: #eff9ff;
  --muted: #9bb4c8;
  --btn-ink: #031018;
  --btn-fill: linear-gradient(180deg, #d6fbff 0%, #5ce1ff 42%, #2b8dff 100%);
  --btn-fill-hover: linear-gradient(180deg, #ffffff 0%, #9af0ff 40%, #5ce1ff 100%);
  --glow: rgba(92, 225, 255, 0.42);
  --glow-2: rgba(61, 139, 255, 0.32);
  --nav-bg: rgba(4, 6, 12, 0.78);
  --dropdown-bg: #0a1422;
  --form-bg: rgba(8, 14, 24, 0.88);
  --form-bg-focus: rgba(8, 14, 24, 0.96);
  --grid: rgba(92, 225, 255, 0.05);
  --icon-bg: rgba(92, 225, 255, 0.12);
  --hover-fill: rgba(92, 225, 255, 0.12);
  --legal-bg: rgba(92, 225, 255, 0.1);
  --lang-sep: rgba(92, 225, 255, 0.4);
  --focus-ring: rgba(92, 225, 255, 0.22);
  --card-hover-shadow: 0 28px 60px rgba(0,0,0,0.45), 0 0 40px rgba(92, 225, 255, 0.16);
  --body-grad:
    radial-gradient(1000px 600px at 12% -8%, rgba(61, 139, 255, 0.28), transparent 52%),
    radial-gradient(800px 500px at 90% 8%, rgba(92, 225, 255, 0.16), transparent 48%),
    #04060c;
  --cta-grad: linear-gradient(120deg, rgba(61,139,255,0.28), rgba(92,225,255,0.14));
  --hero-glow: drop-shadow(0 18px 28px rgba(0,0,0,0.45)) drop-shadow(0 0 28px rgba(92, 225, 255, 0.35));
  --brand-glow: drop-shadow(0 8px 16px rgba(0,0,0,0.4)) drop-shadow(0 0 12px rgba(92, 225, 255, 0.35));
  --kicker-grad: linear-gradient(90deg, #9af0ff, #5ce1ff, #3d8bff);
  --theme-meta: #04060c;
}
html[data-theme="3d"] .glass,
html[data-theme="3d"] .svc-card,
html[data-theme="3d"] .why-item,
html[data-theme="3d"] .step,
html[data-theme="3d"] .quote,
html[data-theme="3d"] .stat-card,
html[data-theme="3d"] .footer-panel,
html[data-theme="3d"] .page-card,
html[data-theme="3d"] .contact-panel,
html[data-theme="3d"] .legal-slab,
html[data-theme="3d"] .cta-band,
html[data-theme="3d"] .gallery-item {
  transform: perspective(980px) rotateX(6deg) translateZ(0);
  transform-style: preserve-3d;
  box-shadow: 0 22px 40px rgba(0,0,0,0.38), 0 2px 0 rgba(255,255,255,0.08) inset, 0 0 28px var(--glow-2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme="3d"] .btn-ice,
html[data-theme="3d"] .btn-ghost {
  transform: perspective(500px) rotateX(14deg);
  box-shadow: 0 8px 0 rgba(0, 40, 70, 0.45), 0 16px 28px rgba(0,0,0,0.35);
}
html[data-theme="3d"] .btn-ice:hover,
html[data-theme="3d"] .btn-ghost:hover {
  transform: perspective(500px) rotateX(6deg) translateY(-2px);
}
html[data-theme="3d"] .hero .hero-visual {
  transform: perspective(1200px) rotateY(-9deg) rotateX(5deg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px rgba(92,225,255,0.18);
}
html[data-theme="3d"] .brand-logo,
html[data-theme="3d"] .footer-logo {
  transform: perspective(400px) rotateY(-12deg);
}
html[data-theme="3d"] .back-to-top {
  box-shadow: 0 10px 0 rgba(0,30,50,0.5), 0 18px 36px var(--glow);
}
html[data-theme="3d"] .site-nav {
  box-shadow:
    0 22px 44px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 36px var(--glow);
}
html[data-theme="3d"] .site-footer {
  box-shadow: 0 -22px 44px rgba(0,0,0,0.28), 0 -1px 0 rgba(255,255,255,0.1) inset, 0 0 28px var(--glow-2);
}

html[data-theme="gold"] {
  --bg: #0a0804;
  --bg-2: #120e06;
  --card: rgba(28, 20, 8, 0.78);
  --card-2: rgba(36, 26, 10, 0.58);
  --stroke: rgba(232, 197, 71, 0.22);
  --stroke-strong: rgba(255, 217, 128, 0.5);
  --cyan: #e8c547;
  --cyan-2: #ffe9a3;
  --blue: #c48912;
  --text: #f6edd6;
  --muted: #b8a47a;
  --btn-ink: #1a1204;
  --btn-fill: linear-gradient(180deg, #ffe9a3 0%, #e8c547 42%, #b8860b 100%);
  --btn-fill-hover: linear-gradient(180deg, #fff3c4 0%, #f0d56a 42%, #d4a017 100%);
  --glow: rgba(232, 197, 71, 0.38);
  --glow-2: rgba(196, 137, 18, 0.28);
  --nav-bg: rgba(10, 8, 4, 0.78);
  --dropdown-bg: #161008;
  --form-bg: rgba(14, 10, 4, 0.88);
  --form-bg-focus: rgba(18, 12, 4, 0.96);
  --grid: rgba(232, 197, 71, 0.04);
  --icon-bg: rgba(232, 197, 71, 0.1);
  --hover-fill: rgba(232, 197, 71, 0.1);
  --legal-bg: rgba(232, 197, 71, 0.1);
  --lang-sep: rgba(232, 197, 71, 0.4);
  --focus-ring: rgba(232, 197, 71, 0.2);
  --card-hover-shadow: 0 16px 50px rgba(232, 197, 71, 0.14);
  --body-grad:
    radial-gradient(1200px 700px at 10% -10%, rgba(196, 137, 18, 0.22), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(255, 217, 128, 0.12), transparent 45%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(196,137,18,0.22), rgba(255,217,128,0.12));
  --hero-glow: drop-shadow(0 0 36px rgba(232, 197, 71, 0.4)) drop-shadow(0 0 18px rgba(255, 233, 163, 0.2));
  --brand-glow: drop-shadow(0 0 12px rgba(232, 197, 71, 0.35));
  --kicker-grad: linear-gradient(90deg, #ffe9a3, #e8c547 55%, #c48912);
  --theme-meta: #0a0804;
}

html[data-theme="emerald"] {
  --bg: #050806;
  --bg-2: #07110c;
  --card: rgba(8, 22, 16, 0.76);
  --card-2: rgba(12, 32, 22, 0.55);
  --stroke: rgba(61, 255, 138, 0.2);
  --stroke-strong: rgba(61, 255, 138, 0.48);
  --cyan: #3dff8a;
  --cyan-2: #b4ffd4;
  --blue: #c5d0d8;
  --text: #eaf8f0;
  --muted: #8aada0;
  --btn-ink: #04140c;
  --btn-fill: linear-gradient(180deg, #b4ffd4 0%, #3dff8a 50%, #12a85a 100%);
  --btn-fill-hover: linear-gradient(180deg, #d4ffe8 0%, #6affaa 50%, #1cc96c 100%);
  --glow: rgba(61, 255, 138, 0.32);
  --glow-2: rgba(197, 208, 216, 0.18);
  --nav-bg: rgba(5, 8, 6, 0.78);
  --dropdown-bg: #0a1610;
  --form-bg: rgba(6, 14, 10, 0.88);
  --form-bg-focus: rgba(8, 18, 12, 0.96);
  --grid: rgba(61, 255, 138, 0.035);
  --icon-bg: rgba(61, 255, 138, 0.1);
  --hover-fill: rgba(61, 255, 138, 0.1);
  --legal-bg: rgba(61, 255, 138, 0.1);
  --lang-sep: rgba(61, 255, 138, 0.4);
  --focus-ring: rgba(61, 255, 138, 0.18);
  --card-hover-shadow: 0 16px 50px rgba(61, 255, 138, 0.12);
  --body-grad:
    radial-gradient(1200px 700px at 10% -10%, rgba(197, 208, 216, 0.12), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(61, 255, 138, 0.14), transparent 45%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(197,208,216,0.16), rgba(61,255,138,0.12));
  --hero-glow: drop-shadow(0 0 32px rgba(61, 255, 138, 0.4)) drop-shadow(0 0 14px rgba(197, 208, 216, 0.25));
  --brand-glow: drop-shadow(0 0 12px rgba(61, 255, 138, 0.32));
  --kicker-grad: linear-gradient(90deg, #c5d0d8, #3dff8a);
  --theme-meta: #050806;
}

html[data-theme="sunset"] {
  --bg: #0c0508;
  --bg-2: #16080c;
  --card: rgba(32, 8, 18, 0.76);
  --card-2: rgba(44, 12, 22, 0.55);
  --stroke: rgba(255, 90, 165, 0.24);
  --stroke-strong: rgba(255, 140, 80, 0.5);
  --cyan: #ff5aa5;
  --cyan-2: #ffd36a;
  --blue: #ff7a45;
  --text: #fff0f4;
  --muted: #c89aa8;
  --btn-ink: #1a0610;
  --btn-fill: linear-gradient(120deg, #ff5aa5 0%, #ff7a45 52%, #ffd36a 100%);
  --btn-fill-hover: linear-gradient(120deg, #ff7ab8 0%, #ff8c5a 52%, #ffe08a 100%);
  --glow: rgba(255, 90, 165, 0.36);
  --glow-2: rgba(255, 122, 69, 0.28);
  --nav-bg: rgba(12, 5, 8, 0.8);
  --dropdown-bg: #1a0a10;
  --form-bg: rgba(16, 6, 10, 0.88);
  --form-bg-focus: rgba(20, 8, 12, 0.96);
  --grid: rgba(255, 90, 165, 0.04);
  --icon-bg: rgba(255, 90, 165, 0.1);
  --hover-fill: rgba(255, 122, 69, 0.1);
  --legal-bg: rgba(255, 90, 165, 0.1);
  --lang-sep: rgba(255, 140, 80, 0.42);
  --focus-ring: rgba(255, 90, 165, 0.2);
  --card-hover-shadow: 0 16px 50px rgba(255, 90, 165, 0.14);
  --body-grad:
    radial-gradient(1200px 700px at 8% -10%, rgba(255, 90, 165, 0.2), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(255, 140, 70, 0.16), transparent 48%),
    radial-gradient(700px 500px at 50% 110%, rgba(255, 211, 106, 0.1), transparent 50%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(255,90,165,0.2), rgba(255,122,69,0.14), rgba(255,211,106,0.1));
  --hero-glow: drop-shadow(0 0 28px rgba(255, 90, 165, 0.4)) drop-shadow(0 0 40px rgba(255, 122, 69, 0.22));
  --brand-glow: drop-shadow(0 0 12px rgba(255, 90, 165, 0.35));
  --kicker-grad: linear-gradient(90deg, #ff5aa5, #ff7a45, #ffd36a);
  --theme-meta: #0c0508;
}

html[data-theme="ice-gold"] {
  --bg: #07080a;
  --bg-2: #0b0c10;
  --card: rgba(12, 18, 28, 0.76);
  --card-2: rgba(22, 20, 12, 0.55);
  --stroke: rgba(92, 225, 255, 0.2);
  --stroke-strong: rgba(232, 197, 71, 0.45);
  --cyan: #5ce1ff;
  --cyan-2: #ffe9a3;
  --blue: #e8c547;
  --text: #eef4ff;
  --muted: #9aa8b0;
  --btn-ink: #081018;
  --btn-fill: linear-gradient(120deg, #5ce1ff 0%, #8ae8ff 38%, #e8c547 100%);
  --btn-fill-hover: linear-gradient(120deg, #9af0ff 0%, #ffe9a3 55%, #f0d56a 100%);
  --glow: rgba(92, 225, 255, 0.3);
  --glow-2: rgba(232, 197, 71, 0.3);
  --nav-bg: rgba(7, 8, 10, 0.78);
  --dropdown-bg: #10141c;
  --form-bg: rgba(8, 12, 18, 0.88);
  --form-bg-focus: rgba(10, 14, 20, 0.96);
  --grid: rgba(92, 225, 255, 0.03);
  --icon-bg: rgba(92, 225, 255, 0.08);
  --hover-fill: rgba(232, 197, 71, 0.1);
  --legal-bg: rgba(92, 225, 255, 0.08);
  --lang-sep: rgba(232, 197, 71, 0.4);
  --focus-ring: rgba(92, 225, 255, 0.16);
  --card-hover-shadow: 0 16px 50px rgba(92, 225, 255, 0.08), 0 8px 30px rgba(232, 197, 71, 0.08);
  --body-grad:
    radial-gradient(1100px 680px at 8% -8%, rgba(92, 225, 255, 0.16), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(232, 197, 71, 0.14), transparent 46%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(92,225,255,0.16), rgba(232,197,71,0.14));
  --hero-glow: drop-shadow(-12px 0 28px rgba(92, 225, 255, 0.35)) drop-shadow(12px 0 28px rgba(232, 197, 71, 0.32));
  --brand-glow: drop-shadow(-6px 0 10px rgba(92, 225, 255, 0.28)) drop-shadow(6px 0 10px rgba(232, 197, 71, 0.28));
  --kicker-grad: linear-gradient(90deg, #5ce1ff, #e8c547);
  --theme-meta: #07080a;
}

html[data-theme="ice-sunset"] {
  --bg: #07060c;
  --bg-2: #0c0a14;
  --card: rgba(12, 16, 32, 0.76);
  --card-2: rgba(28, 10, 22, 0.55);
  --stroke: rgba(92, 225, 255, 0.2);
  --stroke-strong: rgba(255, 90, 165, 0.45);
  --cyan: #5ce1ff;
  --cyan-2: #ffb3d4;
  --blue: #ff5aa5;
  --text: #eef2ff;
  --muted: #9aa0b8;
  --btn-ink: #081018;
  --btn-fill: linear-gradient(120deg, #5ce1ff 0%, #7ab8ff 40%, #ff5aa5 78%, #ff7a45 100%);
  --btn-fill-hover: linear-gradient(120deg, #9af0ff 0%, #ff7ab8 70%, #ff8c5a 100%);
  --glow: rgba(92, 225, 255, 0.28);
  --glow-2: rgba(255, 90, 165, 0.3);
  --nav-bg: rgba(7, 6, 12, 0.8);
  --dropdown-bg: #101018;
  --form-bg: rgba(8, 10, 18, 0.88);
  --form-bg-focus: rgba(10, 10, 20, 0.96);
  --grid: rgba(92, 225, 255, 0.03);
  --icon-bg: rgba(92, 225, 255, 0.08);
  --hover-fill: rgba(255, 90, 165, 0.1);
  --legal-bg: rgba(92, 225, 255, 0.08);
  --lang-sep: rgba(255, 90, 165, 0.4);
  --focus-ring: rgba(92, 225, 255, 0.16);
  --card-hover-shadow: 0 16px 50px rgba(92, 225, 255, 0.08), 0 8px 30px rgba(255, 90, 165, 0.1);
  --body-grad:
    radial-gradient(1100px 680px at 6% -8%, rgba(92, 225, 255, 0.16), transparent 50%),
    radial-gradient(900px 600px at 100% 4%, rgba(255, 90, 165, 0.16), transparent 46%),
    radial-gradient(700px 420px at 80% 100%, rgba(255, 122, 69, 0.1), transparent 50%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(92,225,255,0.16), rgba(255,90,165,0.16), rgba(255,122,69,0.1));
  --hero-glow: drop-shadow(-12px 0 28px rgba(92, 225, 255, 0.35)) drop-shadow(12px 0 28px rgba(255, 90, 165, 0.32));
  --brand-glow: drop-shadow(-6px 0 10px rgba(92, 225, 255, 0.28)) drop-shadow(6px 0 10px rgba(255, 90, 165, 0.28));
  --kicker-grad: linear-gradient(90deg, #5ce1ff, #ff5aa5, #ff7a45);
  --theme-meta: #07060c;
}

html[data-theme="gold-emerald"] {
  --bg: #080a06;
  --bg-2: #101208;
  --card: rgba(22, 22, 10, 0.76);
  --card-2: rgba(10, 24, 16, 0.55);
  --stroke: rgba(232, 197, 71, 0.22);
  --stroke-strong: rgba(61, 255, 138, 0.45);
  --cyan: #e8c547;
  --cyan-2: #b4ffd4;
  --blue: #3dff8a;
  --text: #f4f6e8;
  --muted: #a8b090;
  --btn-ink: #101404;
  --btn-fill: linear-gradient(120deg, #e8c547 0%, #ffe9a3 36%, #3dff8a 100%);
  --btn-fill-hover: linear-gradient(120deg, #ffe9a3 0%, #6affaa 100%);
  --glow: rgba(232, 197, 71, 0.32);
  --glow-2: rgba(61, 255, 138, 0.3);
  --nav-bg: rgba(8, 10, 6, 0.8);
  --dropdown-bg: #12160c;
  --form-bg: rgba(10, 12, 6, 0.88);
  --form-bg-focus: rgba(12, 16, 8, 0.96);
  --grid: rgba(232, 197, 71, 0.03);
  --icon-bg: rgba(232, 197, 71, 0.1);
  --hover-fill: rgba(61, 255, 138, 0.1);
  --legal-bg: rgba(232, 197, 71, 0.1);
  --lang-sep: rgba(61, 255, 138, 0.4);
  --focus-ring: rgba(232, 197, 71, 0.18);
  --card-hover-shadow: 0 16px 50px rgba(232, 197, 71, 0.1), 0 8px 30px rgba(61, 255, 138, 0.1);
  --body-grad:
    radial-gradient(1100px 680px at 8% -8%, rgba(232, 197, 71, 0.18), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(61, 255, 138, 0.14), transparent 46%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(232,197,71,0.18), rgba(61,255,138,0.14));
  --hero-glow: drop-shadow(-12px 0 28px rgba(232, 197, 71, 0.38)) drop-shadow(12px 0 28px rgba(61, 255, 138, 0.32));
  --brand-glow: drop-shadow(-6px 0 10px rgba(232, 197, 71, 0.3)) drop-shadow(6px 0 10px rgba(61, 255, 138, 0.28));
  --kicker-grad: linear-gradient(90deg, #e8c547, #3dff8a);
  --theme-meta: #080a06;
}

html[data-theme="emerald-sunset"] {
  --bg: #07080a;
  --bg-2: #0a100e;
  --card: rgba(8, 22, 16, 0.76);
  --card-2: rgba(28, 10, 18, 0.55);
  --stroke: rgba(61, 255, 138, 0.2);
  --stroke-strong: rgba(255, 90, 165, 0.45);
  --cyan: #3dff8a;
  --cyan-2: #ffb3d4;
  --blue: #ff5aa5;
  --text: #eef8f2;
  --muted: #96aea8;
  --btn-ink: #061410;
  --btn-fill: linear-gradient(120deg, #3dff8a 0%, #6affaa 30%, #ff5aa5 72%, #ff7a45 100%);
  --btn-fill-hover: linear-gradient(120deg, #b4ffd4 0%, #ff7ab8 70%, #ff8c5a 100%);
  --glow: rgba(61, 255, 138, 0.3);
  --glow-2: rgba(255, 90, 165, 0.3);
  --nav-bg: rgba(7, 8, 10, 0.8);
  --dropdown-bg: #0c1612;
  --form-bg: rgba(8, 14, 12, 0.88);
  --form-bg-focus: rgba(10, 16, 14, 0.96);
  --grid: rgba(61, 255, 138, 0.03);
  --icon-bg: rgba(61, 255, 138, 0.1);
  --hover-fill: rgba(255, 90, 165, 0.1);
  --legal-bg: rgba(61, 255, 138, 0.1);
  --lang-sep: rgba(255, 90, 165, 0.4);
  --focus-ring: rgba(61, 255, 138, 0.18);
  --card-hover-shadow: 0 16px 50px rgba(61, 255, 138, 0.1), 0 8px 30px rgba(255, 90, 165, 0.1);
  --body-grad:
    radial-gradient(1100px 680px at 8% -8%, rgba(61, 255, 138, 0.16), transparent 50%),
    radial-gradient(900px 600px at 100% 4%, rgba(255, 90, 165, 0.16), transparent 46%),
    radial-gradient(700px 420px at 70% 100%, rgba(255, 122, 69, 0.1), transparent 50%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(61,255,138,0.16), rgba(255,90,165,0.16), rgba(255,122,69,0.1));
  --hero-glow: drop-shadow(-12px 0 28px rgba(61, 255, 138, 0.38)) drop-shadow(12px 0 28px rgba(255, 90, 165, 0.32));
  --brand-glow: drop-shadow(-6px 0 10px rgba(61, 255, 138, 0.3)) drop-shadow(6px 0 10px rgba(255, 90, 165, 0.28));
  --kicker-grad: linear-gradient(90deg, #3dff8a, #ff5aa5, #ff7a45);
  --theme-meta: #07080a;
}

html[data-theme="ice-emerald"] {
  --bg: #05090c;
  --bg-2: #071214;
  --card: rgba(8, 22, 28, 0.76);
  --card-2: rgba(8, 28, 22, 0.55);
  --stroke: rgba(92, 225, 255, 0.2);
  --stroke-strong: rgba(61, 255, 138, 0.45);
  --cyan: #5ce1ff;
  --cyan-2: #b4ffd4;
  --blue: #3dff8a;
  --text: #e8f8ff;
  --muted: #8aadb0;
  --btn-ink: #041418;
  --btn-fill: linear-gradient(120deg, #5ce1ff 0%, #5cffc5 50%, #3dff8a 100%);
  --btn-fill-hover: linear-gradient(120deg, #9af0ff 0%, #6affaa 100%);
  --glow: rgba(92, 225, 255, 0.28);
  --glow-2: rgba(61, 255, 138, 0.28);
  --nav-bg: rgba(5, 9, 12, 0.78);
  --dropdown-bg: #0a1818;
  --form-bg: rgba(6, 14, 16, 0.88);
  --form-bg-focus: rgba(8, 16, 18, 0.96);
  --grid: rgba(92, 225, 255, 0.03);
  --icon-bg: rgba(92, 225, 255, 0.08);
  --hover-fill: rgba(61, 255, 138, 0.1);
  --legal-bg: rgba(92, 225, 255, 0.08);
  --lang-sep: rgba(61, 255, 138, 0.4);
  --focus-ring: rgba(92, 225, 255, 0.16);
  --card-hover-shadow: 0 16px 50px rgba(92, 225, 255, 0.08), 0 8px 30px rgba(61, 255, 138, 0.1);
  --body-grad:
    radial-gradient(1100px 680px at 8% -8%, rgba(92, 225, 255, 0.16), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(61, 255, 138, 0.14), transparent 46%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(92,225,255,0.16), rgba(61,255,138,0.14));
  --hero-glow: drop-shadow(-12px 0 28px rgba(92, 225, 255, 0.35)) drop-shadow(12px 0 28px rgba(61, 255, 138, 0.32));
  --brand-glow: drop-shadow(-6px 0 10px rgba(92, 225, 255, 0.28)) drop-shadow(6px 0 10px rgba(61, 255, 138, 0.28));
  --kicker-grad: linear-gradient(90deg, #5ce1ff, #3dff8a);
  --theme-meta: #05090c;
}

html[data-theme="gold-sunset"] {
  --bg: #0c0806;
  --bg-2: #160c08;
  --card: rgba(28, 16, 8, 0.76);
  --card-2: rgba(36, 10, 16, 0.55);
  --stroke: rgba(232, 197, 71, 0.22);
  --stroke-strong: rgba(255, 90, 165, 0.45);
  --cyan: #e8c547;
  --cyan-2: #ffb3d4;
  --blue: #ff5aa5;
  --text: #fff4ea;
  --muted: #c4a898;
  --btn-ink: #1a1006;
  --btn-fill: linear-gradient(120deg, #e8c547 0%, #ff7a45 55%, #ff5aa5 100%);
  --btn-fill-hover: linear-gradient(120deg, #ffe9a3 0%, #ff8c5a 50%, #ff7ab8 100%);
  --glow: rgba(232, 197, 71, 0.34);
  --glow-2: rgba(255, 90, 165, 0.3);
  --nav-bg: rgba(12, 8, 6, 0.8);
  --dropdown-bg: #181008;
  --form-bg: rgba(16, 10, 6, 0.88);
  --form-bg-focus: rgba(20, 12, 8, 0.96);
  --grid: rgba(232, 197, 71, 0.035);
  --icon-bg: rgba(232, 197, 71, 0.1);
  --hover-fill: rgba(255, 90, 165, 0.1);
  --legal-bg: rgba(232, 197, 71, 0.1);
  --lang-sep: rgba(255, 90, 165, 0.4);
  --focus-ring: rgba(232, 197, 71, 0.18);
  --card-hover-shadow: 0 16px 50px rgba(232, 197, 71, 0.1), 0 8px 30px rgba(255, 90, 165, 0.1);
  --body-grad:
    radial-gradient(1100px 680px at 8% -8%, rgba(232, 197, 71, 0.18), transparent 50%),
    radial-gradient(900px 600px at 100% 4%, rgba(255, 90, 165, 0.16), transparent 46%),
    radial-gradient(700px 420px at 50% 110%, rgba(255, 122, 69, 0.1), transparent 50%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(232,197,71,0.18), rgba(255,122,69,0.12), rgba(255,90,165,0.14));
  --hero-glow: drop-shadow(-12px 0 28px rgba(232, 197, 71, 0.38)) drop-shadow(12px 0 28px rgba(255, 90, 165, 0.32));
  --brand-glow: drop-shadow(-6px 0 10px rgba(232, 197, 71, 0.3)) drop-shadow(6px 0 10px rgba(255, 90, 165, 0.28));
  --kicker-grad: linear-gradient(90deg, #e8c547, #ff7a45, #ff5aa5);
  --theme-meta: #0c0806;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--body-grad);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}
.bg-orbs {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
h1, h2, h3, h4, h5, .display, .navbar-brand, .footer-title, .stat-num {
  font-family: var(--display);
  letter-spacing: -0.02em;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-2); }
.text-muted { color: var(--muted) !important; }
.text-info { color: var(--cyan) !important; }
.site-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--stroke);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.brand-logo { height: 56px; width: auto; filter: var(--brand-glow); }
.navbar-nav .nav-link {
  color: var(--muted) !important;
  font-weight: 500;
  padding: 0.55rem 0.8rem !important;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--cyan) !important; }
.navbar-toggler { border-color: var(--stroke-strong); }
.dropdown-menu-dark { background: var(--dropdown-bg); }
.btn-ice {
  --bs-btn-color: var(--btn-ink);
  --bs-btn-bg: var(--cyan);
  --bs-btn-border-color: var(--cyan);
  --bs-btn-hover-bg: var(--cyan-2);
  --bs-btn-hover-border-color: var(--cyan-2);
  --bs-btn-hover-color: var(--btn-ink);
  --bs-btn-active-color: var(--btn-ink);
  --bs-btn-font-weight: 600;
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  background: var(--btn-fill);
  color: var(--btn-ink);
  border: 1px solid transparent;
  box-shadow: 0 0 24px var(--glow);
}
.btn-ice:hover, .btn-ice:focus, .btn-ice:active, .btn-ice:focus-visible {
  background: var(--btn-fill-hover);
  color: var(--btn-ink);
  border-color: transparent;
  box-shadow: 0 0 28px var(--glow), 0 0 16px var(--glow-2);
}
.btn-ghost {
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  color: var(--text);
  background: transparent;
  padding: 0.65rem 1.25rem;
  font-weight: 600;
}
.btn-ghost:hover { background: var(--hover-fill); color: var(--cyan); border-color: var(--cyan); }
.glass {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.28);
}
.hero { padding: 0 0 2.5rem; position: relative; }
.hero-logo { width: min(420px, 88vw); height: auto; filter: var(--hero-glow); }
.hero-visual-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #020308;
}
.hero-visual {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: min(58vw, 520px);
  margin: 0 auto;
  object-fit: cover;
  object-position: center center;
  border: 0;
  border-radius: 0;
  filter: var(--hero-glow);
  background: #020308;
}
.hero-copy { padding: 2rem 0 0.5rem; }
.hero-copy .lead { max-width: 38rem; }
.hero-services-line {
  max-width: min(56rem, 100%);
  margin: 0 auto 0.35rem;
  text-align: center;
  font-size: clamp(0.92rem, 1.55vw, 1.12rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--muted);
}
@media (min-width: 992px) {
  .hero-visual { height: min(42vw, 480px); border-radius: 0 0 24px 24px; }
}
@media (max-width: 575.98px) {
  .hero-visual { height: min(72vw, 340px); object-position: center 46%; }
}
.about-lockup { width: min(420px, 80vw); }
.svc-card-featured {
  position: relative;
  border-color: var(--stroke-strong);
  box-shadow: var(--card-hover-shadow);
  padding: 1.85rem 1.7rem;
  background: linear-gradient(165deg, var(--hover-fill), var(--card));
}
.svc-card-featured .svc-icon {
  width: 56px;
  height: 56px;
  font-size: 1.55rem;
}
.svc-featured-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--btn-ink);
  background: var(--btn-fill);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.85rem;
  width: fit-content;
  box-shadow: 0 0 16px var(--glow);
}
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 1.25rem 0 0.75rem;
}
.kicker {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  background-image: var(--kicker-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.section { padding: 4.25rem 0; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin-bottom: 0.5rem; }
.svc-card {
  height: 100%;
  padding: 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.svc-card:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-strong);
  box-shadow: var(--card-hover-shadow);
}
.svc-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--icon-bg);
  color: var(--cyan);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.price-pill {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--cyan);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  margin-top: auto;
  box-shadow: 0 0 12px var(--glow-2);
}
.why-item, .step, .quote {
  padding: 1.4rem;
  height: 100%;
}
.step-num {
  font-family: var(--display);
  color: var(--cyan);
  font-weight: 700;
  font-size: 1.4rem;
}
.stars { color: var(--cyan); letter-spacing: 0.1em; }
.cta-band {
  background: var(--cta-grad);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  padding: 2.4rem;
}
.site-footer {
  margin-top: 3rem;
  padding: 3rem 0 1.5rem;
  border-top: 1px solid var(--stroke);
  background: rgba(0,0,0,0.28);
}
.footer-logo { height: 88px; width: auto; filter: var(--brand-glow); }
.footer-title { color: var(--cyan); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; margin-bottom: 1rem; }
.footer-links a, .footer-contact a { color: var(--muted); }
.footer-links a:hover, .footer-contact a:hover { color: var(--cyan); }
.footer-contact li { margin-bottom: 0.4rem; color: var(--muted); }
.footer-contact i { color: var(--cyan); margin-right: 0.4rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--stroke); color: var(--muted); font-size: 0.9rem; }
.placeholder-note { font-size: 0.75rem; color: #c9a227; margin-top: 0.6rem; }
.form-control, .form-select, textarea.form-control {
  background: var(--form-bg);
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
}
.form-control:focus, .form-select:focus {
  background: var(--form-bg-focus);
  color: var(--text);
  border-color: var(--cyan);
  box-shadow: 0 0 0 0.2rem var(--focus-ring), 0 0 18px var(--glow-2);
}
.form-label { color: var(--muted); font-size: 0.85rem; }
.alert-ok { background: rgba(92, 255, 197, 0.1); border: 1px solid rgba(92,255,197,0.3); color: var(--ok); border-radius: 12px; }
.alert-bad { background: rgba(255, 107, 138, 0.1); border: 1px solid rgba(255,107,138,0.3); color: var(--danger); border-radius: 12px; }
.page-hero { padding: 3rem 0 1.5rem; }
.crumb { color: var(--muted); font-size: 0.85rem; }
.include-list { list-style: none; padding: 0; }
.include-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--stroke); }
.include-list li:before { content: "▹"; color: var(--cyan); margin-right: 0.5rem; }
.accordion-item { background: transparent; border-color: var(--stroke); color: var(--text); }
.accordion-button { background: var(--card); color: var(--text); }
.accordion-button:not(.collapsed) { background: var(--hover-fill); color: var(--cyan); box-shadow: none; }
.accordion-body { background: rgba(0,0,0,0.2); color: var(--muted); }
.accordion-button::after { filter: invert(1); }
@media (max-width: 991px) {
  .brand-logo { height: 46px; }
  .hero { padding-top: 2.5rem; }
  .navbar-collapse { padding: 1rem 0; }
}
.admin-body { background: var(--bg); }
.admin-shell { min-height: 100vh; }
.admin-side {
  width: 250px;
  background: rgba(6, 10, 18, 0.95);
  border-right: 1px solid var(--stroke);
  padding: 1.25rem 1rem;
}
.admin-side a {
  display: block;
  color: var(--muted);
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  margin-bottom: 0.2rem;
}
.admin-side a.active, .admin-side a:hover { background: var(--hover-fill); color: var(--cyan); }
.admin-main { flex: 1; padding: 1.75rem; }
.stat-card { padding: 1.2rem 1.3rem; }
.stat-num { font-size: 1.8rem; color: var(--cyan); }
.table-darkish { width: 100%; }
.table-darkish th, .table-darkish td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--stroke); vertical-align: top; }
.badge-new { background: var(--icon-bg); color: var(--cyan); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.75rem; }
.badge-arch { background: rgba(139,163,184,0.15); color: var(--muted); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.75rem; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(420px, 100%); padding: 2rem; }
.login-card img { height: 96px; width: auto; display: block; margin: 0 auto 1rem; filter: var(--brand-glow); }
.legal p { color: var(--muted); }
.legal h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.form-select option { background: var(--dropdown-bg); color: var(--text); }
.admin-shell { display: flex; }
@media (max-width: 767.98px) {
  .admin-main { padding: 1rem; }
}
.site-nav.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,0.35); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.navbar-nav .lang-switch a,
.lang-switch a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.15rem 0.2rem;
}
.navbar-nav .lang-switch a.active,
.navbar-nav .lang-switch a:hover,
.lang-switch a.active,
.lang-switch a:hover {
  color: var(--cyan) !important;
}
.lang-sep { color: var(--lang-sep); }
.legal-note {
  border-left: 3px solid var(--cyan);
  padding: 0.7rem 1rem;
  background: var(--legal-bg);
  color: var(--text);
  border-radius: 0 12px 12px 0;
  margin-bottom: 1.25rem;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.theme-group {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.theme-group-sep {
  width: 1px;
  height: 12px;
  background: var(--stroke-strong);
  opacity: 0.75;
}
.theme-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: inline-block;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28);
  vertical-align: middle;
  line-height: 0;
  flex: 0 0 auto;
}
.theme-dot:hover { transform: scale(1.12); }
.theme-dot.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--cyan);
}
.theme-dot[data-theme-set="ice"] { background: #5ce1ff; }
.theme-dot[data-theme-set="gold"] { background: #e8c547; }
.theme-dot[data-theme-set="emerald"] { background: #3dff8a; }
.theme-dot[data-theme-set="sunset"] { background: linear-gradient(135deg, #ff5aa5, #ff8c4a, #ffd36a); }
.theme-dot[data-theme-set="ice-gold"] { background: linear-gradient(90deg, #5ce1ff 50%, #e8c547 50%); }
.theme-dot[data-theme-set="ice-sunset"] { background: linear-gradient(90deg, #5ce1ff 50%, #ff5aa5 50%); }
.theme-dot[data-theme-set="gold-emerald"] { background: linear-gradient(90deg, #e8c547 50%, #3dff8a 50%); }
.theme-dot[data-theme-set="emerald-sunset"] { background: linear-gradient(90deg, #3dff8a 50%, #ff5aa5 50%); }
.theme-dot[data-theme-set="ice-emerald"] { background: linear-gradient(90deg, #5ce1ff 50%, #3dff8a 50%); }
.theme-dot[data-theme-set="gold-sunset"] { background: linear-gradient(90deg, #e8c547 50%, #ff5aa5 50%); }
.theme-dot[data-theme-set="3d"] { background: radial-gradient(circle at 30% 30%, #fff, #5ce1ff 40%, #3d8bff 70%, #041018); box-shadow: 2px 3px 0 rgba(0,0,0,0.45); }
@media (max-width: 991px) {
  .theme-switch { margin: 0.35rem 0; }
}

.svc-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.25);
}
.svc-card.has-img .svc-icon { margin-bottom: 0; }
.svc-detail-img {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  filter: var(--brand-glow);
}
.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  display: block;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.gallery-item a:hover img {
  transform: translateY(-3px);
  border-color: var(--stroke-strong);
}
.admin-media-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  display: block;
  background: rgba(0,0,0,0.25);
}
.logo-preview {
  display: block;
  max-height: 88px;
  width: auto;
  max-width: 100%;
  background: rgba(0,0,0,0.35);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
}

.back-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  top: auto;
  z-index: 1080;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--btn-fill);
  color: var(--btn-ink);
  box-shadow: 0 14px 40px var(--glow), 0 0 0 4px var(--focus-ring);
  border: 2px solid var(--stroke-strong);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.back-to-top:hover {
  background: var(--btn-fill-hover);
  color: var(--btn-ink);
  transform: translateY(-2px) scale(1.04);
}
.back-to-top i { font-size: 2rem; line-height: 1; font-weight: 700; }
@media (max-width: 991.98px) {
  .back-to-top { right: 1.25rem; bottom: 1.25rem; width: 60px; height: 60px; }
  .back-to-top i { font-size: 1.65rem; }
}
@media (max-width: 575.98px) {
  .back-to-top { right: 1rem; bottom: 1rem; width: 54px; height: 54px; }
}


/* ========== Site-wide 3D chrome / cyan glass ========== */
.glass {
  position: relative;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.08) 0%, transparent 42%),
    var(--card);
  box-shadow:
    0 16px 42px rgba(0,0,0,0.32),
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 0 0 1px var(--stroke);
  transform-style: preserve-3d;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.14) 0%, transparent 36%, transparent 62%, rgba(255,255,255,0.04) 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 46%),
    var(--nav-bg);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border-bottom: 1px solid var(--stroke-strong);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.38),
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 0 28px var(--glow-2);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.site-nav::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--kicker-grad);
  box-shadow: 0 0 18px var(--glow);
  pointer-events: none;
  opacity: 0.9;
}
.site-nav .brand-logo {
  height: 60px;
  filter: var(--brand-glow) drop-shadow(0 8px 16px rgba(0,0,0,0.45));
}
.site-nav .navbar-nav .nav-link {
  color: var(--muted) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.48rem 0.95rem !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  box-shadow: 0 6px 14px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.12) inset;
  margin: 0 0.12rem;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.site-nav .navbar-nav .nav-link:hover {
  color: var(--cyan) !important;
  border-color: var(--stroke-strong);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22), 0 0 16px var(--glow-2);
  transform: translateY(-1px);
}
.site-nav .navbar-nav .nav-link.active {
  color: var(--btn-ink) !important;
  background: var(--btn-fill);
  border-color: transparent;
  box-shadow: 0 8px 0 rgba(0,0,0,0.18), 0 0 22px var(--glow);
}
.site-nav .navbar-toggler {
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.2));
  box-shadow: 0 8px 16px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.12) inset;
  padding: 0.45rem 0.6rem;
}
.nav-mega {
  --bs-dropdown-bg: transparent;
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-hover-color: var(--cyan);
  --bs-dropdown-link-active-bg: transparent;
  min-width: min(440px, calc(100vw - 2rem));
  padding: 0.7rem;
  margin-top: 0.7rem !important;
  border-radius: 20px;
  border: 1px solid var(--stroke-strong);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.12) 0%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)),
    var(--dropdown-bg);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    0 28px 60px rgba(0,0,0,0.55),
    0 10px 0 rgba(0,0,0,0.18),
    0 0 32px var(--glow-2),
    0 1px 0 rgba(255,255,255,0.16) inset;
  transform-origin: top center;
  overflow: hidden;
}
.nav-mega::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 2px;
  background: var(--kicker-grad);
  box-shadow: 0 0 16px var(--glow);
  pointer-events: none;
}
.nav-mega.show {
  animation: megaIn 0.38s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: perspective(820px) rotateX(-22deg) translateY(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: perspective(820px) rotateX(0deg) translateY(0) scale(1);
  }
}
@media (min-width: 992px) {
  .nav-mega.show {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.45rem;
  }
  .nav-mega > li:first-child,
  .nav-mega > li:nth-child(2) {
    grid-column: 1 / -1;
  }
}
.nav-mega .dropdown-divider {
  margin: 0.35rem 0.2rem 0.45rem;
  border-color: var(--stroke-strong);
  opacity: 0.7;
}
.nav-mega .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  box-shadow: 0 8px 16px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.1) inset;
  padding: 0.62rem 0.85rem;
  margin: 0;
  white-space: normal;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.nav-mega .dropdown-item i {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-size: 1.05rem;
  text-shadow: 0 0 12px var(--glow);
}
.nav-mega .dropdown-item:hover,
.nav-mega .dropdown-item:focus {
  color: var(--cyan) !important;
  background: var(--hover-fill);
  border-color: var(--stroke-strong);
  box-shadow: 0 12px 22px rgba(0,0,0,0.28), 0 0 18px var(--glow-2), 0 1px 0 rgba(255,255,255,0.16) inset;
  transform: translateY(-2px) translateZ(8px);
}
.nav-mega-all {
  justify-content: center;
  background: var(--btn-fill) !important;
  color: var(--btn-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 0 rgba(0,0,0,0.22), 0 0 22px var(--glow) !important;
}
.nav-mega-all i { color: var(--btn-ink); text-shadow: none; }
.nav-mega-all:hover,
.nav-mega-all:focus {
  color: var(--btn-ink) !important;
  background: var(--btn-fill-hover) !important;
  transform: translateY(-2px);
}
html[data-theme="3d"] .nav-mega {
  transform: perspective(820px) rotateX(8deg);
  box-shadow:
    0 28px 60px rgba(0,0,0,0.55),
    0 14px 0 rgba(0,0,0,0.28),
    0 0 32px var(--glow-2),
    0 1px 0 rgba(255,255,255,0.16) inset;
}
html[data-theme="3d"] .nav-mega.show {
  animation: megaIn3d 0.4s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}
@keyframes megaIn3d {
  from {
    opacity: 0;
    transform: perspective(820px) rotateX(-32deg) translateY(-14px);
  }
  to {
    opacity: 1;
    transform: perspective(820px) rotateX(4deg) translateY(0);
  }
}
html[data-theme="3d"] .nav-mega .dropdown-item {
  transform: perspective(500px) rotateX(8deg);
}
html[data-theme="3d"] .nav-mega .dropdown-item:hover,
html[data-theme="3d"] .nav-mega .dropdown-item:focus {
  transform: perspective(500px) rotateX(2deg) translateY(-2px) translateZ(10px);
}
@media (max-width: 991.98px) {
  .nav-mega {
    min-width: 0;
    width: 100%;
    margin-top: 0.45rem !important;
    transform: none;
  }
  .nav-mega.show,
  html[data-theme="3d"] .nav-mega,
  html[data-theme="3d"] .nav-mega.show {
    animation: none;
    transform: none;
    display: block !important;
  }
  html[data-theme="3d"] .nav-mega .dropdown-item { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega.show,
  html[data-theme="3d"] .nav-mega.show { animation: none; }
}
.theme-switch {
  background: rgba(0,0,0,0.38);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 0.38rem 0.62rem;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08);
  gap: 0.5rem;
}
.theme-dot {
  width: 14px;
  height: 14px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.35);
}
.theme-dot.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--cyan), 0 0 12px var(--glow);
}
.lang-switch {
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
.site-nav .btn-ice {
  box-shadow: 0 6px 0 rgba(0,0,0,0.22), 0 0 20px var(--glow);
}

.site-footer {
  margin-top: 3.5rem;
  padding: 2.4rem 0 1.4rem;
  border-top: 1px solid var(--stroke-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 28%),
    rgba(0,0,0,0.34);
  box-shadow: 0 -18px 40px rgba(0,0,0,0.22), 0 -1px 0 rgba(255,255,255,0.06) inset;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 2px;
  background: var(--kicker-grad);
  box-shadow: 0 0 16px var(--glow);
  opacity: 0.75;
}
.footer-panel {
  height: 100%;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.08), transparent 40%),
    var(--card);
  border: 1px solid var(--stroke);
  box-shadow: 0 16px 36px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;
  backdrop-filter: blur(16px);
}
.footer-title {
  background-image: var(--kicker-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-owner {
  font-family: var(--display);
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
}
.footer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-chip {
  display: inline-flex;
  align-items: center;
  color: var(--text) !important;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18));
  box-shadow: 0 6px 12px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1) inset;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.footer-chip:hover {
  color: var(--cyan) !important;
  border-color: var(--stroke-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.28), 0 0 16px var(--glow-2);
}

.svc-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}
.svc-card.has-img {
  padding: 0;
}
.svc-card.has-img .svc-card-img {
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--stroke);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
}
.svc-card-body {
  padding: 1.15rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.15rem;
}
.svc-card.has-img .svc-card-body .price-pill { margin-top: 0.65rem; }
.svc-card.has-img .d-flex { padding: 1.15rem 1.35rem 1.4rem; }
.svc-card-img[src*="laptop-reparatur"] { object-position: 50% 48%; }
.svc-card-img[src*="handyreparatur"] { object-position: 50% 46%; }
.svc-card-img[src*="webdesign"] { object-position: 50% 42%; }
.svc-card-img[src*="seo.jpg"] { object-position: 50% 46%; }
.svc-card-img[src*="visitenkarten"] { object-position: 50% 38%; }
.svc-card-img[src*="content-erstellung"] { object-position: 50% 44%; }
.svc-card-img[src*="software-installation"] { object-position: 50% 42%; }
.svc-card-img[src*="navi-updates"] { object-position: 50% 48%; }
.svc-detail-img[src*="laptop-reparatur"] { object-position: 50% 48%; }
.svc-detail-img[src*="handyreparatur"] { object-position: 50% 46%; }
.svc-detail-img[src*="webdesign"] { object-position: 50% 42%; }
.svc-detail-img[src*="seo.jpg"] { object-position: 50% 46%; }
.svc-detail-img[src*="visitenkarten"] { object-position: 50% 38%; }
.svc-detail-img[src*="content-erstellung"] { object-position: 50% 44%; }
.svc-detail-img[src*="software-installation"] { object-position: 50% 42%; }
.svc-detail-img[src*="navi-updates"] { object-position: 50% 48%; }

.svc-detail-frame {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--stroke-strong);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 28px var(--glow-2);
  margin-top: 1.25rem;
}
.svc-detail-frame .svc-detail-img {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  /* height:auto e obligatoriu: pozele poarta atributele width/height ale
     fisierului (1536x864), iar cat timp inaltimea e fixata, aspect-ratio
     e ignorat complet. Poza lata ajungea intr-o cutie verticala si se
     taia din ea o fasie ingusta — parea "necentrata". */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.gallery-item {
  transform-style: preserve-3d;
  border-radius: 16px;
}
.gallery-item img {
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}

.page-card, .contact-panel, .legal-slab {
  position: relative;
  transform-style: preserve-3d;
}
.legal-slab {
  padding: 1.75rem 1.6rem;
}
.legal-slab h2:first-of-type { margin-top: 0.25rem; }
.cta-band {
  box-shadow: 0 20px 44px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.1) inset;
  transform-style: preserve-3d;
}

.about-hero { overflow: visible; perspective: 1400px; }
.about-lockup-stage {
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
  min-height: 240px;
}
.about-lockup-stage::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: 42%;
  background: radial-gradient(circle, var(--glow), transparent 68%);
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.about-lockup-frame {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  display: inline-block;
  width: 100%;
}
.about-lockup {
  display: block;
  width: min(520px, 100%);
  height: auto;
  max-height: 440px;
  margin-left: auto;
  margin-right: 0;
  object-fit: contain;
  object-position: center;
  border-radius: 22px;
  filter: var(--hero-glow);
  transform-origin: center center;
  animation: aboutEnterRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes aboutEnterRight {
  0% {
    opacity: 0;
    transform: translateX(70vw) rotateY(-38deg) rotateX(8deg) scale(0.84);
    filter: drop-shadow(0 0 0 transparent);
  }
  62% {
    opacity: 1;
    transform: translateX(-4%) rotateY(9deg) rotateX(2deg) scale(1.04);
    filter: drop-shadow(-28px 18px 40px rgba(92, 225, 255, 0.55));
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotateY(-8deg) rotateX(4deg) scale(1);
    filter: var(--hero-glow);
  }
}
.about-lockup.is-settled {
  animation: none;
  transform: rotateY(-8deg) rotateX(4deg);
}
html.no-pointer-tilt .about-lockup.is-settled {
  animation: aboutIdleFloat 5.6s ease-in-out infinite;
}
@keyframes aboutIdleFloat {
  0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(4deg); }
  50% { transform: translateY(-11px) rotateY(-3deg) rotateX(2deg); }
}

.craft-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
}
.craft-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text) !important;
  font-weight: 650;
  font-size: 0.86rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.16));
  box-shadow: 0 8px 16px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.12) inset;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.craft-chip:hover {
  color: var(--cyan) !important;
  border-color: var(--stroke-strong);
  transform: translateY(-2px) rotateX(8deg);
  box-shadow: 0 12px 22px rgba(0,0,0,0.28), 0 0 18px var(--glow);
}

.js-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  touch-action: pan-y;
}
.svc-card:hover,
.why-item:hover,
.step:hover,
.quote:hover {
  border-color: var(--stroke-strong);
  box-shadow: var(--card-hover-shadow);
}

img.about-lockup.hero-visual {
  width: min(520px, 100%);
  height: auto !important;
  max-height: 440px;
  object-fit: contain;
  object-position: center center;
  border-radius: 22px;
  border: 0;
  background: transparent;
}
.reveal {
  opacity: 0;
  translate: 0 26px;
}
.reveal.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.no-pointer-tilt .svc-card,
html.no-pointer-tilt .why-item,
html.no-pointer-tilt .step,
html.no-pointer-tilt .quote,
html.no-pointer-tilt .gallery-item,
html.no-pointer-tilt .page-card,
html.no-pointer-tilt .contact-panel,
html.no-pointer-tilt .footer-panel,
html.no-pointer-tilt .cta-band,
html.no-pointer-tilt .legal-slab {
  animation: cardFloat 5.8s ease-in-out infinite;
}
html.no-pointer-tilt .why-item:nth-child(2),
html.no-pointer-tilt .col-md-6:nth-child(2) .why-item,
html.no-pointer-tilt .col-lg-3:nth-child(2) > * { animation-delay: 0.4s; }
html.no-pointer-tilt .col-lg-3:nth-child(3) > * { animation-delay: 0.8s; }
html.no-pointer-tilt .col-lg-3:nth-child(4) > * { animation-delay: 1.2s; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

html[data-theme="3d"] .site-nav .navbar-nav .nav-link {
  transform: perspective(420px) rotateX(10deg);
  box-shadow: 0 8px 0 rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.16) inset, 0 0 12px var(--glow-2);
}
html[data-theme="3d"] .site-nav .navbar-nav .nav-link:hover {
  transform: perspective(420px) rotateX(4deg) translateY(-1px);
}
html[data-theme="3d"] .site-nav .navbar-nav .nav-link.active {
  transform: perspective(420px) rotateX(6deg);
}
html[data-theme="3d"] .theme-switch {
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.55), 0 8px 0 rgba(0,0,0,0.25), 0 0 18px var(--glow-2);
}
html[data-theme="3d"] .footer-chip,
html[data-theme="3d"] .craft-chip {
  transform: perspective(400px) rotateX(10deg);
}

@media (max-width: 991.98px) {
  .site-nav .brand-logo { height: 48px; }
  .site-nav .navbar-nav .nav-link { margin: 0.18rem 0; }
  .theme-switch { margin: 0.45rem 0; flex-wrap: wrap; }
  .about-lockup { margin: 0 auto; }
  .legal-slab { padding: 1.25rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-lockup,
  .about-lockup.is-settled,
  html.no-pointer-tilt .about-lockup.is-settled {
    animation: none !important;
    transform: none;
  }
  html.no-pointer-tilt .svc-card,
  html.no-pointer-tilt .why-item,
  html.no-pointer-tilt .step,
  html.no-pointer-tilt .quote,
  html.no-pointer-tilt .gallery-item,
  html.no-pointer-tilt .page-card,
  html.no-pointer-tilt .contact-panel,
  html.no-pointer-tilt .footer-panel,
  html.no-pointer-tilt .cta-band,
  html.no-pointer-tilt .legal-slab {
    animation: cardFloat 7s ease-in-out infinite;
  }
  .reveal { opacity: 1; translate: 0 0; transform: none; }
  html { scroll-behavior: auto; }
}


/* ===== 3D type system (site-wide, public) ===== */
body {
  letter-spacing: 0.011em;
}
h1, h2, h3, h4, h5,
.section-title,
.footer-title,
.hero h1,
.page-hero h1 {
  text-shadow: var(--relief-title);
}
.page-hero h1,
.hero h1 {
  text-shadow: var(--relief-hero);
}
.kicker {
  filter: var(--relief-kicker);
}
.lead,
.folio-lead,
.page-hero .lead,
.hero-services-line {
  color: color-mix(in srgb, var(--text) 82%, var(--cyan-2) 18%) !important;
  text-shadow: var(--relief-lead);
  letter-spacing: 0.012em;
}
.text-muted {
  color: color-mix(in srgb, var(--muted) 86%, var(--cyan-2) 14%) !important;
  text-shadow: var(--relief-muted);
}
p, li, .crumb, .footer-contact, .footer-owner {
  text-shadow: var(--relief-body);
}
.site-nav .nav-link {
  text-shadow: var(--relief-nav);
}
.nav-mega .dropdown-item span,
.nav-mega-all span {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.price-pill {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 12px var(--glow);
}

/* Relieful de mai sus e calculat pentru scris deschis pe fundal inchis:
   reflex alb sus, umbra neagra dedesubt. Pe elementele cu ink inchis
   asezat pe pastila deschisa (buton activ din meniu, butoanele pline)
   aceeasi umbra iese negru-pe-negru si scrisul apare dublat, greu de
   citit. text-shadow se si mosteneste, deci un buton dintr-un paragraf
   prinde umbra paragrafului. Aici se opreste, explicit. */
.btn,
.btn-ice,
.btn-ghost,
.btn-ice *,
.navbar-nav .nav-link.active,
.lang-switch a,
.theme-dots * {
  text-shadow: none;
}

@keyframes typeRise {
  from {
    opacity: 0;
    transform: perspective(900px) translateZ(-88px) rotateX(16deg) translateY(16px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) translateZ(0) rotateX(0deg) translateY(0);
  }
}
@keyframes titleIdleGlow {
  0%, 100% { filter: drop-shadow(0 0 6px var(--glow-2)); }
  50% { filter: drop-shadow(0 0 18px var(--glow)); }
}
.page-hero h1,
.hero h1,
.type-rise {
  transform-origin: left center;
  animation: typeRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both, titleIdleGlow 5.2s ease-in-out 1.05s infinite;
}
.hero h1 { transform-origin: center center; }
.page-hero .lead,
.page-hero .type-rise.lead,
.folio-lead {
  animation: typeRise 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.page-hero .kicker {
  animation: typeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.form-control,
.form-select,
textarea.form-control {
  transform: perspective(700px) rotateX(0deg);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
.form-chrome:focus {
  transform: perspective(700px) rotateX(5deg) translateZ(8px);
  border-color: var(--cyan);
  box-shadow:
    0 0 0 0.2rem var(--focus-ring),
    0 12px 26px rgba(0, 0, 0, 0.38),
    0 0 22px var(--glow),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

/* ===== Portfolio cards + 3D fly-out stage ===== */
.folio-lead { max-width: 40rem; margin-bottom: 0.35rem; }
.folio-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  background: var(--card);
  border: 1px solid var(--stroke);
  transform-style: preserve-3d;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.folio-card:hover {
  border-color: var(--stroke-strong);
  box-shadow: var(--card-hover-shadow);
}
.folio-card-media {
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.28);
}
.folio-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.folio-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.05rem 1.2rem 1.25rem;
}
.folio-chip {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--btn-ink);
  background: var(--btn-fill);
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
  margin-bottom: 0.35rem;
  box-shadow: 0 0 14px var(--glow);
}
.folio-client {
  color: color-mix(in srgb, var(--muted) 80%, var(--cyan-2) 20%);
  font-size: 0.86rem;
}
html[data-theme="3d"] .folio-card {
  transform: perspective(980px) rotateX(6deg) translateZ(0);
  transform-style: preserve-3d;
  box-shadow: 0 22px 40px rgba(0,0,0,0.38), 0 2px 0 rgba(255,255,255,0.08) inset, 0 0 28px var(--glow-2);
}

body.folio-lock {
  overflow: hidden;
}
.folio-stage {
  position: fixed;
  inset: 0;
  z-index: 2000;
  perspective: 1400px;
  pointer-events: auto;
}
.folio-stage-bg {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 14, 0.78);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.folio-stage.is-in .folio-stage-bg { opacity: 1; }
.folio-deck {
  position: fixed;
  transform-style: preserve-3d;
  transform-origin: center center;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.92), rgba(4, 8, 16, 0.96));
  border: 1px solid var(--stroke-strong);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 40px var(--glow),
    0 1px 0 rgba(255, 255, 255, 0.16) inset;
  overflow: visible;
  transition:
    top 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    left 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s ease;
  will-change: top, left, width, height, transform;
}
.folio-flow {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  perspective: 1400px;
}
.folio-slide {
  position: absolute;
  inset: 8%;
  border-radius: 14px;
  overflow: hidden;
  background: #05070c;
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--glow-2);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, filter 0.45s ease;
  opacity: 0;
  pointer-events: none;
}
.folio-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.folio-slide.is-active {
  opacity: 1;
  transform: translateZ(90px) rotateY(0) scale(1);
  z-index: 4;
  pointer-events: auto;
  filter: brightness(1.05);
}
.folio-slide.is-prev {
  opacity: 0.55;
  transform: translateX(-46%) rotateY(40deg) translateZ(-140px) scale(0.78);
  z-index: 2;
  filter: brightness(0.7);
}
.folio-slide.is-next {
  opacity: 0.55;
  transform: translateX(46%) rotateY(-40deg) translateZ(-140px) scale(0.78);
  z-index: 2;
  filter: brightness(0.7);
}
.folio-slide.is-far {
  opacity: 0;
  transform: translateZ(-280px) scale(0.6);
  z-index: 1;
}
.folio-meta {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0.85rem;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.folio-meta strong { display: block; }
.folio-count {
  font-variant-numeric: tabular-nums;
  color: var(--cyan-2);
  font-weight: 650;
  letter-spacing: 0.08em;
}
.folio-nav,
.folio-close {
  position: absolute;
  z-index: 7;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--stroke-strong);
  background: rgba(6, 12, 22, 0.72);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 16px var(--glow-2);
  backdrop-filter: blur(10px);
}
.folio-nav:hover,
.folio-close:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}
.folio-prev { left: -0.4rem; top: 50%; transform: translateY(-50%); }
.folio-next { right: -0.4rem; top: 50%; transform: translateY(-50%); }
.folio-close { top: -0.55rem; right: -0.55rem; }
.folio-nav[hidden] { display: none; }

html.no-pointer-tilt .folio-card {
  animation: cardFloat 5.8s ease-in-out infinite;
}

@media (max-width: 767.98px) {
  .folio-prev { left: 0.2rem; }
  .folio-next { right: 0.2rem; }
  .folio-slide.is-prev,
  .folio-slide.is-next { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero h1,
  .hero h1,
  .page-hero .lead,
  .page-hero .kicker,
  .type-rise,
  .folio-lead {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none;
  }
  .folio-deck,
  .folio-slide,
  .folio-stage-bg {
    transition: opacity 0.25s ease !important;
  }
}

/* ---- Sprachhinweis -------------------------------------------------
   Frueher hat die Seite bei fremder Herkunft die Sprache gewechselt und
   neu geladen. Jetzt bleibt der Inhalt stehen und es kommt nur ein
   Vorschlag - die Adresse entscheidet ueber die Sprache, nicht die IP. */
.lang-hint {
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .92rem;
}
.lang-hint .container {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  flex-wrap: wrap;
}
.lang-hint a {
  color: inherit;
  font-weight: 600;
  text-underline-offset: 3px;
}
.lang-hint button {
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  opacity: .6;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.lang-hint button:hover { opacity: 1; }

/* H1 der Startseite: Marke gross, darunter die Leistung samt Ort.
   Vorher stand dort nur der Firmenname - fuer jeden, der nicht nach dem
   Namen sucht, sagte die wichtigste Ueberschrift der Seite nichts aus. */
.hero-copy h1 { display: flex; flex-direction: column; gap: .35rem; }
.hero-copy h1 .hero-brand { display: block; }
.hero-copy h1 .hero-claim {
  display: block;
  font-size: clamp(.95rem, 2.2vw, 1.25rem);
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .82;
}

/* ---- Wasserzeichen -------------------------------------------------
   Die Bildmarke steht als ruhiger Schleier hinter der Seite. Sie liegt
   fest im Blickfeld, scrollt also nicht mit, und faengt keine Klicks ab.
   Als Kind-Pseudoelement von body zeichnet z-index -1 sie ueber den
   Seitenhintergrund, aber unter allen Inhalt.

   Imaginea, marimea, pozitia si cat de tare se vede sunt variabile.
   Valorile scrise aici ca rezerva sunt exact cele de dinainte, deci fara
   nimic setat in panou pagina arata neschimbat. Panoul scrie doar ce
   schimba, intr-un <style> in capul paginii. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--wm-image, url("../img/logo-watermark.png"));
  background-repeat: no-repeat;
  background-position: center var(--wm-pos, 42%);
  background-size: min(var(--wm-size, 78vmin), var(--wm-cap, 820px));
  /* Cat de tare se vede filigranul. Peste 0.10 incepe sa concureze cu
     textul; sub 0.04 practic dispare. */
  opacity: var(--wm-opacity, 0.07);
}
@media (max-width: 700px) {
  body::before {
    background-size: min(var(--wm-size-sm, 96vmin), var(--wm-cap-sm, 460px));
    opacity: var(--wm-opacity-sm, 0.05);
  }
}

/* Modul „acoperit": poza umple ecranul in loc sa stea ca filigran in
   mijloc. Plafonul de 820px dispare, altfel o fotografie s-ar vedea ca un
   timbru in mijlocul paginii. Regula sta dupa cea pentru telefon si are
   selectorul mai greu, deci acopera si pe ecran mic. */
html[data-bg="acoperit"] body::before {
  background-size: cover;
  background-position: center center;
}

/* Fundal oprit din panou. */
html[data-bg="off"] body::before { display: none; }

/* ---- Referenzen ------------------------------------------------------ */
.folio-card { overflow: hidden; border-radius: 14px; }
.folio-card-frame {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--stroke);
}
.folio-card-frame img,
.folio-card-frame picture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .4s ease;
}
.folio-card:hover .folio-card-frame img { transform: scale(1.03); }
.folio-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }

/* ---- Preisrechner ---------------------------------------------------- */
.quote-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  cursor: pointer; margin: 0;
  transition: border-color .15s ease, background .15s ease;
}
.quote-row:hover { border-color: var(--cyan); }
.quote-label { flex: 1 1 auto; font-size: .94rem; }
.quote-price { font-weight: 600; white-space: nowrap; }
.quote-row .qty { width: 66px; padding: 4px 6px; text-align: center;
  background: transparent; color: inherit; border: 1px solid var(--stroke); border-radius: 6px; }
.quote-incl { display: none; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cyan); white-space: nowrap; }
/* Im Paket enthalten: angehakt, gesperrt, kostet nichts extra. */
.quote-row.is-included { opacity: .72; cursor: default; border-color: var(--cyan); }
.quote-row.is-included .quote-price { display: none; }
.quote-row.is-included .quote-incl { display: inline; }

.pkg-pick { display: block; cursor: pointer; border-radius: 14px; }
.pkg-pick.featured { border-color: var(--cyan); }
.quote-sum { position: sticky; bottom: 12px; }
.quote-grand { font-size: 1.15rem; font-weight: 700; margin-top: 8px;
  padding-top: 10px; border-top: 1px solid var(--stroke); }

/* ---- Reparaturstand -------------------------------------------------- */
.repair-flow { list-style: none; margin: 0; padding: 0; }
.repair-flow li {
  position: relative;
  padding: 0 0 14px 26px;
  color: var(--muted);
  font-size: .95rem;
}
.repair-flow li::before {
  content: "";
  position: absolute; left: 3px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--stroke); background: transparent;
}
/* Linia dintre pasi, nu si sub ultimul */
.repair-flow li::after {
  content: "";
  position: absolute; left: 8px; top: 18px; bottom: 0;
  width: 2px; background: var(--stroke);
}
.repair-flow li:last-child::after { display: none; }
.repair-flow li.done { color: var(--text); opacity: .75; }
.repair-flow li.done::before { background: var(--cyan); border-color: var(--cyan); }
.repair-flow li.now { color: var(--text); font-weight: 600; }
.repair-flow li.now::before {
  background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 22%, transparent);
}

/* ============================================================
   TEMA: TECHNIKER  (direcția 03)
   Fisa de diagnostic. Alb tehnic, monospatiat, colturi drepte.
   Tema deschisa — relieful 3D se stinge, altfel iese umbra neagra
   sub scris negru, exact problema de la butoane.
   ============================================================ */
html[data-theme="technik"] {
  --bg: #fbfbfc;
  --bg-2: #f4f5f7;
  --card: #ffffff;
  --card-2: #f7f8fa;
  --stroke: #e3e5ea;
  --stroke-strong: #c9ccd4;
  --cyan: #0f62fe;
  --cyan-2: #0043ce;
  --blue: #0f62fe;
  --text: #14161a;
  --muted: #5a616b;
  --danger: #da1e28;
  --ok: #198038;
  --radius: 0px;
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --display: "IBM Plex Sans", system-ui, sans-serif;
  --btn-ink: #ffffff;
  --btn-fill: #0f62fe;
  --btn-fill-hover: #0043ce;
  --glow: rgba(15, 98, 254, 0.14);
  --glow-2: rgba(15, 98, 254, 0.1);
  --nav-bg: rgba(255, 255, 255, 0.94);
  --dropdown-bg: #ffffff;
  --form-bg: #ffffff;
  --form-bg-focus: #ffffff;
  --grid: rgba(20, 22, 26, 0.04);
  --icon-bg: rgba(15, 98, 254, 0.08);
  --hover-fill: rgba(15, 98, 254, 0.06);
  --legal-bg: rgba(15, 98, 254, 0.06);
  --lang-sep: #c9ccd4;
  --focus-ring: rgba(15, 98, 254, 0.25);
  --card-hover-shadow: 0 10px 28px rgba(20, 22, 26, 0.1);
  --body-grad: var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(15,98,254,0.06), rgba(15,98,254,0.02));
  --hero-glow: none;
  --brand-glow: none;
  --kicker-grad: linear-gradient(90deg, #0f62fe, #0043ce);
  --theme-meta: #fbfbfc;

  --relief-title: none;
  --relief-hero: none;
  --relief-lead: none;
  --relief-muted: none;
  --relief-body: none;
  --relief-nav: none;
  --relief-kicker: none;
}
/* Numerele si etichetele scurte primesc monospatiatul: de acolo vine tonul. */
html[data-theme="technik"] .kicker,
html[data-theme="technik"] .price-pill,
html[data-theme="technik"] .crumb,
html[data-theme="technik"] .stat-num,
html[data-theme="technik"] .site-nav .nav-link {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
}
html[data-theme="technik"] .glass,
html[data-theme="technik"] .card {
  backdrop-filter: none;
  box-shadow: none;
}

/* ============================================================
   TEMA: BAYERN  (direcția 04)
   Fildes, verde adanc si alama. Titluri cu serife, colturi rotunde.
   Tot tema deschisa, deci fara relief.
   ============================================================ */
html[data-theme="bayern"] {
  --bg: #fdfaf3;
  --bg-2: #f7f2e6;
  --card: #ffffff;
  --card-2: #fbf7ee;
  --stroke: #e6e0cd;
  --stroke-strong: #c4b98f;
  --cyan: #1f3d2b;
  --cyan-2: #2c5540;
  --blue: #8a6d2f;
  --text: #1c2b21;
  --muted: #5f5a49;
  --danger: #9c3024;
  --ok: #2c5540;
  --radius: 14px;
  --font: "Inter", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --btn-ink: #fdfaf3;
  --btn-fill: #1f3d2b;
  --btn-fill-hover: #2c5540;
  --glow: rgba(138, 109, 47, 0.16);
  --glow-2: rgba(31, 61, 43, 0.12);
  --nav-bg: rgba(253, 250, 243, 0.92);
  --dropdown-bg: #ffffff;
  --form-bg: #ffffff;
  --form-bg-focus: #ffffff;
  --grid: rgba(31, 61, 43, 0.035);
  --icon-bg: rgba(138, 109, 47, 0.1);
  --hover-fill: rgba(31, 61, 43, 0.06);
  --legal-bg: rgba(138, 109, 47, 0.08);
  --lang-sep: #c4b98f;
  --focus-ring: rgba(31, 61, 43, 0.2);
  --card-hover-shadow: 0 14px 34px rgba(31, 61, 43, 0.12);
  --body-grad:
    radial-gradient(900px 500px at 15% -10%, rgba(138, 109, 47, 0.08), transparent 55%),
    var(--bg);
  --cta-grad: linear-gradient(120deg, rgba(138,109,47,0.1), rgba(31,61,43,0.05));
  --hero-glow: drop-shadow(0 10px 24px rgba(31, 61, 43, 0.18));
  --brand-glow: none;
  --kicker-grad: linear-gradient(90deg, #8a6d2f, #1f3d2b);
  --theme-meta: #fdfaf3;

  --relief-title: none;
  --relief-hero: none;
  --relief-lead: none;
  --relief-muted: none;
  --relief-body: none;
  --relief-nav: none;
  --relief-kicker: none;
}
html[data-theme="bayern"] .glass,
html[data-theme="bayern"] .card {
  backdrop-filter: none;
}
html[data-theme="bayern"] .price-pill {
  background: #f6efdc;
  color: #8a6d2f;
}

/* Imaginea de hero e o poza cu fundal negru, facuta pentru temele inchise.
   Pe fundal deschis ar fi un bloc negru in mijlocul paginii. In machetele
   03 si 04 hero-ul era oricum tipografic, nu poza — deci o scoatem si lasam
   titlul sa duca pagina. Logo-urile din antet au variante decupate pe alfa,
   in assets/img/themes/technik|bayern/. */
html[data-theme="technik"] .hero-visual-wrap,
html[data-theme="bayern"] .hero-visual-wrap {
  display: none;
}
html[data-theme="technik"] .hero,
html[data-theme="bayern"] .hero {
  padding-top: 3.5rem;
}
html[data-theme="technik"] .hero-logo,
html[data-theme="bayern"] .hero-logo {
  width: min(280px, 62vw);
}

/* ============================================================
   TEMA: HALO  (direcția 06 — futurist)
   Fundal aproape negru, grila abia vizibila, mov si verde-menta.
   Diferenta fata de temele vechi: acolo efectul e RELIEF (scris scos
   in afara, cu umbre). Aici efectul e LUMINA — titlurile raman plate
   si clare, iar culoarea arde doar pe cifre, linii si accente.
   Deci relieful se stinge, desi tema e inchisa.
   ============================================================ */
html[data-theme="halo"] {
  --bg: #08090d;
  --bg-2: #0c0e14;
  --card: rgba(111, 92, 255, 0.05);
  --card-2: rgba(111, 92, 255, 0.03);
  --stroke: rgba(232, 234, 242, 0.1);
  --stroke-strong: rgba(111, 92, 255, 0.45);
  --cyan: #00f0c0;
  --cyan-2: #6f5cff;
  --blue: #6f5cff;
  --text: #e8eaf2;
  --muted: #8d93ab;
  --danger: #ff5c7c;
  --ok: #00f0c0;
  --radius: 10px;
  --font: "Space Grotesk", Inter, system-ui, sans-serif;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --btn-ink: #08090d;
  --btn-fill: #00f0c0;
  --btn-fill-hover: #6f5cff;
  --glow: rgba(111, 92, 255, 0.3);
  --glow-2: rgba(0, 240, 192, 0.22);
  --nav-bg: rgba(8, 9, 13, 0.82);
  --dropdown-bg: #0d0f16;
  --form-bg: rgba(255, 255, 255, 0.03);
  --form-bg-focus: rgba(111, 92, 255, 0.07);
  --grid: rgba(111, 92, 255, 0.07);
  --icon-bg: rgba(111, 92, 255, 0.1);
  --hover-fill: rgba(111, 92, 255, 0.1);
  --legal-bg: rgba(111, 92, 255, 0.08);
  --lang-sep: rgba(232, 234, 242, 0.25);
  --focus-ring: rgba(111, 92, 255, 0.3);
  --card-hover-shadow: 0 18px 50px rgba(111, 92, 255, 0.18);
  --body-grad:
    radial-gradient(1000px 600px at 25% -10%, rgba(111, 92, 255, 0.16), transparent 55%),
    radial-gradient(800px 500px at 95% 5%, rgba(0, 240, 192, 0.08), transparent 50%),
    var(--bg);
  --cta-grad: linear-gradient(100deg, rgba(111,92,255,0.16), rgba(0,240,192,0.08));
  --hero-glow: drop-shadow(0 0 48px rgba(111, 92, 255, 0.32));
  --brand-glow: drop-shadow(0 0 14px rgba(111, 92, 255, 0.4));
  --kicker-grad: linear-gradient(90deg, #6f5cff, #00f0c0);
  --theme-meta: #08090d;

  /* Lumina, nu relief: titlurile raman plate. */
  --relief-title: none;
  --relief-hero: none;
  --relief-lead: none;
  --relief-muted: none;
  --relief-body: none;
  --relief-nav: none;
  --relief-kicker: drop-shadow(0 0 10px rgba(0, 240, 192, 0.35));
}
/* Cifrele si codurile sunt eroul paginii: le dam monospatiatul. */
html[data-theme="halo"] .kicker,
html[data-theme="halo"] .price-pill,
html[data-theme="halo"] .crumb,
html[data-theme="halo"] .stat-num,
html[data-theme="halo"] .site-nav .nav-link {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.03em;
}
/* Butonul plin: degrade mov-menta, cu cerneala inchisa peste el. */
html[data-theme="halo"] .btn-ice {
  background: linear-gradient(100deg, #6f5cff, #00f0c0);
  border: 0;
}
html[data-theme="halo"] .btn-ice:hover {
  background: linear-gradient(100deg, #8577ff, #3af5d0);
}
/* Cardurile primesc o lumina slaba de sus, nu umbra de jos. */
html[data-theme="halo"] .glass,
html[data-theme="halo"] .card {
  background: linear-gradient(180deg, rgba(111, 92, 255, 0.08), rgba(8, 9, 13, 0));
  backdrop-filter: blur(10px);
}
html[data-theme="halo"] .price-pill {
  color: #00f0c0;
  background: rgba(0, 240, 192, 0.08);
}

/* ================================================================= */
/* Social si WhatsApp                                                 */
/* ================================================================= */

.wa-plutitor {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .18s ease, box-shadow .18s ease;
}

.wa-plutitor:hover,
.wa-plutitor:focus-visible {
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .45);
}

/* Pe telefon urca, ca sa nu stea peste butoanele din josul paginii. */
@media (max-width: 575.98px) {
  .wa-plutitor { right: 14px; bottom: 76px; width: 52px; height: 52px; }
}

@media print { .wa-plutitor { display: none; } }

.btn-wa {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

.btn-wa:hover, .btn-wa:focus { background: #1fbb5a; border-color: #1fbb5a; color: #fff; }

.social-rand {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.social-x {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.1rem;
  color: var(--social-culoare, currentColor);
  background: rgba(0, 0, 0, .04);
  transition: transform .16s ease, background .16s ease, color .16s ease;
}

.social-x:hover,
.social-x:focus-visible {
  transform: translateY(-2px);
  background: var(--social-culoare, rgba(0, 0, 0, .08));
  color: #fff;
}

.social-rand.mare .social-x { width: 52px; height: 52px; font-size: 1.4rem; }

.social-distribuie { display: inline-flex; gap: .4rem; }
.social-distribuie .social-x { width: 36px; height: 36px; font-size: .95rem; }