/* Shared site navigation (used on every page) */
nav { display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 48px; }
.nav-logo { display:flex; align-items:center; gap:11px; text-decoration:none; }
.nav-logo-icon { position:relative; width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nav-logo-icon img { width:32px; height:32px; object-fit:contain; position:relative; z-index:1; }
.nav-logo span { font-size:16px; font-weight:600; color:var(--text1); letter-spacing:-.2px; }

.nav-links { position:relative; display:flex; align-items:center; gap:28px; height:64px; }
.nav-links a { font-size:14px; color:var(--text3); text-decoration:none; transition:color .3s; }
.nav-links a.active { color:var(--accent); }
.nav-indicator {
  position:absolute; bottom:-1px; left:0; width:0; height:2px;
  background:var(--accent); border-radius:2px; opacity:0;
  box-shadow:0 0 10px rgba(217,48,37,.6);
  transition:transform .45s cubic-bezier(.65,0,.35,1), width .45s cubic-bezier(.65,0,.35,1), opacity .3s;
  pointer-events:none;
}
.nav-indicator.no-anim { transition:none; }

.nav-right { display:flex; align-items:center; gap:14px; }
.nav-cta {
  background:var(--accent); color:#fff !important;
  padding:8px 18px; border-radius:7px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:opacity .15s, box-shadow .15s;
  box-shadow:0 0 16px rgba(217,48,37,.18), 0 2px 8px rgba(0,0,0,.4);
}

.hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; cursor:pointer; background:none; border:none;
  border-radius:8px; padding:4px; transition:background .15s;
}
.hamburger span { display:block; width:20px; height:2px; background:var(--text2); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display:none; position:fixed; top:64px; left:0; right:0; bottom:0; z-index:199;
  background:rgba(10,10,14,0.99); padding:8px 0 32px;
  flex-direction:column; overflow-y:auto;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:17px; color:var(--text2); text-decoration:none; padding:16px 24px; border-bottom:1px solid var(--border); display:block; transition:color .15s; }
.mobile-menu a.active { color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.mobile-menu .m-cta {
  margin:20px 24px 0; text-align:center;
  color:#fff !important; background:var(--accent);
  border-radius:10px; font-weight:600; font-size:16px;
  border-bottom:none !important; padding:16px 24px !important;
}

@media(max-width:960px) {
  nav { padding:0 20px !important; }
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
}
@media(prefers-reduced-motion:reduce) {
  .nav-indicator { transition:none; }
}

/* Page swipe between pages (direction follows the menu order) */
@view-transition { navigation: auto; }
nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.65,0,.35,1); }
html[data-swipe="forward"]::view-transition-old(root) { animation-name: swipe-out-left; }
html[data-swipe="forward"]::view-transition-new(root) { animation-name: swipe-in-right; }
html[data-swipe="back"]::view-transition-old(root) { animation-name: swipe-out-right; }
html[data-swipe="back"]::view-transition-new(root) { animation-name: swipe-in-left; }
@keyframes swipe-out-left { to { transform: translateX(-100%); } }
@keyframes swipe-out-right { to { transform: translateX(100%); } }
@keyframes swipe-in-right { from { transform: translateX(100%); } }
@keyframes swipe-in-left { from { transform: translateX(-100%); } }

/* Fallback for browsers without cross-page View Transitions */
.swipe-in-forward { animation: swipe-fade-right .38s cubic-bezier(.65,0,.35,1); }
.swipe-in-back { animation: swipe-fade-left .38s cubic-bezier(.65,0,.35,1); }
@keyframes swipe-fade-right { from { transform: translateX(60px); opacity: 0; } }
@keyframes swipe-fade-left { from { transform: translateX(-60px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .swipe-in-forward, .swipe-in-back { animation: none; }
}

/* No highlight when tapping or clicking; the focus ring only shows while using the keyboard */
html { -webkit-tap-highlight-color:transparent; }
:focus { outline:none; }
html.kb a:focus-visible, html.kb button:focus-visible, html.kb summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* Keep the top menu on one line at narrower desktop widths */
.nav-links a, .nav-logo span { white-space:nowrap; }
@media (max-width:1120px) and (min-width:961px) {
  nav .nav-links { gap:16px; }
  nav .nav-links a { font-size:13px; }
}

/* Light / dark mode toggle button */
.theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border-radius:9px; cursor:pointer;
  background:none; border:1px solid var(--border); color:var(--text2);
  transition:color .2s, background .2s, border-color .2s;
}
.theme-toggle svg { transition:transform .4s cubic-bezier(.65,0,.35,1); }
.theme-toggle .ti-moon { display:none; }
html[data-theme="light"] .theme-toggle .ti-sun { display:none; }
html[data-theme="light"] .theme-toggle .ti-moon { display:block; }
@media(max-width:960px) { .theme-toggle { width:40px; height:40px; } }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition:background-color .3s, color .3s, border-color .3s, fill .3s !important;
}

/* Light mode */
html { color-scheme:dark; }
html[data-theme="light"] {
  color-scheme:light;
  --bg:#f6f6f8; --bg2:#eeeef2; --card:#ffffff; --border:#dcdce4;
  --text1:#15151a; --text2:#475569; --text3:#62626f;
  --accent-glow:rgba(217,48,37,0.14); --accent-glow2:rgba(217,48,37,0.05);
  --glass:rgba(255,255,255,0.75);
  --shadow-card:0 4px 20px rgba(20,20,40,0.07), 0 1px 0 rgba(255,255,255,0.8) inset;
}
html[data-theme="light"] nav { background:rgba(246,246,248,0.9); }
html[data-theme="light"] .mobile-menu { background:rgba(246,246,248,0.99); }
html[data-theme="light"] .nav-cta { box-shadow:0 0 16px rgba(217,48,37,.15), 0 2px 8px rgba(0,0,0,.08); }
html[data-theme="light"] body::before { opacity:.018; }
html[data-theme="light"] .btn-s:not(.dark) { color:#fff; }
html[data-theme="light"] .tc .ttype { filter:brightness(.62) saturate(1.3); }
html[data-theme="light"] .tc .ttype[style*="#FFFFFF"] { color:var(--text1) !important; filter:none; }
html[data-theme="light"] .d-lead {
  background:linear-gradient(140deg, rgba(217,48,37,.08) 0%, #fff 45%, var(--card) 100%);
  box-shadow:0 20px 50px rgba(20,20,40,.08);
}
html[data-theme="light"] .d-old { border-color:#c9c9d3; color:#555563; }
html[data-theme="light"] .d-side.fhp { color:#555563; }
html[data-theme="light"] .d-notif {
  background:rgba(255,255,255,.82); border-color:rgba(0,0,0,.07);
  box-shadow:0 10px 30px rgba(20,20,40,.1);
}
html[data-theme="light"] .d-nh { color:#15151a; }
html[data-theme="light"] .d-nt span:last-child { color:rgba(60,60,67,.6); }
html[data-theme="light"] .d-nl { color:rgba(20,20,24,.88); }
html[data-theme="light"] .d-code { background:rgba(0,0,0,.035); }
html[data-theme="light"] .d-dots i { background:#c8c8d2; }
html[data-theme="light"] .d-dots i.on { background:var(--accent); }
html[data-theme="light"] .hero::before { opacity:.55; }
html[data-theme="light"] .pf { box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 36px rgba(20,20,40,.22); }
html[data-theme="light"] .sp .pf { box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 40px rgba(20,20,40,.22), 0 0 60px rgba(217,48,37,.12); }
html[data-theme="light"] .pw.side { opacity:.85; }
html[data-theme="light"] .cta-logo { box-shadow:0 8px 28px rgba(20,20,40,.2); }
html[data-theme="light"] .intro-box { box-shadow:0 4px 18px rgba(20,20,40,.07); }
html[data-theme="light"] .phones::before { opacity:0; }
html[data-theme="light"] .phone-glow { display:none; }
html[data-theme="light"] .phones .pf { box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 18px rgba(20,20,40,.16); }

/* Theme switch: light wipes down from the top, dark wipes up from the bottom */
html.theme-vt nav { view-transition-name:none; }
html.theme-vt::view-transition-old(root) { animation:none; }
html.theme-vt::view-transition-new(root) { animation:theme-wipe .7s cubic-bezier(.65,0,.35,1); }
html.theme-vt::view-transition-group(root) { animation:none; }
html.theme-vt-up::view-transition-new(root) { animation-name:theme-wipe-up; }
@keyframes theme-wipe-up {
  from { clip-path:inset(100% 0 0 0); }
  to { clip-path:inset(0 0 0 0); }
}
@keyframes theme-wipe {
  from { clip-path:inset(0 0 100% 0); }
  to { clip-path:inset(0 0 0 0); }
}