/* ───────────────────────────────────────────────
   Developmint — micro-site shared styles
   Light / dark theming via html.dark + CSS variables
   ─────────────────────────────────────────────── */

/* Inter is loaded via Google Fonts <link> in each page head. */

:root {
  --bg:        #ffffff;
  --text:      #0a0a0a;
  --muted:     #6b6b6b;
  --faint:     rgba(0,0,0,0.22);
  --line:      #e7e7e7;
  --card:      #ffffff;
  --overlay:   rgba(0,0,0,0.55);
  --nav-bg:    rgba(255,255,255,0.82);
}
html.dark {
  --bg:        #0b0b0c;
  --text:      #ededed;
  --muted:     #8c8c8c;
  --faint:     rgba(255,255,255,0.16);
  --line:      #1f1f22;
  --card:      #161618;
  --overlay:   rgba(0,0,0,0.7);
  --nav-bg:    rgba(11,11,12,0.82);
}

* { box-sizing:border-box; margin:0; padding:0; }

html, body {
  min-height:100%;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .35s ease, color .35s ease;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }

/* ───── NAV ───── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top, 0px)) clamp(18px,5vw,48px) 16px;
  background:var(--nav-bg);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-logo {
  font-weight:600; font-size:18px; letter-spacing:-0.01em;
  text-decoration:none; color:var(--text);
}
.nav-right { display:flex; align-items:center; gap:clamp(14px,3vw,26px); }
.nav-links { display:flex; gap:clamp(14px,3vw,26px); }
.nav-links a {
  text-decoration:none; color:var(--muted); font-size:14px; font-weight:500;
  transition:color .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); }

.theme-toggle {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--text);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1; transition:border-color .2s, transform .2s;
}
.theme-toggle:hover { border-color:var(--muted); transform:rotate(15deg); }

/* ───── LAYOUT ───── */
.page {
  min-height:100vh;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:120px clamp(20px,5vw,40px) 100px;
}
.container { width:100%; max-width:720px; margin:0 auto; text-align:left; }

/* ───── HOME ───── */
.logo-word {
  display:block; margin:0 0 26px;
  font-weight:400; font-size:clamp(40px,9vw,86px);
  letter-spacing:-0.03em; line-height:1;
  color:var(--text); text-transform:none;
}

.tagline { font-size:clamp(1em,2.2vw,1.12em); font-weight:400; line-height:1.7; color:var(--text); margin-bottom:20px; max-width:600px; }
.breadth { font-size:clamp(1em,2.2vw,1.12em); font-weight:400; color:var(--muted); line-height:1.7; max-width:560px; }

/* ───── INNER PAGES ───── */
.eyebrow { font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.page h1 { font-size:clamp(2em,6vw,3em); font-weight:600; line-height:1.15; letter-spacing:-0.02em; margin-bottom:28px; }
.page .body p { font-size:clamp(1em,2.2vw,1.12em); font-weight:400; line-height:1.7; color:var(--text); margin-bottom:20px; }
.page .body p.dim { color:var(--muted); }

.contact-list { margin-top:8px; }
.contact-row { display:flex; flex-direction:column; gap:4px; padding:18px 0; border-top:1px solid var(--line); }
.contact-row:last-child { border-bottom:1px solid var(--line); }
.contact-row .label { font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.contact-row a, .contact-row span.val { font-size:clamp(1em,2.2vw,1.12em); font-weight:400; color:var(--text); text-decoration:none; }
.contact-row a:hover { text-decoration:underline; }

/* ───── FOOTER ───── */
.site-footer {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  padding:14px clamp(18px,5vw,48px) calc(14px + env(safe-area-inset-bottom, 0px));
  background:var(--nav-bg);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.footer-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 16px; }
.footer-row .sep { opacity:0.4; }
.footer-row a { color:var(--text); text-decoration:none; }
.footer-row a:hover { text-decoration:underline; }
.footer-row a.legal-link { cursor:pointer; color:var(--muted); }
.footer-row a.legal-link:hover { color:var(--text); }

/* ───── FLOATING WORDS (home bg) ───── */
.star-words { position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.star-words span {
  position:absolute; font-size:1em; font-weight:500; color:var(--faint);
  animation:zoomIn 7s linear infinite; opacity:0;
}
.star-words span:nth-child(1){ top:30%; left:40%; animation-delay:0s; }
.star-words span:nth-child(2){ top:52%; left:62%; animation-delay:2.3s; }
.star-words span:nth-child(3){ top:70%; left:28%; animation-delay:4.6s; }
@keyframes zoomIn {
  0%{transform:scale(0.1);opacity:0;} 20%{opacity:0.5;}
  50%{transform:scale(1);opacity:0.8;} 90%{opacity:0;} 100%{transform:scale(5);opacity:0;}
}

/* ───── MODALS ───── */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:10000;
  background:var(--overlay); justify-content:center; align-items:center; padding:24px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  position:relative; background:var(--card); color:var(--text);
  width:100%; max-width:640px; max-height:82vh; overflow-y:auto;
  border-radius:12px; padding:44px 40px 40px;
  border:1px solid var(--line);
  box-shadow:0 16px 60px rgba(0,0,0,0.35); text-align:left;
}
.modal-box h2 { font-size:1.6em; font-weight:600; margin:0 0 6px; line-height:1.2; }
.modal-box h3 { font-size:1.02em; font-weight:600; margin:22px 0 6px; }
.modal-box p { font-size:0.95em; font-weight:400; line-height:1.65; margin:0 0 14px; color:var(--muted); }
.modal-updated { font-size:0.82em; color:var(--muted); opacity:0.7; margin:0 0 22px; }
.modal-close {
  position:absolute; top:14px; right:18px; font-size:1.9em; line-height:1;
  color:var(--text); background:none; border:none; cursor:pointer; padding:4px 8px;
}
.modal-close:hover { color:var(--muted); }

/* ───── MOBILE ───── */
@media (max-width:600px) {
  .nav { padding:12px 18px; }
  .nav-logo { font-size:16px; }
  .nav-links { gap:14px; }
  .nav-links a { font-size:13px; }
  .page { padding:96px 20px 96px; }
  .footer-row { font-size:11.5px; gap:6px 10px; }
  .modal-box { padding:40px 24px 28px; }
}