/* NakitCar · dark glass. Mobile-first visual layer; no canvas or animation loop. */
:root {
  color-scheme: dark;
  --bg: #090d0c;
  --surface: #151c19;
  --ink: #f0f4ef;
  --muted: #abb7ae;
  --line: rgba(222,244,224,.13);
  --green: #c3ef9d;
  --accent: #c3ef9d;
  --radius: 28px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
html { background: var(--bg); scroll-padding-top: 92px; }
body {
  background:
    radial-gradient(ellipse 64% 560px at 88% 11%, rgba(104,154,110,.13), transparent 75%),
    radial-gradient(ellipse 42% 430px at 8% 3%, rgba(123,160,124,.07), transparent 76%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
}
::selection { background: #bddf99; color: #122016; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #d2f5b4;
  outline-offset: 4px;
}
.site-header { background: transparent; border-color: rgba(222,244,224,.07); }
.nav { height: 92px; }
.wordmark { color: #f4f7f2; font-size: 34px; font-weight: 700; letter-spacing: -1.6px; }
.wordmark span { font-weight: 400; }
.wordmark i { color: #c3ef9d; }
.desktop-nav {
  gap: 5px;
  border: 1px solid rgba(255,255,255,.1);
  padding: 5px;
  border-radius: 50px;
  background: linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 20px rgba(0,0,0,.1);
}
.desktop-nav a { color: #b8c2bb; padding: 10px 17px; border-radius: 30px; transition: color .2s, background .2s; }
.desktop-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.header-contact {
  min-height: 44px;
  color: #e0e8df;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50px;
  padding: 10px 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-weight: 500;
}
.hero { gap: 76px; padding-top: 64px; padding-bottom: 86px; align-items: start; }
.eyebrow { color: #a4b49f; font-size: 12px; font-weight: 500; letter-spacing: 1.8px; }
h1 { color: #f2f5ef; font-weight: 500; font-size: clamp(45px,4.9vw,70px); line-height: 1.08; letter-spacing: -3.6px; }
h1 span { color: #c7eeb0; text-shadow: 0 0 45px rgba(175,226,146,.13); }
.hero-description { color: #aeb8b0; font-size: 18px; font-weight: 400; }
.hero-photo {
  height: 296px;
  border-radius: 23px;
  background: #1b211d;
  border: 1px solid rgba(240,255,233,.14);
  box-shadow: 0 25px 50px -30px #000, inset 0 1px 0 rgba(255,255,255,.2);
  isolation: isolate;
}
.hero-photo img { filter: brightness(.72) saturate(.62); object-position: 50% 61%; }
.hero-photo:after { content:''; pointer-events:none; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 1px rgba(255,255,255,.27),inset 0 -1px 0 rgba(255,255,255,.04); background:linear-gradient(155deg,rgba(209,234,208,.055),transparent 50%); }
.hero-photo figcaption { padding: 40px 21px 19px; background: linear-gradient(transparent,rgba(4,10,7,.85)); color:#f4f7f0; font-size:16px; }
.image-note { color:#d3dbd1; font-size:12px; }
.hero-footnote { gap:14px; margin-top:25px; }
.hero-footnote p { color:#95a399; }
.hero-footnote strong { color:#d3decf; }
.line-mark { border-color:rgba(196,230,165,.22); width:35px; height:35px; background:rgba(187,235,151,.05); }
.line-mark:after { color:#c3e7a8; }
.offer-wrap { position:relative; isolation:isolate; scroll-margin-top:95px; }
.offer-wrap:before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-65px -30px -20px;
  pointer-events:none;
  background:radial-gradient(ellipse at 88% 32%,rgba(171,227,135,.15),transparent 60%),radial-gradient(ellipse at 1% 90%,rgba(98,163,136,.1),transparent 58%);
}
.offer-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(226,247,218,.16);
  border-top-color:rgba(240,255,232,.3);
  border-bottom-color:rgba(226,247,218,.08);
  border-radius:28px;
  padding:32px;
  background:linear-gradient(146deg,rgba(91,109,93,.24) 0%,rgba(29,39,33,.64) 42%,rgba(25,35,29,.68) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  backdrop-filter:blur(28px) saturate(145%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.13),inset 1px 0 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(255,255,255,.025),0 24px 70px -22px rgba(0,0,0,.7),0 0 55px -30px rgba(158,215,118,.22);
}
.offer-card:before {
  content:''; position:absolute; z-index:-1; pointer-events:none; inset:0;
  background:linear-gradient(128deg,rgba(255,255,255,.055),transparent 26%,transparent 80%,rgba(208,246,201,.025));
}
.form-heading .eyebrow { color:#b6c9ab; font-size:12px; letter-spacing:1.4px; }
.form-heading>span { color:#9dab9c; font-size:12px; border:1px solid rgba(221,242,209,.13); border-radius:20px; padding:3px 9px; margin-top:-3px; background:rgba(255,255,255,.025); }
.offer-card h2 { font-size:30px; font-weight:500; color:#f4f7ef; letter-spacing:-1px; }
.form-description { color:#a6b4a7; font-size:14px; }
.steps { border-bottom:0; border-radius:13px; background:rgba(1,7,3,.25); padding:5px; gap:4px; margin-bottom:23px; box-shadow:inset 0 1px 3px rgba(0,0,0,.15); }
.steps li { justify-content:center; color:#a9b4a6; border:1px solid transparent; border-radius:9px; padding:9px 5px; font-size:12px; gap:7px; }
.steps li.active { color:#e4f5d5; background:linear-gradient(140deg,rgba(220,243,199,.13),rgba(255,255,255,.055)); border-color:rgba(240,255,225,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 8px rgba(0,0,0,.1); }
.steps li.active:after { display:none; }
.steps li>span { color:inherit; border:1px solid rgba(221,240,207,.17); background:transparent; width:20px; height:20px; font-size:11px; }
.steps .active>span { background:#c8eeb0; border-color:#c8eeb0; color:#1d3020; }
.steps .complete>span { background:rgba(184,225,151,.13); border-color:rgba(184,225,151,.22); color:#c7ebad; }
.steps li.complete { color:#c2d7b5; }
label { color:#d5dfd0; font-size:14px; font-weight:400; margin-top:17px; }
input,select,textarea {
  color:#edf3e7;
  min-height:50px;
  border:1px solid rgba(216,237,204,.13);
  border-top-color:rgba(231,249,221,.16);
  border-radius:11px;
  background-color:rgba(8,15,11,.36);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.02);
  font-size:15px;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
input:hover,select:hover,textarea:hover { border-color:rgba(201,231,181,.28); }
input:focus,select:focus,textarea:focus { outline:2px solid rgba(181,224,148,.6); outline-offset:2px; background-color:rgba(13,23,16,.6); border-color:#a7c991; }
input::placeholder,textarea::placeholder { color:#9aa794; opacity:1; }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aab9a0' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select:disabled { color:#a0aa9b; background-color:rgba(9,16,12,.22); opacity:.8; }
select option { background:#1d281f; color:#f1f6eb; }
.input-suffix>span { color:#a9b49f; top:15px; }
.primary-button {
  min-height:54px;
  padding:16px 21px;
  border:1px solid #d3f4b8;
  border-radius:13px;
  color:#14220e;
  background:linear-gradient(172deg,#d5f5bb 0%,#c0eaa0 45%,#b2dd92 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(72,111,39,.17),0 5px 22px rgba(151,211,107,.12);
  font-size:15px; font-weight:600;
  transition:box-shadow .2s,filter .2s,transform .15s;
}
.primary-button:hover { background:linear-gradient(172deg,#dff9ca,#c5edaa); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 28px rgba(160,224,119,.2); }
.primary-button:active { transform:translateY(1px); filter:brightness(.95); }
.back-button { min-height:54px; border-radius:13px; color:#dce8d3; background:rgba(255,255,255,.035); border-color:rgba(221,242,211,.14); }
.form-note { color:#a6b09e; font-size:12px; line-height:1.65; }
.whatsapp-alternative { border-color:rgba(232,250,220,.1); color:#a6b39f; font-size:12px; }
.whatsapp-link { min-height:35px; color:#d9eec9; font-weight:500; font-size:14px; }
.under-form { color:#a6b39c; font-size:12px; margin-top:20px; }
.under-form svg { color:#bad3a6; }
.optional { color:#a2b097; font-size:12px; }
.photo-explainer,.vehicle-summary { background:linear-gradient(135deg,rgba(196,235,169,.075),rgba(196,235,169,.025)); border:1px solid rgba(207,239,183,.11); border-radius:13px; }
.photo-explainer strong { color:#d8e8c9; font-size:14px; font-weight:500; }
.photo-explainer p { color:#aab79f; font-size:13px; }
.photo-explainer svg { color:#c5dfa9; }
.vehicle-summary strong { color:#e2efd8; }
.vehicle-summary span { color:#aebda3; }
.handoff-note { color:#acb9a2; font-size:13px; }
.form-error { color:#ffcbc1; background:rgba(152,49,35,.19); border:1px solid rgba(248,151,131,.24); border-radius:9px; }
[aria-invalid=true] { border-color:#e39b88; }
.process-section { background:linear-gradient(180deg,rgba(177,205,160,.035),rgba(177,205,160,.015)); border-top:1px solid rgba(229,247,218,.08); border-bottom:1px solid rgba(229,247,218,.06); padding:68px 0 76px; }
.section-heading>p { color:#a6b0a1; }
h2 { color:#edf2e8; font-weight:500; }
.process-grid { gap:20px; }
.process-grid article { border:1px solid rgba(229,247,218,.1); border-top-color:rgba(229,247,218,.18); border-radius:20px; padding:26px 27px 29px; background:linear-gradient(150deg,rgba(216,233,203,.055),rgba(216,233,203,.015)); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.process-number { color:#bad39f; background:rgba(205,235,177,.055); border:1px solid rgba(209,239,182,.12); border-radius:50%; width:37px; height:37px; display:grid; place-items:center; margin-bottom:25px; }
.process-grid h3 { color:#e4ecdc; font-weight:500; }
.process-grid p { color:#a6b29f; font-size:15px; }
.approach { padding-top:95px; padding-bottom:95px; }
.approach-heading h2 { font-weight:400; }
.text-link { color:#d2e8bd; border-color:rgba(213,242,186,.3); min-height:44px; }
.approach-lead { color:#dce8d1; font-weight:400; }
.approach-row { border-color:rgba(223,244,207,.12); }
.approach-row>span { color:#a6be90; }
.approach-row h3 { color:#d8e4cc; }
.approach-row p { color:#a4b299; font-size:15px; }
.faq-section { background:linear-gradient(155deg,rgba(125,155,112,.045),rgba(125,155,112,.01)); border-color:rgba(223,244,207,.09); }
.faq-layout>div>p:not(.eyebrow) { color:#a4b299; }
.faq-layout>div>p a { color:#d2e8bd; border-color:rgba(213,242,186,.3); display:inline-block; min-height:44px; }
.faq-list details { border-color:rgba(223,244,207,.13); }
.faq-list details:first-child { border-color:rgba(223,244,207,.13); }
summary { color:#dde6d5; min-height:68px; font-weight:400; }
summary>span { color:#b8cba5; font-weight:300; }
details p { color:#acb8a2; font-size:15px; }
.closing { margin-top:40px; margin-bottom:40px; padding:42px 40px; border-radius:25px; border:1px solid rgba(227,249,208,.13); border-top-color:rgba(227,249,208,.21); background:radial-gradient(ellipse at 95% 100%,rgba(161,218,128,.12),transparent 60%),linear-gradient(125deg,rgba(219,241,202,.07),rgba(219,241,202,.015)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); }
.closing h2 { font-weight:400; }
footer { background:#070b09; color:#e2eadc; border-top:1px solid rgba(223,244,207,.07); }
.footer-top { border-color:rgba(223,244,207,.1); }
.footer-top p,.footer-bottom { color:#a4b199; }
.footer-bottom button,.footer-bottom>a { min-height:44px; display:inline-flex; align-items:center; }
dialog { border-radius:24px; color:#edf3e6; background:#162019; border:1px solid rgba(221,247,202,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 25px 100px #0008; padding:28px; max-height:85dvh; }
dialog::backdrop { background:rgba(3,8,5,.75); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.dialog-heading h2 { font-size:23px; }
.dialog-heading button { min-width:44px; min-height:44px; color:#d7e8c9; border:1px solid rgba(216,242,199,.12); background:rgba(219,248,200,.06); }
dialog p { color:#b6c3aa; font-size:15px; }
.skip-link { color:#14220e; background:#c5eba7; }
/* Mobile composition: introduction → offer form → photograph → process. */
@media(max-width:1100px) and (min-width:801px) {
  .hero { gap:34px; }
  .desktop-nav a { padding:9px 10px; font-size:13px; }
  .header-contact { padding:9px 12px; font-size:13px; }
  h1 { font-size:51px; letter-spacing:-2.5px; }
  .offer-card { padding:26px; }
  .process-grid article { padding:22px; }
}
@media(max-width:800px) {
  html { scroll-padding-top:86px; }
  body { background:radial-gradient(ellipse 100% 650px at 95% 25%,rgba(96,144,94,.1),transparent 80%),#090d0c; }
  .container { width:calc(100% - 40px); }
  .site-header { position:sticky; top:0; z-index:30; background:rgba(9,14,11,.84); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); border-bottom-color:rgba(232,247,221,.09); }
  .nav { height:72px; gap:12px; }
  .wordmark { font-size:29px; }
  .desktop-nav { display:none; }
  .header-contact { font-size:12px; padding:9px 12px; gap:7px; min-height:42px; }
  .header-contact svg { width:16px; height:16px; }
  .hero { display:flex; flex-direction:column; gap:0; padding-top:30px; padding-bottom:42px; }
  .hero-story { display:contents; }
  .hero-story>.eyebrow { order:0; margin-bottom:16px; font-size:11px; letter-spacing:1.7px; }
  .hero-story>h1 { order:1; font-size:clamp(42px,7.6vw,58px); font-weight:500; line-height:1.07; letter-spacing:-2.3px; margin-bottom:17px; }
  .hero-description { order:2; font-size:16px; line-height:1.55; max-width:430px; margin-bottom:26px; }
  .offer-wrap { order:3; width:100%; scroll-margin-top:88px; }
  .offer-wrap:before { inset:-40px 0 -30px; background:radial-gradient(ellipse at 98% 18%,rgba(153,215,118,.13),transparent 67%),radial-gradient(ellipse at 0 90%,rgba(91,152,124,.07),transparent 60%); }
  .offer-card { border-radius:25px; padding:25px; -webkit-backdrop-filter:blur(18px) saturate(135%); backdrop-filter:blur(18px) saturate(135%); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 16px 45px -22px rgba(0,0,0,.6); }
  .form-heading .eyebrow { font-size:11px; letter-spacing:1.3px; margin-bottom:13px; }
  .form-heading>span { font-size:11px; }
  .offer-card h2 { font-size:28px; }
  .form-description { font-size:14px; margin-bottom:19px; }
  .steps { margin-bottom:23px; }
  .steps li { padding:10px 3px; font-size:12px; gap:7px; }
  label { font-size:14px; margin-top:18px; }
  input,select,textarea { font-size:16px; min-height:52px; border-radius:12px; padding:13px; }
  select { padding-right:32px; }
  .field-pair { gap:12px; }
  .input-suffix>span { top:17px; font-size:12px; }
  .primary-button,.back-button { min-height:56px; font-size:15px; border-radius:14px; }
  .form-actions { margin-top:25px; }
  .form-note { font-size:12px; line-height:1.6; margin-top:13px; }
  .whatsapp-alternative { font-size:12px; margin-top:23px; padding-top:18px; gap:3px; }
  .whatsapp-link { min-height:44px; font-size:14px; }
  .under-form { font-size:12px; justify-content:center; padding:0 10px; line-height:1.65; gap:8px; margin-top:16px; }
  .under-form svg { margin-top:2px; }
  .hero-photo { order:4; width:100%; height:260px; margin-top:35px; border-radius:21px; }
  .hero-footnote { order:5; width:100%; margin-top:18px; }
  .hero-footnote p { font-size:14px; }
  .process-section { padding:44px 0; }
  .section-heading { margin-bottom:27px; }
  .section-heading h2 { font-size:36px; letter-spacing:-1.4px; }
  .section-heading>p { font-size:15px; }
  .process-grid { grid-template-columns:1fr; gap:12px; }
  .process-grid article { position:relative; padding:23px 22px 23px 77px; border-radius:20px; }
  .process-number { position:absolute; left:22px; top:23px; width:34px; height:34px; margin:0; font-size:12px; }
  .process-grid h3 { font-size:21px; margin:3px 0 9px; }
  .process-grid p { font-size:15px; max-width:none; line-height:1.65; }
  .approach { grid-template-columns:1fr; padding-top:50px; padding-bottom:52px; gap:30px; }
  .approach-heading h2 { font-size:37px; line-height:1.16; letter-spacing:-1.4px; margin-bottom:23px; }
  .approach-lead { font-size:23px; }
  .approach-row p { font-size:15px; }
  .faq-section { padding:43px 0 47px; }
  .faq-layout { gap:23px; }
  .faq-layout h2 { font-size:36px; margin-bottom:12px; }
  .faq-layout>div>p:not(.eyebrow) { margin-top:16px; font-size:14px; }
  summary { font-size:15px; padding:21px 0; min-height:68px; }
  details p { font-size:15px; padding-right:15px; }
  .closing { margin-top:28px; margin-bottom:28px; padding:27px; border-radius:22px; }
  .closing h2 { font-size:34px; letter-spacing:-1.4px; }
  .closing .primary-button { margin-top:23px; width:100%; }
  footer { padding-bottom:105px; }
  .footer-top { gap:20px; }
  .footer-top>a:last-child { min-height:44px; display:flex; align-items:center; font-size:13px; }
  .footer-bottom { gap:4px 20px; font-size:12px; }
  .mobile-cta { background:transparent; border:0; padding:10px 16px max(10px,env(safe-area-inset-bottom)); pointer-events:none; }
  .mobile-cta.visible { pointer-events:auto; }
  .mobile-cta a {
    min-height:58px;
    border:1px solid rgba(224,247,202,.3);
    border-top-color:rgba(240,255,225,.45);
    border-radius:19px;
    color:#e4f6d4;
    font-size:15px;
    padding:16px 21px;
    background:linear-gradient(135deg,rgba(91,122,69,.73),rgba(26,43,30,.87));
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 8px 30px rgba(0,0,0,.45);
  }
  body.keyboard-open .mobile-cta { visibility:hidden; transform:translateY(120%); }
  dialog { width:calc(100% - 30px); padding:24px; border-radius:24px; }
}
@media(max-width:500px) {
  .hero-photo { height:226px; }
  .hero-photo figcaption { font-size:15px; }
  .image-note { font-size:12px; }
  .closing { display:block; }
}
@media(max-width:360px) {
  .container { width:calc(100% - 28px); }
  .wordmark { font-size:26px; }
  .header-contact { padding:9px; font-size:11px; gap:5px; }
  .hero-story>h1 { font-size:39px; letter-spacing:-2px; }
  .offer-card { padding:22px 18px; }
  .field-pair { gap:9px; }
  .form-heading .eyebrow { font-size:10px; letter-spacing:1.1px; }
  .steps li { gap:5px; }
  .primary-button { padding:15px; gap:12px; }
  .offer-card h2 { font-size:26px; }
  .optional { float:none; display:block; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .offer-card { background:linear-gradient(145deg,#27342a,#17231b); }
  .site-header { background:#101811; }
  .mobile-cta a { background:linear-gradient(135deg,#3d5730,#1c2e20); }
}
@media(prefers-reduced-transparency:reduce) {
  .offer-card,.site-header,.mobile-cta a { -webkit-backdrop-filter:none; backdrop-filter:none; background:#1b271e; }
  dialog::backdrop { -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { transition:none!important; animation:none!important; }
  html { scroll-behavior:auto; }
}
