:root{
  --bg: #f6f7f3;
  --surface: #ffffff;
  --surface-soft: #eef4f0;
  --text: #0f2d38;
  --muted: #44606a;
  --line: #d7e3dc;
  --card: #ffffff;
  --shadow: 0 16px 40px rgba(15, 45, 56, 0.10);
  --accent: #04592f;
  --accent-2: #0c6a3b;
  --accent-soft: rgba(4, 89, 47, 0.12);
  --accent-deep: #0f2d38;
  --success-soft: rgba(4, 89, 47, 0.1);
  --warning-soft: #fff7df;
  --warning-line: #e8d18a;
  --danger-soft: #fff1f2;
  --danger-line: rgba(244,63,94,.25);
  --radius: 22px;
  --radius-sm: 14px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(4,89,47,.08), transparent 28%),
    linear-gradient(180deg, #fbfcfa 0%, var(--bg) 100%);
  overflow-x:hidden;
}

a{ color:inherit; }
.container{
  max-width:1160px;
  margin:0 auto;
  padding:0 20px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(251,252,250,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(15,45,56,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.brand-logo{
  width:48px;
  height:48px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,45,56,.08);
}
.brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand-copy strong{
  font-size:18px;
  line-height:1;
}
.brand-copy span{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.header-cta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:800;
  letter-spacing:.02em;
  font-size:12px;
}
.header-help{
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}

.hero{
  padding:42px 0 22px;
}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
  gap:24px;
  align-items:start;
}
.hero-inner > *{ min-width:0; }
.eyebrow{
  font-weight:900;
  letter-spacing:.12em;
  color:var(--accent);
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:12px;
}
h1{
  margin:0 0 12px;
  font-size:48px;
  line-height:1.04;
  letter-spacing:-.03em;
}
.lead{
  margin:0 0 22px;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  max-width:64ch;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.form-card{
  padding:22px;
}
.section-title{
  font-weight:900;
  letter-spacing:.01em;
  margin:4px 0 10px;
}
.divider{
  height:1px;
  background:var(--line);
  margin:18px 0;
}

.segmented{
  display:flex;
  gap:8px;
  padding:8px;
  background:#f2f6f3;
  border:1px solid var(--line);
  border-radius:999px;
  flex-wrap:wrap;
}
.seg-btn{
  flex:0 1 auto;
  min-width:120px;
  border:0;
  background:transparent;
  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  color:var(--muted);
  cursor:pointer;
  transition:transform .05s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg-btn:active{ transform:translateY(1px); }
.seg-btn.is-active{
  background:#fff;
  color:var(--text);
  box-shadow:0 8px 18px rgba(15,45,56,.08);
  border:1px solid rgba(15,45,56,.08);
}

.grid{ display:grid; gap:12px; }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mt-12{ margin-top:12px; }

label{
  display:block;
  font-weight:800;
  font-size:13px;
  margin:0 0 8px;
  color:var(--text);
}
input,select{
  width:100%;
  border-radius:16px;
  border:1px solid var(--line);
  padding:13px 14px;
  font-size:15px;
  outline:none;
  background:#fff;
  color:var(--text);
}
input:focus,select:focus{
  border-color:rgba(4,89,47,.55);
  box-shadow:0 0 0 4px rgba(4,89,47,.12);
}
.help{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.muted{ color:var(--muted); font-size:13px; }

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}
.btn{
  border:0;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 12px 26px rgba(4,89,47,.24);
}
.btn-primary:hover{ background:var(--accent-2); }
.btn-large{ padding:15px 22px; font-size:15px; }
.btn-secondary{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(15,45,56,.14);
}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px dashed rgba(15,45,56,.24);
}

.status,.error{
  margin-top:12px;
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px;
}
.status{
  background:var(--warning-soft);
  border:1px solid var(--warning-line);
  color:var(--text);
}
.error{
  background:var(--danger-soft);
  border:1px solid var(--danger-line);
  color:#881337;
}
[hidden]{ display:none !important; }

.hero-card{
  padding:22px;
  border-radius:var(--radius);
  border:1px solid rgba(4,89,47,.14);
  background:linear-gradient(180deg, rgba(4,89,47,.08), rgba(255,255,255,1));
  box-shadow:var(--shadow);
}
.hero-card-title{
  font-weight:1000;
  font-size:22px;
  margin:0 0 8px;
}
.hero-card-text{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.7;
}
.checklist{
  margin:0;
  padding-left:20px;
}
.checklist li{
  margin:8px 0;
  line-height:1.5;
}
.trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.trust-strip span{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(4,89,47,.12);
  color:var(--accent-deep);
  font-size:12px;
  font-weight:700;
}

.results{
  padding:8px 0 42px;
}
.results-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:6px 0 14px;
}
.results-header h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.02em;
}
.results-meta{
  color:var(--muted);
  font-size:13px;
}
.results-list{
  display:grid;
  gap:14px;
}
.product-card{
  display:grid;
  grid-template-columns:98px 1fr auto;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 28px rgba(15,45,56,.06);
}
.product-img{
  width:98px;
  height:98px;
  border-radius:18px;
  border:1px solid rgba(15,45,56,.08);
  background:#f7faf8;
  object-fit:cover;
}
.product-main{ min-width:0; }
.product-title{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.3;
}
.product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}
.product-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#f4f8f6;
}
.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(15,45,56,.08);
  background:#f8fafc;
}
.badge.good{
  background:var(--success-soft);
  color:var(--accent);
  border-color:rgba(4,89,47,.2);
}
.product-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:end;
}
.score{
  font-weight:1000;
  font-size:12px;
  opacity:.55;
}
.results-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}

.search-notices{
  display:grid;
  gap:12px;
  margin:0 0 18px;
}
.search-notice{
  border-radius:16px;
  padding:14px 16px;
  border:1px solid rgba(15,45,56,.08);
  font-size:15px;
  line-height:1.5;
}
.search-notice.warning{
  background:var(--warning-soft);
  border-color:var(--warning-line);
}
.search-notice.info{
  background:#f3f7f5;
}

.manual-fields{ align-items:start; }
.manual-fields > div{ display:flex; flex-direction:column; }
.search-mode-panel{ width:100%; }
.field-item{ min-width:0; flex:1 1 280px; }
.field-item-md{ max-width:340px; }
.vehicle-inputs-row{
  display:grid;
  grid-template-columns:minmax(0, 360px) minmax(220px, 280px);
  align-items:start;
  gap:16px;
}
.plate-search-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.plate-input-shell{
  position:relative;
  display:flex;
  align-items:stretch;
  width:min(100%, 340px);
  min-width:240px;
  height:60px;
  border-radius:16px;
  border:2px solid #111111;
  background:#f8cb12;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.plate-input-shell:focus-within{
  box-shadow:0 0 0 4px rgba(4,89,47,.14), 0 8px 18px rgba(0,0,0,.10);
}
.plate-country{
  width:38px;
  flex:0 0 38px;
  background:#1d4f91;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-weight:900;
}
.plate-eu-stars{
  width:16px;
  height:16px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23FFD44D'%3E%3Ccircle cx='16' cy='4.5' r='1.4'/%3E%3Ccircle cx='21.75' cy='6.05' r='1.4'/%3E%3Ccircle cx='25.95' cy='10.25' r='1.4'/%3E%3Ccircle cx='27.5' cy='16' r='1.4'/%3E%3Ccircle cx='25.95' cy='21.75' r='1.4'/%3E%3Ccircle cx='21.75' cy='25.95' r='1.4'/%3E%3Ccircle cx='16' cy='27.5' r='1.4'/%3E%3Ccircle cx='10.25' cy='25.95' r='1.4'/%3E%3Ccircle cx='6.05' cy='21.75' r='1.4'/%3E%3Ccircle cx='4.5' cy='16' r='1.4'/%3E%3Ccircle cx='6.05' cy='10.25' r='1.4'/%3E%3Ccircle cx='10.25' cy='6.05' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
.plate-country-code{ font-size:11px; line-height:1; }
.plate-display,.plate-display-text{ display:none; }
.plate-char{ display:inline-block; }
.plate-input{
  position:absolute;
  inset:0 0 0 38px;
  width:auto;
  border:0;
  border-radius:0;
  background:transparent;
  height:100%;
  padding:0 8px;
  box-shadow:none !important;
  color:#111111;
  caret-color:#111111;
  text-transform:uppercase;
  text-align:center;
  font-family:"Arial Narrow Bold", "Arial Narrow", "Bahnschrift", Arial, sans-serif;
  font-size:clamp(38px, 5vw, 50px);
  line-height:1;
  font-weight:700;
  letter-spacing:.055em;
}
.plate-input::placeholder{ color:rgba(17,17,17,.4); }
.compact-roof-field{ max-width:280px; }
.compact-roof-field select{ height:60px; }
.site-footer{
  border-top:1px solid rgba(15,45,56,.08);
  padding:20px 0 28px;
  color:var(--muted);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-note{ margin-top:4px; }
.footer-contact{ font-weight:700; color:var(--text); }

body.is-embed .site-header,
body.is-embed .site-footer,
body.is-embed .hero-side{ display:none !important; }
body.is-embed .hero{ padding-top:16px; }
body.is-embed .hero-inner{ grid-template-columns:1fr; }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  h1{ font-size:40px; }
  .product-card{ grid-template-columns:90px 1fr; }
  .product-actions{ grid-column:1 / -1; justify-self:start; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .vehicle-inputs-row{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .header-inner{ align-items:flex-start; }
  .header-cta{ justify-content:flex-start; }
  .seg-btn{ min-width:110px; padding:10px 12px; }
}
@media (max-width: 640px){
  .grid-4{ grid-template-columns:1fr; }
  h1{ font-size:34px; }
  .plate-input-shell{ min-width:0; width:min(100%, 300px); height:56px; }
  .plate-input{ font-size:36px; }
  .product-card{ grid-template-columns:1fr; }
  .product-img{ width:100%; height:180px; }
}