/* =====================================================================
   Public landing page (index.php)
   ===================================================================== */

/* -------------------------------- Header ---------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid oklch(0.9 0.015 70 / 0.6);
  background: oklch(0.99 0.005 60 / 0.85);
  backdrop-filter: blur(12px);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { height: 3.4rem; width: 3.4rem; border-radius: 999px; object-fit: contain; }
.brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.brand .tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-fg); }
.site-nav { display: none; gap: 2rem; font-size: .9rem; font-weight: 500; }
.site-nav a { color: var(--muted-fg); transition: color .15s; }
.site-nav a:hover { color: var(--foreground); }
@media (min-width: 900px) { .site-nav { display: flex; } }
.header-cta { display: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }

/* --------------------------------- Hero ----------------------------- */
.hero { position: relative; overflow: hidden; color: #fff; background-image: var(--gradient-hero); }
.hero .glow {
  position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background-image:
    radial-gradient(ellipse at 20% 20%, oklch(0.78 0.14 85 / 0.35), transparent 55%),
    radial-gradient(ellipse at 80% 80%, oklch(0.48 0.22 27 / 0.4), transparent 55%);
}
.hero .grid { position: relative; display: grid; gap: 3rem; padding-block: 5rem; }
@media (min-width: 900px) { .hero .grid { grid-template-columns: 1.15fr .85fr; padding-block: 7rem; } }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.7rem); font-weight: 700; line-height: 1.05; }
.hero p.lead { margin-top: 1.5rem; max-width: 36rem; font-size: 1.1rem; color: rgb(255 255 255 / .8); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-list { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; font-size: .9rem; color: rgb(255 255 255 / .85); }
@media (min-width: 640px) { .hero-list { grid-template-columns: 1fr 1fr; } }
.hero-list li { display: flex; gap: .5rem; align-items: flex-start; }
.hero-list svg { flex: none; margin-top: .15rem; color: var(--gold); }
.hero-emblem { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-emblem img { width: 100%; max-width: 26rem; height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 25px 45px rgba(0,0,0,.5)); }

/* -------------------------------- Trust ----------------------------- */
.trust { border-block: 1px solid var(--border); background: oklch(0.95 0.02 80 / 0.4); }
.trust .grid { display: grid; gap: 1.5rem; padding-block: 2.5rem; }
@media (min-width: 640px) { .trust .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .trust .grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; gap: 1rem; align-items: flex-start; }
.trust-item .ic { flex: none; height: 2.75rem; width: 2.75rem; display: grid; place-items: center; border-radius: 999px; background-image: var(--gradient-gold); color: var(--ink); box-shadow: var(--shadow-card); }
.trust-item .t { font-weight: 600; }
.trust-item p { margin: .25rem 0 0; font-size: .88rem; color: var(--muted-fg); }

/* ------------------------------ Sections ---------------------------- */
.section { padding-block: 5rem; }
.section-head { max-width: 40rem; margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .75rem; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; }
.section-head p { margin-top: 1rem; color: var(--muted-fg); }

.cards { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cond-card {
  position: relative; overflow: hidden; border: 1px solid var(--border);
  background: var(--card); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-card);
  transition: transform .2s, border-color .2s;
}
.cond-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.cond-card .row { display: flex; align-items: center; gap: 1rem; }
.cond-card .ic { height: 3rem; width: 3rem; display: grid; place-items: center; border-radius: .75rem; background: var(--secondary); color: var(--primary); }
.cond-card .t { font-size: 1.05rem; font-weight: 600; }
.cond-card .s { font-size: .85rem; color: var(--muted-fg); }

.vehicle-strip { margin-top: 2.5rem; border: 1px solid var(--border); background: var(--card); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-card); }
.vehicle-strip .lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--muted-fg); }
.vehicle-strip .tags { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ----------------------------- How it works ------------------------- */
.how { background: var(--ink); color: #fff; }
.how .head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.how .head h2 { margin-top: .75rem; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; }
.how .head p { max-width: 28rem; color: rgb(255 255 255 / .7); }
.steps { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .05); border-radius: 1rem; padding: 2rem; }
.step .n { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: oklch(0.72 0.15 85 / 0.7); }
.step .t { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; }
.step p { margin-top: .5rem; font-size: .88rem; color: rgb(255 255 255 / .7); }

/* -------------------------------- Form ------------------------------ */
.inquiry { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .inquiry { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; } }
.inquiry h2 { margin-top: .75rem; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; }
.inquiry .intro { margin-top: 1rem; color: var(--muted-fg); }
.contact-box { margin-top: 2rem; border: 1px solid var(--border); background: oklch(0.95 0.02 80 / 0.4); border-radius: 1rem; padding: 1.5rem; display: grid; gap: 1rem; }
.contact-box .line { display: flex; gap: .75rem; align-items: flex-start; }
.contact-box .line svg { flex: none; margin-top: .1rem; color: var(--primary); }
.contact-box .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-fg); }
.contact-box .v { font-size: 1.05rem; font-weight: 600; }

.form-card { border: 1px solid var(--border); background: var(--card); border-radius: 1.5rem; padding: 1.75rem; box-shadow: var(--shadow-luxe); }
@media (min-width: 640px) { .form-card { padding: 2.5rem; } }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; }
.field.col-2 { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 500; margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--foreground);
  background: oklch(0.92 0.01 70 / .5); border: 1px solid var(--border); border-radius: .6rem;
  padding: 0 .9rem; height: 2.9rem; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.field textarea { height: auto; padding: .7rem .9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px oklch(0.48 0.22 27 / .2);
}

.dropzone {
  margin-top: .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; border: 2px dashed var(--border); border-radius: 1rem;
  background: oklch(0.95 0.02 80 / 0.4); padding: 2rem; transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--gold); background: oklch(0.95 0.02 80 / 0.7); }
.dropzone .ic { height: 3rem; width: 3rem; display: grid; place-items: center; border-radius: 999px; background-image: var(--gradient-gold); color: var(--ink); }
.dropzone .h { margin-top: .75rem; font-size: .9rem; font-weight: 500; }
.dropzone .s { margin-top: .25rem; font-size: .78rem; color: var(--muted-fg); }
.file-list { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.file-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid var(--border); background: var(--background); border-radius: .5rem; padding: .5rem .75rem; font-size: .85rem; }
.file-list .rm { border: none; background: none; cursor: pointer; color: var(--muted-fg); border-radius: 999px; padding: .2rem; line-height: 0; }
.file-list .rm:hover { background: var(--secondary); color: var(--foreground); }
.consent { margin-top: .75rem; text-align: center; font-size: .75rem; color: var(--muted-fg); }

/* ------------------------------- Contact ---------------------------- */
.contact-sec { background: oklch(0.95 0.02 80 / 0.4); }
.contact-sec .grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .contact-sec .grid { grid-template-columns: 1fr 2fr; } }
.info-card { border: 1px solid var(--border); background: var(--card); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-card); }
.info-card .hd { display: flex; align-items: center; gap: .5rem; color: var(--primary); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
.info-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .info-grid { grid-template-columns: 1fr 1fr; } }
.info-card dl { margin: 1rem 0 0; display: grid; gap: .5rem; font-size: .9rem; }
.info-card dl .r { display: flex; justify-content: space-between; }
.info-card dl dt { color: var(--muted-fg); }
.info-card dl dd { margin: 0; font-weight: 500; }
.info-card ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; font-size: .9rem; }
.info-card ul li { display: flex; gap: .5rem; align-items: flex-start; }

/* -------------------------------- Footer ---------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--ink); color: rgb(255 255 255 / .7); }
.site-footer .bar { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 2rem; text-align: center; }
@media (min-width: 640px) { .site-footer .bar { flex-direction: row; text-align: left; } }
.site-footer .slogan { font-size: .72rem; text-transform: uppercase; letter-spacing: .24em; color: var(--gold); }

/* ------------------------------- Banner ----------------------------- */
.flash { border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; }
.flash.ok { background: oklch(0.95 0.05 150 / .5); border: 1px solid oklch(0.7 0.15 150); color: oklch(0.35 0.1 150); }
.flash.err { background: oklch(0.95 0.05 27 / .5); border: 1px solid oklch(0.7 0.18 27); color: oklch(0.4 0.2 27); }
.flash svg { flex: none; margin-top: .1rem; }