/* ================================================================
   HydroMind.AI — Style v4.2 — Full-Width Content Fix
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ================================================================
   HydroMind v7.0 — Orange Theme Override
   ================================================================ */
:root {
  --nav-h: 52px;
  --gold:  #f97316;
  --gold2: #c2410c;
  --cyan:  #f97316;
  --gold-y:#f97316;
  --bg:    #0d0f12;
  --bg2:   #13171d;
  --bg3:   #1a1f28;
  --card:  rgba(26,31,40,.95);
  --border: rgba(249,115,22,.12);
  --border2: rgba(249,115,22,.06);
  --text1: #e2e8f0;
  --text2: #94a3b8;
  --text3: #64748b;
}
.hm-logo-icon { background: #f97316 !important; border-radius: 8px !important; }
.hm-logo-h { color: #fff !important; font-family: Syne, sans-serif !important; font-weight: 800 !important; }
.hm-logo-ring { border-color: rgba(249,115,22,.4) !important; }
.hm-logo-name span { color: #f97316 !important; }
.hm-logo-sub { color: rgba(249,115,22,.5) !important; font-family: 'Share Tech Mono', monospace !important; }
.navbar { height: 52px !important; background: rgba(13,15,18,.97) !important; border-bottom: 1px solid #2a3040 !important; display: none !important; }
.btn-primary { background: #f97316 !important; border-color: #f97316 !important; color: #fff !important; }
.btn-primary:hover { background: #ea6a08 !important; }
.text-gold, .text-cyan { color: #f97316 !important; }
.eyebrow { color: #f97316 !important; }
.gold-breathe { color: #f97316 !important; }
.badge-pill { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.2) !important; color: #22c55e !important; }
.pricing-card.featured { border-color: #f97316 !important; }
.plan-btn.featured-btn { background: #f97316 !important; border-color: #f97316 !important; }
.hm-left-sidebar { top: 52px !important; height: calc(100vh - 52px) !important; }
.hm-right-sidebar { top: 52px !important; height: calc(100vh - 52px) !important; }
.hm-main-content { margin-top: 52px !important; }
.page-layout { padding-top: 52px !important; }
/* ================================================================ */


:root {
  --left-sb:  220px;
  --right-sb: 200px;
  --nav-h:    52px;
  --gold:    #f97316;
  --gold2:   #8b6914;
  --cyan:    #f97316;
  --green:   #4caf82;
  --red:     #e24b4a;
  --purple:  #9b59b6;
  --gold-y:  #f97316;
  --bg:      #080c12;
  --bg2:     #0d1320;
  --bg3:     #111826;
  --card:    rgba(15,20,32,.9);
  --border:  rgba(249,115,22,.1);
  --border2: rgba(249,115,22,.06);
  --text1:   #f0ebe0;
  --text2:   rgba(220,210,195,.65);
  --text3:   rgba(200,190,175,.35);
  --radius:  8px;
  --radius-lg: 14px;
  --tr:      all .22s ease;
  --shadow:  0 8px 40px rgba(0,0,0,.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text2);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Circuit BG ── */
.circuit-bg {
  position: fixed;
  top: 52px;
  left: var(--left-sb);
  width: calc(100vw - var(--left-sb) - var(--right-sb));
  height: calc(100vh - 52px);
  pointer-events: none; z-index: 0; overflow: hidden;
}
.circuit-bg svg { width: 100%; height: 100%; }
@keyframes flow-dash   { from{stroke-dashoffset:60} to{stroke-dashoffset:0} }
@keyframes flow-dash-r { from{stroke-dashoffset:0} to{stroke-dashoffset:60} }
.c-trace      { stroke-dasharray:12 8; animation:flow-dash   2.5s linear infinite; }
.c-trace-r    { stroke-dasharray:12 8; animation:flow-dash-r 2.5s linear infinite; }
.c-trace-slow { stroke-dasharray:12 8; animation:flow-dash   5s   linear infinite; }
@keyframes node-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }

/* ================================================================
   ANIMATED LOGO
   ================================================================ */
.hm-logo-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; flex-shrink:0; }
.hm-logo-icon {
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,var(--gold),#ea6a08);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; flex-shrink:0;
  box-shadow:0 4px 16px rgba(249,115,22,.25);
}
.hm-logo-icon::before {
  content:''; position:absolute; top:0; left:-100%;
  width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:logo-shimmer 3.5s ease-in-out infinite;
}
@keyframes logo-shimmer { 0%{left:-100%} 45%{left:160%} 100%{left:160%} }
.hm-logo-ring { position:absolute; inset:-3px; border-radius:11px; border:1.5px solid rgba(249,115,22,.45); animation:logo-ring 2.8s ease-in-out infinite; pointer-events:none; }
@keyframes logo-ring { 0%,100%{opacity:0;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
.hm-logo-h { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; color:#080c12; position:relative; z-index:1; letter-spacing:-0.5px; }
.hm-logo-text { display:flex; flex-direction:column; gap:1px; }
.hm-logo-name { font-family:'Syne',sans-serif; font-weight:800; font-size:1.1rem; color:var(--text1); letter-spacing:.5px; line-height:1; }
.hm-logo-name span { color:#f97316; animation:gold-breathe 3s ease-in-out infinite; }
@keyframes gold-breathe { 0%,100%{opacity:1} 50%{opacity:.65} }
.hm-logo-sub { font-family:'Space Mono',monospace; font-size:.58rem; color:rgba(249,115,22,.5); letter-spacing:.2em; text-transform:uppercase; }

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:900;
  background:rgba(8,12,18,.97);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  transition:var(--tr);
}
.navbar-inner {
  height:100%; padding:0 1rem;
  display:flex; align-items:center; gap:.5rem;
  width:100%; overflow:hidden;
}
.navbar-menu { display:flex; align-items:center; gap:.1rem; flex:1; overflow:hidden; }
.navbar-link { padding:6px 10px; border-radius:6px; font-size:.85rem; color:var(--text3); transition:var(--tr); white-space:nowrap; font-weight:400; }
.navbar-link:hover { color:var(--text1); background:rgba(249,115,22,.06); }
.navbar-link.active { color:#f97316; }
.navbar-cta { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.navbar-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0; }
.navbar-toggle span { display:block; width:22px; height:2px; background:var(--text2); border-radius:2px; transition:var(--tr); }
.navbar-mobile {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background:rgba(8,12,18,.98); border-bottom:1px solid var(--border);
  padding:.75rem 1rem; z-index:899; flex-direction:column; gap:.25rem;
  backdrop-filter:blur(16px);
}
.navbar-mobile a { display:block; padding:9px 14px; border-radius:7px; color:var(--text2); font-size:.9rem; transition:var(--tr); }
.navbar-mobile a:hover { color:#f97316; background:rgba(249,115,22,.06); }
.navbar-mobile.open { display:flex; }
.navbar-mobile-auth { display:flex; gap:.5rem; margin-top:.5rem; padding-top:.75rem; border-top:1px solid var(--border); }

/* ================================================================
   PAGE LAYOUT WRAPPER
   ================================================================ */
.page-layout {
  position:relative;
  width:100%;
  min-height:calc(100vh - var(--nav-h));
}

/* ================================================================
   LEFT SIDEBAR  — fixed, full height
   ================================================================ */
.hm-left-sidebar {
  width:var(--left-sb); flex-shrink:0;
  position:fixed; top:var(--nav-h); left:0;
  height:calc(100vh - var(--nav-h));
  background:rgba(8,12,20,.98);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden; z-index:850;
}
.hm-left-inner { flex:1; overflow-y:auto; padding:.9rem .8rem; }
.hm-sidebar-label { font-family:'Space Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text3); padding:0 .25rem .45rem; border-bottom:1px solid var(--border); margin-bottom:.5rem; }
.hm-profile-card { background:rgba(249,115,22,.04); border:1px solid var(--border); border-radius:10px; padding:.9rem; margin-bottom:.65rem; position:relative; }
.hm-prof-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold),#ea6a08); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:.95rem; color:#080c12; margin-bottom:.5rem; }
.hm-prof-name  { font-size:.88rem; font-weight:600; color:var(--text1); }
.hm-prof-email { font-family:'Space Mono',monospace; font-size:.62rem; color:var(--text3); margin:2px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-prof-plan  { font-family:'Space Mono',monospace; font-size:.62rem; padding:2px 9px; border-radius:100px; background:rgba(249,115,22,.1); color:#f97316; border:1px solid rgba(249,115,22,.2); display:inline-block; }
.hm-no-auth { text-align:center; padding:.75rem .25rem; }
.hm-no-auth p { font-size:.82rem; color:var(--text3); margin-bottom:.65rem; line-height:1.6; }
.hm-hist-item { display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:7px; cursor:pointer; transition:.18s; margin-bottom:2px; }
.hm-hist-item:hover { background:rgba(249,115,22,.07); }
.hm-hist-icon { font-size:.82rem; flex-shrink:0; }
.hm-hist-text { font-size:.8rem; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.hm-hist-tag  { font-family:'Space Mono',monospace; font-size:.58rem; padding:2px 7px; border-radius:100px; flex-shrink:0; }
.tag-hyd  { background:rgba(249,115,22,.1);  color:#f97316; }
.tag-elec { background:rgba(249,115,22,.1); color:#f97316; }
.tag-crane{ background:rgba(76,175,130,.1); color:var(--green); }
.tag-calc { background:rgba(155,89,182,.1); color:var(--purple); }
.hm-left-bottom { padding:.65rem .75rem; border-top:1px solid var(--border); flex-shrink:0; }
.hm-logout-btn { width:100%; background:transparent; border:1px solid var(--border); border-radius:7px; padding:8px; font-family:'Space Mono',monospace; font-size:.68rem; color:var(--text3); cursor:pointer; transition:.2s; text-align:center; }
.hm-logout-btn:hover { border-color:rgba(226,75,74,.35); color:var(--red); }

/* ================================================================
   RIGHT SIDEBAR — fixed
   ================================================================ */
.hm-right-sidebar {
  width:var(--right-sb); flex-shrink:0;
  position:fixed; top:var(--nav-h); right:0;
  height:calc(100vh - var(--nav-h));
  background:rgba(8,12,20,.98);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:.8rem .7rem;
  z-index:850; overflow-y:auto;
}

/* ================================================================
   MAIN CONTENT — fills EXACT space between both fixed sidebars
   ================================================================ */
.hm-main-content {
  margin-left: var(--left-sb);
  margin-right: var(--right-sb);
  margin-top: var(--nav-h);
  width: calc(100% - var(--left-sb) - var(--right-sb));
  min-height: calc(100vh - var(--nav-h));
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* All containers inside main content — full width, tight padding */
.hm-main-content .container {
  max-width: 100% !important;
  padding: 0 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* ================================================================
   AUTH MODAL
   ================================================================ */
.hm-auth-overlay { display:none; position:fixed; inset:0; background:rgba(4,6,12,.92); backdrop-filter:blur(16px); z-index:9999; align-items:center; justify-content:center; }
.hm-auth-box { background:rgba(10,16,28,.98); border:1px solid rgba(249,115,22,.2); border-radius:18px; width:100%; max-width:430px; margin:0 1.25rem; overflow:hidden; box-shadow:0 0 80px rgba(249,115,22,.07); }
.hm-auth-tabs { display:flex; border-bottom:1px solid rgba(249,115,22,.1); }
.hm-auth-tab { flex:1; padding:1rem; background:transparent; border:none; font-family:'Space Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; border-bottom:2px solid transparent; transition:.2s; color:var(--text3); }
.hm-auth-tab.active { background:rgba(249,115,22,.06); color:#f97316; border-bottom:2px solid var(--gold); }
.hm-auth-close { padding:1rem 1.25rem; background:transparent; border:none; font-size:1.1rem; color:var(--text3); cursor:pointer; transition:.2s; }
.hm-auth-close:hover { color:#f97316; }
.hm-auth-panel { padding:1.85rem; }
.hm-auth-title { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; color:var(--text1); margin-bottom:.3rem; }
.hm-auth-sub   { font-size:.88rem; color:var(--text3); margin-bottom:1.5rem; }
.hm-auth-field { margin-bottom:.95rem; }
.hm-auth-field label { display:block; font-family:'Space Mono',monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); margin-bottom:6px; }
.hm-auth-input { width:100%; background:rgba(4,8,16,.88); border:1px solid rgba(249,115,22,.14); border-radius:8px; padding:11px 14px; font-family:'Outfit',sans-serif; font-size:.95rem; color:var(--text1); outline:none; transition:.2s; box-sizing:border-box; }
.hm-auth-input:focus { border-color:rgba(249,115,22,.45); box-shadow:0 0 0 3px rgba(249,115,22,.06); }
.hm-auth-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.hm-auth-btn  { width:100%; background:linear-gradient(135deg,var(--gold),#ea6a08); border:none; border-radius:8px; padding:13px; color:#080c12; font-family:'Outfit',sans-serif; font-weight:700; font-size:.95rem; cursor:pointer; transition:.2s; margin-bottom:.9rem; }
.hm-auth-btn:hover { opacity:.88; }
.hm-auth-btn.cyan { background:linear-gradient(135deg,#f97316,#0070cc); color:#000; }
.hm-auth-link   { background:none; border:none; color:#f97316; cursor:pointer; font-size:.88rem; font-family:'Outfit',sans-serif; padding:0; }
.hm-auth-forgot { text-align:right; margin-bottom:1.1rem; }
.hm-auth-footer { text-align:center; font-size:.88rem; color:var(--text3); }
.hm-auth-error  { display:none; background:rgba(226,75,74,.08); border:1px solid rgba(226,75,74,.22); border-radius:7px; padding:.75rem 1rem; font-size:.86rem; color:var(--red); margin-bottom:.85rem; }
.hm-auth-ok     { display:none; background:rgba(76,175,130,.07); border:1px solid rgba(76,175,130,.2); border-radius:7px; padding:.75rem 1rem; font-size:.86rem; color:var(--green); margin-bottom:.85rem; }

/* ================================================================
   SECTIONS & TYPOGRAPHY
   ================================================================ */
.section        { padding:5rem 0; position:relative; z-index:1; }
.section-dark   { background:rgba(6,10,20,.88); }
.section-darker { background:rgba(4,8,16,.92); }

/* Default container (homepage / no sidebar) */
.container { max-width:1100px; margin:0 auto; padding:0 2rem; box-sizing:border-box; }

/* Page header on sidebar pages */
.page-header { padding:3.5rem 0 2.5rem; background:rgba(6,10,20,.88); border-bottom:1px solid var(--border); }
.breadcrumb { font-family:'Space Mono',monospace; font-size:.72rem; color:var(--text3); margin-bottom:.75rem; }
.breadcrumb a { color:#f97316; }
.eyebrow { display:flex; align-items:center; gap:.6rem; font-family:'Space Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:#f97316; margin-bottom:.85rem; }

h1,h2,h3,h4 { font-family:'Syne',sans-serif; font-weight:800; color:var(--text1); line-height:1.1; }
h1 { font-size:clamp(2rem,4vw,3.5rem); }
h2 { font-size:clamp(1.6rem,2.8vw,2.4rem); }
h3 { font-size:1.3rem; margin-bottom:.55rem; }
h4 { font-size:1.1rem; }
p  { line-height:1.82; font-size:1rem; }

.section-title    { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,3vw,2.8rem); color:var(--text1); line-height:1.1; margin-bottom:.75rem; }
.section-subtitle { font-size:1rem; color:var(--text2); max-width:680px; line-height:1.82; margin-top:.5rem; }
.text-gold  { color:#f97316; }
.text-cyan  { color:#f97316; }
.text-center { text-align:center; }
.mt-4 { margin-top:2rem; }

/* ================================================================
   GRID LAYOUTS
   ================================================================ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

/* ================================================================
   CARDS
   ================================================================ */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.service-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.85rem; transition:var(--tr); }
.service-card:hover { border-color:rgba(249,115,22,.3); transform:translateY(-4px); box-shadow:var(--shadow); }
.service-icon { width:48px; height:48px; border-radius:10px; background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.18); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.1rem; }
.service-link { font-family:'Space Mono',monospace; font-size:.72rem; color:#f97316; text-transform:uppercase; letter-spacing:.07em; margin-top:1rem; display:inline-block; transition:var(--tr); }
.service-link:hover { color:var(--text1); }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary { display:inline-flex; align-items:center; gap:6px; padding:11px 24px; border-radius:var(--radius); background:linear-gradient(135deg,var(--gold),#ea6a08); color:#080c12; font-weight:700; font-size:.9rem; border:none; cursor:pointer; transition:var(--tr); text-decoration:none; letter-spacing:.02em; }
.btn-primary:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 6px 20px rgba(249,115,22,.25); }
.btn-outline { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:var(--radius); border:1px solid rgba(249,115,22,.3); color:#f97316; font-size:.88rem; background:transparent; cursor:pointer; transition:var(--tr); text-decoration:none; font-weight:500; }
.btn-outline:hover { background:rgba(249,115,22,.08); border-color:rgba(249,115,22,.5); }

/* ================================================================
   CALCULATOR
   ================================================================ */
.calc-tab { padding:9px 20px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--text3); font-size:.84rem; font-family:'Space Mono',monospace; cursor:pointer; transition:var(--tr); }
.calc-tab:hover { border-color:rgba(249,115,22,.35); color:var(--text2); }
.calc-tab.active { border-color:#f97316; color:#f97316; background:rgba(249,115,22,.07); }
.calc-mode-btn { padding:7px 16px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--text3); font-size:.76rem; font-family:'Space Mono',monospace; cursor:pointer; transition:var(--tr); }
.calc-mode-btn.active { border-color:rgba(249,115,22,.45); color:#f97316; background:rgba(249,115,22,.06); }
.calc-body { padding:1.5rem; display:flex; flex-direction:column; gap:0; }
.calc-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.calc-field { display:flex; flex-direction:column; gap:6px; }
.calc-label { font-family:'Space Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); }
.calc-input-wrap { display:flex; align-items:center; }
.calc-input { flex:1; background:rgba(4,8,16,.88); border:1px solid var(--border); border-right:none; border-radius:6px 0 0 6px; padding:11px 13px; font-family:'Space Mono',monospace; font-size:.92rem; color:var(--text1); outline:none; transition:var(--tr); }
.calc-input:focus { border-color:rgba(249,115,22,.45); }
.calc-unit { background:rgba(249,115,22,.07); border:1px solid rgba(249,115,22,.18); border-radius:0 6px 6px 0; padding:11px 10px; font-family:'Space Mono',monospace; font-size:.76rem; color:#f97316; min-width:48px; text-align:center; }
.calc-divider { height:1px; background:var(--border); margin:.75rem 0 1.25rem; }
.calc-results-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.calc-result-card { background:rgba(249,115,22,.04); border:1px solid rgba(249,115,22,.1); border-radius:8px; padding:.85rem; text-align:center; }
.calc-result-label { font-family:'Space Mono',monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); margin-bottom:.35rem; }
.calc-result-val   { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:800; color:#f97316; line-height:1.1; }
.calc-result-unit  { font-family:'Space Mono',monospace; font-size:.62rem; color:var(--text3); margin-top:.2rem; }

/* ================================================================
   PRICING
   ================================================================ */
.pricing-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:2rem; }
.pricing-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; display:flex; flex-direction:column; transition:var(--tr); min-width:0; }
.pricing-card:hover { border-color:rgba(249,115,22,.3); transform:translateY(-4px); box-shadow:var(--shadow); }
.pricing-card.featured { border-color:rgba(249,115,22,.4); background:rgba(249,115,22,.04); position:relative; }
.pricing-card.featured::before { content:'Most Popular'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold),#ea6a08); color:#080c12; font-family:'Space Mono',monospace; font-size:.66rem; padding:3px 14px; border-radius:100px; white-space:nowrap; font-weight:700; }
.plan-name  { font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:800; color:var(--text1); margin-bottom:.4rem; }
.plan-price { font-family:'Syne',sans-serif; font-size:2.4rem; font-weight:800; color:#f97316; line-height:1; margin-bottom:.25rem; }
.plan-price span { font-size:1.1rem; font-weight:400; color:var(--text3); }
.plan-desc { font-size:.9rem; color:var(--text2); margin-bottom:1.5rem; line-height:1.7; }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.85rem; flex:1; }
.plan-features li { font-size:.88rem; color:var(--text2); padding-left:1.3rem; position:relative; }
.plan-features li::before { content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700; }
.plan-btn { display:block; text-align:center; padding:13px; border-radius:var(--radius); border:1px solid rgba(249,115,22,.3); color:#f97316; font-size:.92rem; font-family:'Outfit',sans-serif; font-weight:600; transition:var(--tr); text-decoration:none; cursor:pointer; background:transparent; }
.plan-btn:hover { background:rgba(249,115,22,.08); }
.plan-btn.featured-btn { background:linear-gradient(135deg,var(--gold),#ea6a08); border:none; color:#080c12; }
.plan-btn.featured-btn:hover { opacity:.88; }
.section-eyebrow { font-family:'Space Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:#f97316; margin-bottom:.85rem; display:flex; align-items:center; gap:.6rem; }

/* Comparison table — full width */
.compare-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.compare-table th { font-family:'Space Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
.compare-table td { padding:.85rem 1rem; font-size:.9rem; color:var(--text2); border-bottom:1px solid var(--border2); word-wrap:break-word; }
.compare-table tr:hover td { background:rgba(249,115,22,.03); }

/* ================================================================
   FORMS
   ================================================================ */
.form-group  { margin-bottom:1.35rem; }
.form-label  { display:block; font-family:'Space Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); margin-bottom:7px; }
.form-input  { width:100%; background:rgba(4,8,16,.88); border:1px solid var(--border); border-radius:var(--radius); padding:12px 15px; font-family:'Outfit',sans-serif; font-size:.95rem; color:var(--text1); outline:none; transition:var(--tr); box-sizing:border-box; }
.form-input:focus { border-color:rgba(249,115,22,.45); }
textarea.form-input { resize:vertical; min-height:130px; }
.form-textarea { width:100%; background:rgba(4,8,16,.88); border:1px solid var(--border); border-radius:var(--radius); padding:12px 15px; font-family:'Outfit',sans-serif; font-size:.95rem; color:var(--text1); outline:none; transition:var(--tr); resize:vertical; min-height:160px; line-height:1.7; box-sizing:border-box; }
.form-textarea:focus { border-color:rgba(249,115,22,.45); }
.form-select { cursor:pointer; }
.cat-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid var(--border); border-radius:100px; cursor:pointer; transition:var(--tr); font-size:.82rem; color:var(--text2); }
.cat-pill:hover { border-color:rgba(249,115,22,.35); color:#f97316; }
.cat-pill input[type="checkbox"] { accent-color:#f97316; }
.hm-main-content form         { width:100%; box-sizing:border-box; }
.hm-main-content form > div  { width:100%; box-sizing:border-box; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background:rgba(4,6,14,.98); border-top:1px solid var(--border); padding:4rem 0 2.5rem; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:1.5rem; margin-bottom:3rem; }
.footer-brand p { font-size:.9rem; color:var(--text3); line-height:1.75; margin:.85rem 0 1.35rem; max-width:260px; }
.footer-col h5 { font-family:'Space Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text3); margin-bottom:1.25rem; }
.footer-links { display:flex; flex-direction:column; gap:.55rem; }
.footer-links a { font-size:.9rem; color:var(--text2); transition:var(--tr); word-break:break-word; }
.footer-links a:hover { color:#f97316; }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.35rem; display:flex; justify-content:space-between; align-items:center; font-family:'Space Mono',monospace; font-size:.68rem; color:var(--text3); flex-wrap:wrap; gap:.5rem; }
.footer-bottom-links { display:flex; gap:1.35rem; }
.footer-bottom-links a:hover { color:#f97316; }
.badge-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:100px; background:rgba(76,175,130,.08); border:1px solid rgba(76,175,130,.2); font-family:'Space Mono',monospace; font-size:.68rem; color:var(--green); }

/* ================================================================
   REVEAL ANIMATION
   ================================================================ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* 1600px+ Widescreen */
@media(min-width:1600px){
  :root { --left-sb:240px; }
  .hm-main-content { margin-left:240px; width:calc(100% - 240px - 200px); }
  .circuit-bg { left:240px; width:calc(100vw - 240px - 200px); }
}

/* 1280px Hide right sidebar */
@media(max-width:1280px){
  .hm-right-sidebar  { display:none; }
  .hm-main-content   { margin-right:0; width:calc(100% - var(--left-sb)); }
  .circuit-bg { width:calc(100vw - var(--left-sb)); }
}

/* 1100px Compact left sidebar */
@media(max-width:1100px){
  :root { --left-sb:180px; }
  .hm-right-sidebar  { display:none; }
  .hm-main-content   { margin-left:180px; margin-right:0; width:calc(100% - 180px); }
  .circuit-bg { left:180px; width:calc(100vw - 180px); }
  .navbar-link       { font-size:.78rem; padding:5px 7px; }
  .hm-logo-sub       { display:none; }
  .hm-logo-name      { font-size:.9rem; }
  .hm-logo-icon      { width:30px; height:30px; }
  .hm-logo-h         { font-size:16px; }
  .navbar-cta        { gap:.3rem; }
  #hmNavPlan         { display:none; }
  #hmNavName         { max-width:55px; font-size:.75rem; }
  #hmNavAvatar       { width:24px; height:24px; font-size:.65rem; }
  .footer-grid       { grid-template-columns:1fr 1fr; gap:2rem; }
}

/* 900px Hide left sidebar, show hamburger */
@media(max-width:900px){
  .hm-left-sidebar   { display:none; }
  .hm-right-sidebar  { display:none; }
  .hm-main-content   { margin-left:0; margin-right:0; margin-top:var(--nav-h); width:100%; }
  .circuit-bg { left:0; width:100vw; }
  .page-layout       { display:block; width:100%; }
  .navbar-menu       { display:none !important; }
  .navbar-toggle     { display:flex !important; }
  .footer-grid       { grid-template-columns:1fr 1fr; gap:1.5rem; }
}

/* 768px Tablet */
@media(max-width:768px){
  .hm-left-sidebar  { display:none; }
  .hm-right-sidebar { display:none; }
  .hm-main-content  { margin:0; margin-top:var(--nav-h); width:100%; }
  .circuit-bg { left:0; width:100vw; }
  .footer           { margin-left:0 !important; }
  .navbar-menu      { display:none !important; }
  .navbar-toggle    { display:flex !important; }
  .grid-2           { grid-template-columns:1fr; gap:2rem; }
  .grid-3           { grid-template-columns:1fr 1fr; gap:1rem; }
  .calc-results-grid{ grid-template-columns:1fr 1fr; }
  .section          { padding:3.5rem 0; }
  h1 { font-size:clamp(1.7rem,6vw,2.5rem); }
  h2 { font-size:clamp(1.4rem,4vw,1.9rem); }
}

/* 600px Mobile */
@media(max-width:600px){
  .footer-grid       { grid-template-columns:1fr; }
  .grid-3            { grid-template-columns:1fr; }
  .calc-row          { grid-template-columns:1fr; }
  .calc-results-grid { grid-template-columns:1fr 1fr; }
  .container         { padding:0 1rem; }
  .hm-auth-row       { grid-template-columns:1fr; }
  .navbar-inner      { padding:0 .75rem; }
  .pricing-cards     { grid-template-columns:1fr; }
}

/* 400px Small mobile */
@media(max-width:400px){
  :root { --nav-h:60px; }
  .calc-results-grid { grid-template-columns:1fr; }
}