/* ============================================================
   Modern look (loaded after styles.css) - same visual language as Urban Village Square and My Shop,
   in ETD's own plum / pink / gold: frosted sticky header, pill navigation and buttons, soft grey sections,
   borderless white cards with gentle shadows that lift on hover, a richer hero.
   A visual layer only: nothing here changes the page's structure, wording or behaviour.
   To go back to the old look, delete the <link rel="stylesheet" href="modern.css"> line in index.html.
   ============================================================ */
:root{
  --surface:#FFFFFF;
  --surface-2:#F0F2F5;
  --surface-3:#E4E6EB;
  --shadow-1:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.06);
  --shadow-2:0 10px 28px rgba(61,47,82,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{background:var(--surface-2);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{letter-spacing:-.015em;}

/* ---------- Header ---------- */
.site-header{
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:none;box-shadow:0 1px 0 rgba(16,24,40,.06),0 4px 18px rgba(16,24,40,.05);
}
nav.main-nav{gap:6px;}
nav.main-nav a{padding:8px 14px;border-bottom:none;border-radius:999px;transition:background .15s var(--ease),color .15s;}
nav.main-nav a:hover{background:var(--surface-2);}
nav.main-nav a.active{background:rgba(138,68,104,.1);color:var(--pink);border-bottom:none;}
.nav-toggle{width:40px;height:40px;border-radius:50%;background:var(--surface-2);font-size:18px;line-height:1;}
.nav-toggle:hover{background:var(--surface-3);}
@media (max-width:760px){
  nav.main-nav{border-bottom:none;border-radius:0 0 22px 22px;box-shadow:0 16px 32px rgba(16,24,40,.12);padding:10px 14px 16px;gap:2px;}
  nav.main-nav a{border-bottom:none;border-radius:12px;padding:12px 14px;}
}

/* ---------- Hero ---------- */
.home-hero{
  background:
    radial-gradient(900px 420px at 15% 10%,rgba(245,166,35,.16),transparent 60%),
    radial-gradient(800px 420px at 90% 95%,rgba(255,255,255,.12),transparent 60%),
    linear-gradient(135deg,var(--plum) 0%,var(--pink) 65%,#c2547a 100%);
  border-radius:0 0 36px 36px;
}
.home-hero-inner h1{font-weight:800;letter-spacing:-.025em;}
.home-hero-inner .tagline{letter-spacing:.01em;}

/* ---------- Buttons ---------- */
.btn{border-radius:999px;padding:13px 28px;transition:background .15s var(--ease),box-shadow .18s,transform .12s var(--ease);}
.btn:active{transform:scale(.97);}
.btn:focus-visible,nav.main-nav a:focus-visible,.nav-toggle:focus-visible{outline:3px solid rgba(245,166,35,.55);outline-offset:2px;}
.btn-primary{box-shadow:0 4px 14px rgba(245,166,35,.4);}
.btn-primary:hover{box-shadow:0 8px 22px rgba(245,166,35,.5);}
.btn-outline{border-width:1.5px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.btn-ghost{background:var(--surface-2);}
.btn-ghost:hover{background:var(--surface-3);}
.btn-disabled{background:var(--surface-2);}

/* ---------- Sections and cards ---------- */
section.alt{background:transparent;}
.quick-card,.stat-card,.mvv-card,.values-list li,.service-card,.product-card,.contact-card{
  background:var(--surface);border:none;box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease),box-shadow .2s;
}
.quick-card,.mvv-card,.product-card{border-radius:20px;}
.stat-card,.service-card,.contact-card{border-radius:18px;}
.values-list li{border-radius:16px;}
.quick-card:hover,.service-card:hover,.product-card:hover,.mvv-card:hover,.values-list li:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);}
.quick-card:hover{border:none;}
.quick-card{box-shadow:0 14px 34px rgba(61,47,82,.12);}
.mvv-card.vision{box-shadow:0 8px 28px rgba(245,166,35,.22),0 0 0 2px rgba(245,166,35,.5);}
.service-card .icon{border-radius:14px;box-shadow:0 6px 14px rgba(138,68,104,.28);}
.section-head h2{font-weight:800;letter-spacing:-.02em;}
.section-head .eyebrow{display:inline-block;background:rgba(138,68,104,.1);border-radius:999px;padding:4px 12px;}
.product-card img.product-logo{border-radius:14px;}
.contact-row{border-bottom-color:rgba(16,24,40,.07);}
.cta-banner{border-radius:28px;max-width:1072px;margin-left:auto;margin-right:auto;}
@media (max-width:1120px){.cta-banner{border-radius:22px;margin-left:16px;margin-right:16px;}}

/* ---------- Footer ---------- */
.site-footer{background:transparent;border-top:1px solid rgba(16,24,40,.08);}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.btn,.quick-card,.service-card,.product-card,.mvv-card,.values-list li{transition:none;}}