/* -------------------------------
   Theming with CSS variables
   (light mode softened; pro look)
-------------------------------- */
:root {
  --bg: #f6f8fb;
  --text: #0f172a;
  --muted: #475569;
  --surface: #ffffff;
  --border: #e2e8f0;
  --overlay: rgba(248,250,252,0.75);

  --accent: #00bfff;
  --accent-strong: #155eef;
  --accent-contrast: #001018;

  --icon: #374151; /* icon color (light) */
}

.dark-mode {
  --bg: #0b0f16;
  --text: #e5e7eb;
  --muted: #9aa1ad;
  --surface: #0f172a;
  --border: #1f2937;
  --overlay: rgba(10,12,16,0.65);

  --accent: #00bfff;
  --accent-strong: #3b82f6;
  --accent-contrast: #001018;

  --icon: #d1d5db; /* icon color (dark) */
}

/* Base */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link { position:absolute; left:-9999px; top:-9999px; }
.skip-link:focus {
  left:1rem; top:1rem; background:var(--accent); color:#fff;
  padding:0.5rem 0.75rem; border-radius:0.5rem;
}

/* Canvas background */
#frequencyCanvas {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}

/* Header */
header {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:18px 20px; position:sticky; top:0;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  transition: padding 0.3s ease, background 0.3s ease;
  z-index:10;
}
header.shrink { padding:10px 20px; }

.logo-container { position:relative; display:flex; align-items:center; gap:0.9rem; order:1; }
.controls { display:flex; align-items:center; gap:0.6rem; order:2; margin-left:auto; }
.nav-links { order:3; display:flex; align-items:center; gap:0.5rem; }
.social-links { order:4; display:flex; align-items:center; gap:10px; margin-left:8px; }

/* Circular logo avatar with electric-blue ring */
.logo-link { display:inline-flex; align-items:center; line-height:0; text-decoration:none; gap:0.6rem; }
.logo-avatar {
  width:56px; height:56px; border-radius:50%;
  padding:2px; background: conic-gradient(from 220deg, #00bfff, #155eef, #00bfff);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px var(--border) inset;
}
.main-logo {
  width:100%; height:100%; border-radius:50%;
  object-fit: cover; background: var(--surface);
  display:block;
}
.brand-text { display:none; font-weight:800; font-size:1.1rem; color:var(--text); }
.logo-link.logo-fallback .brand-text { display:inline-block; }
.logo-link.logo-fallback .logo-avatar { display:none; }

/* Language badge on the logo */
.logo-badge {
  position:absolute; right:-2px; bottom:-2px;
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor:pointer;
  transition: background .25s, transform .15s, border-color .25s, color .25s;
}
.logo-badge:hover { background: var(--accent); transform: translateY(-1px); }
.logo-badge:hover .icon { stroke:#fff; }

/* Language dropdown: pop out from logo */
.language-dropdown {
  position:absolute; top:64px; left:0; /* anchored near avatar */
  background: var(--surface); color: var(--text);
  border:1px solid var(--border);
  list-style:none; padding:10px; border-radius:12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  min-width: 200px;
  opacity:0; transform: translateY(-6px) scale(.96); transform-origin: 28px 28px;
  visibility:hidden; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 20;
}
.language-dropdown.from-logo::before {
  content:""; position:absolute; top:-8px; left:14px; width:14px; height:14px;
  background: var(--surface); border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform: rotate(45deg);
}
.language-dropdown li {
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.language-dropdown li:hover, .language-dropdown li:focus {
  background: var(--accent); color:#fff; outline:none;
}
.language-dropdown.show {
  opacity:1; transform: translateY(0) scale(1);
  visibility:visible; transition: opacity .18s ease, transform .18s ease;
}

/* Language dropdown (legacy class for positioning tweaks) */
.language-dropdown.from-logo { right:auto; }

/* Language / theme icon buttons */
.icon-btn {
  padding:8px 12px; background: var(--surface); color: var(--text);
  border:1px solid var(--border); border-radius:999px; cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  transition: background .25s, transform .15s, color .25s, border-color .25s;
}
.icon-btn:hover { background: var(--accent); color:#fff; border-color: transparent; transform: translateY(-1px); }

/* Nav links (underline animation) */
.nav-links a {
  position:relative; margin:0 12px; padding:6px 2px; text-decoration:none;
  color: var(--text); font-weight:700; transition: color 0.2s;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background: var(--accent); transition: width .25s ease;
}
.nav-links a:hover { color: var(--accent-strong); }
.nav-links a:hover::after { width:100%; }
.nav-links a[aria-current="page"] { color: var(--accent-strong); }

/* Professional icons */
.icon {
  width:18px; height:18px;
  stroke: var(--icon); stroke-width:1.5; fill:none; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon.moon, .icon.sun { stroke-width:1.5; }
.icon-btn:hover .icon { stroke:#fff; }

/* Social badges (on-theme electric-blue ring + subtle rotation) */
.social {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  position: relative; text-decoration: none;
  background: radial-gradient(ellipse at center, rgba(0,191,255,0.10), transparent 60%);
}
.social::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  padding:2px; background: conic-gradient(from 220deg, #00bfff, #155eef, #00bfff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transform: rotate(0deg);
  transition: transform 1.2s ease;
}
.social:hover::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .social::before { transition: none; }
  .social:hover::before { transform: none; }
}
.social .icon { stroke-width:1.7; }
.social:hover .icon { stroke:#fff; }

/* Sun/Moon toggle behavior */
.icon.moon { display:none; }
.dark-mode .icon.sun { display:none; }
.dark-mode .icon.moon { display:inline; }

/* Hero */
.hero {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:85vh; text-align:center;
}
.hero-title {
  color: var(--text);
  font-size: clamp(2.4rem, 4vw + 1rem, 4rem);
  text-shadow: 0 0 14px rgba(0,191,255,0.45), 0 0 28px rgba(21,94,239,0.35);
  animation: glowPulse 8s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from { text-shadow: 0 0 10px rgba(0,191,255,0.35), 0 0 20px rgba(21,94,239,0.25); }
  to   { text-shadow: 0 0 22px rgba(0,191,255,0.70), 0 0 36px rgba(21,94,239,0.50); }
}
@media (prefers-reduced-motion: reduce) { .hero-title { animation:none; } }
.slogan { font-size:1.125rem; margin-top:12px; color: var(--muted); }

/* Sections */
section { padding:70px 20px; max-width:1000px; margin:auto; }
section h2 { font-size:2rem; margin-bottom:14px; color: var(--text); }
section p, section li { font-size:1.05rem; line-height:1.7; color: var(--text); }

/* Divider */
.divider {
  height:1px; width:min(1000px, calc(100% - 40px));
  margin: 44px auto;
  background: repeating-linear-gradient(90deg, rgba(0,191,255,.22) 0 12px, transparent 12px 22px);
  animation: sweep 16s linear infinite; opacity: .85;
}
@keyframes sweep { from { background-position-x: 0; } to { background-position-x: 240px; } }
@media (prefers-reduced-motion: reduce) { .divider { animation: none; } }

/* Buttons */
.button, button[type="submit"] {
  display:inline-block; margin-top:16px; padding:12px 20px;
  background: var(--accent); color:#000;
  border: none; border-radius:10px; text-decoration:none;
  transition: background 0.25s, transform 0.15s, color 0.25s;
  font-weight:800;
}
.button:hover, button[type="submit"]:hover {
  background: var(--accent-strong); color:#fff; transform: translateY(-1px);
}

/* Contact form + direct email */
form { display:flex; flex-direction:column; gap:12px; max-width:520px; margin:auto; }
input, textarea {
  padding:12px; border:1px solid var(--border); border-radius:10px;
  background: var(--surface); color: var(--text);
}
input:focus, textarea:focus {
  outline: 3px solid rgba(0,191,255,0.25);
  border-color: var(--accent);
}
.direct-email { margin-top: 12px; color: var(--muted); text-align:center; }
.email-link { font-weight: 800; color: var(--accent-strong); text-decoration: none; }
.email-link:hover { text-decoration: underline; }

/* Fade-in + staggered lists */
.fade-in { opacity:0; transform:translateY(22px); transition:opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.stagger > * { opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.stagger.revealed > * { opacity:1; transform:none; }

/* Footer */
footer {
  text-align:center; padding:28px 20px; font-size:0.95em; opacity:0.98;
  background: var(--overlay);
}
.dark-mode footer, .dark-mode header { box-shadow: 0 0 0 1px var(--border) inset; }

/* Scroll-to-top */
#scrollTopBtn {
  display:none; position:fixed; right:20px; bottom:24px;
  background: var(--accent); color:#000;
  border:none; border-radius:50%; width:44px; height:44px;
  cursor:pointer; font-size:1.1em;
  transition: transform 0.15s, background 0.25s, color 0.25s;
  z-index:20;
}
#scrollTopBtn:hover { background: var(--accent-strong); color:#fff; transform: scale(1.08); }

/* Mobile responsiveness */
@media (max-width: 900px) {
  .brand-text { display:none; }
  .logo-avatar { width:52px; height:52px; }
  .nav-links a { margin: 0 10px; }
}
@media (max-width: 640px) {
  header { gap: 0.6rem; }
  .controls { order:3; width:auto; margin-left:0; }
  .nav-links { order:4; width:100%; justify-content:center; margin-top:6px; }
  .social-links { order:5; width:100%; justify-content:center; margin-top:4px; }
  .language-dropdown.from-logo { top:58px; left:0; }
  .hero { height:70vh; }
}

/* Utility */
.thankyou { margin-top: 0.75rem; font-weight: 600; }