:root{
  --bg:#081018;
  --bg-soft:#0f1821;
  --panel:#101922;
  --panel-strong:#16212c;
  --panel-glow:rgba(255,106,61,0.1);
  --line:rgba(255,255,255,0.07);
  --line-strong:rgba(255,255,255,0.12);
  --text:#f3efe7;
  --muted:#a1adba;
  --accent:#ff6a3d;
  --accent-soft:#ffb06a;
  --highlight:#58d6ff;
  --success:#70d28a;
  --warning:#ffd166;
  --danger:#ff8578;
  --shadow:0 16px 40px rgba(3,7,12,0.24);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --max-width:1240px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Manrope",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,106,61,0.1), transparent 24%),
    linear-gradient(180deg, #091018 0%, #060c12 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at center, black 50%, transparent 100%);
  pointer-events:none;
  opacity:.16;
}

.site-noise{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.025), transparent 22%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.015), transparent 18%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.015), transparent 26%);
  pointer-events:none;
}

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

img{
  max-width:100%;
}

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

.topbar,
.footer,
.hero,
.section,
.checkout-shell{
  width:min(calc(100% - 32px), var(--max-width));
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:14px;
  z-index:20;
  margin-top:14px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(7,14,22,0.82);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color:#140d09;
  font-family:"Sora",sans-serif;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:0 10px 22px rgba(255,106,61,0.16);
}

.brand-copy{
  display:grid;
  gap:2px;
}

.brand-copy strong{
  font-family:"Sora",sans-serif;
  font-size:1rem;
}

.brand-copy small{
  color:var(--muted);
  font-size:.85rem;
}

.topnav{
  display:flex;
  align-items:center;
  gap:24px;
  color:var(--muted);
}

.topnav a:hover,
.ghost-link:hover{
  color:var(--text);
}

.ghost-link{
  color:var(--muted);
  transition:color .2s ease;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr);
  gap:34px;
  align-items:center;
  padding:84px 0 64px;
  min-height:calc(100vh - 140px);
}

.hero-copy,
.login-panel,
.service-card,
.process-step,
.feature-card,
.portal-preview,
.panel-card,
.kpi-card,
.checkout-summary,
.checkout-form,
.sidebar-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(16,25,34,0.94), rgba(9,15,22,0.96));
  box-shadow:var(--shadow);
}

.hero-copy{
  padding:36px;
  border-radius:var(--radius-xl);
  position:relative;
  overflow:hidden;
}

.hero-copy::after,
.login-panel::after,
.portal-preview::after,
.checkout-summary::after{
  content:"";
  position:absolute;
  inset:auto -20% -35% auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, var(--panel-glow), transparent 68%);
  pointer-events:none;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-soft);
  margin-bottom:18px;
}

.eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
}

h1,
h2,
h3{
  margin:0;
  font-family:"Sora",sans-serif;
  line-height:1.08;
}

h1{
  font-size:clamp(2.4rem, 4vw, 4.1rem);
  max-width:12ch;
}

h2{
  font-size:clamp(1.8rem, 2vw, 2.8rem);
}

h3{
  font-size:1.2rem;
}

.hero-lead,
.section-heading p,
.feature-card p,
.service-card p,
.process-step p,
.panel-card p,
.checkout-summary p,
.checkout-note p{
  color:var(--muted);
  line-height:1.75;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0;
}

.hero-badges span,
.preview-pill,
.pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,0.03);
  color:#dde8f3;
  font-size:.92rem;
}

.hero-actions,
.topbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:34px;
}

.primary-btn,
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 22px;
  border-radius:14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.primary-btn{
  background:linear-gradient(135deg, var(--accent) 0%, #ff9861 100%);
  color:#180f0b;
  font-weight:800;
}

.secondary-btn{
  background:rgba(255,255,255,0.035);
  color:var(--text);
  border-color:var(--line);
}

.primary-btn:hover,
.secondary-btn:hover,
.vault-card:hover,
.service-card:hover,
.process-step:hover,
.feature-card:hover,
.kpi-card:hover{
  transform:translateY(-2px);
}

.wide{
  width:100%;
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin:0;
}

.hero-metrics div{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.hero-metrics dt{
  font-weight:800;
  margin-bottom:8px;
}

.hero-metrics dd{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.55;
}

.login-panel{
  padding:30px;
  border-radius:var(--radius-xl);
  position:relative;
  overflow:hidden;
}

.login-panel-top{
  margin-bottom:22px;
}

.login-kicker{
  display:inline-block;
  padding:8px 12px;
  margin-bottom:14px;
  border-radius:999px;
  background:rgba(88,214,255,0.08);
  color:var(--highlight);
  font-size:.85rem;
}

.login-form{
  display:grid;
  gap:18px;
}

.login-form label,
.checkout-form label{
  display:grid;
  gap:10px;
}

.login-form span,
.checkout-form span{
  color:#dbe5ef;
  font-size:.95rem;
}

.login-form input,
.checkout-form input{
  min-height:54px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(5,11,18,0.6);
  color:var(--text);
}

.login-form input:focus,
.checkout-form input:focus{
  outline:none;
  border-color:rgba(255,106,61,0.75);
  box-shadow:0 0 0 4px rgba(255,106,61,0.12);
}

.inline-options,
.checkbox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
}

.checkbox input,
.consent input{
  min-height:auto;
  width:18px;
  height:18px;
  accent-color:var(--accent);
}

.checkbox span,
.consent span{
  color:var(--muted);
}

.login-note,
.status-message{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
  margin:0;
}

.status-message.is-success{
  color:var(--success);
}

.status-message.is-error{
  color:var(--danger);
}

.login-footer{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.login-footer strong{
  display:block;
  margin-bottom:6px;
}

.section{
  padding:36px 0 44px;
}

.section-heading{
  max-width:760px;
  margin-bottom:30px;
}

.service-grid,
.vault-grid,
.method-grid{
  display:grid;
  gap:20px;
}

.service-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.service-card{
  position:relative;
  padding:28px;
  border-radius:24px;
}

.service-index{
  display:inline-flex;
  margin-bottom:24px;
  font-family:"Sora",sans-serif;
  color:var(--accent-soft);
}

.service-card ul,
.bullet-list{
  margin:18px 0 0;
  padding-left:18px;
  color:#dbe5ef;
  line-height:1.8;
}

.process-section{
  position:relative;
}

.process-rail{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.process-step{
  padding:26px;
  border-radius:24px;
  position:relative;
}

.process-step span{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:18px;
  border-radius:14px;
  background:rgba(255,106,61,0.12);
  color:var(--accent-soft);
  font-family:"Sora",sans-serif;
  font-weight:700;
}

.panel-showcase .showcase-layout{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:24px;
}

.showcase-copy{
  display:grid;
  gap:18px;
}

.feature-card{
  padding:26px;
  border-radius:24px;
}

.portal-preview{
  padding:28px;
  border-radius:30px;
  position:relative;
  overflow:hidden;
}

.preview-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}

.preview-header small{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
}

.preview-main{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:20px;
  margin-bottom:26px;
}

.preview-main aside{
  display:grid;
  gap:12px;
}

.preview-chip{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  color:var(--muted);
}

.preview-chip.active{
  color:var(--text);
  background:linear-gradient(135deg, rgba(255,106,61,0.18), rgba(255,178,107,0.14));
}

.preview-content{
  display:grid;
  gap:18px;
}

.mini-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.mini-stats div,
.mini-upload,
.job-row,
.payment-card,
.method-card,
.summary-box,
.checkout-note,
.radio-card{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.mini-stats div{
  padding:16px;
  border-radius:16px;
}

.mini-stats strong{
  display:block;
  margin-bottom:8px;
  font-family:"Sora",sans-serif;
  font-size:1.6rem;
}

.mini-stats span,
.mini-upload span,
.summary-box span,
.payment-detail span,
.sidebar-card-label{
  color:var(--muted);
}

.mini-table{
  display:grid;
  gap:10px;
}

.mini-row{
  display:grid;
  grid-template-columns:1.05fr 1.2fr .95fr;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}

.mini-row b{
  color:var(--accent-soft);
}

.mini-upload{
  padding:18px;
  border-radius:18px;
  display:grid;
  gap:8px;
}

.footer{
  padding:48px 0 56px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.portal-shell{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:24px;
  width:min(calc(100% - 32px), 1380px);
  margin:24px auto;
}

.portal-sidebar{
  position:sticky;
  top:24px;
  align-self:start;
  display:grid;
  gap:18px;
}

.sidebar-brand,
.panel-card,
.checkout-form,
.checkout-summary,
.sidebar-card{
  padding:24px;
  border-radius:24px;
}

.sidebar-nav{
  display:grid;
  gap:10px;
  padding:16px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(10,18,27,0.88);
  box-shadow:var(--shadow);
}

.sidebar-nav a{
  padding:14px 16px;
  border-radius:16px;
  color:var(--muted);
}

.sidebar-nav a.active,
.sidebar-nav a:hover{
  background:rgba(255,255,255,0.05);
  color:var(--text);
}

.accent-card{
  background:linear-gradient(180deg, rgba(255,106,61,0.15), rgba(17,29,40,0.94));
}

.portal-main{
  display:grid;
  gap:24px;
}

.portal-topbar{
  padding:10px 0 0;
}

.portal-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr);
  gap:24px;
}

.stack{
  display:grid;
  gap:24px;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}

.kpi-card{
  padding:24px;
  border-radius:24px;
}

.kpi-card span{
  color:var(--muted);
}

.kpi-card strong{
  display:block;
  margin:14px 0 10px;
  font-family:"Sora",sans-serif;
  font-size:2rem;
}

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.job-table,
.upload-list,
.timeline{
  display:grid;
  gap:12px;
}

.job-row{
  display:grid;
  grid-template-columns:.8fr 1.2fr 1fr .8fr;
  gap:14px;
  padding:15px 16px;
  border-radius:18px;
  align-items:center;
}

.job-row-head{
  background:transparent;
  border-style:dashed;
  color:var(--muted);
}

.state{
  justify-self:start;
  padding:8px 12px;
  border-radius:999px;
  font-size:.9rem;
}

.processing{
  background:rgba(88,214,255,0.14);
  color:var(--highlight);
}

.ready{
  background:rgba(112,210,138,0.14);
  color:var(--success);
}

.waiting{
  background:rgba(255,209,102,0.12);
  color:var(--warning);
}

.review{
  background:rgba(255,133,120,0.12);
  color:var(--danger);
}

.dropzone{
  display:grid;
  place-items:center;
  gap:8px;
  min-height:180px;
  padding:22px;
  border:1px dashed rgba(255,178,107,0.5);
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(255,106,61,0.08), transparent),
    rgba(255,255,255,0.03);
  text-align:center;
  cursor:pointer;
}

.dropzone.is-dragging{
  border-color:var(--highlight);
  background:
    linear-gradient(135deg, rgba(88,214,255,0.12), transparent),
    rgba(255,255,255,0.04);
}

.upload-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:18px 0 14px;
  color:var(--muted);
}

.upload-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.upload-item strong{
  display:block;
  margin-bottom:6px;
}

.upload-item small{
  color:var(--muted);
}

.upload-tag{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,106,61,0.12);
  color:var(--accent-soft);
}

.vault-grid,
.method-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.vault-card,
.method-card{
  display:grid;
  gap:10px;
  padding:20px;
  border-radius:20px;
}

.vault-card small{
  color:var(--accent-soft);
}

.payment-card{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  padding:18px;
  border-radius:20px;
  margin-bottom:18px;
}

.payment-detail strong{
  display:block;
  margin-top:8px;
}

.timeline article{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:16px;
  padding:16px 0;
  border-top:1px solid var(--line);
}

.timeline article:first-child{
  border-top:none;
  padding-top:0;
}

.timeline span{
  color:var(--accent-soft);
  font-family:"Sora",sans-serif;
  font-size:.95rem;
}

.checkout-shell{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(360px, .8fr);
  gap:24px;
  padding:52px 0;
  min-height:100vh;
  align-items:start;
}

.summary-box{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  padding:20px;
  border-radius:22px;
  margin:28px 0 20px;
}

.summary-box strong{
  display:block;
  margin-top:8px;
}

.checkout-note{
  padding:18px;
  border-radius:20px;
}

.checkout-form{
  display:grid;
  gap:18px;
}

.radio-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  border-radius:20px;
}

.radio-card input{
  width:18px;
  height:18px;
  margin-top:4px;
  accent-color:var(--accent);
}

.radio-card small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  line-height:1.6;
}

.form-split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.consent{
  align-items:flex-start;
  justify-content:flex-start;
}

.hidden{
  display:none !important;
}

.reveal{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .6s ease;
}

.reveal-delay{
  transition-delay:.1s;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (max-width: 1100px){
  .hero,
  .panel-showcase .showcase-layout,
  .portal-grid,
  .checkout-shell{
    grid-template-columns:1fr;
  }

  .service-grid,
  .process-rail,
  .kpi-grid,
  .vault-grid,
  .method-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .portal-shell{
    grid-template-columns:1fr;
  }

  .portal-sidebar{
    position:static;
  }
}

@media (max-width: 780px){
  .topbar{
    flex-wrap:wrap;
  }

  .topnav{
    width:100%;
    justify-content:space-between;
    gap:14px;
    font-size:.95rem;
  }

  .hero-copy,
  .login-panel,
  .panel-card,
  .checkout-form,
  .checkout-summary,
  .sidebar-brand,
  .sidebar-card{
    padding:20px;
  }

  .hero-metrics,
  .mini-stats,
  .payment-card,
  .summary-box,
  .form-split,
  .vault-grid,
  .method-grid,
  .service-grid,
  .process-rail,
  .kpi-grid{
    grid-template-columns:1fr;
  }

  .preview-main,
  .job-row,
  .mini-row{
    grid-template-columns:1fr;
  }

  .card-head,
  .upload-summary,
  .footer,
  .hero-actions,
  .topbar-actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .inline-options,
  .checkbox{
    flex-direction:column;
    align-items:flex-start;
  }
}

body{
  background:#f4f7fb;
  color:#17202a;
}

body::before,
.site-noise{
  display:none;
}

:root{
  --bg:#f4f7fb;
  --bg-soft:#ffffff;
  --panel:#ffffff;
  --panel-strong:#f7fafc;
  --panel-glow:rgba(231,76,60,0.08);
  --line:#dfe7ef;
  --line-strong:#cbd8e4;
  --text:#17202a;
  --muted:#657487;
  --accent:#b83b2f;
  --accent-soft:#a83228;
  --highlight:#2d8ecf;
  --success:#1f9d61;
  --warning:#c98b1d;
  --danger:#d54b43;
  --shadow:0 10px 28px rgba(29,45,62,0.08);
}

.topbar,
.hero-copy,
.login-panel,
.service-card,
.process-step,
.feature-card,
.portal-preview,
.panel-card,
.kpi-card,
.checkout-summary,
.checkout-form,
.sidebar-card{
  background:#ffffff;
  border-color:var(--line);
  box-shadow:var(--shadow);
}

.hero-copy::after,
.login-panel::after,
.portal-preview::after,
.checkout-summary::after{
  display:none;
}

.brand-mark,
.primary-btn{
  background:#b83b2f;
  color:#fff;
  box-shadow:none;
}

.secondary-btn,
.ghost-btn,
.ghost-link{
  color:#405167;
}

.form-label-block input,
.form-label-block select,
.form-label-block textarea{
  background:#fff;
  border-color:#ccd8e5;
  color:#17202a;
}

/* Public homepage inspired by automotive file-service layouts. */
.landing-page{
  background:#f4f7fb;
  color:#17202a;
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page p{
  letter-spacing:0;
}

.home-status{
  background:#1f2933;
  color:#dce6f1;
  font-size:.88rem;
}

.home-status-inner{
  width:min(calc(100% - 32px), 1240px);
  min-height:38px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  row-gap:6px;
}

.home-status strong{
  color:#7bd88f;
  font-weight:800;
}

.home-header{
  position:sticky;
  top:0;
  z-index:40;
  width:100%;
  min-height:76px;
  padding:0 max(16px, calc((100vw - 1240px) / 2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #dfe7ef;
  backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(23,32,42,.06);
}

.home-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}

.home-brand-mark{
  width:44px;
  height:44px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#b83b2f;
  color:#fff;
  font-family:"Sora",sans-serif;
  font-weight:800;
}

.home-brand span:last-child{
  display:grid;
  gap:2px;
}

.home-brand strong{
  font-family:"Sora",sans-serif;
  font-size:1rem;
  color:#17202a;
}

.home-brand small{
  color:#657487;
  font-size:.82rem;
}

.home-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  color:#405167;
  font-weight:700;
  font-size:.95rem;
}

.home-nav a{
  padding:28px 0;
  border-bottom:3px solid transparent;
}

.home-nav a:hover{
  color:#a83228;
  border-color:#a83228;
}

.home-actions,
.hero-cta-row,
.contact-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.home-link{
  color:#405167;
  font-weight:800;
}

.language-switch{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid #cbd8e4;
  border-radius:8px;
  color:#17202a;
  background:#fff;
  font-weight:900;
  font-size:.85rem;
}

.language-switch:hover{
  border-color:#a83228;
  color:#a83228;
}

.home-button,
.landing-page .primary-btn{
  border-radius:8px;
}

.home-button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:1px solid #b83b2f;
  background:#b83b2f;
  color:#fff;
  font-weight:800;
  box-shadow:0 8px 18px rgba(217,74,56,.18);
}

.home-button:hover{
  background:#bf392a;
  border-color:#bf392a;
}

.home-button.light{
  background:#fff;
  color:#17202a;
  border-color:#cbd8e4;
  box-shadow:none;
}

.home-button.light:hover{
  color:#a83228;
  border-color:#a83228;
}

.home-button.small{
  min-height:40px;
  padding:0 14px;
}

.home-hero{
  position:relative;
  min-height:650px;
  display:grid;
  align-items:center;
  overflow:hidden;
  color:#fff;
  background:#17202a;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(12,18,26,.88) 0%, rgba(12,18,26,.68) 48%, rgba(12,18,26,.32) 100%);
}

.home-hero-grid{
  position:relative;
  z-index:2;
  width:min(calc(100% - 32px), 1240px);
  margin:0 auto;
  padding:58px 0;
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(330px, 430px);
  gap:34px;
  align-items:center;
}

.home-hero-copy{
  max-width:720px;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#d94a38;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:14px;
}

.home-hero .section-kicker{
  color:#ffb06a;
}

.section-kicker::before{
  content:"";
  width:30px;
  height:2px;
  background:currentColor;
}

.landing-page h1{
  max-width:12ch;
  margin:0;
  color:#fff;
  font-size:4rem;
  line-height:1.04;
}

.home-hero-copy p{
  max-width:660px;
  margin:22px 0 0;
  color:#e4edf5;
  font-size:1.12rem;
  line-height:1.75;
}

.hero-cta-row{
  margin-top:30px;
}

.hero-proof{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  max-width:680px;
}

.hero-proof span{
  min-height:72px;
  padding:14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.1);
  color:#dce6f1;
}

.hero-proof strong{
  display:block;
  color:#fff;
}

.home-login-card{
  padding:24px;
  border-radius:8px;
  background:#fff;
  color:#17202a;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}

.home-login-card h2{
  margin:0 0 10px;
  color:#17202a;
  font-size:1.7rem;
}

.home-login-card p{
  margin:0 0 20px;
  color:#657487;
  line-height:1.65;
}

.login-kicker{
  display:block;
  color:#d94a38;
  font-weight:900;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.home-login-card .auth-links{
  margin-top:18px;
  justify-content:space-between;
}

.home-section{
  width:min(calc(100% - 32px), 1240px);
  margin:0 auto;
  padding:74px 0;
}

.home-section-heading{
  max-width:720px;
  margin-bottom:30px;
}

.home-section-heading.centered{
  margin-inline:auto;
  text-align:center;
}

.home-section-heading.centered .section-kicker{
  justify-content:center;
}

.landing-page h2{
  color:#17202a;
  font-size:2.3rem;
  line-height:1.12;
}

.landing-page h3{
  color:#17202a;
  font-size:1.1rem;
  line-height:1.25;
}

.home-section-heading p,
.service-tile p,
.process-line p,
.news-card p,
.intro-grid p,
.ecu-filter-card p,
.home-contact p{
  color:#657487;
  line-height:1.7;
}

.intro-band{
  padding-top:54px;
  padding-bottom:44px;
}

.intro-grid,
.service-showcase,
.news-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.intro-grid article,
.service-tile,
.news-card,
.ecu-filter-card,
.ecu-result-board,
.process-line article{
  border:1px solid #dfe7ef;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 26px rgba(29,45,62,.07);
}

.intro-grid article{
  padding:22px;
}

.intro-grid strong{
  display:block;
  margin-bottom:8px;
  font-family:"Sora",sans-serif;
}

.service-showcase{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.service-tile{
  min-height:254px;
  padding:24px;
  display:flex;
  flex-direction:column;
}

.service-tile span{
  width:44px;
  height:44px;
  margin-bottom:22px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#eef5fb;
  color:#2d8ecf;
  font-weight:900;
}

.service-tile:hover{
  transform:translateY(-4px);
  border-color:#f06f3f;
}

.service-tile,
.news-card,
.process-line article{
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.service-tile:hover,
.news-card:hover,
.process-line article:hover{
  box-shadow:0 16px 36px rgba(29,45,62,.1);
}

.ecu-studio{
  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0, 1fr);
  gap:22px;
  align-items:stretch;
}

.ecu-filter-card,
.ecu-result-board{
  padding:28px;
}

.vehicle-tabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin:24px 0 18px;
}

.vehicle-tabs button{
  min-height:42px;
  border:1px solid #cbd8e4;
  border-radius:8px;
  background:#fff;
  color:#405167;
  font-weight:800;
  cursor:pointer;
}

.vehicle-tabs button.active,
.vehicle-tabs button:hover{
  border-color:#d94a38;
  background:#d94a38;
  color:#fff;
}

.ecu-form{
  display:grid;
  gap:12px;
}

.ecu-form label{
  display:grid;
  gap:8px;
  color:#405167;
  font-weight:800;
}

.ecu-form select{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border:1px solid #cbd8e4;
  border-radius:8px;
  background:#fff;
  color:#17202a;
}

.ecu-result-board{
  display:grid;
  align-content:space-between;
  gap:24px;
  background:#17202a;
  color:#fff;
  border-color:#17202a;
}

.result-top{
  display:grid;
  gap:8px;
}

.result-top span{
  color:#ffb06a;
  font-weight:900;
  text-transform:uppercase;
  font-size:.8rem;
}

.result-top strong{
  font-family:"Sora",sans-serif;
  font-size:2rem;
}

.power-table{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.power-table div{
  min-height:96px;
  padding:16px;
  border-radius:8px;
  background:#22303d;
}

.power-table span,
.solution-list span{
  display:block;
  color:#aebdcc;
  margin-bottom:8px;
}

.power-table strong{
  font-family:"Sora",sans-serif;
  font-size:1.7rem;
}

.solution-list{
  display:grid;
  gap:12px;
}

.solution-list div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.solution-list small{
  padding:8px 10px;
  border-radius:8px;
  background:#eef5fb;
  color:#17202a;
  font-weight:900;
}

.process-section{
  padding-top:34px;
}

.process-line{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.process-line article{
  min-height:210px;
  padding:24px;
}

.process-line span{
  width:38px;
  height:38px;
  margin-bottom:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1f9d61;
  color:#fff;
  font-weight:900;
}

.news-card{
  min-height:230px;
  padding:24px;
}

.news-card small{
  display:block;
  margin-bottom:14px;
  color:#2d8ecf;
  font-weight:900;
  text-transform:uppercase;
}

.home-contact{
  width:min(calc(100% - 32px), 1240px);
  margin:20px auto 0;
  padding:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-radius:8px;
  background:#17202a;
  color:#fff;
}

.home-contact h2{
  color:#fff;
}

.home-contact p{
  max-width:680px;
  margin-bottom:0;
  color:#dce6f1;
}

.home-footer{
  width:min(calc(100% - 32px), 1240px);
  margin:0 auto;
  padding:30px 0 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#657487;
}

.home-footer strong{
  color:#17202a;
}

.home-footer nav{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.home-footer a{
  color:#405167;
  text-decoration:underline;
  text-underline-offset:3px;
}

.home-nav a:focus-visible,
.home-actions a:focus-visible,
.home-button:focus-visible,
.home-footer a:focus-visible{
  outline:3px solid #2d8ecf;
  outline-offset:3px;
}

@media (max-width: 1080px){
  .home-nav{
    display:none;
  }

  .landing-page h1{
    font-size:3rem;
  }

  .home-hero-grid,
  .ecu-studio{
    grid-template-columns:1fr;
  }

  .service-showcase,
  .process-line{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .home-status-inner{
    justify-content:flex-start;
    gap:12px;
    padding:8px 0;
    flex-wrap:wrap;
    line-height:1.35;
  }

  .home-header{
    min-height:auto;
    padding:12px 16px;
    flex-wrap:wrap;
  }

  .home-actions{
    width:100%;
    justify-content:space-between;
  }

  .home-hero{
    min-height:auto;
  }

  .hero-shade{
    background:rgba(12,18,26,.82);
  }

  .home-hero-grid{
    padding:42px 0;
  }

  .landing-page h1{
    font-size:2.25rem;
  }

  .landing-page h2{
    font-size:1.8rem;
  }

  .hero-proof,
  .intro-grid,
  .service-showcase,
  .process-line,
  .news-grid,
  .power-table{
    grid-template-columns:1fr;
  }

  .home-login-card,
  .ecu-filter-card,
  .ecu-result-board,
  .service-tile,
  .news-card,
  .process-line article,
  .home-contact{
    padding:20px;
  }

  .home-contact,
  .home-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}