:root{
  --bg:#0b1220;
  --card:#0f1a33;
  --text:#e8eefc;
  --muted:#b7c3df;
  --brand:#6aa9ff;
  --brand2:#7cf2c6;
  --border:rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(106,169,255,.25), transparent 60%),
    radial-gradient(900px 700px at 90% 0%, rgba(124,242,198,.18), transparent 55%),
    var(--bg);
  line-height:1.6;
}
img{max-width:100%; height:auto}
a{color:var(--text); text-decoration:none}
a:hover{color:var(--brand)}
p,li{color:var(--muted)}
.container{width:min(var(--max), calc(100% - 2rem)); margin-inline:auto}
.content{padding: 2.5rem 0 4rem}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.7);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
  gap:1rem;
}
.brand{display:flex; align-items:center; gap:.75rem; font-weight:700}
.brand img{border-radius:12px; box-shadow: var(--shadow)}
.site-nav{display:flex; flex-wrap:wrap; gap:.65rem; align-items:center}
.site-nav a{padding:.45rem .6rem; border-radius:999px; color:var(--muted)}
.site-nav a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.btn{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#07101f !important;
  font-weight:700;
}
.btn:hover{filter:brightness(1.06)}

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.55rem .7rem;
  color:var(--text);
}
.hamburger{
  display:block; width:18px; height:2px; background:var(--text); position:relative;
}
.hamburger:before,.hamburger:after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text);
}
.hamburger:before{top:-6px}
.hamburger:after{top:6px}
.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}

.hero{
  padding: 2.5rem 0 1.5rem;
  display:grid; gap:1.25rem;
}
.hero h1{font-size: clamp(2rem, 3vw, 3rem); margin:.2rem 0}
.hero p{max-width:65ch; font-size:1.05rem}
.hero .cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.75rem}

.grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  background: rgba(15,26,51,.65);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem;
}
.card h2,.card h3{margin-top:0}
.kpi{grid-column: span 4}
@media (max-width: 900px){ .kpi{grid-column: span 6} }
@media (max-width: 650px){ .kpi{grid-column: span 12} }

section{margin: 1.8rem 0}
h1,h2,h3{color:var(--text); line-height:1.2}
h2{font-size: clamp(1.35rem, 2vw, 1.8rem)}
h3{font-size: 1.2rem}

.content article, .content .page{max-width: 75ch}
.content .page img{
  border-radius: var(--radius);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.content .page a{ text-decoration: underline; text-underline-offset: 3px; }

.site-footer{
  border-top:1px solid var(--border);
  background: rgba(6,10,18,.6);
  padding: 2.5rem 0;
}
.footer-grid{
  display:grid; gap:1.5rem;
  grid-template-columns: 2fr 1.3fr 1fr;
}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin:.35rem 0}
.small{font-size:.95rem}
.tiny{font-size:.85rem; opacity:.9}

blockquote{
  border-left: 3px solid rgba(106,169,255,.6);
  margin: 1rem 0;
  padding: .2rem 0 .2rem 1rem;
  color: var(--muted);
}
table{width:100%; border-collapse:collapse; overflow:auto}
th,td{border-bottom:1px solid var(--border); padding:.6rem .4rem; text-align:left}

@media (max-width: 980px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .site-nav{
    position:fixed;
    inset: 70px 0 auto 0;
    background: rgba(11,18,32,.92);
    border-bottom:1px solid var(--border);
    padding: .8rem 1rem 1.1rem;
    display:none;
    gap:.35rem;
  }
  .site-nav.open{display:flex}
  .site-nav a{display:block; width:100%}
}

/* --- Modern hero background (AF Technology) --- */
.hero.hero--bg{
  position: relative;
  overflow: hidden;
  background: url("uploads/aftechnology.jpg") center/cover no-repeat;
  padding: clamp(56px, 8vw, 96px) 0;
}
.hero.hero--bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  pointer-events:none;
}
.hero.hero--bg .hero-inner{
  position: relative;
  z-index: 1;
}
.hero.hero--bg h1,
.hero.hero--bg p,
.hero.hero--bg a{
  color: #fff;
}
.hero.hero--bg .btn{
  background: #fff;
  color: #111;
  border: 1px solid rgba(255,255,255,.35);
}
.hero.hero--bg .btn:hover{
  filter: brightness(0.95);
}
.hero.hero--bg .card,
.hero.hero--bg .kpi{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

/* --- Elegant reveal animation --- */
.reveal .reveal-item{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible .reveal-item{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for cards */
.reveal.is-visible .reveal-item:nth-child(1){ transition-delay: 60ms; }
.reveal.is-visible .reveal-item:nth-child(2){ transition-delay: 140ms; }
.reveal.is-visible .reveal-item:nth-child(3){ transition-delay: 220ms; }
.reveal.is-visible .reveal-item:nth-child(4){ transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce){
  .reveal .reveal-item{
    opacity: 1;
    transform: none;
    transition: none;
  }
}