/* CEPTRON – Premium Dark UI Design System
   ------------------------------------------------------------ */

:root{
  /* Base */
  --bg-0: #04070f;
  --bg-1: #060b16;
  --bg-2: #0a1222;
  --surface-1: rgba(255,255,255,.03);
  --surface-2: rgba(255,255,255,.05);

  --text-0: #f8fafc;
  --text-1: rgba(248,250,252,.82);
  --text-2: rgba(248,250,252,.62);
  --text-3: rgba(248,250,252,.42);

  /* Brand */
  --red-0: #ff1a3d;
  --red-1: #ff0031;
  --red-2: #b00020;

  /* Borders / shadows */
  --border-1: rgba(148,163,184,.18);
  --border-2: rgba(248,113,113,.28);
  --shadow-1: 0 14px 40px rgba(0,0,0,.45);
  --shadow-2: 0 28px 100px rgba(0,0,0,.62);

  /* Radius */
  --r-1: 12px;
  --r-2: 16px;
  --r-3: 22px;

  /* Layout */
  --container: 1160px;

  /* Type scale */
  --h1: clamp(2.1rem, 2.8vw, 3.2rem);
  --h2: clamp(1.55rem, 2vw, 2.05rem);
  --h3: 1.05rem;
  --p: 1rem;
  --p-sm: .92rem;

  /* Spacing scale */
  --s-1: .5rem;
  --s-2: .75rem;
  --s-3: 1rem;
  --s-4: 1.25rem;
  --s-5: 1.75rem;
  --s-6: 2.25rem;
  --s-7: 3rem;
  --s-8: 4rem;
}
/* Main background mixed shade (not full single color) */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 620px at 14% 10%, rgba(124,58,237,.30), transparent 56%),
    radial-gradient(900px 540px at 86% 14%, rgba(37,99,235,.24), transparent 58%),
    radial-gradient(780px 420px at 50% 88%, rgba(168,85,247,.16), transparent 62%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 44%, var(--bg-2));
  color: var(--text-0);
  letter-spacing: .1px;
}
/* Reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1000px 600px at 18% 12%, rgba(255,0,49,.20), transparent 55%),
              radial-gradient(900px 520px at 85% 16%, rgba(59,130,246,.14), transparent 55%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-0));
  color: var(--text-0);
  letter-spacing: .1px;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; color: var(--text-1); line-height:1.65; font-size: var(--p); }
h1,h2,h3{ margin:0; line-height:1.14; letter-spacing: .2px; }
h1{ font-size: var(--h1); }
h2{ font-size: var(--h2); }
h3{ font-size: var(--h3); }

.container{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding: 0 1.25rem;
}

/* Utilities */
.muted{ color: var(--text-2); }
.small{ font-size: var(--p-sm); color: var(--text-2); }
.hr{
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.25), transparent);
}

/* Premium “glass card” */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(14px);
}

/* Navbar */
.navbar{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(4,7,15,.72);
  border-bottom: 1px solid rgba(148,163,184,.12);
  backdrop-filter: blur(16px);
}
.nav-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 70px;
}

.logo{
  display:flex;
  align-items:center;
  gap: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .98rem;
}
.logo img{
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 18px rgba(255,0,49,.35));
}
.nav-links{
  display:flex;
  align-items:center;
  gap: .6rem;
}
.nav-links a{
  color: var(--text-2);
  font-size: .95rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  transition: all .16s ease;
  border: 1px solid transparent;
}
.nav-links a:hover{
  color: var(--text-0);
  background: rgba(255,255,255,.03);
  border-color: rgba(148,163,184,.14);
}
.nav-links a.active{
  color: var(--text-0);
  background: radial-gradient(circle at top left, rgba(255,0,49,.18), transparent 70%);
  border-color: rgba(255,0,49,.28);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .55rem;
  padding: .72rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(135deg, #471416, var(--red-1), var(--red-2));
  border-color: rgba(255,0,49,.35);
  box-shadow: 0 18px 46px rgba(255,0,49,.22);
  color: var(--text-0);
}
.btn-primary:hover{
  box-shadow: 0 22px 70px rgba(255,0,49,.28);
  transform: translateY(-1px);
}
.btn-secondary{
  background: rgba(255,255,255,.03);
  border-color: rgba(148,163,184,.20);
  color: var(--text-0);
}
.btn-secondary:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(148,163,184,.28);
}
.btn-outline{
  background: transparent;
  border-color: rgba(148,163,184,.28);
  color: var(--text-1);
}
.btn-outline:hover{
  background: rgba(255,255,255,.03);
  color: var(--text-0);
  border-color: rgba(148,163,184,.40);
}

/* Sections */
.section{
  padding: var(--s-8) 0;
}
.section-tight{
  padding: var(--s-7) 0;
}
.section-title{
  margin-bottom: .65rem;
}
.section-intro{
  max-width: 60ch;
  color: var(--text-2);
}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

/* Hero (pro layout) */
.hero{
  padding: calc(var(--s-8) + .5rem) 0 var(--s-8);
  position: relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 420px at 25% 35%, rgba(255,0,49,.18), transparent 62%),
    radial-gradient(900px 560px at 70% 35%, rgba(59,130,246,.12), transparent 64%);
  pointer-events:none;
  filter: blur(0px);
}
.hero-grid{
  position: relative;
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  gap: var(--s-7);
  align-items:center;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,0,49,.28);
  background: rgba(255,0,49,.08);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}
.kicker-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red-1);
  box-shadow: 0 0 22px rgba(255,0,49,.6);
}

.hero-subtitle{
  margin-top: var(--s-3);
  max-width: 62ch;
}
.hero-ctas{
  margin-top: var(--s-5);
  display:flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.hero-stats{
  margin-top: var(--s-6);
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}
.stat{
  padding: .95rem 1rem;
  border-radius: var(--r-2);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.18);
}
.stat-number{
  color: rgba(255,255,255,.96);
  font-weight: 900;
  font-size: 1.05rem;
}
.stat-label{
  margin-top: .22rem;
  font-size: .78rem;
  color: var(--text-3);
}

/* Hero product card */
.product-card{
  border-radius: var(--r-3);
  padding: 1.15rem;
  position: relative;
  overflow:hidden;
}
.product-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,0,49,.14), transparent 40%),
    radial-gradient(550px 240px at 50% 0%, rgba(255,0,49,.22), transparent 65%);
  pointer-events:none;
}
.product-card-inner{
  position: relative;
  z-index: 2;
}
.product-card h3{
  color: rgba(255,255,255,.95);
  margin-bottom: .35rem;
}
.product-card p{
  color: var(--text-2);
  font-size: .95rem;
}
.product-shot{
  margin-top: .9rem;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  overflow:hidden;
  box-shadow: var(--shadow-1);
}
.product-shot img{
  width:100%;
  height:auto;
}
.badge-row{
  margin-top: .85rem;
  display:flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  color: var(--text-2);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.16);
}

/* Feature cards */
.card{
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: var(--r-2);
}
.card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.card-title h3{ color: rgba(255,255,255,.92); }
.card-title .chip{
  font-size: .78rem;
  letter-spacing:.06em;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,0,49,.22);
  color: rgba(255,255,255,.85);
  background: rgba(255,0,49,.08);
}
.card p{ color: var(--text-2); }

/* Lists */
.bullet-list{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-2);
}
.bullet-list li + li { margin-top: .5rem; }

.kpi-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: .5rem;
}
.kpi-list li{
  color: var(--text-2);
}
.kpi-list span{
  color: var(--red-1);
  font-weight: 900;
  margin-right:.35rem;
}

/* Callout */
.callout{
  padding: 1.25rem 1.25rem;
  border-radius: var(--r-2);
  border: 1px solid rgba(255,0,49,.26);
  background: radial-gradient(circle at top left, rgba(255,0,49,.14), transparent 70%);
  color: rgba(255,255,255,.92);
}

/* Stats */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.stat-card{
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-2);
}
.stat-card .stat-number{
  font-size: 1.22rem;
  font-weight: 950;
  color: rgba(255,255,255,.95);
}
.stat-card .stat-label{
  margin-top:.35rem;
  color: var(--text-2);
  font-size: .9rem;
}

/* Page hero (subpages) */
.page-hero{
  padding: var(--s-7) 0 var(--s-6);
}
.page-hero p{ max-width: 70ch; }

/* CTA */
.cta-section{
  padding: var(--s-7) 0;
  background:
    radial-gradient(900px 460px at 20% 50%, rgba(255,0,49,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-top: 1px solid rgba(148,163,184,.10);
  border-bottom: 1px solid rgba(148,163,184,.10);
}
.cta-container{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: var(--s-6);
}
.cta-container p{ max-width: 70ch; }
.cta-buttons{
  display:flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Contact form */
.contact-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: var(--s-6);
}
.contact-form{
  padding: 1.45rem;
  border-radius: var(--r-3);
}
.form-group{ margin-bottom: 1rem; }
label{
  display:block;
  margin-bottom: .35rem;
  font-weight: 650;
  color: rgba(255,255,255,.86);
  font-size: .9rem;
}
input, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(0,0,0,.24);
  color: rgba(255,255,255,.9);
  padding: .7rem .85rem;
  font-size: .95rem;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder{ color: rgba(248,250,252,.35); }
input:focus, textarea:focus{
  border-color: rgba(255,0,49,.45);
  box-shadow: 0 0 0 3px rgba(255,0,49,.12);
}

.sidebar{
  padding: 1.35rem;
  border-radius: var(--r-3);
}
.sidebar h3{
  margin-bottom: .45rem;
  color: rgba(255,255,255,.92);
}
.sidebar p, .sidebar li{
  color: var(--text-2);
}

/* Footer */
.footer{
  padding: 1.6rem 0;
  color: var(--text-2);
}
.footer-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1.25rem;
  border-top: 1px solid rgba(148,163,184,.10);
  padding-top: 1.25rem;
}
.footer-links{
  display:flex;
  gap: .8rem;
}
.footer-links a{
  color: var(--text-2);
}
.footer-links a:hover{ color: var(--text-0); }

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2{ grid-template-columns: 1fr; }
  .cta-container{ flex-direction: column; align-items:flex-start; }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .nav-content{ height:auto; padding: .7rem 0; flex-wrap: wrap; gap: .75rem; justify-content:center; }
  .cards-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr; }
}
/* ================================
   MOBILE FIX PATCH (FINAL)
   Add at END of style.css
================================ */
@media (max-width: 640px) {
  /* Safer page spacing */
  .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section,
  .section-tight,
  .page-hero,
  .cta-section{
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }

  /* Top nav compact + centered */
  .nav-content{
    height: auto;
    padding: .65rem 0 .55rem;
    gap: .55rem;
  }

  .logo{
    width: 100%;
    justify-content: center;
    font-size: .9rem;
    letter-spacing: .14em;
  }

  .logo img{
    width: 24px;
    height: 24px;
  }

  .nav-links{
    width: 100%;
    justify-content: center;
    gap: .3rem;
    flex-wrap: wrap;
  }

  .nav-links a{
    font-size: .88rem;
    padding: .4rem .65rem;
  }

  /* Headings / text scale */
  h1{
    font-size: clamp(1.85rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  h2{
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    line-height: 1.2;
  }

  .section-intro{
    font-size: 1rem;
    line-height: 1.65;
  }

  .small{
    font-size: .98rem;
    line-height: 1.6;
  }

  /* Cards tighter but not cramped */
  .glass.card,
  .card{
    padding: 1rem .95rem 1.05rem;
    border-radius: 14px;
  }

  .card h3{
    font-size: 1.25rem;
    line-height: 1.28;
  }

  .bullet-list{
    padding-left: 1rem;
  }

  .bullet-list li{
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .kpi-list li{
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .kpi-list span{
    font-size: 1.05rem;
  }

  /* Security page evidence block fix */
  .section .glass.card .grid-2{
    gap: 1rem !important;
  }

  .section .glass.card .grid-2 > div{
    min-width: 0; /* prevent overflow clipping */
  }

  /* CTA block fix */
  .cta-container{
    gap: 1rem;
    align-items: flex-start;
  }

  .cta-container h2{
    font-size: 1.95rem;
    line-height: 1.18;
  }

  .cta-buttons{
    width: 100%;
    justify-content: flex-start;
  }

  .btn{
    font-size: .92rem;
    padding: .66rem 1rem;
  }

  /* Footer mobile fix (your screenshot issue area) */
  .footer-content{
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
    align-items: start;
    text-align: left;
    padding-top: 1rem;
  }

  .footer-links{
    flex-wrap: wrap;
    gap: .65rem;
  }

  .footer .small{
    font-size: .95rem;
  }

  /* Images full-fit on phone */
  img{
    max-width: 100%;
    height: auto;
  }

  .product-shot{
    border-radius: 14px;
  }

  /* Features page: title + chip stack nicely */
  .card-title{
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
  }

  .card-title .chip{
    font-size: .72rem;
    padding: .23rem .5rem;
  }

  /* Prevent any accidental horizontal scroll */
  body{
    overflow-x: hidden;
  }
}