/* JetTec — global stylesheet (drop-in replacement) */
/* ===== Tokens ===== */
:root{
  --bg:#0b0b0d;
  --surface:#121216;
  --text:#e6e6ea;
  --muted:#a0a0aa;
  --accent:#ff6a00;
  --accent-600:#e45f00;
  --accent-700:#c55300;
  --ring:rgba(255,106,0,.35);

  --radius:16px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,.06);

  --step--1: clamp(.86rem, .78rem + .2vw, .95rem);
  --step-0:  clamp(1rem, .95rem + .3vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + .6vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.35rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.8vw, 2.75rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Links (fix blue links) ===== */
a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }
a:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

/* ===== Utilities ===== */
.wrap{ width:min(1200px, 92%); margin-inline:auto }
.muted{ color:var(--muted) }
.small{ font-size:var(--step--1) }
.section{ padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:var(--border);
  background:linear-gradient(180deg, rgba(18,18,22,.9), rgba(18,18,22,.6));
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px }

.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text) }
.brand:hover{ text-decoration:none }
.brand-text{ font-weight:700; letter-spacing:.2px }

/* Ensure the logo actually shows */
.brand img{
  display:inline-block;
  width:auto;
  height:40px;           /* header size */
  aspect-ratio:auto;
}

/* Menu */
.menu{ display:flex; align-items:center; gap:20px }
.menu a{ color:var(--text) }
.menu a:hover{ color:var(--accent) }
.btn.primary{ margin-left:8px }

/* Mobile toggle (kept simple; hidden on wide screens) */
.nav-toggle{ display:none }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem;
  border-radius:999px;
  font-weight:600;
  border:1px solid transparent;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn.primary{
  background:var(--accent);
  color:#000;
}
.btn.primary:hover{ background:var(--accent-600) }
.btn.primary:active{ transform:translateY(1px) }
.btn.ghost{
  color:var(--accent); background:transparent; border-color:var(--accent);
}
.btn.ghost:hover{ background:rgba(255,106,0,.08) }

/* ===== Hero ===== */
/* Hero: bring copy and screenshots closer together */
/* Hero: tighter column gap + top-aligned */
.hero-grid{
  display:grid;
  gap: clamp(4px, 0.8vw, 12px);   /* was 8–16px */
  align-items:start;              /* was center */
  grid-template-columns: 1fr;
}


.hero-copy h1{ font-size:var(--step-3); line-height:1.1; margin:.25rem 0 1rem }
.hero-copy p{ font-size:var(--step-0); max-width:60ch }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }

.device-frame{
  border-radius:30px; overflow:hidden; background:var(--surface);
  border:var(--border); box-shadow:var(--shadow);
  aspect-ratio: 14 / 9; display:flex; align-items:center; justify-content:center;
}
.device-frame img{ width:100%; height:auto; display:block }

/* ===== Cards ===== */
.grid{ display:grid; gap:16px }
.cards-3{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.card{
  background:var(--surface); border:var(--border); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow);
}
.card .icon{ font-size:24px }

/* ===== Footer (consistent, fix logo + link colors) ===== */
.site-footer{
  border-top:var(--border);
  background:#0e0e12;
  margin-top: clamp(2rem, 1rem + 5vw, 5rem);
}
.foot-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-block:28px;
}
.foot-bottom{ padding:12px 0; border-top:var(--border) }

/* Footer brand + logo */
.brand.foot{
  color:var(--text);
}
.brand.foot img{
  display:inline-block;
  width:auto;
  height:24px;           /* footer size */
}

/* Make ALL footer links orange */
.site-footer a{ color:var(--accent) }
.site-footer a:hover{ text-decoration:underline }

/* ===== Forms ===== */
input,textarea,select{
  width:100%; padding:.7rem .9rem; background:#0f0f13; color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
}
label{ font-weight:600; font-size:.95rem }
.form-row{ display:grid; gap:12px; margin-bottom:14px }
button, input[type="submit"]{ cursor:pointer }

/* ===== Responsive ===== */
@media (min-width: 900px){
  .hero-grid{ grid-template-columns: 1.1fr .9fr }
}
.site-header.shrink .nav { padding-block:8px }
/* JetTec — global stylesheet (drop-in replacement) */
/* ===== Tokens ===== */
:root{
  --bg:#0b0b0d;
  --surface:#121216;
  --text:#e6e6ea;
  --muted:#a0a0aa;
  --accent:#ff6a00;
  --accent-600:#e45f00;
  --accent-700:#c55300;
  --ring:rgba(255,106,0,.35);

  --radius:16px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,.06);

  --step--1: clamp(.86rem, .78rem + .2vw, .95rem);
  --step-0:  clamp(1rem, .95rem + .3vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + .6vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.35rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.8vw, 2.75rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Links (fix blue links) ===== */
a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }
a:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

/* ===== Typography spacing tweaks (tighten headings/subtitles) ===== */
h1,h2,h3,h4{ line-height:1.15 }
h1,.xl{ margin: .1rem 0 .6rem }
h2,.lg{ margin: .1rem 0 .5rem }
.wrap > p{ margin: .25rem 0 .5rem } /* keeps subtitle close to content */

/* ===== Utilities ===== */
.wrap{ width:min(1200px, 92%); margin-inline:auto }
.muted{ color:var(--muted) }
.small{ font-size:var(--step--1) }
.section{ padding-block: clamp(2.2rem, 1.6rem + 3vw, 4.6rem) }
/* Tighten gap when sections are stacked (subtitle → next grid) */
.section + .section{ padding-top: clamp(1rem, .6rem + 1.2vw, 2rem) }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:var(--border);
  background:linear-gradient(180deg, rgba(18,18,22,.9), rgba(18,18,22,.6));
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px }

.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text) }
.brand:hover{ text-decoration:none }
.brand-text{ font-weight:700; letter-spacing:.2px }

/* Ensure the logo actually shows */
.brand img{
  display:inline-block;
  width:auto;
  height:50px;           /* header size */
  aspect-ratio:auto;
}

/* Menu */
.menu{ display:flex; align-items:center; gap:20px }
.menu a{ color:var(--text) }
.menu a:hover{ color:var(--accent) }
.btn.primary{ margin-left:8px }

/* Mobile toggle (kept simple; hidden on wide screens) */
.nav-toggle{ display:none }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem;
  border-radius:999px;
  font-weight:600;
  border:1px solid transparent;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn.primary{
  background:var(--accent);
  color:#000;
}
.btn.primary:hover{ background:var(--accent-600) }
.btn.primary:active{ transform:translateY(1px) }
.btn.ghost{
  color:var(--accent); background:transparent; border-color:var(--accent);
}
.btn.ghost:hover{ background:rgba(255,106,0,.08) }

/* ===== Hero ===== */
.hero-grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1fr;
}
.hero-copy h1{ font-size:var(--step-3); line-height:1.1; margin:.25rem 0 1rem }
.hero-copy p{ font-size:var(--step-0); max-width:60ch }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }

.device-frame{
  border-radius:30px; overflow:hidden; background:var(--surface);
  border:var(--border); box-shadow:var(--shadow);
  aspect-ratio: 14 / 9; display:flex; align-items:center; justify-content:center;
}
.device-frame img{ width:100%; height:auto; display:block }

/* ===== Cards ===== */
.grid{ display:grid; gap:16px }
.cards-3{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.card{
  background:var(--surface); border:var(--border); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow);
}
.card .icon{ font-size:24px }

/* ===== Footer (consistent, orange links) ===== */
.site-footer{
  border-top:var(--border);
  background:#0e0e12;
  margin-top: clamp(2rem, 1rem + 5vw, 5rem);
}
.foot-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-block:28px;
}
.foot-bottom{ padding:12px 0; border-top:var(--border) }

/* Footer brand + logo */
.brand.foot{
  color:var(--text);
}
.brand.foot img{
  display:inline-block;
  width:auto;
  height:24px;           /* footer size */
}

/* Make ALL footer links orange */
.site-footer a{ color:var(--accent) }
.site-footer a:hover{ text-decoration:underline }

/* ===== Forms ===== */
input,textarea,select{
  width:100%; padding:.7rem .9rem; background:#0f0f13; color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
}
label{ font-weight:600; font-size:.95rem }
.form-row{ display:grid; gap:12px; margin-bottom:14px }
button, input[type="submit"]{ cursor:pointer }

/* ===== Responsive ===== */
@media (min-width: 900px){
  .hero-grid{ grid-template-columns: 1.1fr .9fr }
}

/* Optional header shrink visual */
.site-header.shrink .nav{ padding-block:8px }
/* Accessibility helper (hide text but keep for SR) */
.visually-hidden {
  position:absolute !important; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Two-shot hero layout */
/* Two fixed hero screenshots (larger, tiny gap) */
.hero-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2px, 0.6vw, 8px);          /* smaller gap between the two shots */
  align-items: start;
  justify-items: center;
  margin-block-start: clamp(-8px, -1vh, 4px); /* nudged up slightly to reduce empty space */
}

.hero-shots .shot {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: clamp(6px, 1.2vw, 10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 20px 50px rgba(0,0,0,.45);
  /* 150% of 360px ≈ 540px; keep responsive cap so they don't overflow */
  max-inline-size: min(540px, 50vw);
}

.hero-shots img {
  display: block;
  inline-size: 100%;
  block-size: auto;           /* no cropping */
  border-radius: 12px;
  /* Prevent layout shift with reserved aspect space */
  aspect-ratio: 1200 / 2619;
  object-fit: contain;        /* ensure full screenshot is visible */
  background: #000;           /* subtle bezel feel on transparent edges */
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .hero-shots { grid-template-columns: 1fr; }
  /* Slightly larger but still within viewport */
  .hero-shots .shot { max-inline-size: min(480px, 92vw); }
}

/* Hero carousel (tall iPhone screenshots) */
.hero-carousel {
  position: relative;                /* for arrows */
  background: transparent;
  border: none;
  padding: 0;
  margin-block-start: clamp(-4px, 1vh, 8px);
}

.hero-carousel .carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  outline: none;
  /* reset list defaults that were adding phantom space */
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-carousel .carousel-track::-webkit-scrollbar { display: none; }

.hero-carousel .carousel-slide {
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.6vw, 12px);
}

.hero-carousel img {
  display: block;
  inline-size: clamp(260px, 34vw, 360px); /* tidy phone width on desktop */
  block-size: auto;
  max-block-size: min(72vh, 920px);       /* never taller than the viewport */
  aspect-ratio: 1200 / 2619;              /* locks space; no CLS */
  object-fit: contain;                    /* full screenshot visible */
  background: #000;                       /* subtle bezel on transparent edges */
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.06);
}

.hero-carousel .carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  inline-size: 40px; block-size: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(18,18,22,.7); color: var(--text);
  backdrop-filter: saturate(120%) blur(6px);
}
.hero-carousel .carousel-btn.prev { inset-inline-start: 8px; }
.hero-carousel .carousel-btn.next { inset-inline-end: 8px; }

.hero-carousel .carousel-dots {
  display: flex; justify-content: center; gap: 10px;
  padding-block: 10px;
}
.hero-carousel .carousel-dots > button {
  inline-size: 10px; block-size: 10px; border-radius: 999px; border: 0;
  background: #3a3a44; cursor: pointer;
}
.hero-carousel .carousel-dots > button[aria-selected="true"] {
  background: var(--accent); box-shadow: 0 0 0 4px var(--ring);
}

/* Stack sizing on smaller screens */
@media (max-width: 900px) {
  .hero-carousel img {
    inline-size: min(440px, 92vw);
    max-block-size: 70vh;
  }
}
@media (min-width: 1024px){
  /* Pull the screenshots a bit closer to the copy and up slightly */
  .hero-shots{
    margin-inline-start: -8px;      /* slides shots ~8px toward text */
    margin-block-start: -12px;      /* trims vertical whitespace */
  }
}
/* Active/hover highlight for top nav */
header nav a{
  position: relative;
  color: var(--muted);
  transition: color .2s ease;
}

header nav a:hover,
header nav a[aria-current="page"]{
  color: var(--text);
}

header nav a::after{
  content:"";
  position:absolute;
  inset-inline: 0;
  bottom: -10px;              /* adjust to sit under the link */
  height: 2px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease, background-color .2s ease;
}

header nav a:hover::after,
header nav a[aria-current="page"]::after{
  background: var(--accent);
  transform: scaleX(1);
}
/* --- Unified section spacing for card grids --- */
:root{
  /* use the same value everywhere cards are spaced */
  --card-gap: clamp(14px, 1.8vw, 22px);
}

/* Most card grids already use gap; normalize to the token */
.cards, .card-grid, .feature-cards { gap: var(--card-gap); }

/* Tighten headings/subtitles so they don't create extra space */
.section h2,
.section .section-title,
.legal h1 {
  margin-block: 0;                 /* remove big default margin */
}

.section h2 + p,
.section .lead {
  margin-block: 4px 0;             /* tiny space between title and subtitle */
  color: var(--muted);
}

/* Make the space from title/subtitle to the cards exactly = card gap */
.section h2 + .cards,
.section h2 + p + .cards,
.section h2 + .card-grid,
.section h2 + p + .card-grid,
.legal h1 + p + .cards,
.legal h1 + p + .card-grid {
  margin-block-start: var(--card-gap);
}

/* Optional: trim extra section padding if needed */
.section .container { 
  /* reduce big vertical padding only a touch */
  padding-block: clamp(36px, 6vw, 72px);
}