:root{
    --bg:#070A0F;
    --text:#EAF0FF;
    --muted:rgba(234,240,255,.72);
    --card:rgba(10,14,24,.62);
    --stroke:rgba(234,240,255,.12);
    --glow:rgba(120,170,255,.35);
    --accent:#7fb2ff;
    --accent2:#a7ffcf;
    --radius:22px;
    --shadow: 0 18px 60px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden;
}

/* ===== Parallax Highway Background ===== */
.bg{
    position:fixed;
    inset:0;
    z-index:-3;
    overflow:hidden;
    background:
    radial-gradient(1200px 700px at 20% 10%, rgba(127,178,255,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, rgba(167,255,207,.14), transparent 60%),
    linear-gradient(180deg, #05060A 0%, #070A0F 55%, #05060A 100%);
}

/* Darken background for readability */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 5;
  background: rgba(0,0,0,.22);
}

@media (max-width: 768px), (pointer: coarse){
  .bg::after{
    background: rgba(0,0,0,.32);
  }
}

.highway{
    position:absolute;
    left:50%;
    top:-18vh;
    width:120vw;
    height:140vh;
    transform:translateX(-50%) perspective(900px) rotateX(55deg);
    transform-origin:center top;
    filter:saturate(1.05) contrast(1.08);
    opacity:.95;
}

.road{
    position:absolute;
    inset:0;
    margin:auto;
    width:70vw;
    height:140vh;
    border-radius:38px;
    background:
    linear-gradient(90deg,
        rgba(255,255,255,.05) 0%,
        rgba(255,255,255,.02) 15%,
        rgba(0,0,0,.0) 50%,
        rgba(255,255,255,.02) 85%,
        rgba(255,255,255,.05) 100%),
    linear-gradient(180deg, #0C1222 0%, #070B14 20%, #05070D 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.shoulders{
    position:absolute;
    left:50%;
    top:0;
    width:92vw;
    height:140vh;
    transform:translateX(-50%);
    border-radius:44px;
    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.01) 30%,
        rgba(255,255,255,.01) 70%,
        rgba(255,255,255,.06)
    );
    opacity:.26;
    filter:blur(.2px);
}

.lane{
    position:absolute;
    left:50%;
    top:0;
    height:140vh;
    width:6px;
    transform:translateX(-50%);
    background:
    repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.90) 0px,
        rgba(255,255,255,.90) 26px,
        rgba(255,255,255,0) 26px,
        rgba(255,255,255,0) 62px
    );
    opacity:.75;
    filter:drop-shadow(0 0 8px rgba(127,178,255,.25));
}

.lane.left{ left:43%; opacity:.35; }
.lane.right{ left:57%; opacity:.35; }

.guard{
    position:absolute;
    top:0;
    height:140vh;
    width:18px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    opacity:.28;
    border-radius:18px;
    filter:blur(.2px);
}

.guard.left{ left:14vw; }
.guard.right{ right:14vw; }

.vignette{
    position:absolute;
    inset:-40px;
    background: radial-gradient(
    900px 600px at 50% 30%,
    transparent 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.80) 100%
    );
    z-index:2;
    pointer-events:none;
}

/* ===== Nav ===== */
header{
    position:sticky;
    top:0;
    z-index:10;
    padding:14px 18px;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(5,6,10,.62) 0%, rgba(5,6,10,.25) 100%);
    border-bottom:1px solid rgba(255,255,255,.06);
}

/* Nav links container (optional, but nice) */
.navLinks{
  display:flex;
  gap:6px;
  align-items:center;
}

/* Language dropdown wrapper */
.lang{
  position:relative;
}

/* Button */
.langBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.82);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .25px;
  cursor:pointer;
  user-select:none;
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.langBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.langBtn:active{
  transform: translateY(0px);
}

.langGlobe{
  font-size: 14px;
  opacity:.9;
}

.langCode{
  min-width: 26px;
  text-align:center;
}

.langChevron{
  opacity:.75;
  font-size: 12px;
  transform: translateY(1px);
}

/* Menu */
.langMenu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 210px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,24,.72);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  padding: 8px;
  z-index: 50;

  /* hidden by default */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

/* Open state */
.lang.open .langMenu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Menu items */
.langItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(234,240,255,.86);
  border: 1px solid transparent;
  background: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.langItem:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.liFlag{ width: 22px; text-align:center; }
.liLabel{ flex:1; font-weight: 800; font-size: 13px; }
.liCode{
  font-weight: 900;
  font-size: 12px;
  color: rgba(234,240,255,.70);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

/* Selected (current language) */
.langItem[aria-selected="true"]{
  background: rgba(127,178,255,.10);
  border-color: rgba(127,178,255,.20);
}

/* Keyboard focus */
.langBtn:focus-visible,
.langItem:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(127,178,255,.25);
  border-color: rgba(127,178,255,.30);
}

.nav{
    max-width:1120px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.brandLogo {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(120, 180, 255, 0.4));
}



.dot{
    width:12px;
    height:12px;
    border-radius:999px;
    background: radial-gradient(circle at 30% 30%, var(--accent2), var(--accent));
    box-shadow: 0 0 18px rgba(127,178,255,.35);
}

.nav a{
    color:var(--muted);
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid transparent;
}

.nav a:hover{
    color:var(--text);
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

main{ position:relative; }

/* ===== Hero intro ===== */
.heroIntro{
    max-width:1120px;
    width:100%;
    padding:72px 18px 18px;
    margin:0 auto;
}

.heroIntro h1{
    margin:0;
    font-size: clamp(34px, 4.6vw, 62px);
    line-height:1.05;
    letter-spacing:-.02em;
}

.heroIntro p{
    margin:14px 0 0;
    max-width:60ch;
    color:var(--muted);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height:1.55;
}

.scrollHint{
    margin-top:26px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:rgba(234,240,255,.60);
    font-size:13px;
    letter-spacing:.2px;
    user-select:none;
}

.chev{
    width:18px;
    height:18px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    display:grid;
    place-items:center;
}

/* ===== Hero (reveal) ===== */
.heroSection{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:72px 18px;
}

.wrap{
    width:100%;
    max-width:1120px;
    display:grid;
    grid-template-columns: 1fr auto;
    gap:10px;
    align-items:center;
}

@media (max-width: 920px){
    .wrap{ grid-template-columns: 1fr; }
}

.panel{
    padding:22px;
    border-radius: var(--radius);
    background: var(--card);
    border:1px solid var(--stroke);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    max-width: 620px;
}

.kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:rgba(234,240,255,.78);
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:12px;
}

.kicker .line{
    width:34px;
    height:1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity:.8;
}

.title{
    margin:14px 0 0;
    font-size: clamp(34px, 4.2vw, 58px);
    line-height:1.02;
    letter-spacing:-.03em;
}

.slogan{
    margin:14px 0 0;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height:1.45;
    color:rgba(234,240,255,.80);
    max-width:55ch;
}

.bullets{
    margin:18px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px;
    color:var(--muted);
    font-size:15px;
    line-height:1.5;
}

.bullets li{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.check{
    width:18px;
    height:18px;
    border-radius:6px;
    background: rgba(127,178,255,.16);
    border:1px solid rgba(127,178,255,.22);
    display:grid;
    place-items:center;
    margin-top:2px;
    flex:0 0 auto;
}

.ctaRow{
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.ctaBreak{
    flex-basis:100%;
    height:0;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color:var(--text);
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    user-select:none;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
}

.btn:active{ transform: translateY(0px); }

.btn.disabled{
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
    background: rgba(255,255,255,.04);
}

.badge{
    width:auto;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    color:rgba(234,240,255,.78);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    white-space:nowrap;
}

.launchBadge{
    align-self:flex-start;
}

/* ===== Phone image (right) ===== */
.phoneWrap{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    overflow:visible;
    width:fit-content;
    margin-left:auto;
}

.phoneStage{
    overflow:visible;
}

.heroPhone{
    width: min(560px, 44vw);
    height:auto;
    display:block;
    transform: rotate(90deg); /* keep if your PNG is sideways */
    border-radius:34px;
    box-shadow: 0 40px 110px rgba(0,0,0,.55);
}

@media (max-width: 920px){
    .phoneWrap{ margin-left:0; justify-content:center; }
    .heroPhone{ width: min(520px, 92vw); }
}

/* ===== Reveal animation ===== */
.reveal{
    opacity:0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.on{
    opacity:1;
    transform: translateY(0);
}

/* ===== How it works tiles ===== */
.howSection{
    padding-top:0;
}

.below{
    max-width:1120px;
    margin:0 auto;
    padding:0 18px 36px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
}

@media (max-width: 920px){
    .below{ grid-template-columns: 1fr; }
}

.tile{
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    padding:18px;
    box-shadow: 0 16px 50px rgba(0,0,0,.40);
    backdrop-filter: blur(10px);
}

.tile h4{
    margin:0 0 8px;
    font-size:14px;
    letter-spacing:.2px;
}

.tile p{
    margin:0;
    color:var(--muted);
    line-height:1.55;
    font-size:14px;
}

/* ===== Countries section ===== */
.countriesSection{
    padding: 0 18px 110px;
}

.countriesWrap{
    max-width:1120px;
    margin:0 auto;
}

.countriesHeader{
    margin: 18px 0 8px;
}

.countriesHeader h3{
    margin:0;
    font-size:18px;
    letter-spacing:.2px;
}

.countriesHeader p{
    margin:8px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.55;
}

/* Rail: hidden scrollbar, drag-to-scroll */
.countriesRail{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:14px;
    margin: 14px 0 0;
    cursor:grab;
    user-select:none;

    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    box-shadow: 0 16px 50px rgba(0,0,0,.28);

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.countriesRail::-webkit-scrollbar{ display:none; }
.countriesRail.dragging{ cursor:grabbing; }

.countryCard{
    position:relative;
    flex: 0 0 auto;
    width:168px;
    height:104px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    box-shadow: 0 18px 55px rgba(0,0,0,.42);
    overflow:hidden;
    cursor:pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
    padding:0;
}

.countryCard:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
}

.countryCard.disabled{
    opacity:.45;
    cursor:not-allowed;
    pointer-events:none;
}

.layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition: opacity .18s ease, transform .18s ease;
}

.systemImg{ opacity:0; transform: scale(1.02); }
.countryCard:hover .flagImg{ opacity:0; transform: scale(1.02); }
.countryCard:hover .systemImg{ opacity:1; transform: scale(1.02); }

@media (hover:none){
    .countryCard:hover .flagImg{ opacity:1; transform:none; }
    .countryCard:hover .systemImg{ opacity:0; transform:none; }
}

.namePill{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    padding:6px 8px;
    border-radius:12px;
    background: rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.12);
    color: rgba(234,240,255,.92);
    font-weight:800;
    font-size:13px;
    letter-spacing:.2px;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
    pointer-events:none;
}

.soonTag{
    position:absolute;
    top:10px;
    right:10px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    color: rgba(234,240,255,.78);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    pointer-events:none;
}

/* ===== Footer ===== */
footer{
    padding:28px 18px 44px;
    color:rgba(234,240,255,.55);
    text-align:center;
    border-top:1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
}


/* === Mobile Phone Devices === */

@media (max-width: 768px) {
  /* keep brand + language, hide the extra nav links */
  .navLinks > a {
    display: none;
  }

  /* optional: tighten header spacing */
  header .nav {
    padding: 12px 16px;
  }

  .brand span {          /* "AutoVignette" text */
    font-size: 16px;
  }

  .brandLogo {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 768px) {
  /* hide the phone preview */
  .phoneWrap,
  .phoneStage,
  .heroPhone {
    display: none !important;
  }

  /* make the left panel fill the width */
  .heroSection .wrap {
    grid-template-columns: 1fr !important; /* if you're using grid */
  }
}

@media (max-width: 768px) {
  .heroIntro h1 {
    font-size: 44px;     /* adjust to taste */
    line-height: 1.05;
  }

  .heroIntro p {
    font-size: 16px;
    max-width: 40ch;
  }
}

/* ===== Mobile: slow down parallax/road movement ===== */
@media (max-width: 768px), (pointer: coarse) {
  .lane,
  .road,
  .shoulders,
  .highway {
    animation-duration: calc(var(--roadSpeed, 8s) * 0.8) !important;
  }
}

@media (max-width: 768px), (pointer: coarse) {
  .highway{
    transform: translateX(-50%) perspective(700px) rotateX(48deg);
    top: -12vh;
  }
}

@media (max-width: 768px), (pointer: coarse) {

  /* Make middle lane less bright */
  .lane {
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.55) 0px,
        rgba(255,255,255,.55) 26px,
        rgba(255,255,255,0) 26px,
        rgba(255,255,255,0) 62px
      );
    opacity: .5;
  }

  /* Side lanes even softer */
  .lane.left,
  .lane.right {
    opacity: .25;
  }

}

@media (max-width: 768px), (pointer: coarse) {
  .lane {
    filter: drop-shadow(0 0 4px rgba(127,178,255,.15));
  }
}

@media (max-width: 768px), (pointer: coarse) {
  .lane {
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.55) 0px,
        rgba(255,255,255,.55) 18px,
        rgba(255,255,255,0) 18px,
        rgba(255,255,255,0) 72px
      );
  }
}