/*
Theme Name: Nezar AI OnePage
Theme URI: https://nezarkamel.com
Author: Nezar Kamel + ChatGPT
Description: One-page theme for AI services with Customizer controls.
Version: 1.0.2
Text Domain: nezar-ai
*/

:root{
  --clr-band:#0C1118;      /* darker band for alternating sections */
  --clr-input-bg:#0B0E13;
  --clr-input-border:rgba(255,255,255,.12);
  --clr-input-text:#FFFFFF;

  --clr-bg:#0F1115;         /* primary (from your sample) */
  --clr-surface:#12161C;    /* slightly lighter for cards/sections */
  --clr-text:#FFFFFF;       /* white text */
  --clr-accent:#0EA5E9;     /* blue accent */
  --clr-border:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';color:var(--clr-text);background:var(--clr-bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--clr-accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
h1,h2,h3{line-height:1.2;margin:0 0 16px;color:var(--clr-text)}
h1{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(22px,3vw,36px);font-weight:800;letter-spacing:-.01em}
h3{font-size:clamp(18px,2.2vw,24px);font-weight:700}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,17,21,.75);backdrop-filter:blur(6px);border-bottom:1px solid var(--clr-border)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.nav a{font-weight:600;color:var(--clr-text)}
.cta{background:var(--clr-accent);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.cta:hover{filter:brightness(1.05);text-decoration:none}

/* Hero */
.hero{padding:96px 0 72px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.hero .kpis{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
.badge{background:rgba(255,255,255,.06);border:1px solid var(--clr-border);border-radius:999px;padding:8px 12px;font-weight:700;font-size:14px;color:var(--clr-text)}

/* Grids */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* Cards */
.card{border:1px solid var(--clr-border);border-radius:16px;padding:20px;background:var(--clr-surface);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.card h3{margin-top:8px}
.card .meta{color:rgba(255,255,255,.75);font-size:14px}

/* Clients strip */
.clients{display:flex;gap:28px;flex-wrap:wrap;align-items:center;justify-content:center;opacity:.95}
.clients img{height:40px;opacity:.9;filter:grayscale(30%)}

/* Process list */
.process{counter-reset:step}
.process li{list-style:none;margin:12px 0;padding-left:44px;position:relative}
.process li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:999px;background:var(--clr-accent);color:#fff;display:grid;place-items:center;font-weight:800}

/* Pricing */
.price{font-size:28px;font-weight:800}
ul.clean{padding-left:18px;margin:8px 0}
ul.clean li{margin:6px 0}

/* CTA section */
.cta-band{background:var(--clr-accent);color:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cta-band .cta{background:#111827}

/* Footer */
.site-footer{border-top:1px solid var(--clr-border);padding:28px 0;color:rgba(255,255,255,.75)}
.small{font-size:14px;color:rgba(255,255,255,.65)}

/* Alternating section background */
.section--alt{background:var(--clr-band)}

/* Form fields (dark friendly) */
input[type=text],input[type=email],input[type=tel],select,textarea{
  background:var(--clr-input-bg);
  color:var(--clr-input-text);
  border:1px solid var(--clr-input-border);
  border-radius:10px; padding:10px; width:100%;
}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.55)}
label{display:block;margin:0 0 6px;color:var(--clr-text)}