/* ================= AMPYAN THEME SYSTEM ================= */

:root{
--bg:#08111f;
--bg-elevated:#0d1828;
--bg-soft:#122033;
--card:rgba(12,21,35,0.82);
--card-strong:rgba(9,17,30,0.94);
--card-muted:rgba(255,255,255,0.04);
--border:rgba(160,184,214,0.16);
--border-strong:rgba(255,255,255,0.10);
--text:#f5f7fb;
--text-secondary:#9caec7;
--text-soft:#cfd9e8;
--accent:#ff5a36;
--accent-strong:#ff7b29;
--accent-soft:rgba(255,90,54,0.16);
--success:#5dd39e;
--warn:#ffc857;
--danger:#ff7b7b;
--shadow-lg:0 30px 80px rgba(0,0,0,0.30);
--shadow-md:0 18px 42px rgba(0,0,0,0.22);
--radius-xl:28px;
--radius-lg:22px;
--radius-md:16px;
--navbar-bg:rgba(7,13,24,0.84);
--font-body:'Inter',sans-serif;
--font-display:'Inter',sans-serif;
--font-ui:'Inter',sans-serif;
}

body.light{
--bg:#f2f6fb;
--bg-elevated:#ffffff;
--bg-soft:#edf3fb;
--card:rgba(255,255,255,0.86);
--card-strong:rgba(255,255,255,0.98);
--card-muted:rgba(11,24,45,0.04);
--border:rgba(22,37,61,0.10);
--border-strong:rgba(22,37,61,0.16);
--text:#0f1728;
--text-secondary:#61748d;
--text-soft:#344256;
--accent:#ef5b38;
--accent-strong:#ef7d2f;
--accent-soft:rgba(239,91,56,0.10);
--shadow-lg:0 26px 70px rgba(31,52,84,0.14);
--shadow-md:0 16px 36px rgba(31,52,84,0.10);
--navbar-bg:rgba(255,255,255,0.84);
}

*,
*::before,
*::after{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:
radial-gradient(circle at top left, rgba(255,90,54,0.18), transparent 28%),
radial-gradient(circle at top right, rgba(53,117,255,0.16), transparent 24%),
linear-gradient(180deg, var(--bg) 0%, #07101d 100%);
color:var(--text);
font-family:var(--font-body);
margin:0;
padding:0;
min-height:100vh;
line-height:1.6;
letter-spacing:0;
transition:background .25s,color .25s;
}

h1,
h2,
h3,
.page-title,
.section-heading,
.hero-copy-title,
.hero-title,
.tools-title,
.profile-name{
font-family:var(--font-display);
letter-spacing:0.02em;
line-height:1.05;
text-transform:uppercase;
text-wrap:balance;
text-shadow:0 10px 24px rgba(0,0,0,0.18);
font-weight:800;
color:var(--text);
}

body.light h1,
body.light h2,
body.light h3,
body.light .page-title,
body.light .section-heading,
body.light .hero-copy-title,
body.light .hero-title,
body.light .tools-title,
body.light .profile-name{
letter-spacing:0.02em;
text-shadow:0 6px 14px rgba(255,255,255,0.45);
}

h4,
h5,
h6,
.page-kicker,
.brand-kicker,
.hero-guide-label,
.ui-meta-label,
.nav-link,
.nav-center a,
.nav-btn,
.highlight-garage,
.tool-button,
.ui-pill,
.garage-trust-level,
.garage-trust-score{
font-family:var(--font-ui);
letter-spacing:0.06em;
}

body.light{
background:
radial-gradient(circle at top left, rgba(239,91,56,0.10), transparent 32%),
radial-gradient(circle at top right, rgba(37,99,235,0.10), transparent 26%),
linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%);
}

a{
color:inherit;
text-decoration:none;
}

img{
max-width:100%;
display:block;
}

button,
input,
select,
textarea{
font:inherit;
}

input,
select,
textarea{
width:100%;
border:1px solid var(--border);
background:rgba(255,255,255,0.04);
color:var(--text);
padding:14px 16px;
border-radius:14px;
outline:none;
transition:border-color .2s, box-shadow .2s, transform .2s, background .2s;
}

body.light input,
body.light select,
body.light textarea{
background:rgba(255,255,255,0.92);
}

input::placeholder,
textarea::placeholder{
color:var(--text-secondary);
}

input:focus,
select:focus,
textarea:focus{
border-color:rgba(255,90,54,0.55);
box-shadow:0 0 0 4px rgba(255,90,54,0.12);
background:rgba(255,255,255,0.06);
}

body.light input:focus,
body.light select:focus,
body.light textarea:focus{
background:#fff;
}

button{
border:none;
cursor:pointer;
}

main.main-container{
position:relative;
z-index:2;
}

.main-container{
width:min(1240px, calc(100% - 32px));
margin:0 auto;
}

.glass-panel,
.diagnose-card{
background:var(--card);
border:1px solid var(--border);
backdrop-filter:blur(18px);
box-shadow:var(--shadow-md);
}

.glow-text{
font-family:var(--font-display);
font-size:clamp(32px, 5vw, 52px);
font-weight:800;
line-height:1.06;
letter-spacing:0.02em;
background:linear-gradient(120deg,#fff 0%,#ffd2c7 30%,#ff8b5d 68%,#ff5a36 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 0 25px rgba(255,90,54,0.22);
margin-bottom:10px;
}

.tagline{
color:var(--text-secondary);
font-size:15px;
margin-bottom:14px;
max-width:650px;
}

.page-subtitle,
.section-copy,
.body-copy-lg,
.hero-desc,
p,
li{
font-family:var(--font-body);
}

.diagnose-card{
padding:18px;
border-radius:22px;
}

.auth-input{
width:100%;
padding:14px 16px;
margin-top:8px;
border-radius:14px;
border:1px solid var(--border);
background:rgba(255,255,255,0.04);
color:var(--text);
font-size:14px;
}

.auth-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:8px;
padding:13px 22px;
border-radius:14px;
background:linear-gradient(135deg,var(--accent),var(--accent-strong));
color:#fff;
font-weight:700;
letter-spacing:0.01em;
box-shadow:0 16px 32px rgba(255,90,54,0.24);
transition:transform .2s, box-shadow .2s, filter .2s;
}

.auth-button:hover{
transform:translateY(-2px);
box-shadow:0 18px 36px rgba(255,90,54,0.30);
filter:saturate(1.05);
}

.problem-buttons{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}

.problem-buttons button{
background:var(--card-muted);
border:1px solid var(--border);
color:var(--text-secondary);
padding:8px 12px;
border-radius:999px;
font-size:12px;
cursor:pointer;
transition:.2s;
}

.problem-buttons button:hover{
background:var(--accent-soft);
border-color:rgba(255,90,54,0.35);
color:#fff;
}

.hero-features{
display:flex;
flex-direction:column;
gap:10px;
}

.feature-item{
background:var(--card-muted);
border:1px solid var(--border);
padding:12px 14px;
border-radius:14px;
font-size:13px;
color:var(--text-soft);
transition:.2s;
}

.feature-item:hover{
border-color:rgba(255,90,54,0.36);
transform:translateY(-1px);
}

.mechanic-img{
width:clamp(180px, 22vw, 280px);
filter:drop-shadow(0 25px 38px rgba(255,90,54,.16));
}

.cta-group{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:10px;
}

.premium-btn,
.outline-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
border-radius:14px;
font-weight:600;
font-size:14px;
transition:.2s;
}

.premium-btn{
background:linear-gradient(135deg,var(--accent),var(--accent-strong));
color:white;
box-shadow:0 14px 30px rgba(255,90,54,0.22);
}

.outline-btn{
border:1px solid rgba(255,90,54,0.34);
background:rgba(255,255,255,0.02);
color:#ffb29a;
}

.outline-btn:hover{
background:var(--accent-soft);
color:#fff;
}

.explore-section{
margin-top:28px;
}

.explore-title{
text-align:center;
font-size:24px;
margin-bottom:18px;
}

.explore-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:18px;
}

.explore-card{
background:var(--card);
border:1px solid var(--border);
padding:18px;
border-radius:18px;
transition:.2s;
font-size:14px;
box-shadow:var(--shadow-md);
}

.explore-card:hover{
border-color:rgba(255,90,54,0.30);
transform:translateY(-3px);
}

.explore-item{
display:block;
color:var(--text);
margin-bottom:6px;
font-size:14px;
}

.explore-item:hover{
color:var(--accent-strong);
}

.cursor-glow{
position:fixed;
width:300px;
height:300px;
background:radial-gradient(circle, rgba(255,90,54,0.18), transparent 72%);
pointer-events:none;
transform:translate(-50%,-50%);
mix-blend-mode:screen;
z-index:0;
}

#neural-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
opacity:0.14;
pointer-events:none;
}

@media(max-width:720px){
html,
body{
max-width:100%;
overflow-x:hidden;
}

.main-container{
width:100%;
max-width:100%;
padding:0 12px;
overflow-x:hidden;
}

.glow-text{
font-size:clamp(28px, 11vw, 40px);
}

.tagline{
font-size:14px;
}
}