/*
Theme Name: Bilgi Proje
Theme URI: https://www.bilgiproje.com
Author: Bilgi Proje
Author URI: https://www.bilgiproje.com
Description: Bilgi Proje kurumsal teması – Eğitim, Yazılım, Danışmanlık. Modern, hızlı ve erişilebilir tek sayfa tema.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bilgiproje
Tags: one-page, custom-logo, custom-colors, translation-ready, accessibility-ready
*/

/* ======================== */
/*  VARIABLES               */
/* ======================== */
:root {
  --dark: #080c0a;
  --navy: #0d1a14;
  --navy2: #12231b;
  --gold: #7ac143;
  --gold-lt: #96d95e;
  --cyan: #34c78a;
  --white: #ffffff;
  --text: #e8ede9;
  --text-dim: rgba(232,237,233,0.65);
  --border: rgba(122,193,67,0.15);
  --border-h: rgba(122,193,67,0.4);
  --r: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ======================== */
/*  RESET & BASE            */
/* ======================== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top: 80px; }

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--dark);
  color:var(--text);
  line-height:1.7;
  font-size:15px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--gold); text-decoration:none; transition:color .25s; }
a:hover { color:var(--gold-lt); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

img { max-width:100%; height:auto; display:block; }

h1,h2,h3,h4 { font-weight:700; line-height:1.25; color:var(--white); }

.gold { color:var(--gold); }
.container { max-width:1140px; margin:0 auto; padding:0 1.5rem; }

/* Skip to content */
.skip-link {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--dark); padding: .5rem 1.5rem;
  border-radius: 0 0 8px 8px; font-weight: 700; z-index: 9999;
  transition: top .3s;
}
.skip-link:focus { top: 0; }

/* ======================== */
/*  WP Admin Bar fix        */
/* ======================== */
.admin-bar header { top: 32px; }
@media(max-width:782px) { .admin-bar header { top: 46px; } }

/* ======================== */
/*  HEADER                  */
/* ======================== */
header.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(8,12,10,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background .3s, box-shadow .3s;
}
header.site-header.scrolled { background:rgba(8,12,10,.97); box-shadow: 0 2px 20px rgba(0,0,0,.4); }

.header-content {
  display:flex; justify-content:space-between; align-items:center;
  max-width:1140px; margin:0 auto;
  padding:.85rem 1.5rem;
}

.logo { font-size:1.4rem; font-weight:800; color:var(--gold); display:flex; align-items:center; gap:.5rem; }
.logo img { max-height: 42px; width: auto; }
.logo-icon {
  width: 36px; height: 36px; background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--dark); font-weight: 900; font-size: .9rem;
}

nav.main-nav ul { display:flex; gap:1.4rem; list-style:none; align-items:center; }
nav.main-nav a {
  color:var(--text); font-weight:500; font-size:.82rem; letter-spacing:.3px;
  position:relative; transition:color .25s; padding: .25rem 0;
}
nav.main-nav a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px;
  background:var(--gold); transition:width .3s;
}
nav.main-nav a:hover { color:var(--gold); }
nav.main-nav a:hover::after, nav.main-nav a.active::after { width:100%; }

.cta-button {
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:var(--dark); padding:.55rem 1.2rem; border-radius:6px;
  font-weight:700; font-size:.82rem; border:none; cursor:pointer;
  transition:all .3s; display:inline-block;
}
.cta-button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(122,193,67,.3); color:var(--dark); }

.menu-toggle {
  display:none; background:none; border:none; color:var(--gold);
  font-size:1.4rem; cursor:pointer; z-index:1001; padding: .25rem;
}
.menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ======================== */
/*  HERO                    */
/* ======================== */
.hero {
  margin-top:64px; position:relative;
  min-height:92vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: linear-gradient(160deg, #080c0a 0%, #12231b 40%, #0d1a14 100%);
}

.hero-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-bg::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(122,193,67,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 30%, rgba(52,199,138,0.05) 0%, transparent 50%);
  animation: heroBgMove 20s ease-in-out infinite alternate;
}
@keyframes heroBgMove {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(3%, 2%) rotate(2deg); }
}

.hero-grid {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(122,193,67,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,193,67,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.shape {
  position: absolute; border: none;
  background: rgba(122,193,67,0.06);
  border-radius: 12px;
  animation: float 8s ease-in-out infinite;
}
.shape::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(122,193,67,0.15), rgba(52,199,138,0.08));
  z-index: -1;
}
.shape-1 { width: 180px; height: 200px; top: 10%; left: 5%; animation-delay: 0s; }
.shape-2 { width: 110px; height: 126px; top: 60%; right: 10%; background: rgba(52,199,138,0.05); animation-delay: -3s; animation-duration: 10s; }
.shape-3 { width: 72px; height: 82px; bottom: 20%; left: 15%; background: rgba(122,193,67,0.04); animation-delay: -5s; animation-duration: 12s; }
.shape-4 { width: 140px; height: 160px; top: 20%; right: 20%; background: rgba(122,193,67,0.04); animation-delay: -2s; animation-duration: 15s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.hero-content {
  position:relative; z-index:3; text-align:center; max-width:720px;
  padding:0 1.5rem; animation:fadeUp .9s ease .2s both;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(122,193,67,.1); border:1px solid rgba(122,193,67,.35);
  color:var(--gold); padding:.55rem 1.3rem; border-radius:40px;
  font-size:.78rem; font-weight:600; margin-bottom:1.5rem; letter-spacing:.4px;
}

.hero h1 {
  font-size:3.2rem; font-weight:800; line-height:1.12; margin-bottom:1rem;
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}

.hero-subtitle {
  font-size:1.08rem; color:var(--text-dim); margin-bottom:2rem; line-height:1.8;
  max-width: 600px; margin-left: auto; margin-right: auto;
}

.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:var(--dark); padding:.75rem 1.8rem; border-radius:8px;
  font-weight:700; font-size:.9rem; border:none; cursor:pointer; transition:all .3s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(122,193,67,.35); color:var(--dark); }
.btn-primary:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

.btn-outline {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--gold); padding:.75rem 1.8rem; border-radius:8px;
  font-weight:600; font-size:.9rem; border:1.5px solid rgba(122,193,67,.45);
  cursor:pointer; transition:all .3s;
}
.btn-outline:hover { background:rgba(122,193,67,.08); border-color:var(--gold); transform:translateY(-2px); color:var(--gold); }

.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.5rem; }

.stat { text-align:center; }
.stat-number { font-size:2rem; font-weight:800; color:var(--gold); display:block; }
.stat-label { font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.8px; }

/* ======================== */
/*  SECTIONS                */
/* ======================== */
.section { padding:5.5rem 0; }
.bg-dark { background:var(--dark); }
.bg-navy { background:var(--navy); }

.tag {
  display:inline-block; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px; color:var(--gold);
  margin-bottom:.6rem;
}

.sec-title { font-size:2.2rem; font-weight:800; margin-bottom:.5rem; }
.sec-desc { font-size:.95rem; color:var(--text-dim); margin-bottom:2.5rem; max-width:560px; }

/* ======================== */
/*  ABOUT SECTION           */
/* ======================== */
.about-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }

.about-left h2 { font-size:2rem; margin-bottom:1.2rem; line-height:1.3; }
.about-left p { color:rgba(232,232,232,.72); margin-bottom:1rem; font-size:.92rem; line-height:1.75; }

.badge-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(122,193,67,.08); border:1px solid rgba(122,193,67,.25);
  color:var(--gold); padding:.4rem .9rem; border-radius:30px;
  font-size:.78rem; font-weight:500;
}

.about-right { display:flex; flex-direction:column; gap:1rem; }
.about-img-main, .about-img-sm {
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--border);
}
.about-img-main img, .about-img-sm img { width:100%; height:auto; transition:transform .4s; object-fit: cover; }
.about-img-main:hover img, .about-img-sm:hover img { transform:scale(1.03); }

/* ======================== */
/*  CARD GRID               */
/* ======================== */
.card-grid { display:grid; gap:1.25rem; }
.card-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.card-grid.cols-4 { grid-template-columns:repeat(4,1fr); }

.card {
  background:rgba(18,35,27,.55);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  transition:all .35s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color:var(--border-h);
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}

.card-img { position:relative; overflow:hidden; height:180px; flex-shrink: 0; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.card:hover .card-img img { transform:scale(1.08); }

.card-img::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(to top,rgba(8,12,10,.6),transparent);
}

.card-body { padding:1.2rem 1.3rem 1.4rem; flex: 1; }
.card-body h3 { font-size:.95rem; font-weight:700; color:var(--gold); margin-bottom:.5rem; }
.card-body p { font-size:.83rem; color:var(--text-dim); line-height:1.7; }

/* ======================== */
/*  ICON CARDS              */
/* ======================== */
.icon-card {
  background:rgba(18,35,27,.45);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  transition:all .35s;
  display:flex;
  flex-direction:column;
}
.icon-card:hover {
  border-color:var(--border-h);
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.icon-card-header {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:linear-gradient(135deg,rgba(122,193,67,.12),rgba(122,193,67,.04));
  border-bottom:2px solid var(--gold);
  font-size:1.4rem;
  color:var(--gold);
}
.icon-card-header.cyan {
  background:linear-gradient(135deg,rgba(52,199,138,.12),rgba(52,199,138,.04));
  border-bottom-color:var(--cyan);
  color:var(--cyan);
}
.icon-card-body { padding:1.2rem 1.3rem 1.4rem; flex:1; }
.icon-card-body h3 { font-size:.95rem; font-weight:700; color:var(--gold); margin-bottom:.5rem; }
.icon-card-header.cyan + .icon-card-body h3 { color:var(--cyan); }
.icon-card-body p { font-size:.83rem; color:var(--text-dim); line-height:1.7; }

/* About Icon Boxes */
.about-icon-box {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
.about-icon-item {
  background:rgba(18,35,27,.45);
  border:none;
  border-radius: 12px;
  padding:2.2rem 1.5rem;
  text-align:center;
  transition:all .35s;
  position:relative;
}
.about-icon-item::before {
  content:''; position:absolute; inset:-1px;
  border-radius: 12px;
  background:linear-gradient(135deg, rgba(122,193,67,.2), rgba(52,199,138,.1));
  z-index:-1;
}
.about-icon-item:hover {
  background:rgba(18,35,27,.7);
  transform:scale(1.05);
}
.about-icon-item i {
  font-size:1.4rem;
  color:var(--gold);
  margin-bottom:.75rem;
  display:block;
}
.about-icon-item span {
  font-size:.85rem;
  color:var(--text);
  font-weight:600;
}

/* ======================== */
/*  PROCESS TIMELINE        */
/* ======================== */
.timeline { position:relative; display:flex; justify-content:space-between; padding:3rem 0 2rem; }

/* Horizontal connector line */
.timeline::before {
  content:''; position:absolute; top:3.6rem; left:6%; right:6%;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent);
  opacity:.3;
}

/* Animated pulse traveling the line */
.timeline::after {
  content:''; position:absolute; top:3.35rem; left:6%;
  width:60px; height:8px; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation:timelinePulse 4s ease-in-out infinite;
  filter:blur(2px);
}
@keyframes timelinePulse {
  0% { left:6%; opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { left:calc(94% - 60px); opacity:0; }
}

.timeline-step {
  flex:1; text-align:center; position:relative; padding:0 .8rem;
  opacity:0; transform:translateY(30px);
  transition:opacity .6s ease, transform .6s ease;
}
.timeline-step.visible { opacity:1; transform:translateY(0); }

/* Staggered animation delay */
.timeline-step:nth-child(1) { transition-delay:.1s; }
.timeline-step:nth-child(2) { transition-delay:.25s; }
.timeline-step:nth-child(3) { transition-delay:.4s; }
.timeline-step:nth-child(4) { transition-delay:.55s; }

/* Circular node */
.step-node {
  width:72px; height:72px; border-radius:50%;
  background:rgba(18,35,27,.7);
  border:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.2rem; position:relative; z-index:2;
  transition:all .4s cubic-bezier(.25,.8,.25,1);
  box-shadow:0 0 0 0 rgba(122,193,67,0);
}
.step-node i,
.step-node svg,
.step-node .svg-inline--fa {
  font-size:1.6rem !important;
  width:1.6rem !important;
  height:1.6rem !important;
  color:var(--gold);
  transition:transform .4s, color .4s;
}

.timeline-step:hover .step-node {
  background:var(--gold);
  border-color:var(--gold-lt);
  transform:scale(1.12);
  box-shadow:0 0 24px rgba(122,193,67,.35), 0 0 48px rgba(122,193,67,.15);
}
.timeline-step:hover .step-node i,
.timeline-step:hover .step-node svg {
  color:var(--dark) !important;
  transform:scale(1.15);
}

/* Step number badge */
.step-badge {
  position:absolute; top:-8px; right:-4px;
  width:26px; height:26px; border-radius:50%;
  background:var(--gold);
  color:var(--dark);
  font-size:.7rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  z-index:3;
  box-shadow:0 2px 8px rgba(122,193,67,.4);
}

.timeline-step h3 { font-size:1rem; font-weight:700; margin-bottom:.5rem; color:var(--white); }
.timeline-step p { font-size:.83rem; color:var(--text-dim); line-height:1.65; max-width:220px; margin:0 auto; }

/* ======================== */
/*  RECTANGLE REFERENCES    */
/* ======================== */

/* Staggered animation */

/* Offset every other row */

.references-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  padding: 2rem 0;
  justify-items: center;
  align-items: center;
}

.ref-card {
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ref-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.ref-card-inner {
  width: 100%;
  height: auto; aspect-ratio: 1;
  border-radius: 12px;
  background:rgba(18,35,27,.6);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2rem;
  position:relative;
  transition:all .4s cubic-bezier(.25,.8,.25,1);
  cursor:default;
}

/* Hex border via pseudo-element */
.ref-card-inner::before {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius: 12px;
  background:linear-gradient(135deg, rgba(122,193,67,.25), rgba(52,199,138,.15));
  z-index:-1;
  transition:all .4s;
}

.ref-card-inner:hover {
  background:rgba(18,35,27,.85);
  transform:scale(1.08);
}
.ref-card-inner:hover::before {
  background:linear-gradient(135deg, rgba(122,193,67,.6), rgba(52,199,138,.4));
  filter:drop-shadow(0 0 12px rgba(122,193,67,.3));
}

.ref-card-inner img {
  max-width:80%;
  max-height:50px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:brightness(.85) contrast(.9) grayscale(.2);
  transition:all .4s;
}
.ref-card-inner:hover img {
  filter:brightness(1.2) contrast(1) grayscale(0);
  transform:scale(1.05);
}

/* Floating glow animation on references grid */
@keyframes hexGlow {
  0%, 100% { box-shadow:0 0 0 rgba(122,193,67,0); }
  50% { box-shadow:0 0 20px rgba(122,193,67,.15); }
}

/* ======================== */
/*  CONTACT                 */
/* ======================== */
.contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }

.c-card {
  background:rgba(18,35,27,.45);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1.8rem 1.2rem;
  text-align:center; transition:all .3s;
}
.c-card:hover { border-color:var(--border-h); transform:translateY(-4px); box-shadow: var(--shadow); }

.c-icon {
  width:52px; height:52px;
  background:rgba(122,193,67,.08); border:1px solid rgba(122,193,67,.25);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; font-size:1.15rem; color:var(--gold); transition:all .3s;
}
.c-card:hover .c-icon { background:var(--gold); color:var(--dark); }

.c-card h4 { font-size:.92rem; margin-bottom:.35rem; }
.c-card p { font-size:.82rem; color:var(--text-dim); line-height:1.6; }
.c-card p a { color:var(--text-dim); transition:color .25s; }
.c-card p a:hover { color:var(--gold); }

/* ======================== */
/*  FOOTER                  */
/* ======================== */
footer.site-footer {
  background:var(--dark); border-top:1px solid var(--border);
  padding:3rem 0;
}

.footer-content {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2.5rem; margin-bottom:2.5rem;
}

.footer-section h4 { color:var(--gold); margin-bottom:1rem; font-size:1rem; }
.footer-section p, .footer-section a { color:var(--text-dim); font-size:.88rem; margin-bottom:.6rem; display: block; }
.footer-section a:hover { color:var(--gold); }

.footer-social { display:flex; gap:.7rem; margin-top:.8rem; }
.social-link {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:rgba(122,193,67,.08); border:1px solid var(--border);
  border-radius:50%; font-size:.85rem; transition:all .3s; color: var(--text-dim);
}
.social-link:hover { background:var(--gold); color:var(--dark); border-color: var(--gold); }
.social-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.footer-links { list-style: none; }
.footer-links li { margin-bottom: .4rem; }
.footer-links a { color: var(--text-dim); font-size: .88rem; transition: color .25s; }
.footer-links a:hover { color: var(--gold); }

.newsletter-form { display:flex; gap:.5rem; margin-top:.6rem; }
.newsletter-form input {
  flex:1; padding:.55rem .9rem; background:rgba(18,35,27,.6);
  border:1px solid var(--border); color:var(--text); border-radius:6px;
  font-size:.85rem; font-family:inherit;
}
.newsletter-form input:focus { outline:none; border-color:var(--gold); box-shadow: 0 0 0 3px rgba(122,193,67,.15); }
.newsletter-form input::placeholder { color: var(--text-dim); }

.footer-bottom {
  border-top:1px solid var(--border); padding-top:1.5rem;
  text-align:center; color:rgba(232,232,232,.4); font-size:.8rem;
}

/* ======================== */
/*  ANIMATIONS              */
/* ======================== */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}

.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ======================== */
/*  RESPONSIVE              */
/* ======================== */
@media(max-width:1024px) {
  .card-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:repeat(2,1fr); }
  .timeline { flex-wrap:wrap; gap:2rem; }
  .timeline::before, .timeline::after { display:none; }
  .timeline-step { flex:0 0 45%; }
}

@media(max-width:768px) {
  .hero { margin-top:56px; min-height: 85vh; }
  .hero h1 { font-size:2.1rem; }
  .hero-subtitle { font-size:.95rem; }
  .hero-stats { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .stat-number { font-size:1.5rem; }

  .menu-toggle { display:block; }
  .header-cta { display:none; }

  nav.main-nav {
    position:fixed; top:56px; left:-100%; right:0; width:100%;
    background:rgba(13,26,20,.98); backdrop-filter:blur(12px);
    padding:1.5rem; transition:left .3s; z-index:999;
    border-bottom:1px solid var(--border);
  }
  nav.main-nav.active { left:0; }
  nav.main-nav ul { flex-direction:column; gap:1rem; }

  .sec-title { font-size:1.7rem; }
  .about-layout { grid-template-columns:1fr; gap:2rem; }
  .about-left h2 { font-size:1.6rem; }

  .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .step::after { display:none; }
  
  
  

  .hero-buttons { flex-direction:column; align-items:center; }
  .btn-primary, .btn-outline { width:100%; justify-content:center; max-width: 300px; }
}

@media(max-width:480px) {
  .container { padding:0 1rem; }
  .section { padding:3.5rem 0; }
  .hero h1 { font-size:1.6rem; }
  .hero-stats { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .stat-number { font-size:1.2rem; }
  .sec-title { font-size:1.4rem; }

  .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .timeline-step { flex:0 0 100%; }
  .footer-content { grid-template-columns:1fr; }
  .badge-row { flex-direction:column; }
  
  
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}