/* styles.css (Bundled tokens.css, base.css, components.css) */

/* tokens.css */

/* Font Declarations */
@font-face {
  font-family: 'Syne';
  src: url('/assets/fonts/Syne-700.woff2') format('woff2'),
       url('/assets/fonts/Syne-700.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Syne';
  src: url('/assets/fonts/Syne-800.woff2') format('woff2'),
       url('/assets/fonts/Syne-800.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-400.woff2') format('woff2'),
       url('/assets/fonts/DMSans-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-400italic.woff2') format('woff2'),
       url('/assets/fonts/DMSans-400italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-500.woff2') format('woff2'),
       url('/assets/fonts/DMSans-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-500italic.woff2') format('woff2'),
       url('/assets/fonts/DMSans-500italic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-600.woff2') format('woff2'),
       url('/assets/fonts/DMSans-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('/assets/fonts/DMMono-400.woff2') format('woff2'),
       url('/assets/fonts/DMMono-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('/assets/fonts/DMMono-500.woff2') format('woff2'),
       url('/assets/fonts/DMMono-500.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --navy: #0a1628;
  --navy-mid: #142240;
  --navy-light: #1e3a5f;
  --green: #00e57a;
  --green-dim: #00b85f;
  --green-glow: rgba(0, 229, 122, 0.18);
  --red: #ff3d3d;
  --amber: #f59e0b;
  --amber-glow: rgba(245, 158, 11, 0.15);
  --white: #ffffff;
  --muted: #8a9bb5;
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] {
  color-scheme: light;
  --navy: #f4f1eb;
  --navy-mid: #eae6df;
  --navy-light: #d5d0c8;
  --white: #1a1a2e;
  --muted: #5c6370;
  --border: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.12);
  --green: #00b85f;
  --green-dim: #009e52;
  --green-glow: rgba(0, 184, 95, 0.15);
  --red: #dc2626;
  --amber: #d97706;
  --amber-glow: rgba(217, 119, 6, 0.12);
}


/* base.css */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--navy);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
.syne {
  font-family: 'Syne', sans-serif;
}
.mono {
  font-family: 'DM Mono', monospace;
}

/* Mobile Safari input appearance reset */
input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* GLOBAL INPUT FIXES FOR VISIBILITY */
input, textarea, select {
  color: var(--white);
  -webkit-text-fill-color: var(--white);
}
input::placeholder, textarea::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 0.6;
}
[data-theme="light"] input, 
[data-theme="light"] textarea, 
[data-theme="light"] select,
[data-theme="light"] .input-field,
[data-theme="light"] .search-input,
[data-theme="light"] .manual-input,
[data-theme="light"] .room-input {
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
}
[data-theme="light"] input::placeholder, 
[data-theme="light"] textarea::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 0.8 !important;
}

/* Force Safari/iOS to display autofilled content with high contrast */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--navy-mid) inset !important;
  -webkit-text-fill-color: var(--white) !important;
  color: var(--white) !important;
  transition: background-color 9999s ease-in-out 0s;
}

[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] textarea:-webkit-autofill,
[data-theme="light"] select:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--navy-mid) inset !important;
  -webkit-text-fill-color: #1a1a2e !important;
  color: #1a1a2e !important;
}

/* GRAIN */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .03;
  background-image: url('../images/grain.svg');
  background-repeat: repeat;
  background-size: 200px;
  transition: opacity .35s ease;
}
[data-theme="light"] body::after {
  opacity: .015;
}

/* CURSOR GLOW */
.cursor-glow {
  position: fixed;
  width: 380px;
  max-width: 100vw;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,122,.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .4s;
}
.cursor-glow.active {
  opacity: 1;
}
[data-theme="light"] .cursor-glow {
  background: radial-gradient(circle, rgba(0,184,95,.06) 0%, transparent 70%);
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.25,.46,.45,.94), transform .65s cubic-bezier(.25,.46,.45,.94);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.r1 { transition-delay: .1s; }
.r2 { transition-delay: .2s; }
.r3 { transition-delay: .3s; }
.r4 { transition-delay: .4s; }

@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* HIGHLIGHT UTILITIES FOR DYNAMIC COSTING */
.cost-hl {
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  display: inline-block;
  margin: 0 0.2rem;
  white-space: nowrap;
}
.cost-hl.save {
  background: rgba(0, 229, 122, 0.15);
  color: var(--green);
}
[data-theme="light"] .cost-hl.save {
  background: rgba(0, 184, 95, 0.15);
  color: #008a47;
}
.cost-hl.extra {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber);
}
[data-theme="light"] .cost-hl.extra {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}
.cost-hl.zero {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
[data-theme="light"] .cost-hl.zero {
  background: rgba(0, 0, 0, 0.05);
  color: var(--white);
}

/* components.css */

/* PRELOADER */
.preloader { position:fixed; inset:0; z-index:9999; background:var(--navy); display:flex; align-items:center; justify-content:center; transition:opacity .5s, visibility .5s; }
.preloader.done { opacity:0; visibility:hidden; pointer-events:none; }
.pl-inner { display:flex; flex-direction:column; align-items:center; gap:20px; }
.pl-icon { position:relative; width:52px; height:52px; background:var(--green); border-radius:14px; display:flex; align-items:center; justify-content:center; animation:pl-pulse-scale 1s ease-in-out infinite; }
.pl-icon svg { width:26px; height:26px; color:var(--navy); z-index:1; }
.pl-icon::after { content:''; position:absolute; inset:0; border-radius:14px; border:2px solid var(--green); opacity:0.8; transform:scale(1); animation:pl-pulse-glow 1s ease-in-out infinite; }
@keyframes pl-pulse-scale { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes pl-pulse-glow { 0% { transform:scale(1); opacity:0.8; } 100% { transform:scale(1.4); opacity:0; } }
.pl-bar { width:100px; height:3px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
.pl-fill { height:100%; background:var(--green); border-radius:2px; width:100%; transform:scaleX(0); transform-origin:left; animation:pl-grow 1.3s ease forwards; }
@keyframes pl-grow { 0% { transform:scaleX(0); } 70% { transform:scaleX(0.75); } 100% { transform:scaleX(1); } }
[data-theme="light"] .preloader { background:#0a1628; }
[data-theme="light"] .pl-icon svg { color:#0a1628; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:0 5vw; height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid transparent; transition:background .5s, border-color .5s, box-shadow .5s; }
nav.stuck { background:rgba(10,22,40,.92); border-color:var(--border); backdrop-filter:blur(20px); box-shadow:0 4px 30px rgba(0,0,0,.25); }
[data-theme="light"] nav.stuck { background:rgba(244,241,235,.92); box-shadow:0 4px 30px rgba(0,0,0,.06); }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; transition:transform .2s; }
.nav-logo:hover { transform:scale(1.03); }
.nav-logo-icon { width:34px; height:34px; background:var(--green); border-radius:8px; display:flex; align-items:center; justify-content:center; transition:box-shadow .3s; }
.nav-logo:hover .nav-logo-icon { box-shadow:0 0 16px rgba(0,229,122,.3); }
.nav-logo-icon svg { width:20px; height:20px; color:var(--navy); }
[data-theme="light"] .nav-logo-icon svg { color:#0a1628; }
.nav-wordmark { font-family:'Syne', sans-serif; font-size:1.2rem; font-weight:800; color:var(--white); }
.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a { font-size:.88rem; color:rgba(255,255,255,.6); text-decoration:none; position:relative; transition:color .25s; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--green); border-radius:1px; transition:width .3s; }
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
[data-theme="light"] .nav-links a { color:rgba(26,26,46,.55); }
[data-theme="light"] .nav-links a:hover { color:#1a1a2e; }
.nav-cta { background:var(--green)!important; color:var(--navy)!important; padding:.45rem 1.2rem; border-radius:100px; font-weight:600; transition:transform .25s, box-shadow .3s!important; }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,229,122,.3)!important; }
.nav-cta::after { display:none!important; }
[data-theme="light"] .nav-cta { color:#0a1628!important; }
.nav-actions { display:flex; align-items:center; gap:8px; }
.theme-toggle { background:none; border:1px solid var(--border-light); border-radius:8px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--white); transition:border-color .2s, background .2s, transform .2s; flex-shrink:0; }
.theme-toggle:hover { border-color:var(--green); transform:scale(1.05); }
.theme-toggle:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.theme-toggle .sun-icon { display:none; }
.theme-toggle .moon-icon { display:block; }
[data-theme="light"] .theme-toggle .sun-icon { display:block; }
[data-theme="light"] .theme-toggle .moon-icon { display:none; }
[data-theme="light"] .theme-toggle { color:#1a1a2e; border-color:rgba(0,0,0,.12); }
.hamburger { display:none; background:none; border:1px solid var(--border-light); border-radius:6px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; color:var(--white); transition:border-color .2s; }
.hamburger:hover { border-color:var(--green); }
[data-theme="light"] .hamburger { color:#1a1a2e; border-color:rgba(0,0,0,.12); }
[data-theme="light"] .hamburger:hover { border-color:var(--green); }

/* MOBILE MENU */
.mmenu { position:fixed; top:68px; right:0; bottom:0; width:72vw; max-width:280px; background:rgba(20,34,64,.97); border-left:1px solid var(--border); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1), background .35s ease; z-index:99; padding:28px 22px; display:flex; flex-direction:column; gap:22px; backdrop-filter:blur(20px); }
.mmenu.open { transform:translateX(0); }
.mmenu a { font-family:'Syne', sans-serif; font-size:1.05rem; color:rgba(255,255,255,.7); text-decoration:none; transition:color .25s, transform .25s; }
.mmenu a:hover { color:var(--white); transform:translateX(3px); }
.mmenu .mcta { background:var(--green); color:#0a1628!important; padding:.6rem 1.1rem; border-radius:100px; font-weight:700; text-align:center; }
[data-theme="light"] .mmenu { background:rgba(234,230,223,.97); }
[data-theme="light"] .mmenu a { color:rgba(26,26,46,.7); }
[data-theme="light"] .mmenu a:hover { color:#1a1a2e; }
[data-theme="light"] .mmenu .mcta { color:#0a1628!important; }

/* BACK BUTTON */
.btn-back {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .3s, color .3s;
  padding: 0;
}
.btn-back:hover {
  text-decoration-color: var(--muted);
  color: var(--white);
}
[data-theme="light"] .btn-back:hover {
  color: #1a1a2e;
}

@media(max-width:900px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
}
@media(min-width:901px) {
  .mmenu { display:none!important; }
}

/* SHARED SECTION HELPERS */
.section-inner { max-width:1100px; margin:0 auto; }
.stag { display:inline-block; font-family:'DM Mono', monospace; font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; padding:.3rem .8rem; border-radius:100px; margin-bottom:1rem; }
.stag.green { color:var(--green); border:1px solid rgba(0,229,122,.22); }
.stag.red { color:var(--red); border:1px solid rgba(255,61,61,.22); }
.stag.amber { color:var(--amber); border:1px solid rgba(245,158,11,.22); }
h1 { font-family:'Syne', sans-serif; font-size:clamp(2.5rem, 4.5vw, 3.6rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin-bottom:1.3rem; }
h2 { font-family:'Syne', sans-serif; font-size:clamp(1.8rem, 3.5vw, 2.8rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; margin-bottom:.8rem; }
.sec-sub { font-size:.95rem; color:var(--muted); max-width:48ch; line-height:1.65; }

/* BUTTONS */
.btn-primary { display:inline-flex; align-items:center; gap:10px; background:var(--green); color:var(--navy); font-family:'Syne', sans-serif; font-size:1rem; font-weight:700; padding:.85rem 1.8rem; border-radius:100px; text-decoration:none; border:none; cursor:pointer; position:relative; overflow:hidden; transition:transform .2s, box-shadow .3s; }
.btn-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition:left .5s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--green-glow); }
.btn-primary:hover::before { left:100%; }
.btn-primary .arr { transition:transform .25s; }
.btn-primary:hover .arr { transform:translateX(4px); }
.btn-primary:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
[data-theme="light"] .btn-primary { color:#0a1628; }

/* FOOTER */
footer { background:var(--navy); border-top:1px solid var(--border); padding:48px 5vw 24px; transition:background .35s ease; }
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:36px; }
@media(max-width:900px) { .footer-grid { grid-template-columns:1fr; gap:24px; } }
.fbrand { display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:10px; transition:transform .2s; }
.fbrand:hover { transform:scale(1.03); }
.fbrand-icon { width:28px; height:28px; background:var(--green); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.fbrand-icon svg { width:15px; height:15px; color:#0a1628; }
[data-theme="light"] .fbrand-icon svg { color:#0a1628; }
.fbrand-name { font-family:'Syne', sans-serif; font-weight:800; color:var(--white); font-size:.95rem; }
.ftagline { font-size:.84rem; color:var(--muted); line-height:1.55; max-width:30ch; }
.fcol h4 { font-family:'Syne', sans-serif; font-weight:700; font-size:.85rem; margin-bottom:12px; color:rgba(255,255,255,.55); }
[data-theme="light"] .fcol h4 { color:rgba(26,26,46,.75); }
.fcol ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.fcol ul li a, .fcol ul li span { font-size:.84rem; color:var(--muted); text-decoration:none; transition:color .25s; }
.fcol ul li a:hover { color:var(--green); }
[data-theme="light"] .fcol ul li a:hover { color:#008a47; }
.fbottom { border-top:1px solid var(--border); padding-top:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.fbottom p { font-size:.78rem; color:rgba(255,255,255,.18); }
[data-theme="light"] .fbottom p { color:rgba(26,26,46,.75); }
.flinks { display:flex; gap:18px; }
.flinks a { font-size:.78rem; color:rgba(255,255,255,.18); text-decoration:none; transition:color .25s; }
.flinks a:hover { color:rgba(255,255,255,.45); }
[data-theme="light"] .flinks a { color:rgba(26,26,46,.75); }
[data-theme="light"] .flinks a:hover { color:rgba(26,26,46,.95); }
[data-theme="light"] .spd-val.g { color:#047857 !important; }
[data-theme="light"] .spd-val.a { color:#b45309 !important; }

/* FAB */
.fab { display:none; position:fixed; bottom:24px; right:24px; z-index:50; width:50px; height:50px; border-radius:50%; background:var(--green); align-items:center; justify-content:center; text-decoration:none; box-shadow:0 6px 20px rgba(0,229,122,.3); transition:transform .25s, box-shadow .3s; }
.fab:hover { transform:scale(1.06); box-shadow:0 10px 28px rgba(0,229,122,.35); }
.fab svg { width:20px; height:20px; color:#0a1628; }
.fab:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
@media(max-width:900px) { .fab { display:flex; } }
[data-theme="light"] .fab svg { color:#0a1628; }

@media(prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}

/* Legal & policy pages text contrast adjustments */
.policy-container p {
  color: #f3f4f6 !important; /* Crisp off-white for dark mode */
}
[data-theme="light"] .policy-container p {
  color: #111827 !important; /* True black/dark-gray for light mode */
}