:root {
  --blue:#2b55ff;
  --blue2:#6f8bff;
  --bg:#0b111b;
  --bg-soft:#111a27;
  --surface:#141d2a;
  --surface-2:#1a2433;
  --surface-3:#101826;
  --text:#edf2ff;
  --muted:#9bacca;
  --line:rgba(255,255,255,.08);
  --shadow:0 20px 70px rgba(0,0,0,.30);
  --card-shadow:0 12px 34px rgba(0,0,0,.20);
}
body.light {
  --bg:#f4f7fb;
  --bg-soft:#ffffff;
  --surface:#ffffff;
  --surface-2:#f8faff;
  --surface-3:#eef3fb;
  --text:#111926;
  --muted:#67758e;
  --line:rgba(17,25,38,.08);
  --shadow:0 20px 70px rgba(29,42,70,.08);
  --card-shadow:0 12px 34px rgba(29,42,70,.08);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 82%, rgba(43,85,255,.18), transparent 18%),
    radial-gradient(circle at 85% 12%, rgba(111,139,255,.15), transparent 22%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 90%, #050b12 10%));
  transition:background .35s ease, color .35s ease;
  overflow-x:hidden;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(92,118,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,118,255,.12) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), transparent 90%);
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button, input { font:inherit; }
.container { width:min(1180px, calc(100% - 34px)); margin:0 auto; }

.header {
  position:sticky;
  top:0;
  z-index:40;
  padding:16px 0;
  backdrop-filter:blur(16px);
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 14px 12px 18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:var(--shadow);
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.brand img {
  width:158px;
  height:58px;
  object-fit:contain;
}
.brand-copy strong {
  display:block;
  font-size:1rem;
  letter-spacing:-.03em;
}
.brand-copy span {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.72rem;
}
.nav-links {
  display:flex;
  gap:22px;
  font-size:.92rem;
  font-weight:750;
  color:var(--muted);
}
.nav-links a:hover { color:var(--text); }
.nav-actions {
  display:flex;
  align-items:center;
  gap:10px;
}
.theme-toggle, .mail-btn {
  border-radius:14px;
  padding:11px 14px;
  font-weight:850;
  cursor:pointer;
}
.theme-toggle {
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
}
.mail-btn {
  border:0;
  color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow:0 12px 26px rgba(43,85,255,.26);
}
.menu-btn {
  display:none;
  width:46px;height:46px;border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
}

.hero {
  padding:38px 0 36px;
}
.hero-shell {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:36px;
  min-height:650px;
  background:
    radial-gradient(circle at 84% 20%, rgba(111,139,255,.14), transparent 24%),
    radial-gradient(circle at 18% 86%, rgba(43,85,255,.16), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--bg-soft) 100%, transparent));
  box-shadow:var(--shadow);
}
.hero-grid {
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:38px;
  align-items:center;
  min-height:650px;
  padding:56px;
}
.hero-copy .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#aebeff;
  margin-bottom:16px;
}
.hero-copy .eyebrow::before {
  content:"";
  width:24px;height:2px;background:var(--blue2);
}
.hero-copy h1 {
  margin:0;
  font-size:clamp(3rem, 7vw, 6.3rem);
  line-height:.92;
  letter-spacing:-.065em;
}
.hero-copy p {
  margin:20px 0 0;
  max-width:520px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
}
.hero-tags {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}
.hero-tags span {
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-2) 88%, transparent);
  color:var(--muted);
  font-size:.85rem;
  font-weight:800;
}
.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:16px;
  padding:14px 18px;
  font-weight:850;
  cursor:pointer;
}
.btn.primary {
  color:#fff;
  border:0;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow:0 12px 28px rgba(43,85,255,.25);
}
.btn.ghost {
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
}

.hero-visual {
  display:grid;
  place-items:center;
}
.logo-card {
  position:relative;
  width:min(100%, 680px);
  min-height:520px;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 76% 18%, rgba(106,134,255,.26), transparent 24%),
    radial-gradient(circle at 16% 86%, rgba(43,85,255,.22), transparent 22%),
    linear-gradient(135deg, #0a1220, #10192a 56%, #0b1322);
  box-shadow:0 28px 80px rgba(0,0,0,.32);
}
body.light .logo-card {
  background:
    radial-gradient(circle at 76% 18%, rgba(106,134,255,.26), transparent 24%),
    radial-gradient(circle at 16% 86%, rgba(43,85,255,.20), transparent 22%),
    linear-gradient(135deg, #0d1524, #111d30 58%, #0d1728);
}
.logo-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform:translateX(-100%);
  animation:sweep 6s ease-in-out infinite;
}
@keyframes sweep {
  0%,60% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
.blueprint-line {
  position:absolute;
  left:8%;
  right:8%;
  top:52px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(144,165,255,.45), transparent);
}
.blueprint-line::before, .blueprint-line::after {
  content:"";
  position:absolute;
  top:-7px;
  width:1px;height:15px;
  background:rgba(144,165,255,.46);
}
.blueprint-line::before { left:12%; }
.blueprint-line::after { right:14%; }
.logo-stage {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  min-height:520px;
  padding:38px 28px;
}
.logo-stage img {
  width:min(96%, 920px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34));
}
.hero-note {
  position:absolute;
  right:30px;
  bottom:26px;
  z-index:2;
  display:flex;
  gap:14px;
  color:#96a9ce;
  font-size:.82rem;
  font-weight:800;
}

.section {
  padding:34px 0 22px;
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:14px;
  margin-bottom:18px;
}
.section-head h2 {
  margin:0;
  font-size:clamp(2rem, 4vw, 3.6rem);
  line-height:.96;
  letter-spacing:-.05em;
}
.section-head .sub {
  color:var(--muted);
  font-weight:750;
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.card {
  border:1px solid var(--line);
  border-radius:26px;
  background:color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:var(--card-shadow);
}
.service-card {
  position:relative;
  overflow:hidden;
  min-height:228px;
  padding:24px;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card:hover {
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.22);
  border-color:rgba(112,138,255,.30);
}
.service-card::after {
  content:"";
  position:absolute;
  right:-42px;
  bottom:-42px;
  width:128px;height:128px;border-radius:50%;
  background:radial-gradient(circle, rgba(43,85,255,.20), transparent 70%);
}
.service-icon {
  width:50px;height:50px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(43,85,255,.16), rgba(255,255,255,.04));
  border:1px solid var(--line);
  color:#b4c3ff;
  font-weight:950;
  margin-bottom:42px;
}
.service-card h3 {
  margin:0 0 8px;
  font-size:1.18rem;
  letter-spacing:-.03em;
}
.service-card p {
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:92%;
}
.service-link {
  position:absolute;left:24px;bottom:18px;
  color:#a8bbff;font-size:.82rem;font-weight:850;
}

.project-panel {
  margin-top:10px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:30px;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow:var(--shadow);
}
.project-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.tabs {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tab-btn {
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:850;
  cursor:pointer;
}
.tab-btn.active {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.project-card {
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:var(--surface-2);
  box-shadow:var(--card-shadow);
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
}
.project-card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 58px rgba(0,0,0,.24);
}
.project-media {
  position:relative;
  aspect-ratio:4/3;
  background:
    radial-gradient(circle at 18% 84%, rgba(43,85,255,.28), transparent 18%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 76%, transparent), color-mix(in srgb, var(--surface) 100%, transparent));
  display:grid;
  place-items:center;
  color:#93a3c3;
}
.project-media::before {
  content:"";
  position:absolute;
  inset:18px;
  border-radius:18px;
  border:1px dashed rgba(138,160,255,.18);
}
.project-media img {
  width:100%;height:100%;object-fit:cover;
}
.project-body {
  padding:16px 16px 18px;
}
.project-meta {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.project-pill {
  font-size:.72rem;
  font-weight:900;
  padding:7px 10px;
  border-radius:999px;
}
.pill-current {
  color:#aebeff;
  background:rgba(43,85,255,.16);
}
body.light .pill-current {
  color:var(--blue);
  background:#ebf0ff;
}
.pill-done {
  color:#9dd4ac;
  background:rgba(89,205,126,.12);
}
body.light .pill-done {
  color:#2f7e47;
  background:#edf8ef;
}
.project-body h3 {
  margin:0 0 6px;
  font-size:1.08rem;
  letter-spacing:-.03em;
}
.project-body p {
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.compare-card {
  padding:22px;
  border-radius:28px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow:var(--shadow);
}
.compare-wrap {
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
}
.compare-box {
  --pos:50%;
  position:relative;
  aspect-ratio:16/7;
  overflow:hidden;
  background:var(--surface-2);
}
.compare-before, .compare-after {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:850;
}
.compare-before {
  color:var(--muted);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 96%, transparent), color-mix(in srgb, var(--surface) 100%, transparent));
}
.compare-after {
  color:#fff;
  clip-path:inset(0 0 0 var(--pos));
  background:
    radial-gradient(circle at 72% 22%, rgba(111,139,255,.60), transparent 22%),
    linear-gradient(135deg, rgba(43,85,255,.96), rgba(111,139,255,.92));
}
.compare-before img, .compare-after img {
  width:100%;height:100%;object-fit:cover;
}
.compare-label {
  position:absolute;
  top:16px;z-index:4;
  border-radius:999px;
  padding:8px 10px;
  font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.compare-label.left {
  left:16px;background:rgba(255,255,255,.84);color:#243147;
}
.compare-label.right {
  right:16px;background:rgba(18,27,49,.34);color:#fff;border:1px solid rgba(255,255,255,.14);
}
.compare-line {
  position:absolute;left:var(--pos);top:0;bottom:0;width:3px;transform:translateX(-1.5px);background:#fff;z-index:5;
}
.compare-handle {
  position:absolute;left:var(--pos);top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:#fff;color:var(--blue);
  display:grid;place-items:center;font-weight:1000;box-shadow:0 18px 44px rgba(0,0,0,.24);z-index:6;
}
.compare-controls {
  padding:14px 16px 16px;background:var(--surface);
}
.compare-controls input { width:100%; }

.contact {
  padding:36px 0 54px;
}
.contact-card {
  padding:34px;
  border-radius:30px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 14%, rgba(111,139,255,.24), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--bg-soft) 100%, transparent));
  box-shadow:var(--shadow);
}
.contact-card h2 {
  margin:0 0 14px;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:.96;
  letter-spacing:-.05em;
}
.contact-row {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.mail-pill {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  color:#fff;
  font-weight:850;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow:0 12px 28px rgba(43,85,255,.26);
}
.contact-note {
  color:var(--muted);
  font-weight:750;
}

.footer {
  padding:0 0 38px;
}
.footer-row {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  color:var(--muted);
  font-size:.9rem;
}
.footer-links {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

dialog {
  border:0;
  padding:0;
}
dialog::backdrop {
  background:rgba(2,7,15,.76);
  backdrop-filter:blur(8px);
}
#serviceModal, #projectModal {
  width:min(1140px, calc(100% - 34px));
  max-height:90vh;
  border-radius:28px;
  overflow:auto;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
}
.modal-head {
  position:relative;
  padding:30px 34px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 85% 20%, rgba(103,128,255,.22), transparent 20%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 96%, transparent), color-mix(in srgb, var(--surface) 100%, transparent));
}
.modal-head h3 {
  margin:0;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:.94;
  letter-spacing:-.05em;
}
.modal-head p {
  margin:8px 0 0;
  color:var(--muted);
}
.modal-close {
  position:absolute;
  right:16px;top:16px;
  width:46px;height:46px;border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
}
.modal-body {
  padding:24px 26px 28px;
}
.modal-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
.modal-big {
  min-height:340px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  display:grid;
  place-items:center;
  color:var(--muted);
}
.modal-side {
  display:grid;
  gap:14px;
}
.modal-box {
  min-height:160px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface-2);
  display:grid;
  place-items:center;
  color:var(--muted);
}
.gallery-empty {
  min-height:250px;
  border-radius:20px;
  border:1px dashed rgba(138,160,255,.18);
  background:var(--surface-2);
  color:var(--muted);
  display:grid;
  place-items:center;
  text-align:center;
  padding:22px;
}

@media (max-width: 1020px) {
  .nav-links { display:none; }
  .menu-btn { display:block; }
  .hero-grid { grid-template-columns:1fr; min-height:auto; padding:30px; gap:26px; }
  .hero-shell { min-height:auto; }
  .service-grid, .project-grid { grid-template-columns:1fr 1fr; }
  .modal-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .brand-copy { display:none; }
  .hero { padding-top:24px; }
  .hero-shell { border-radius:28px; }
  .hero-copy h1 { font-size:2.8rem; }
  .logo-card { min-height:360px; border-radius:26px; }
  .logo-stage { min-height:360px; padding:26px 18px; }
  .blueprint-line { top:36px; }
  .hero-note { display:none; }
  .service-grid, .project-grid { grid-template-columns:1fr; }
  .section-head { display:block; }
  .section-head .sub { display:block; margin-top:8px; }
  .project-panel, .compare-card, .contact-card { padding:18px; }
  .compare-box { aspect-ratio:4/3; }
  .footer-row { display:block; }
  .footer-links { margin-top:12px; }
}

.brand{
    gap:0;
  }
  .brand img{
    width:190px !important;
    height:64px !important;
    object-fit:contain;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
  }

  .logo-card{
    min-height:470px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .logo-card::before,
  .blueprint-line,
  .hero-note{
    display:none !important;
  }

  .logo-stage{
    min-height:470px !important;
    padding:24px 10px !important;
    position:relative;
  }

  .logo-stage::before{
    content:"";
    position:absolute;
    width:78%;
    aspect-ratio:1.9/1;
    border-radius:50%;
    background:radial-gradient(circle, rgba(43,85,255,.26), rgba(43,85,255,.08) 42%, transparent 72%);
    filter:blur(26px);
    z-index:0;
    animation:logoGlow 7s ease-in-out infinite alternate;
  }

  .logo-stage img{
    position:relative;
    z-index:1;
    width:min(100%, 880px) !important;
    filter:drop-shadow(0 20px 34px rgba(0,0,0,.30)) !important;
  }

  body.light .logo-stage img{
    filter:drop-shadow(0 18px 30px rgba(29,42,70,.18)) !important;
  }

  @keyframes logoGlow{
    from{transform:scale(.94);opacity:.72}
    to{transform:scale(1.06);opacity:1}
  }

  @media(max-width:680px){
    .brand img{
      width:145px !important;
      height:50px !important;
    }
    .logo-card,
    .logo-stage{
      min-height:320px !important;
    }
    .logo-stage img{
      width:100% !important;
    }
  }

:root{
    --blue:#1849d6;
    --blue-2:#2f65f5;
    --ink:#15191e;
    --stone:#f1f0ec;
    --stone-2:#e7e5df;
    --warm:#d9d3c6;
  }

  body{
    background:#f2f1ed !important;
    color:#171a1f;
  }

  body.light{
    --bg:#f2f1ed;
    --bg-soft:#ffffff;
    --surface:#ffffff;
    --surface-2:#f7f6f2;
    --surface-3:#eceae4;
    --text:#171a1f;
    --muted:#68717d;
    --line:rgba(21,25,30,.11);
    --shadow:0 16px 45px rgba(30,35,42,.07);
    --card-shadow:0 8px 24px rgba(30,35,42,.06);
  }

  body:not(.light){
    --bg:#171a1d;
    --bg-soft:#1e2226;
    --surface:#20252a;
    --surface-2:#272d32;
    --surface-3:#30363b;
    --text:#f2f1ec;
    --muted:#aeb5bc;
    --line:rgba(255,255,255,.10);
    --shadow:0 18px 52px rgba(0,0,0,.28);
    --card-shadow:0 10px 28px rgba(0,0,0,.22);
    background:#171a1d !important;
  }

  body::before{
    opacity:.34 !important;
    background-image:
      linear-gradient(rgba(21,25,30,.028) 1px,transparent 1px),
      linear-gradient(90deg,rgba(21,25,30,.028) 1px,transparent 1px) !important;
    background-size:64px 64px !important;
    mask-image:none !important;
  }
  body:not(.light)::before{
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) !important;
  }

  .container,
  .wide-container{
    width:min(94vw,1640px) !important;
    margin:0 auto;
  }

  .header{
    padding:12px 0 !important;
    background:transparent;
  }

  .nav{
    border-radius:12px !important;
    padding:11px 16px !important;
    box-shadow:0 8px 24px rgba(30,35,42,.06) !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(21,25,30,.10) !important;
  }

  body:not(.light) .nav{
    background:rgba(30,34,38,.94) !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  .brand img{
    width:178px !important;
    height:58px !important;
  }

  .nav-links{
    color:var(--muted) !important;
    font-weight:650 !important;
    letter-spacing:0 !important;
  }

  .nav-links a{
    position:relative;
    padding:8px 0;
  }

  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; right:100%; bottom:2px;
    height:2px;
    background:var(--blue);
    transition:right .22s ease;
  }

  .nav-links a:hover::after{ right:0; }

  .theme-toggle,
  .mail-btn{
    border-radius:9px !important;
  }

  .theme-toggle{
    background:transparent !important;
    border:1px solid var(--line) !important;
  }

  .mail-btn{
    background:var(--blue) !important;
    box-shadow:none !important;
  }

  .hero{
    padding:14px 0 36px !important;
  }

  .pro-hero{
    min-height:610px;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(540px,1.08fr);
    align-items:stretch;
    border-top:4px solid var(--blue);
    border-bottom:1px solid var(--line);
    background:var(--surface);
    box-shadow:var(--shadow);
    overflow:hidden;
  }

  .hero-copy{
    padding:74px 64px 64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
  }

  .hero-copy::before{
    content:"";
    position:absolute;
    left:0;
    top:68px;
    width:5px;
    height:120px;
    background:var(--blue);
  }

  .hero-copy .eyebrow{
    margin-bottom:22px !important;
    color:var(--blue) !important;
    font-size:.76rem !important;
    letter-spacing:.12em !important;
  }

  .hero-copy h1{
    margin:0 !important;
    font-size:clamp(3.6rem,5.4vw,6.5rem) !important;
    line-height:.91 !important;
    letter-spacing:-.055em !important;
    font-weight:800 !important;
    color:var(--text);
    max-width:800px;
  }

  .hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:9px 20px;
    margin-top:30px;
    color:var(--muted);
    font-size:.9rem;
    font-weight:650;
  }

  .hero-meta span{
    position:relative;
    padding-left:16px;
  }

  .hero-meta span::before{
    content:"";
    position:absolute;
    left:0; top:50%;
    width:7px; height:7px;
    transform:translateY(-50%);
    background:var(--blue);
  }

  .hero-actions{
    margin-top:34px !important;
  }

  .btn{
    border-radius:8px !important;
    padding:14px 19px !important;
    font-weight:750 !important;
  }

  .btn.primary{
    background:var(--blue) !important;
    box-shadow:none !important;
  }

  .btn.ghost{
    background:transparent !important;
    border:1px solid var(--line) !important;
  }

  .craft-visual{
    min-height:610px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 64px 66px;
    overflow:hidden;
    background:
      linear-gradient(135deg,rgba(24,73,214,.06),transparent 36%),
      repeating-linear-gradient(0deg,transparent 0 54px,rgba(21,25,30,.035) 54px 55px),
      repeating-linear-gradient(90deg,transparent 0 54px,rgba(21,25,30,.035) 54px 55px),
      var(--surface-2);
    border-left:1px solid var(--line);
  }

  body:not(.light) .craft-visual{
    background:
      linear-gradient(135deg,rgba(47,101,245,.09),transparent 36%),
      repeating-linear-gradient(0deg,transparent 0 54px,rgba(255,255,255,.025) 54px 55px),
      repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.025) 54px 55px),
      var(--surface-2);
  }

  .measure-top{
    position:absolute;
    top:25px;
    left:42px;
    right:42px;
    height:28px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:.65rem;
    letter-spacing:.08em;
  }

  .measure-top::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:var(--line);
  }

  .measure-top span{
    position:relative;
  }

  .measure-top span::after{
    content:"";
    position:absolute;
    left:50%; top:17px;
    width:1px; height:11px;
    background:var(--blue);
  }

  .craft-logo-wrap{
    width:min(95%,760px);
    position:relative;
    z-index:2;
  }

  .craft-logo-wrap img{
    width:100%;
    height:auto;
    filter:drop-shadow(0 16px 20px rgba(0,0,0,.16));
  }

  .material-strip{
    position:absolute;
    left:42px; right:42px; bottom:24px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding-top:15px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.72rem;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .section{
    padding:68px 0 26px !important;
  }

  .section-head{
    margin-bottom:25px !important;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }

  .section-head h2{
    font-size:clamp(2.2rem,3.2vw,3.7rem) !important;
    font-weight:760 !important;
    letter-spacing:-.045em !important;
  }

  .section-head .sub{
    font-size:.86rem !important;
    font-weight:650 !important;
    color:var(--muted) !important;
  }

  .service-grid{
    gap:14px !important;
  }

  .service-card{
    min-height:245px !important;
    border-radius:10px !important;
    padding:26px !important;
    border:1px solid var(--line) !important;
    box-shadow:none !important;
    background:var(--surface) !important;
  }

  .service-card::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:var(--stone-2);
    transition:background .22s ease;
  }

  body:not(.light) .service-card::before{
    background:#343a40;
  }

  .service-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 12px 26px rgba(30,35,42,.07) !important;
    border-color:rgba(24,73,214,.25) !important;
  }

  .service-card:hover::before{
    background:var(--blue);
  }

  .service-card::after{
    display:none !important;
  }

  .service-icon{
    width:auto !important;
    height:auto !important;
    display:inline-block !important;
    padding:0 0 10px !important;
    margin-bottom:42px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--blue) !important;
    font-size:.78rem;
    border-bottom:2px solid var(--blue) !important;
  }

  .service-card h3{
    font-size:1.24rem !important;
    font-weight:760 !important;
  }

  .service-card p{
    font-size:.94rem;
  }

  .service-link{
    color:var(--blue) !important;
  }

  .project-panel{
    border-radius:10px !important;
    box-shadow:none !important;
    border:1px solid var(--line) !important;
    padding:22px !important;
    background:var(--surface) !important;
  }

  .tab-btn{
    border-radius:7px !important;
    background:transparent !important;
    border:1px solid var(--line) !important;
  }

  .tab-btn.active{
    background:var(--blue) !important;
    border-color:var(--blue) !important;
  }

  .project-grid{
    gap:14px !important;
  }

  .project-card{
    border-radius:8px !important;
    box-shadow:none !important;
    border:1px solid var(--line) !important;
    background:var(--surface-2) !important;
  }

  .project-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 12px 26px rgba(30,35,42,.07) !important;
  }

  .project-media{
    background:
      repeating-linear-gradient(135deg,transparent 0 14px,rgba(24,73,214,.035) 14px 15px),
      var(--surface-3) !important;
  }

  .project-media::before{
    border-radius:4px !important;
    border:1px dashed var(--line) !important;
  }

  .project-body{
    padding:18px !important;
  }

  .project-pill{
    border-radius:4px !important;
  }

  .compare-card{
    border-radius:10px !important;
    box-shadow:none !important;
    border:1px solid var(--line) !important;
    background:var(--surface) !important;
  }

  .compare-wrap{
    border-radius:6px !important;
  }

  .compare-handle{
    box-shadow:0 8px 20px rgba(0,0,0,.15) !important;
  }

  .contact{
    padding:60px 0 54px !important;
  }

  .contact-card{
    border-radius:8px !important;
    background:#1c2228 !important;
    color:#fff !important;
    box-shadow:none !important;
    border:0 !important;
    position:relative;
    overflow:hidden;
  }

  .contact-card::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:7px;
    background:var(--blue);
  }

  .contact-card h2{
    color:#fff !important;
  }

  .contact-note{
    color:#b9c0c8 !important;
  }

  .mail-pill{
    border-radius:6px !important;
    background:var(--blue) !important;
    box-shadow:none !important;
  }

  .footer{
    border-top:1px solid var(--line);
    padding-top:25px !important;
  }

  /* Scroll reveal: professional and subtle, not flashy */
  .scroll-reveal{
    opacity:1;
    transform:none;
  }

  .js .scroll-reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .62s ease,transform .68s cubic-bezier(.2,.65,.25,1);
  }

  .js .scroll-reveal.reveal-right{
    transform:translateX(28px);
  }

  .js .scroll-reveal.is-visible{
    opacity:1;
    transform:none;
  }

  .stagger-parent .scroll-reveal:nth-child(2){transition-delay:.05s}
  .stagger-parent .scroll-reveal:nth-child(3){transition-delay:.10s}
  .stagger-parent .scroll-reveal:nth-child(4){transition-delay:.15s}
  .stagger-parent .scroll-reveal:nth-child(5){transition-delay:.20s}
  .stagger-parent .scroll-reveal:nth-child(6){transition-delay:.25s}

  @media(max-width:1100px){
    .pro-hero{
      grid-template-columns:1fr;
    }
    .hero-copy{
      padding:58px 44px 48px;
    }
    .craft-visual{
      min-height:420px;
      border-left:0;
      border-top:1px solid var(--line);
    }
    .service-grid,
    .project-grid{
      grid-template-columns:repeat(2,1fr) !important;
    }
  }

  @media(max-width:700px){
    .container,.wide-container{
      width:min(100% - 22px,1640px) !important;
    }
    .nav{
      border-radius:10px !important;
    }
    .brand img{
      width:142px !important;
      height:48px !important;
    }
    .hero-copy{
      padding:42px 24px 38px;
    }
    .hero-copy h1{
      font-size:clamp(2.8rem,14vw,4.1rem) !important;
    }
    .craft-visual{
      min-height:330px;
      padding:56px 20px 52px;
    }
    .measure-top,
    .material-strip{
      left:20px;
      right:20px;
    }
    .service-grid,
    .project-grid{
      grid-template-columns:1fr !important;
    }
    .section{
      padding-top:48px !important;
    }
  }

  @media(prefers-reduced-motion:reduce){
    .js .scroll-reveal{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }

/* Better readability in light mode */
  body.light{
    background:#efede7 !important;
    color:#13171c !important;
  }
  body.light .nav{
    background:rgba(255,255,255,.96) !important;
    border-color:rgba(20,25,33,.10) !important;
  }
  body.light .nav-links,
  body.light .section-head .sub,
  body.light .hero-meta,
  body.light .project-body p,
  body.light .service-card p,
  body.light .contact-note,
  body.light .footer-row,
  body.light .material-strip,
  body.light .measure-top{
    color:#55606f !important;
  }
  body.light .hero-copy h1,
  body.light .section-head h2,
  body.light .service-card h3,
  body.light .project-body h3,
  body.light .contact-card h2{
    color:#13171c !important;
  }
  body.light .btn.ghost,
  body.light .tab-btn,
  body.light .theme-toggle{
    color:#13171c !important;
    background:#ffffff !important;
    border-color:rgba(20,25,33,.12) !important;
  }
  body.light .project-card,
  body.light .service-card,
  body.light .project-panel,
  body.light .compare-card{
    background:#fff !important;
    border-color:rgba(20,25,33,.10) !important;
  }
  body.light .craft-visual{
    background:
      linear-gradient(135deg,rgba(24,73,214,.04),transparent 36%),
      repeating-linear-gradient(0deg,transparent 0 54px,rgba(20,25,33,.032) 54px 55px),
      repeating-linear-gradient(90deg,transparent 0 54px,rgba(20,25,33,.032) 54px 55px),
      #f6f4ef !important;
  }
  body.light .hero-copy::before{
    background:#1849d6 !important;
  }

  /* Smaller, more balanced hero visual */
  .craft-logo-wrap{
    width:min(72%, 520px) !important;
  }
  .craft-visual{
    align-items:center !important;
    justify-content:center !important;
  }

  /* Hover animation for the hero logo */
  .logo-hover-stage{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:260px;
    padding:10px 8px 26px;
    cursor:default;
    user-select:none;
  }
  .logo-layer{
    position:absolute;
    inset:auto;
    width:100%;
    height:auto;
    object-fit:contain;
    transition:
      transform .58s cubic-bezier(.22,.61,.36,1),
      opacity .42s ease,
      filter .42s ease;
    will-change:transform,opacity,filter;
  }
  .logo-main{
    position:relative;
    z-index:3;
    filter:drop-shadow(0 14px 16px rgba(0,0,0,.16));
  }
  .logo-back-left,
  .logo-back-right{
    z-index:1;
    opacity:0;
    pointer-events:none;
    filter:blur(.2px) drop-shadow(0 8px 14px rgba(0,0,0,.08));
  }
  .logo-back-left{
    transform:translate(0,0) scale(1);
  }
  .logo-back-right{
    transform:translate(0,0) scale(1);
  }
  .logo-hover-note{
    position:absolute;
    left:50%;
    bottom:-6px;
    transform:translateX(-50%);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    color:var(--muted);
    opacity:.78;
    white-space:nowrap;
  }
  .logo-hover-stage:hover .logo-main{
    transform:scale(.98);
    filter:drop-shadow(0 20px 24px rgba(0,0,0,.18));
  }
  .logo-hover-stage:hover .logo-back-left{
    opacity:.38;
    transform:translate(-24px,-12px) rotate(-2.4deg) scale(1.01);
  }
  .logo-hover-stage:hover .logo-back-right{
    opacity:.32;
    transform:translate(24px,14px) rotate(2.2deg) scale(1.01);
  }
  .logo-hover-stage:hover .logo-hover-note{
    opacity:1;
  }

  /* Make the header logo a touch smaller and cleaner */
  .brand img{
    width:160px !important;
    height:52px !important;
  }

  /* Slightly softer dark mode tones to avoid "gaming" feeling */
  body:not(.light){
    background:#1a1d21 !important;
  }
  body:not(.light) .pro-hero,
  body:not(.light) .nav{
    background:#202428 !important;
  }
  body:not(.light) .project-panel,
  body:not(.light) .service-card,
  body:not(.light) .project-card,
  body:not(.light) .compare-card{
    background:#23282d !important;
  }
  body:not(.light) .craft-visual{
    background:
      linear-gradient(135deg,rgba(47,101,245,.06),transparent 36%),
      repeating-linear-gradient(0deg,transparent 0 54px,rgba(255,255,255,.020) 54px 55px),
      repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.020) 54px 55px),
      #2a2f34 !important;
  }

  @media(max-width:1100px){
    .craft-logo-wrap{
      width:min(70%, 480px) !important;
    }
  }

  @media(max-width:700px){
    .craft-logo-wrap{
      width:min(84%, 420px) !important;
    }
    .logo-hover-note{
      bottom:-2px;
      font-size:.66rem;
    }
    .logo-hover-stage:hover .logo-back-left,
    .logo-hover-stage:hover .logo-back-right{
      opacity:.24;
      transform:none;
    }
  }

  @media(prefers-reduced-motion:reduce){
    .logo-layer,
    .logo-hover-note{
      transition:none !important;
    }
    .logo-hover-stage:hover .logo-main,
    .logo-hover-stage:hover .logo-back-left,
    .logo-hover-stage:hover .logo-back-right{
      transform:none !important;
      opacity:0 !important;
    }
    .logo-main{
      opacity:1 !important;
    }
  }

/* ---- Dark mode contrast: explicit, readable text ---- */
  body:not(.light){
    color:#f2efe8 !important;
  }
  body:not(.light) .hero-copy h1,
  body:not(.light) .section-head h2,
  body:not(.light) .service-card h3,
  body:not(.light) .project-body h3,
  body:not(.light) .contact-card h2,
  body:not(.light) .modal-head h3{
    color:#f4f1e9 !important;
  }

  body:not(.light) .service-card p,
  body:not(.light) .project-body p,
  body:not(.light) .section-head .sub,
  body:not(.light) .hero-meta,
  body:not(.light) .nav-links,
  body:not(.light) .material-strip,
  body:not(.light) .measure-top,
  body:not(.light) .footer-row,
  body:not(.light) .contact-note{
    color:#c4cad2 !important;
  }

  body:not(.light) .service-link{
    color:#7ea3ff !important;
  }

  body:not(.light) .service-icon{
    color:#7ea3ff !important;
    border-bottom-color:#5f87ef !important;
  }

  body:not(.light) .service-card,
  body:not(.light) .project-card,
  body:not(.light) .project-panel,
  body:not(.light) .compare-card{
    border-color:rgba(255,255,255,.12) !important;
  }

  body:not(.light) .project-card,
  body:not(.light) .service-card,
  body:not(.light) .project-panel,
  body:not(.light) .compare-card{
    background:#252a2f !important;
  }

  /* ---- Cleaner hero logo: smaller, calmer, one logo only ---- */
  .clean-logo-stage{
    position:relative;
    width:min(60%, 430px) !important;
    min-height:255px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 20px;
    isolation:isolate;
    cursor:default;
  }

  .clean-logo-main{
    position:relative;
    z-index:3;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.14));
    transition:
      transform .48s cubic-bezier(.22,.61,.36,1),
      filter .48s ease;
  }

  /* blueprint brackets, subtle and handwork-oriented */
  .blueprint-corner{
    position:absolute;
    width:58px;
    height:58px;
    opacity:.38;
    transition:
      width .45s cubic-bezier(.22,.61,.36,1),
      height .45s cubic-bezier(.22,.61,.36,1),
      opacity .35s ease,
      transform .45s cubic-bezier(.22,.61,.36,1);
  }

  .corner-a{
    left:5px;
    top:14px;
    border-left:1px solid rgba(24,73,214,.62);
    border-top:1px solid rgba(24,73,214,.62);
  }

  .corner-b{
    right:5px;
    bottom:14px;
    border-right:1px solid rgba(24,73,214,.62);
    border-bottom:1px solid rgba(24,73,214,.62);
  }

  .blueprint-scan{
    position:absolute;
    z-index:2;
    left:12%;
    right:12%;
    top:50%;
    height:1px;
    opacity:0;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(67,111,235,.7),
      transparent
    );
    transform:translateY(-50%);
    pointer-events:none;
  }

  .clean-logo-stage:hover .clean-logo-main{
    transform:translateY(-5px) scale(1.025);
    filter:drop-shadow(0 20px 24px rgba(0,0,0,.18));
  }

  .clean-logo-stage:hover .blueprint-corner{
    width:76px;
    height:76px;
    opacity:.75;
  }

  .clean-logo-stage:hover .corner-a{
    transform:translate(-5px,-5px);
  }

  .clean-logo-stage:hover .corner-b{
    transform:translate(5px,5px);
  }

  .clean-logo-stage:hover .blueprint-scan{
    animation:blueprintScan 1.25s ease-out 1;
  }

  @keyframes blueprintScan{
    0%{
      opacity:0;
      top:20%;
    }
    25%{
      opacity:.8;
    }
    75%{
      opacity:.55;
    }
    100%{
      opacity:0;
      top:80%;
    }
  }

  /* Remove the old duplicated hover visuals entirely */
  .logo-hover-stage,
  .logo-layer,
  .logo-back-left,
  .logo-back-right,
  .logo-hover-note{
    display:none !important;
  }

  /* Make hero right side feel less empty */
  .craft-visual{
    padding-top:62px !important;
    padding-bottom:58px !important;
  }

  .material-strip{
    font-size:.68rem !important;
    letter-spacing:.07em !important;
  }

  @media(max-width:1100px){
    .clean-logo-stage{
      width:min(58%, 400px) !important;
      min-height:230px;
    }
  }

  @media(max-width:700px){
    .clean-logo-stage{
      width:min(78%, 370px) !important;
      min-height:210px;
      padding:20px 14px;
    }
    .blueprint-corner{
      width:46px;
      height:46px;
    }
    .clean-logo-stage:hover .blueprint-corner{
      width:58px;
      height:58px;
    }
    .clean-logo-stage:hover .clean-logo-main{
      transform:translateY(-2px) scale(1.012);
    }
  }

  @media(prefers-reduced-motion:reduce){
    .clean-logo-main,
    .blueprint-corner{
      transition:none !important;
    }
    .clean-logo-stage:hover .clean-logo-main,
    .clean-logo-stage:hover .blueprint-corner{
      transform:none !important;
    }
    .clean-logo-stage:hover .blueprint-scan{
      animation:none !important;
      opacity:0 !important;
    }
  }

.project-tab-radio{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
  }

  .project-css-tabs .tab-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    transition:
      background .22s ease,
      color .22s ease,
      border-color .22s ease,
      transform .18s ease;
  }

  .project-css-tabs .tab-btn:active{
    transform:translateY(1px);
  }

  #projectCurrent:checked ~ .project-top .current-tab,
  #projectDone:checked ~ .project-top .done-tab{
    color:#fff !important;
    background:var(--blue) !important;
    border-color:var(--blue) !important;
  }

  #projectCurrent:not(:checked) ~ .project-top .current-tab,
  #projectDone:not(:checked) ~ .project-top .done-tab{
    color:var(--text) !important;
    background:transparent !important;
    border-color:var(--line) !important;
  }

  .project-tab-panel{
    display:none;
  }

  #projectCurrent:checked ~ .project-tab-panels .current-panel{
    display:block;
    animation:projectTabIn .48s cubic-bezier(.22,.61,.36,1) both;
  }

  #projectDone:checked ~ .project-tab-panels .done-panel{
    display:block;
    animation:projectTabIn .48s cubic-bezier(.22,.61,.36,1) both;
  }

  @keyframes projectTabIn{
    from{
      opacity:0;
      transform:translateY(18px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  .project-tab-panel .project-card{
    display:block !important;
  }

  .project-tab-panel .project-card:nth-child(1){
    animation:projectCardFade .48s .03s ease both;
  }
  .project-tab-panel .project-card:nth-child(2){
    animation:projectCardFade .48s .09s ease both;
  }
  .project-tab-panel .project-card:nth-child(3){
    animation:projectCardFade .48s .15s ease both;
  }

  @keyframes projectCardFade{
    from{
      opacity:0;
      transform:translateY(12px) scale(.992);
    }
    to{
      opacity:1;
      transform:none;
    }
  }

  @media(max-width:700px){
    .project-css-tabs{
      display:grid !important;
      grid-template-columns:1fr 1fr;
      width:100%;
    }

    .project-css-tabs .tab-btn{
      text-align:center;
      padding:10px 8px !important;
      font-size:.78rem;
    }
  }

  @media(prefers-reduced-motion:reduce){
    .project-tab-panel,
    .project-tab-panel .project-card{
      animation:none !important;
    }
  }

#projekte .project-tab-panels,
  #projekte .project-tab-panel{
    width:100%;
    min-width:0;
  }

  #projekte .project-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:14px !important;
    width:100% !important;
  }

  #projekte .project-card{
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  #projekte .project-media{
    width:100% !important;
    aspect-ratio:4 / 3 !important;
    min-height:0 !important;
    max-height:none !important;
  }

  #projekte .project-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  @media(max-width:1100px){
    #projekte .project-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media(max-width:700px){
    #projekte .project-grid{
      grid-template-columns:1fr !important;
    }
  }

body.light .contact-card{
    background:linear-gradient(135deg, #1a2027, #222b35) !important;
    color:#f7f8fb !important;
  }

  body.light .contact-card h2,
  body.light .contact-card .contact-note,
  body.light .contact-card .contact-meta,
  body.light .contact-card .contact-meta span,
  body.light .contact-card p{
    color:#f7f8fb !important;
  }

  body.light .contact-card .contact-note{
    opacity:.82;
  }

  body.light .mail-pill{
    background:#2b55ff !important;
    color:#fff !important;
  }

  /* Better range styling / visibility */
  .compare-controls input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    height:8px;
    border-radius:999px;
    background:rgba(120,130,145,.26);
    outline:none;
  }

  .compare-controls input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#2b55ff;
    border:3px solid #fff;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    cursor:pointer;
  }

  .compare-controls input[type="range"]::-moz-range-thumb{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#2b55ff;
    border:3px solid #fff;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    cursor:pointer;
  }

/* Light Mode: mehr Tiefe, damit die weißen Bereiche besser erkennbar sind */
  body.light{
    background:
      linear-gradient(180deg, #efede7 0%, #f4f1eb 100%) !important;
  }

  body.light .section{
    position:relative;
  }

  /* stärkere Einfassung für größere Inhaltsblöcke */
  body.light .project-panel,
  body.light .compare-card,
  body.light .contact-card{
    position:relative;
    border:1px solid rgba(20,25,33,.10) !important;
    box-shadow:
      0 10px 28px rgba(25,32,42,.05),
      0 1px 0 rgba(255,255,255,.75) inset !important;
  }

  /* dezenter Rahmen / Hintergrund hinter Projekte + Vorher/Nachher */
  body.light .project-panel::before,
  body.light .compare-card::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:16px;
    background:
      linear-gradient(180deg, rgba(224,220,210,.55), rgba(236,233,226,.35));
    border:1px solid rgba(25,32,42,.05);
    z-index:-1;
    box-shadow:0 16px 36px rgba(25,32,42,.04);
  }

  /* Projektkarten etwas klarer vom Hintergrund absetzen */
  body.light .project-card,
  body.light .service-card{
    background:#fcfbf8 !important;
    border:1px solid rgba(20,25,33,.09) !important;
    box-shadow:0 4px 12px rgba(25,32,42,.03);
  }

  body.light .project-media{
    background:
      repeating-linear-gradient(135deg, rgba(32,40,54,.035) 0 2px, transparent 2px 12px),
      #f2efe8 !important;
    border-bottom:1px solid rgba(20,25,33,.06);
  }

  body.light .compare-wrap{
    border:1px solid rgba(20,25,33,.10) !important;
    background:#f6f3ee;
  }

  /* Section-Überschriften bekommen unten etwas mehr Kontur */
  body.light .section-head{
    border-bottom:1px solid rgba(20,25,33,.09) !important;
  }

  /* Auf Handy etwas dezenter */
  @media(max-width:700px){
    body.light .project-panel::before,
    body.light .compare-card::before{
      inset:-8px;
      border-radius:12px;
    }
  }

/* Auch bei Leistungen mehr Tiefe im Light Mode */
  body.light .service-grid{
    position:relative;
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,.68);
    border:1px solid rgba(20,25,33,.07);
    box-shadow:
      0 10px 28px rgba(25,32,42,.04),
      0 1px 0 rgba(255,255,255,.78) inset;
  }

  body.light .service-grid::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:18px;
    background:
      linear-gradient(180deg, rgba(224,220,210,.52), rgba(236,233,226,.34));
    border:1px solid rgba(25,32,42,.05);
    z-index:-1;
    box-shadow:0 16px 36px rgba(25,32,42,.035);
  }

  body.light .service-card{
    background:#fcfbf8 !important;
    border:1px solid rgba(20,25,33,.09) !important;
    box-shadow:0 4px 12px rgba(25,32,42,.03);
  }

  @media(max-width:700px){
    body.light .service-grid{
      padding:10px;
      border-radius:12px;
    }
    body.light .service-grid::before{
      inset:-8px;
      border-radius:14px;
    }
  }

/* ==============================================================
   Costy Style v2 – content management additions
   ============================================================== */

.service-card.has-photo{
  padding:0 !important;
  overflow:hidden;
}

.service-card.has-photo .service-content{
  padding:22px 24px 24px;
}

.service-photo{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--surface-3);
  border-bottom:1px solid var(--line);
}

.service-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .4s ease;
}

.service-card.has-photo:hover .service-photo img{
  transform:scale(1.025);
}

.service-card.has-photo .service-icon{
  margin-bottom:24px !important;
}

.service-modal-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.service-modal-gallery img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:9px;
  border:1px solid var(--line);
}

/* Projects should read as a compact archive, not huge full-page tiles. */
#projekte .project-grid{
  grid-template-columns:repeat(auto-fill,minmax(260px,340px)) !important;
  justify-content:start !important;
  align-items:start;
  gap:16px !important;
}

#projekte .project-card{
  max-width:340px !important;
  width:100% !important;
}

#projekte .project-media{
  aspect-ratio:4/3 !important;
  min-height:0 !important;
  max-height:255px !important;
}

#projekte .project-body{
  padding:15px 16px 17px !important;
}

#projekte .project-body h3{
  font-size:1.02rem !important;
}

#projekte .project-body p{
  font-size:.84rem !important;
  line-height:1.45;
}

@media(max-width:760px){
  .service-modal-gallery{
    grid-template-columns:1fr;
  }

  #projekte .project-grid{
    grid-template-columns:1fr !important;
  }

  #projekte .project-card{
    max-width:none !important;
  }

  #projekte .project-media{
    max-height:none !important;
  }
}