/* =============================================================
   ADRIAN KNOX — ADDITIONAL CSS
   Paste this entire file into WordPress > Customizer > Additional CSS
   (or Elementor > Site Settings > Custom CSS) after building the
   Elementor template. Update font-family declarations if Google
   Fonts are enqueued differently in your Elementor Kit.
   ============================================================= */

:root{
  --navy: #0A0E27;
  --navy-800: #111633;
  --navy-700: #161B3D;
  --navy-600: #1C2248;
  --offwhite: #F8F9FB;
  --accent: #2563EB;
  --accent-dark: #1D4ED8;
  --accent-light: #3B82F6;
  --muted: #94A3B8;
  --ink: #0F172A;
}

/* ---------- Base ---------- */
h1,h2,h3,h4,h5,h6{ font-family:'Sora',sans-serif; letter-spacing:-0.02em; }
body{ font-family:'Inter',sans-serif; }

/* ---------- Section backgrounds ---------- */
.section-dark{ background-color: var(--navy); }
.section-light{ background-color: var(--offwhite); }

/* ---------- Nav ---------- */
.nav-link{
  color:#CBD5E1;
  font-size:14px;
  font-weight:500;
  transition:color .2s ease;
}
.nav-link:hover,.nav-link.active{ color:#FFFFFF; }

.ak-logo-mark{
  width:38px;height:38px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  font-weight:600;font-size:14px;
  padding:13px 24px;border-radius:8px;
  transition:background .2s ease, transform .2s ease;
}
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); }

.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.3);
  font-weight:600;font-size:14px;
  padding:13px 24px;border-radius:8px;
  transition:border-color .2s ease, background .2s ease;
}
.btn-outline:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.6); }

.btn-outline-dark{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--ink);
  border:1px solid #CBD5E1;
  font-weight:600;font-size:14px;
  padding:13px 24px;border-radius:8px;
  transition:border-color .2s ease, background .2s ease;
}
.btn-outline-dark:hover{ background:#EEF2FF; border-color:var(--accent); }

.btn-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent); font-weight:600; font-size:14px;
  border:1px solid #DCE3EE; padding:10px 18px; border-radius:8px;
}
.btn-link:hover{ background:#EEF2FF; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  color:var(--accent);
  font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:14px;
}
.heading-xl{
  font-family:'Sora',sans-serif; font-weight:700;
  font-size:44px; line-height:1.1;
}
@media(min-width:1024px){ .heading-xl{ font-size:56px; } }

.heading-lg{
  font-family:'Sora',sans-serif; font-weight:700;
  font-size:32px; line-height:1.2; color:var(--ink);
}
@media(min-width:1024px){ .heading-lg{ font-size:40px; } }

/* ---------- Hero ---------- */
.hero-glow{
  position:absolute; top:-10%; right:5%; width:600px; height:600px;
  background:radial-gradient(circle, rgba(37,99,235,.35) 0%, rgba(37,99,235,0) 70%);
  filter:blur(10px); pointer-events:none;
}
.hero-portrait{
  width:100%; max-width:420px; border-radius:16px;
  object-fit:cover; aspect-ratio:4/5;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.signature{
  font-family:'Caveat',cursive; color:var(--accent-light);
  font-size:34px; position:absolute; bottom:-6px; right:6%;
  transform:rotate(-3deg);
}
.avatar-ring{
  width:38px;height:38px;border-radius:9999px;object-fit:cover;
  border:2px solid var(--navy);
}

/* ---------- Logo strip ---------- */
.logo-strip{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:48px; opacity:.55;
}
.logo-strip span{
  color:#fff; font-weight:600; font-size:18px; font-family:'Sora',sans-serif;
}

/* ---------- Project cards ---------- */
.project-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 4px 20px rgba(15,23,42,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px rgba(15,23,42,.12); }
.project-thumb{
  height:220px; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; position:relative;
}
.project-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,39,0) 40%, rgba(10,14,39,.85) 100%);
}
.project-thumb-overlay{ position:relative; z-index:1; padding:18px; }
.project-meta{
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between;
}

/* ---------- Services ---------- */
.service-card{
  background:var(--navy-700); border-radius:14px; padding:26px 22px;
  transition:transform .2s ease, background .2s ease;
}
.service-card:hover{ transform:translateY(-4px); background:var(--navy-600); }
.service-icon{
  width:44px;height:44px;border-radius:10px;
  background:rgba(37,99,235,.15); color:var(--accent-light);
  display:flex;align-items:center;justify-content:center; margin-bottom:16px;
}
.service-icon i{ width:22px; height:22px; }
.service-title{ color:#fff; font-family:'Sora',sans-serif; font-weight:600; font-size:16px; margin-bottom:8px; }
.service-desc{ color:var(--muted); font-size:13px; line-height:1.6; }

/* ---------- Stats ---------- */
.stat-number{
  color:#fff; font-family:'Sora',sans-serif; font-weight:800;
  font-size:34px; line-height:1;
}
.stat-label{ color:rgba(255,255,255,.85); font-size:13px; margin-top:8px; }

/* ---------- Testimonials ---------- */
.testimonial-card{
  background:#fff; border-radius:14px; padding:28px;
  box-shadow:0 4px 20px rgba(15,23,42,.06);
}
.quote-icon{ width:26px;height:26px; color:var(--accent); margin-bottom:16px; }
.testimonial-text{ color:var(--ink); font-size:15px; line-height:1.7; margin-bottom:22px; }
.testimonial-footer{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.star-rating{ color:var(--accent); letter-spacing:2px; font-size:13px; }

/* ---------- Process ---------- */
.process-track{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
}
.process-line{
  position:absolute; top:24px; left:10%; right:10%; height:2px;
  background:rgba(255,255,255,.12); z-index:0;
}
.process-step{ position:relative; z-index:1; text-align:center; }
.process-node{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px;height:48px;border-radius:9999px;
  background:var(--accent); color:#fff; font-weight:700; font-family:'Sora',sans-serif;
  margin-bottom:18px;
}
.process-title{ color:#fff; font-family:'Sora',sans-serif; font-weight:600; font-size:16px; margin-bottom:8px; }
.process-desc{ color:var(--muted); font-size:13px; line-height:1.6; max-width:180px; margin:0 auto; }

@media(max-width:768px){
  .process-track{ grid-template-columns:1fr; gap:32px; }
  .process-line{ display:none; }
}

/* ---------- Pricing ---------- */
.price-card{
  background:#fff; border-radius:16px; padding:34px 28px;
  border:1px solid #E5E9F2; position:relative;
  box-shadow:0 4px 20px rgba(15,23,42,.05);
}
.price-card--featured{
  background:var(--navy); border-color:var(--navy);
  transform:scale(1.04); z-index:1;
  box-shadow:0 20px 40px rgba(37,99,235,.25);
}
.price-card--featured .price-plan,
.price-card--featured .price-amount,
.price-card--featured .price-sub,
.price-card--featured .price-features li{ color:#fff; }
.price-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 16px; border-radius:9999px;
}
.price-plan{ font-weight:600; color:var(--ink); font-size:15px; margin-bottom:8px; }
.price-amount{ font-family:'Sora',sans-serif; font-weight:800; font-size:36px; color:var(--ink); margin-bottom:4px; }
.price-sub{ color:var(--muted); font-size:13px; margin-bottom:22px; }
.price-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; font-size:14px; color:var(--ink); }
.price-features li{ display:flex; align-items:center; gap:10px; }

/* ---------- Contact ---------- */
.contact-info-row{ display:flex; align-items:center; gap:12px; color:#E2E8F0; font-size:14px; }
.social-icon{
  width:38px;height:38px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.social-icon:hover{ background:var(--accent); border-color:var(--accent); }

.contact-form-card{ background:var(--navy-700); border-radius:16px; padding:32px; }
.form-input{
  width:100%; background:var(--navy-600); border:1px solid rgba(255,255,255,.08);
  color:#fff; font-size:14px; padding:14px 16px; border-radius:8px;
  outline:none; transition:border-color .2s ease;
}
.form-input::placeholder{ color:var(--muted); }
.form-input:focus{ border-color:var(--accent); }

/* ---------- Footer ---------- */
.footer-heading{ color:#fff; font-family:'Sora',sans-serif; font-weight:600; font-size:14px; margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color:var(--muted); font-size:14px; transition:color .2s ease; }
.footer-links a:hover{ color:#fff; }
.newsletter-input{
  flex:1; background:var(--navy-600); border:1px solid rgba(255,255,255,.08);
  border-radius:8px 0 0 8px; color:#fff; font-size:13px; padding:12px 14px; outline:none;
}
.newsletter-btn{
  background:var(--accent); color:#fff; padding:0 16px; border-radius:0 8px 8px 0;
  display:flex; align-items:center; justify-content:center;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding-top:20px;
  text-align:center; color:var(--muted); font-size:13px;
}

/* ---------- Scroll reveal (JS toggles .is-visible) ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
