/* Naytin — industrial palette */
:root{
  --primary:#ff6a00;
  --primary-dark:#c44f00;
  --secondary:#a8b0b8;
  --dark:#111417;
  --light:#f2f4f5;
  --gray:#66717c;
  --steel:#22282d;
  --steel-2:#343b42;
  --hazard:#f7b500;
  --gradient: linear-gradient(135deg, #191f24 0%, #343b42 62%, #ff6a00 100%);

  /* map to site tokens */
  --bg:#f2f4f5;
  --bg-elev:#e4e8eb;
  --panel:#ffffff;
  --text:#171b1f;
  --muted:#5f6871;
  --brand:var(--primary);
  --brand-ink:var(--primary-dark);
  --ring: rgba(255,106,0,.35);
  --card:#ffffff;
  --border:#c8ced3;
  --container:1200px;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background:
    linear-gradient(rgba(17,20,23,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,20,23,.04) 1px, transparent 1px),
    radial-gradient(circle at 12% 0%, rgba(255,106,0,.12), transparent 24rem),
    var(--bg);
  background-size: 42px 42px, 42px 42px, auto, auto;
  color:var(--text);
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
.container{ width:min(100%, var(--container)); margin-inline:auto; padding: 0 1rem; }
.eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; color:var(--brand-ink); font-weight:800; }
.rounded{ border-radius:6px; box-shadow: 0 16px 36px rgba(17,20,23,.16); border:1px solid var(--border); }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--brand); color:#fff; padding:.5rem 1rem; border-radius:8px; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: rgba(17,20,23,0.92);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(17,20,23,.18);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brandmark{ width:28px; height:28px; fill:var(--primary); }
.brand-name{
  letter-spacing:.02em; font-weight:700; line-height:1;
  font-size:1.5rem;
  color:#f6f7f8;
  text-transform:uppercase;
}

.nav-toggle{ display:none; background:transparent; color:#f6f7f8; border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:.4rem; }
.nav-toggle:hover{ border-color:var(--brand); }
.site-nav ul{ display:flex; list-style:none; gap:1rem; margin:0; padding:0; }
.site-nav a{ color:#f6f7f8; text-decoration:none; padding:.5rem .75rem; border-radius:6px; font-weight:600; }
.site-nav a[aria-current="page"], .site-nav a.is-active{ background:rgba(255,106,0,.14); border:1px solid rgba(255,106,0,.55); color:#fff; }

@media (max-width: 860px){
  .nav-toggle{ display:inline-grid; place-items:center; }
  .site-nav{ position:absolute; top:64px; right:1rem; left:1rem; border:1px solid rgba(255,255,255,.16); background:var(--dark); border-radius:8px; padding:.5rem; display:none; }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; }
}

/* Hero */
.hero{ padding: clamp(3rem, 6vw, 6rem) 0; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.hero h1{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin:.5rem 0 1rem; }
.hero p{ color:var(--muted); max-width:60ch; }
.hero-cta{ display:flex; gap:1rem; margin-top:1rem; }
.hero-badges{ display:flex; gap:.6rem; list-style:none; padding:0; margin:1rem 0 0; color:var(--muted); flex-wrap:wrap; }
.hero-badges li{ border:1px solid var(--border); background:rgba(255,255,255,.72); border-radius:4px; padding:.22rem .55rem; font-weight:700; }
.hero-media{ border-radius:6px; overflow:hidden; box-shadow:0 18px 48px rgba(17,20,23,.22); border:1px solid var(--steel-2); }

/* Sections */
.section{ padding: clamp(2.5rem, 4.5vw, 4rem) 0; }
.section.alt{
  background:
    linear-gradient(135deg, rgba(17,20,23,.08), transparent 34%),
    var(--bg-elev);
  border-block:1px solid var(--border);
}
.section-intro{ color:var(--muted); max-width:72ch; margin-top:-.2rem; }
.page-header{
  padding: clamp(2.5rem, 6vw, 5rem) 0 1rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, #1b2025 0%, #343b42 78%, #ff6a00 100%);
  color:#fff;
}
.page-header p{ color:#d5dadd; }

/* Grid & Cards */
.grid{ display:grid; gap:1.25rem; }
.grid.two{ grid-template-columns:1.2fr 1fr; }
.grid.three{ grid-template-columns: repeat(3, 1fr); }
.cards-3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid.two{ grid-template-columns:1fr; }
  .grid.three, .cards-3{ grid-template-columns: 1fr; }
}

.card{ background:var(--panel); border:1px solid var(--border); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 10px 24px rgba(17,20,23,.08); }
.card > img{ aspect-ratio: 16/9; object-fit:cover; }
.card-body{ padding:1rem 1rem 1.2rem; }
.card h3{ margin:.2rem 0 .2rem; }
.specs{ margin:.5rem 0 0; padding-left:1.1rem; color:var(--muted); }
.link{ color:var(--primary-dark); text-decoration:none; font-weight:700; }
.link:hover{ text-decoration:underline; }

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.25rem;
  margin-top:1.4rem;
}
.pricing-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:1.15rem;
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-shadow:0 12px 28px rgba(17,20,23,.08);
}
.pricing-card.featured{ border-color:rgba(255,106,0,.45); }
.pricing-card.enterprise{ border-color:rgba(168,176,184,.68); }
.plan-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.4rem;
}
.plan-head h3{ margin:0; line-height:1.2; }
.plan-kicker{
  order:2;
  color:#2b1a00;
  background:rgba(247,181,0,.22);
  border:1px solid rgba(247,181,0,.5);
  border-radius:4px;
  padding:.2rem .55rem;
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
}
.pricing-card .specs{ margin-bottom:1rem; }
.price-row{
  margin-top:auto;
  display:flex;
  align-items:baseline;
  gap:.45rem;
  color:var(--muted);
}
.price{
  color:var(--dark);
  font-size:clamp(2rem, 3vw, 2.7rem);
  line-height:1;
  font-weight:800;
  margin:0;
}
.price span{ font-size:.45em; margin-right:.12rem; }
.price-row + .btn{ margin-top:1rem; text-align:center; }

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

@media (max-width: 600px){
  .plan-head{ flex-direction:column; }
  .plan-kicker{ order:0; }
}

/* Logos */
.logos{ padding: 2rem 0; }
.logo-row{ display:grid; grid-template-columns: repeat(5, 1fr); gap:1rem; list-style:none; padding:0; margin:1rem 0 0; }
.logo-row img{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:1rem; aspect-ratio:16/9; object-fit:cover; filter:grayscale(.15) contrast(1.05); }

/* CTA */
.cta-banner{ background: var(--gradient); color:#fff; border-top:1px solid var(--steel-2); border-bottom:1px solid var(--steel-2); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: clamp(1.6rem, 4vw, 2rem) 0; }

/* Buttons */
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:4px; text-decoration:none; font-weight:800; border:1px solid transparent; text-transform:uppercase; letter-spacing:.03em; }
.btn.primary{
  background: linear-gradient(135deg, var(--primary) 0%, var(--hazard) 100%);
  color:#16191c;
  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.24);
}
.btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,106,0,.32); }
.btn.ghost{ background:transparent; color:var(--primary-dark); border-color:var(--border); }
.btn.small{ padding:.45rem .7rem; font-size:.9rem; }

.btn:focus{ outline: 3px solid var(--ring); outline-offset:2px; }

/* Forms */
.field{ display:grid; gap:.4rem; margin-bottom:.9rem; }
input, select, textarea{ background:#fff; color:var(--text); border:2px solid #c9cfd4; border-radius:4px; padding:.6rem .7rem; font:inherit; }
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12); }

fieldset{ border:1px dashed var(--steel-2); border-radius:6px; padding:.6rem .8rem; display:grid; gap:.4rem; }

.actions{ display:flex; gap:.7rem; align-items:center; }

/* Footer */
.site-footer{ border-top:1px solid var(--steel-2); margin-top:3rem; background: var(--dark); color:#fff; }
.footer-inner{ display:grid; gap:1rem; grid-template-columns: repeat(4, 1fr); padding:1.5rem 0; }
.footer-col h4{ margin:.3rem 0 .4rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col a{ color:inherit; text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; border-top:1px solid rgba(255,255,255,.12); }
.social{ display:flex; gap:.8rem; list-style:none; padding:0; margin:0; }

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }