/* ───────────────────────────────────────────────
   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; }
}

/* --- page fade-in, seamless transitions, logo typing (added) --- */
html.dvmt-fade body{opacity:0}
html.dvmt-fade body.dvmt-ready{opacity:1;transition:opacity .55s ease}
html.dvmt-fade body.dvmt-leaving{opacity:0;transition:opacity .26s ease}
.logo-word.typing::after{content:'';display:inline-block;width:.06em;height:.9em;margin-left:.05em;background:currentColor;vertical-align:-.06em;animation:dvmt-caret 1s steps(1) infinite}
@keyframes dvmt-caret{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){html.dvmt-fade body{opacity:1 !important;transition:none !important}}

/* --- floating draggable edge menu (added) --- */
.edgemenu{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:8px;touch-action:none;-webkit-user-select:none;user-select:none}
.em-items{position:absolute;bottom:calc(100% + 8px);right:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.edgemenu[data-open="true"] .em-items{max-height:60vh;opacity:1}
.em-items a{text-decoration:none;background:var(--card);color:var(--text);border:1px solid var(--line);border-right:none;font-size:13px;font-weight:500;letter-spacing:.02em;padding:11px 16px;border-radius:9px 0 0 9px;transform:translateX(8px);transition:transform .2s ease,background .2s,color .2s;box-shadow:0 8px 26px rgba(0,0,0,.10);white-space:nowrap}
.em-items a:hover,.em-items a.active{transform:translateX(0);background:var(--text);color:var(--bg)}
.em-toggle{writing-mode:vertical-rl;text-orientation:mixed;background:var(--text);color:var(--bg);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:16px 9px;border:none;border-radius:9px 0 0 9px;cursor:grab;transition:padding .2s ease;box-shadow:0 8px 26px rgba(0,0,0,.16)}
.em-toggle:hover{padding-right:13px}
.em-theme{align-self:flex-end;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--text);color:var(--bg);border:none;border-radius:9px 0 0 9px;font-size:15px;line-height:1;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.16);transition:padding .2s ease,opacity .2s ease}
.em-theme:hover{padding-right:5px;opacity:.92}
.edgemenu.dragging{transition:none}
.edgemenu.dragging .em-toggle{cursor:grabbing}
@media (max-width:600px){
  .nav-links{display:none}
  .em-toggle{font-size:11px;padding:14px 8px}
  .em-items a{font-size:14px;padding:12px 18px}
}