/* =========================================================
   BORT BDR-5000 Turbo — landing page styles
   Palette: cloud / mist / sage / amber / ink / coral-soft
   Type: Fraunces (display) + Manrope (body) + Space Mono (data)
   Signature: manometer / dial motif, running through gauges,
   numbering, tick marks and icon rings.
   ========================================================= */

:root{
  --cloud:      #FBFAF6;
  --cloud-dim:  #F3F1EA;
  --mist:       #E3EEF0;
  --mist-deep:  #CFE2E6;
  --sage:       #DEE9DF;
  --amber:      #E3A64B;
  --amber-deep: #C9862C;
  --coral-soft: #F3C6B4;
  --ink:        #283635;
  --ink-soft:   #5B6866;
  --line:       #D8DED7;
  --white:      #FFFFFF;

  --display: "Fraunces", ui-serif, Georgia, serif;
  --body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 45px -25px rgba(40, 54, 53, 0.35);
  --wrap: 1180px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cloud);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.12; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1em; color:var(--ink-soft); }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- utility text ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber-deep);
  margin:0 0 .9em;
}
.eyebrow.center, h2.center{ text-align:center; }
.eyebrow.center{ margin-left:auto; margin-right:auto; }
.accent-underline{
  position:relative;
  white-space:nowrap;
}
.accent-underline::after{
  content:"";
  position:absolute; left:-2px; right:-2px; bottom:.06em; height:.32em;
  background:var(--coral-soft);
  z-index:-1; border-radius:4px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--body); font-weight:700; font-size:1rem;
  padding:.95em 1.8em; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none;
}
.btn-primary{
  background:var(--amber); color:var(--ink);
  box-shadow:0 12px 30px -14px rgba(201,134,44,.65);
}
.btn-primary:hover{ background:var(--amber-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--cloud); }
.btn-small{ padding:.6em 1.3em; font-size:.9rem; }
.btn-wide{ width:100%; margin-top:.4em; position:relative; }
.btn[disabled]{ opacity:.7; cursor:progress; }
.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(40,54,53,.25); border-top-color:var(--ink);
  display:none; animation:spin .8s linear infinite;
}
.btn[disabled] .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- dial / gauge signature elements ---------- */
.gauge-dial{ position:relative; width:52px; height:52px; display:inline-block; flex:none; }
.gauge-dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dial-bg{ fill:none; stroke:var(--mist-deep); stroke-width:3; }
.dial-fg{
  fill:none; stroke:var(--amber); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:94; stroke-dashoffset:calc(94 - (94 * var(--v, 50%)) / 100%);
  transition:stroke-dashoffset 1s ease;
}
.dial-tick{
  display:inline-block; width:8px; height:8px; margin-right:.7em;
  border-radius:50%; border:2px solid var(--amber-deep); flex:none;
  position:relative; top:-1px;
}
.step-dial{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:1.1rem;
  background:var(--white); border:2px solid var(--amber);
  margin-bottom:1em;
}

/* ---------- logo ---------- */
.logo{ display:flex; align-items:center; gap:.6em; text-decoration:none; }
.logo-dial{ width:32px; height:32px; flex:none; }
.logo-dial svg{ width:100%; height:100%; }
.logo-dial circle:first-child{ fill:var(--cloud); stroke:var(--ink); stroke-width:2; }
.logo-dial .needle{ stroke:var(--amber-deep); stroke-width:2.4; stroke-linecap:round; }
.logo-dial .hub{ fill:var(--ink); }
.logo-text{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink); }
.logo-text em{ font-style:normal; color:var(--amber-deep); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,246,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:1.5em; padding-top:14px; padding-bottom:14px; }
.main-nav{ display:flex; gap:1.6em; margin-left:auto; }
.main-nav a{ text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink-soft); }
.main-nav a:hover{ color:var(--ink); }
.header-cta{ white-space:nowrap; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:1px solid var(--line); border-radius:10px;
  background:var(--white); margin-left:.4em;
}
.nav-toggle span{ width:18px; height:2px; background:var(--ink); margin:0 auto; }

@media (max-width:900px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--cloud); border-bottom:1px solid var(--line);
    flex-direction:column; padding:1em 24px; gap:.9em;
    display:none;
  }
  .main-nav.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:64px 0 40px; }
.steam-cloud{
  position:absolute; border-radius:50%; filter:blur(50px); opacity:.65; z-index:0;
  animation:drift 14s ease-in-out infinite alternate;
}
.steam-cloud--a{ width:420px; height:420px; background:var(--mist); top:-160px; right:-120px; }
.steam-cloud--b{ width:320px; height:320px; background:var(--sage); bottom:-140px; left:-100px; animation-delay:2s; }
.steam-cloud--c{ width:360px; height:360px; background:var(--mist); top:-120px; left:50%; transform:translateX(-50%); }
@keyframes drift{ from{ transform:translateY(0) scale(1);} to{ transform:translateY(24px) scale(1.06);} }

.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-lead{ font-size:1.08rem; max-width:46ch; }
h1{ font-size:clamp(2.1rem, 4vw, 3.1rem); }
.hero-actions{ display:flex; gap:1em; flex-wrap:wrap; margin:1.6em 0 2.2em; }

.gauge-row{ display:flex; gap:1.6em; flex-wrap:wrap; }
.gauge-chip{ display:flex; flex-direction:column; align-items:center; gap:.35em; text-align:center; width:96px; }
.gauge-value{ font-family:var(--mono); font-weight:700; font-size:1rem; }
.gauge-label{ font-size:.76rem; color:var(--ink-soft); }

.hero-media{ position:relative; }
.hero-badge{
  position:absolute; bottom:-16px; left:24px;
  background:var(--white); border:1px solid var(--line); border-radius:999px;
  padding:.5em 1.1em; font-family:var(--mono); font-size:.78rem;
  box-shadow:var(--shadow-soft);
}

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
}

/* ---------- photo slots (placeholders) ---------- */
.photo-slot{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--mist); aspect-ratio:4/5;
  box-shadow:var(--shadow-soft);
}
.photo-slot img{ width:100%; height:100%; object-fit:cover; }
.slot-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8em; text-align:center;
  padding:1.4em; color:var(--ink-soft); font-size:.85rem;
  border:2px dashed var(--mist-deep); border-radius:var(--radius-lg);
  background:repeating-linear-gradient(135deg, var(--mist) 0 18px, var(--cloud-dim) 18px 36px);
}
.slot-icon{ width:42px; height:42px; fill:none; stroke:var(--ink-soft); stroke-width:1.4; opacity:.6; }
.hero-photo-slot{ aspect-ratio:1/1; max-width:480px; margin-left:auto; }

/* ---------- trust bar ---------- */
.trust-bar{ background:var(--sage); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-inner{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1em;
  padding:20px 24px; text-align:center;
}
.trust-item{ font-size:.88rem; color:var(--ink-soft); }
.trust-item strong{ display:block; font-family:var(--display); font-size:1.1rem; color:var(--ink); }
@media (max-width:800px){ .trust-inner{ grid-template-columns:repeat(2,1fr); } }

/* ---------- generic section spacing ---------- */
.section{ padding:88px 0; }
.section h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); }

/* ---------- problem / solution ---------- */
.problem{ background:var(--white); }
.problem-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.problem-list li{ display:flex; align-items:center; padding:.85em 0; border-bottom:1px solid var(--line); font-weight:600; }
.problem-list li:last-child{ border-bottom:none; }
@media (max-width:800px){ .problem-inner{ grid-template-columns:1fr; } }

/* ---------- features ---------- */
.features-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;
}
.feature-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; transition:transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.feature-icon{
  width:48px; height:48px; border-radius:50%; background:var(--mist);
  display:flex; align-items:center; justify-content:center; margin-bottom:1em;
}
.feature-icon svg{ width:24px; height:24px; fill:none; stroke:var(--amber-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.feature-card h3{ font-size:1.1rem; margin-bottom:.4em; }
.feature-card p{ font-size:.92rem; margin:0; }
@media (max-width:900px){ .features-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features-grid{ grid-template-columns:1fr; } }

/* ---------- gallery: pinned filmstrip ---------- */
.gallery{ background:var(--mist); overflow:hidden; }
.gallery-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5em; flex-wrap:wrap;
}
.gallery-head h2{ margin-bottom:0; }
.gallery-head .eyebrow{ margin-bottom:.5em; }
.gallery-controls{ display:flex; align-items:center; gap:.7em; }
.gallery-count{ font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); margin-right:.4em; }
.gallery-arrow{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--ink);
  background:var(--cloud); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.gallery-arrow:hover{ background:var(--ink); transform:translateY(-2px); }
.gallery-arrow svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gallery-arrow:hover svg{ stroke:var(--cloud); }

.gallery-rail{ position:relative; margin-top:64px; padding:0 4px 28px; }
.gallery-line{
  position:absolute; left:0; right:0; top:34%; width:100%; height:40px; z-index:0; overflow:visible;
}
.gallery-line path{ fill:none; stroke:var(--mist-deep); stroke-width:2; stroke-dasharray:1 10; stroke-linecap:round; }

.gallery-track{
  position:relative; z-index:1; display:flex; gap:32px; align-items:flex-start;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  padding:28px 8px 40px;
  scrollbar-width:thin;
}
.gallery-track::-webkit-scrollbar{ height:6px; }
.gallery-track::-webkit-scrollbar-thumb{ background:var(--mist-deep); border-radius:999px; }

.gallery-frame{
  flex:0 0 auto; width:230px; aspect-ratio:4/5; scroll-snap-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-frame:hover{ transform:translateY(-8px) rotate(0deg) !important; box-shadow:var(--shadow-soft); }
.frame-index{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--mono); font-size:.75rem; color:var(--ink);
  background:var(--white); border-radius:999px; padding:.25em .7em;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.35);
}
.gallery-frame--1{ transform:rotate(-3deg) translateY(6px); }
.gallery-frame--2{ transform:rotate(2deg) translateY(-14px); width:270px; aspect-ratio:16/11; }
.gallery-frame--3{ transform:rotate(-2deg) translateY(18px); }
.gallery-frame--4{ transform:rotate(3deg) translateY(-6px); }
.gallery-frame--5{ transform:rotate(-1deg) translateY(10px); }

@media (max-width:700px){
  .gallery-rail{ margin-top:40px; }
  .gallery-line{ display:none; }
  .gallery-frame{ width:200px; }
  .gallery-frame--2{ width:230px; }
  .gallery-frame--1, .gallery-frame--2, .gallery-frame--3, .gallery-frame--4, .gallery-frame--5{ transform:none; }
}

/* ---------- steps ---------- */
.steps{ background:var(--sage); }
.steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px; }
.step-card{ background:var(--white); border-radius:var(--radius-md); padding:26px; }
.step-card h3{ font-size:1.05rem; margin-bottom:.3em; }
.step-card p{ font-size:.9rem; margin:0; }
@media (max-width:900px){ .steps-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps-row{ grid-template-columns:1fr; } }

/* ---------- specs ---------- */
.specs{ background:var(--white); }
.specs-inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.specs-table{ width:100%; border-collapse:collapse; background:var(--cloud-dim); border-radius:var(--radius-md); overflow:hidden; }
.specs-table th, .specs-table td{ text-align:left; padding:14px 20px; font-size:.94rem; border-bottom:1px solid var(--line); }
.specs-table th{ font-weight:600; color:var(--ink); width:45%; }
.specs-table td{ font-family:var(--mono); color:var(--ink-soft); }
.specs-table tr:last-child th, .specs-table tr:last-child td{ border-bottom:none; }
@media (max-width:800px){ .specs-inner{ grid-template-columns:1fr; } }

/* ---------- reviews ---------- */
.reviews{ background:var(--mist); }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.review-card{ background:var(--white); border-radius:var(--radius-md); padding:26px; margin:0; }
.review-card blockquote{ margin:0 0 1em; font-family:var(--display); font-size:1.05rem; color:var(--ink); }
.review-card figcaption{ font-size:.85rem; color:var(--ink-soft); }
.reviews-note{ text-align:center; font-size:.82rem; margin-top:28px; opacity:.75; }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr; } }

/* ---------- faq ---------- */
.faq{ background:var(--white); }
.faq-list{ max-width:760px; margin:48px auto 0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1em;
  background:none; border:none; text-align:left; padding:1.2em 0; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:1rem; color:var(--ink);
}
.faq-icon{ position:relative; width:20px; height:20px; flex:none; }
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; background:var(--amber-deep); border-radius:2px;
}
.faq-icon::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.faq-icon::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); transition:transform .2s ease; }
.faq-question[aria-expanded="true"] .faq-icon::after{ transform:translateX(-50%) rotate(90deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-answer p{ padding-bottom:1.2em; margin:0; font-size:.94rem; }

/* ---------- order form ---------- */
.order{ position:relative; overflow:hidden; background:var(--cloud-dim); }
.order-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.order-points{ margin-top:1.4em; }
.order-points li{ display:flex; align-items:center; padding:.4em 0; font-size:.95rem; }
.order-form{
  background:var(--white); border-radius:var(--radius-lg); padding:36px;
  box-shadow:var(--shadow-soft); border:1px solid var(--line);
}
.field{ margin-bottom:1.2em; }
.field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:.4em; }
.field input, .field textarea{
  width:100%; padding:.85em 1em; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--cloud); font-family:var(--body); font-size:.98rem;
  transition:border-color .15s ease, background .15s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--amber); background:var(--white); }
.field.invalid input{ border-color:#C65A4A; background:#FBEFEC; }
.field-error{ display:block; min-height:1.1em; font-size:.78rem; color:#C65A4A; margin-top:.3em; }
.consent{ display:flex; align-items:flex-start; gap:.6em; font-size:.85rem; color:var(--ink-soft); margin:1.4em 0 .2em; }
.consent input{ margin-top:.2em; }
.consent a{ text-decoration:underline; }
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-status{ text-align:center; font-size:.9rem; margin:1em 0 0; min-height:1.2em; }
.form-status.error{ color:#C65A4A; }
.form-status.success{ color:#2E7D5B; }
@media (max-width:900px){ .order-inner{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--cloud); padding:44px 0 28px; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4em; }
.site-footer .logo-text{ color:var(--cloud); }
.site-footer .logo-dial circle:first-child{ stroke:var(--cloud); }
.site-footer .logo-dial .hub{ fill:var(--cloud); }
.footer-contacts{ display:flex; gap:1.6em; font-size:.9rem; }
.footer-contacts a{ text-decoration:none; opacity:.85; }
.footer-legal{ width:100%; font-size:.78rem; opacity:.6; margin:1.2em 0 0; }