:root{
  --bg: #0b1220; --panel:#0e1628; --glass: rgba(255,255,255,0.10);
  --text:#eaf1fb; --muted:#9fb0c6; --accent:#06b6d4; --accent2:#7c3aed;
  --ok:#86efac; --warn:#fde68a;
  --radius:14px; --radius-sm:10px; --shadow:0 12px 36px rgba(2,6,23,0.48); --max:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter','Plus Jakarta Sans',system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:#071124;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{
  position:sticky; top:0; z-index:70;
  background:rgba(11,18,32,0.6); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--glass);
}
.site-header.simple{position:static}
.header-inner{
  max-width:var(--max); margin:0 auto; display:flex; align-items:center;
  gap:14px; justify-content:space-between; padding:12px 18px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.logo{height:40px;width:auto}
.brand-name{
  font-weight:800; letter-spacing:.3px; 
  font-size: 1.75rem; /* larger logo text */
  font-family:'Plus Jakarta Sans', Inter, system-ui;
}
.nav{display:none;gap:18px}
.nav a{color:var(--text);opacity:.92}
.header-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--glass);background:transparent;border-radius:10px;
  color:var(--text);padding:8px 10px
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--glass);border-radius:10px;padding:10px 14px;
  font-weight:700;cursor:pointer;transition:transform .05s ease
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#02161e;border-color:transparent}
.btn.ghost{background:transparent;color:var(--text)}
.btn.ghost.alt{border-color:rgba(255,255,255,0.18)}
.btn.small{padding:8px 12px;font-weight:600}

@media (min-width: 900px){
  .nav{display:flex}
  .menu-toggle{display:none}
}

/* Sticky mini RFQ */
.mini-rfq{
  position:sticky; top:64px; z-index:60; display:none;
  background:rgba(2,6,23,0.7); backdrop-filter: blur(8px); border-bottom:1px solid var(--glass);
  padding:10px 12px;
}
.mini-rfq.show{display:block}
.mini-rfq-form{max-width:var(--max); margin:0 auto; display:grid; gap:8px; grid-template-columns:1fr}
.mini-rfq-form input, .mini-rfq-form select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.16); background:rgba(3,7,18,0.25); color:var(--text);
}
.mini-rfq .btn{border-radius:10px; padding:10px 14px}
.mini-rfq .form-msg{margin-left:10px;color:var(--muted)}
@media (min-width: 900px){
  .mini-rfq-form{grid-template-columns:1.2fr .5fr .5fr auto auto}
}

/* Hero with full-width background image */
.hero{
  position:relative;
  padding:48px 18px;
  background: url('assets/bg.svg') center/cover no-repeat fixed;
  isolation:isolate;
}
.hero-overlay{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(7,17,36,0.35), rgba(7,24,39,0.85));
}
.hero-inner{position:relative; z-index:1; max-width:var(--max); margin:0 auto; display:grid; gap:18px}
.pill{display:inline-flex;gap:8px;padding:7px 11px;background:rgba(255,255,255,0.08);border:1px solid var(--glass);border-radius:999px;font-size:13px}
.hero h1{font-size:clamp(30px,4.2vw,50px);margin:.4rem 0 .2rem}
.lead{color:#d4deea;max-width:65ch}
.rfq-form{margin-top:14px;display:grid;gap:10px}
.rfq-form input, .rfq-form select{width:100%;padding:13px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.16);background:rgba(3,7,18,0.28);color:var(--text)}
.rfq-form .form-msg{margin-left:10px;color:var(--muted)}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.metric{display:flex;flex-direction:column;gap:4px;align-items:center;background:rgba(255,255,255,0.06);border:1px solid var(--glass);border-radius:10px;padding:12px}
.metric strong{font-size:20px}
.hero-panel .panel-card{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));border:1px solid var(--glass);border-radius:14px;padding:16px;box-shadow:var(--shadow)}

@media (min-width: 900px){
  .hero-inner{grid-template-columns:1.2fr .8fr}
  .rfq-form{grid-template-columns:1.1fr .6fr .6fr auto auto}
}

/* How */
.how{padding:22px 18px}
.how h2{margin:6px 0 12px;font-family:'Plus Jakarta Sans', Inter, system-ui}
.steps{display:grid;gap:12px}
.step{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));border:1px solid var(--glass);border-radius:10px;padding:12px}
.num{min-width:36px;height:36px;display:grid;place-items:center;font-weight:800;color:var(--accent);background:#061827;border-radius:10px}
@media (min-width: 900px){ .steps{grid-template-columns:repeat(3,1fr)} }

/* Categories */
.categories{padding:22px 18px}
.cats{display:grid;gap:10px}
.cat{display:flex;gap:10px;align-items:center;padding:12px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid var(--glass)}
.cat strong{display:block}
.cat span{color:#c8d6e6}
@media (min-width: 900px){ .cats{grid-template-columns:repeat(4,1fr)} }

/* Owners */
.owners{padding:24px 18px}
.owners-grid{max-width:var(--max);margin:0 auto;display:grid;gap:18px}
.feature-cards{display:grid;gap:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));border:1px solid var(--glass);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.muted{color:#c8d6e6}
.mini-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}
.mini-kpis div{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,0.06);border:1px solid var(--glass);border-radius:10px;padding:10px}
.owners-panel{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));border:1px solid var(--glass);border-radius:14px;padding:16px}
.grid-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{display:flex;flex-direction:column;gap:4px;align-items:center;background:rgba(255,255,255,0.06);border:1px solid var(--glass);border-radius:10px;padding:10px}
.list{margin-top:12px}
.list-head{color:#c8d6e6;margin-bottom:6px}
.list-row{display:flex;justify-content:space-between;gap:8px;padding:10px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid var(--glass)}
.ok{color:var(--ok)} .warn{color:var(--warn)}

@media (min-width: 900px){
  .owners-grid{grid-template-columns:1.1fr .9fr}
  .feature-cards{grid-template-columns:repeat(2,1fr)}
}

/* Testimonials */
.testimonials{padding:24px 18px;text-align:center}
.carousel{position:relative;display:flex;overflow:hidden;gap:0}
.slide{min-width:100%;padding:16px;background:rgba(255,255,255,0.06);border:1px solid var(--glass);border-radius:14px}
.slide blockquote{margin:0 0 8px}
.carousel-controls{display:flex;gap:8px;justify-content:center;margin-top:8px}
.carousel-controls button{border:1px solid var(--glass);background:transparent;color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}

/* Footer */
.site-footer{padding:28px 18px;border-top:1px solid var(--glass)}
.footer-grid{max-width:var(--max);margin:0 auto;display:grid;gap:18px}
.footer-grid h4{margin:.2rem 0;font-family:'Plus Jakarta Sans', Inter, system-ui}
.footer-grid ul{margin:0;padding-left:16px;color:#c8d6e6}
.copy{color:#c8d6e6;text-align:center;margin-top:10px}
@media (min-width: 900px){ .footer-grid{grid-template-columns:repeat(4,1fr)} }

/* Auth pages */
.auth-body{background: url('assets/bg.svg') center/cover no-repeat fixed;}
.auth-main{display:grid;place-items:center;min-height:calc(100dvh - 64px);padding:24px}
.auth-card{
  width:min(520px, 92vw);
  background:rgba(2,6,23,0.65);
  backdrop-filter:blur(10px);
  border:1px solid var(--glass);
  border-radius:16px;
  padding:22px 18px;
  box-shadow:var(--shadow);
}
.auth-card h1{margin:0 0 8px 0}
.form{display:grid;gap:10px;margin-top:12px}
.form input{
  padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.16);
  background:rgba(3,7,18,0.28);color:var(--text)
}
.form .form-msg{margin-top:6px;color:var(--muted)}
.small{font-size:.9rem}