/* Disha Telecom — static conversion of the editorial luxury design system */
@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --background: oklch(0.988 0.002 285);
  --foreground: oklch(0.245 0.004 285);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.245 0.004 285);
  --primary: oklch(0.245 0.004 285);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.965 0.002 285);
  --secondary-foreground: oklch(0.245 0.004 285);
  --muted: oklch(0.965 0.002 285);
  --muted-foreground: oklch(0.632 0.005 285);
  --accent: oklch(0.955 0.008 80);
  --accent-foreground: oklch(0.36 0.04 250);
  --champagne: oklch(0.762 0.049 80);
  --champagne-soft: oklch(0.95 0.018 80);
  --bronze: oklch(0.615 0.061 62);
  --titanium: oklch(0.365 0.038 250);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0 0 0 / 0.08);
  --input: oklch(0 0 0 / 0.1);
  --ring: oklch(0.762 0.049 80);

  --font-display: "Plus Jakarta Sans", "SF Pro Display", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --shadow-ambient: 0 12px 30px oklch(0 0 0 / 0.06);
  --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-lifted: 0 20px 60px oklch(0 0 0 / 0.1);
}

* { border-color: var(--border); box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
img { display: block; max-width: 100%; }

.font-display { font-family: var(--font-display); }

.surface {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
}
.lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-ambient); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  display: block;
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.mix-blend-multiply { mix-blend-mode: multiply; }

/* Reveal-on-scroll (replaces framer-motion whileInView) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Modal / drawer transitions */
.overlay { position: fixed; inset: 0; background: color-mix(in oklch, var(--foreground) 25%, transparent); backdrop-filter: blur(4px); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.overlay.open { opacity: 1; pointer-events: auto; }

.drawer { transform: translateX(100%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.overlay.open .drawer { transform: translateX(0); }

.modal-pane { transform: translateY(24px); opacity: 0; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
.overlay.open .modal-pane { transform: translateY(0); opacity: 1; }

@media (min-width: 640px) {
  .drawer { transform: translateX(100%); }
}

/* Full-screen mobile menu (uses the site's own palette + type) */
.menu-overlay {
  display: flex;
  background: var(--background);
  color: var(--foreground);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

.menu-overlay .menu-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.menu-overlay.open .menu-item { opacity: 1; transform: none; }
.submenu { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1); }
.submenu.open { max-height: 420px; }
.chevron { transition: transform 0.3s ease; }
.submenu-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }