/* ============================================================
   Sitesjet — Unified Design System v2.0
   Brand palette derived from Sitesjet logo
   One stylesheet that correctly styles ALL pages
   ============================================================ */

:root {
  /* Primary — Tiger Orange + Black */
  --navy: #0F0F0F;
  --navy-light: #1F1F2E;
  --blue: #FF5F15;
  --blue-light: #FF7F45;
  --sky: #FFA275;
  --sky-light: #FFD0B0;

  /* Secondary — Blue */
  --accent-blue: #2563EB;
  --accent-blue-light: #60A5FA;

  /* Neutrals */
  --white: #FFFFFF;
  --off-white: #F8FAFC;
  --gray-light: #F1F5F9;
  --border: #E2E8F0;
  --gray: #94A3B8;
  --text: #1E293B;
  --text-light: #475569;
  --text-muted: #64748B;

  /* Accent */
  --amber: #F59E0B;
  --green: #10B981;

  /* Design tokens */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg: 0 10px 25px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.04);
  --shadow-xl: 0 20px 50px -12px rgba(15,23,42,.15);
  --trans: 0.2s ease;
  --trans-slow: 0.35s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); color:var(--text); line-height:1.7; background:var(--white); overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--blue); text-decoration:none; transition:color var(--trans); }
a:hover { color:var(--navy); }
ul { list-style:none; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 2rem; }
.container-narrow { max-width:900px; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4 { font-family:var(--font); font-weight:700; line-height:1.2; color:var(--navy); }
h1 { font-size:clamp(2.5rem, 5vw, 3.75rem); letter-spacing:-0.02em; }
h2 { font-size:clamp(1.75rem, 3vw, 2.5rem); letter-spacing:-0.015em; }
h3 { font-size:clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing:-0.01em; }

.section-label,
.section-tag { display:inline-block; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--blue); margin-bottom:0.75rem; }

.section-header { text-align:center; margin-bottom:3.5rem; }
.section-desc { font-size:1.05rem; color:var(--text-muted); max-width:600px; margin:0.75rem auto 0; }

.text-center { text-align:center; }
.text-gradient { background:linear-gradient(135deg, var(--sky), var(--blue-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn,
.btn-primary,
.btn--primary { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:var(--font); font-size:0.95rem; font-weight:600; padding:0.8rem 1.75rem; border:2px solid var(--blue); border-radius:var(--radius); cursor:pointer; transition:all var(--trans); text-align:center; white-space:nowrap; background:var(--blue); color:var(--white); }
.btn:hover,
.btn-primary:hover,
.btn--primary:hover { background:var(--navy); border-color:var(--navy); color:var(--white); transform:translateY(-1px); box-shadow:var(--shadow); }

.btn-outline,
.btn--outline { background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-outline:hover,
.btn--outline:hover { background:var(--blue); color:var(--white); }

.btn-white,
.btn--white { background:var(--white); color:var(--navy); border-color:var(--white); }
.btn-white:hover,
.btn--white:hover { background:transparent; color:var(--white); border-color:var(--white); }

.btn-accent { background:var(--amber); color:var(--navy); border-color:var(--amber); }
.btn-accent:hover { background:#E08F00; border-color:#E08F00; }

.btn-lg,
.btn--lg { padding:1rem 2.5rem; font-size:1.05rem; }
.btn-sm,
.btn--sm { padding:0.55rem 1.15rem; font-size:0.85rem; }
.btn-nav { padding:0.5rem 1.25rem !important; font-size:0.85rem !important; }

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
.header,
.site-header { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(15,15,15,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,0.06); transition:all var(--trans-slow); height:80px; display:flex; align-items:center; }
.header.sticky,
.site-header.sticky { border-bottom-color:rgba(255,255,255,0.1); box-shadow:0 1px 3px rgba(0,0,0,.3); }

.header .container,
.site-header .container { display:flex; align-items:center; justify-content:space-between; width:100%; }

.logo { flex-shrink:0; display:flex; align-items:center; text-decoration:none; }
.logo img { height:56px; width:auto; }

.nav,
.main-nav { display:flex; align-items:center; }
.nav ul,
.nav__list,
.main-nav ul { display:flex; align-items:center; gap:2.25rem; }
.nav a,
.nav__link,
.main-nav a { font-size:0.9rem; font-weight:500; color:rgba(255,255,255,0.8); position:relative; padding:0.25rem 0; }
.nav a::after,
.nav__link::after,
.main-nav a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--blue); transition:width var(--trans); }
.nav a:hover,
.nav__link:hover,
.main-nav a:hover { color:var(--blue); }
.nav a:hover::after,
.nav__link:hover::after,
.main-nav a:hover::after,
.nav a.active::after,
.nav__link.active::after,
.main-nav a.active::after { width:100%; }
.nav a.active,
.nav__link.active,
.main-nav a.active,
.main-nav a.active { color:var(--blue); }

/* Mobile toggle */
.nav-toggle,
.mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span,
.mobile-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all var(--trans); }

@media (max-width:992px) {
  .nav-toggle,
  .mobile-toggle { display:flex; }
  .nav,
  .main-nav { position:fixed; top:80px; left:0; right:0; background:rgba(15,15,15,0.98); flex-direction:column; gap:0; padding:1.5rem 0; box-shadow:var(--shadow-lg); transform:translateY(-120%); opacity:0; transition:all var(--trans-slow); pointer-events:none; }
  .nav.open,
  .main-nav.open { transform:translateY(0); opacity:1; pointer-events:all; }
  .nav ul,
  .nav__list,
  .main-nav ul { flex-direction:column; gap:0; width:100%; }
  .nav a,
  .nav__link,
  .main-nav a { display:block; padding:0.7rem 2rem; font-size:1rem; color:rgba(255,255,255,0.8); }
  .nav a::after,
  .nav__link::after,
  .main-nav a::after { display:none; }
}

/* ============================================================
   HERO (Homepage)
   ============================================================ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); overflow:hidden; padding:120px 0 80px; }
.hero__overlay { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:60px 60px; pointer-events:none; }

.hero__content { position:relative; z-index:1; max-width:650px; color:var(--white); }
.hero__badge { display:inline-block; padding:0.35rem 1rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:50px; font-size:0.8rem; font-weight:500; color:var(--sky-light); margin-bottom:1.5rem; }
.hero__title { color:var(--white); margin-bottom:1.25rem; }
.hero__subtitle { font-size:1.15rem; color:rgba(255,255,255,.85); margin-bottom:2.25rem; line-height:1.7; }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero__stats { display:flex; gap:2.5rem; margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.15); }
.hero__stat-number { font-size:2rem; font-weight:800; color:var(--sky-light); }
.hero__stat-label { font-size:0.8rem; color:rgba(255,255,255,.7); display:block; margin-top:0.25rem; }
.hero__visual { position:absolute; right:-5%; top:50%; transform:translateY(-50%); width:45%; height:70%; pointer-events:none; }
.hero__shape { position:absolute; }
.hero__shape--1 { width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(59,130,246,.25) 0%, transparent 70%); top:10%; right:20%; }
.hero__shape--2 { width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(96,165,250,.15) 0%, transparent 70%); bottom:20%; right:5%; }

@media (max-width:992px) {
  .hero { text-align:center; }
  .hero__content { max-width:100%; }
  .hero__actions { justify-content:center; }
  .hero__stats { justify-content:center; }
  .hero__visual { display:none; }
}

/* ============================================================
   PAGE HERO (Subpages)
   ============================================================ */
.page-hero,
.page-banner { background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); padding:140px 0 70px; text-align:center; position:relative; overflow:hidden; }
.page-hero::before,
.page-banner::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:60px 60px; pointer-events:none; }
.page-hero h1,
.page-banner h1 { color:var(--white); margin-bottom:0.75rem; position:relative; }
.page-hero .section-tag,
.page-hero .section-label,
.page-banner .section-tag,
.page-banner .section-label { color:var(--sky-light); margin-bottom:0.75rem; position:relative; }
.hero-subtitle,
.hero-lead,
.banner-subtitle { color:rgba(255,255,255,.8); font-size:1.1rem; max-width:600px; margin:0 auto; position:relative; }

/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.section { padding:5rem 0; }
.bg-light,
.section--light { background:var(--off-white); }
.bg-navy,
.section--dark { background:var(--navy); color:var(--white); }
.bg-navy h2,
.section--dark h2 { color:var(--white); }
.bg-navy p,
.section--dark p { color:rgba(255,255,255,.8); }

.section-label { display:inline-block; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--blue); margin-bottom:0.75rem; }
.section-header { text-align:center; margin-bottom:3.5rem; }
.section-title { margin-bottom:0.75rem; }
.section-subtitle { font-size:1.05rem; color:var(--text-muted); max-width:600px; margin:0.5rem auto 0; }
.section-cta { text-align:center; margin-top:3rem; }

/* ============================================================
   SERVICES GRID (Home + Services page)
   ============================================================ */
.services-grid,
.services__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }

.service-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.25rem 1.75rem; transition:all var(--trans-slow); position:relative; overflow:hidden; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:transparent; }
.service-card__icon { width:52px; height:52px; background:var(--gray-light); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; transition:all var(--trans-slow); }
.service-card:hover .service-card__icon { background:var(--blue); color:var(--white); }
.service-card__title,
.service-card h3 { margin-bottom:0.6rem; }
.service-card__text,
.service-card p { color:var(--text-muted); font-size:0.9rem; line-height:1.6; margin-bottom:1rem; }
.service-card__link { font-weight:600; font-size:0.9rem; color:var(--blue); display:inline-flex; align-items:center; gap:0.3rem; }
.service-card__link:hover { gap:0.5rem; }

/* Service Detail Cards (services.html) */
.service-detail-card { padding:4rem 0; border-bottom:1px solid var(--border); }
.service-detail-card:last-child { border-bottom:none; }
.service-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.service-detail-grid.reverse .service-detail-visual { order:-1; }
.service-detail-content h2 { margin-bottom:0.75rem; }
.service-icon-lg { margin-bottom:1rem; color:var(--blue); }
.service-lead { font-size:1.05rem; color:var(--text); margin-bottom:1rem; font-weight:500; }
.service-detail-content p { color:var(--text-muted); margin-bottom:1rem; }
.service-features { margin-top:1.25rem; }
.service-features li { padding:0.5rem 0; color:var(--text-light); font-size:0.9rem; display:flex; align-items:center; gap:0.5rem; }
.service-features li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }
.service-detail-visual { display:flex; align-items:center; justify-content:center; }
.visual-placeholder { width:100%; max-width:360px; min-height:240px; background:linear-gradient(135deg, #E2E8F0, #F1F5F9); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; }

@media (max-width:992px) {
  .services-grid,
  .services__grid { grid-template-columns:repeat(2, 1fr); }
  .service-detail-grid { grid-template-columns:1fr; gap:2rem; }
  .service-detail-grid.reverse .service-detail-visual { order:0; }
}
@media (max-width:600px) {
  .services-grid,
  .services__grid { grid-template-columns:1fr; }
}

/* ============================================================
   STATS
   ============================================================ */
.stats-section { background:var(--navy); padding:4rem 0; position:relative; overflow:hidden; }
.stats-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:40px 40px; }
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; position:relative; }
.stat-item { text-align:center; }
.stat-value,
.stat-number { font-size:2.75rem; font-weight:800; color:var(--sky-light); letter-spacing:-0.02em; }
.stat-plus,
.stat-percent { font-size:1.75rem; }
.stat-label { color:rgba(255,255,255,.65); margin-top:0.5rem; font-size:0.9rem; display:block; }
@media (max-width:768px) { .stats-grid { grid-template-columns:repeat(2, 1fr); gap:2rem; } }

/* ============================================================
   ABOUT SNIPPET (Homepage)
   ============================================================ */
.about-snippet__grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-snippet__text { color:var(--text-muted); margin-bottom:1rem; line-height:1.7; }
.about-snippet__features { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin:1.5rem 0 2rem; }
.about-snippet__feature { display:flex; align-items:center; gap:0.5rem; font-size:0.9rem; color:var(--text-light); }
.feature-check { color:var(--green); font-weight:700; }
.about-snippet__visual { position:relative; }
.about-snippet__image-placeholder { width:100%; min-height:380px; background:linear-gradient(135deg, var(--navy), var(--blue)); border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem; color:var(--white); }
.about-snippet__stats-card { position:absolute; bottom:-25px; right:-25px; background:var(--white); padding:1.25rem 1.5rem; border-radius:var(--radius); box-shadow:var(--shadow-xl); text-align:center; }
.about-snippet__stats-number { font-size:1.5rem; font-weight:800; color:var(--blue); display:block; }
.about-snippet__stats-label { font-size:0.75rem; color:var(--text-muted); }

/* About Story (about.html) */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.about-text p { color:var(--text-muted); margin-bottom:1rem; line-height:1.7; }
.image-placeholder { width:100%; min-height:360px; background:linear-gradient(135deg, #E2E8F0, #F1F5F9); border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; color:var(--gray); font-size:2rem; }
.placeholder-icon { font-size:3rem; }

@media (max-width:768px) {
  .about-snippet__grid,
  .about-grid { grid-template-columns:1fr; gap:2rem; }
  .about-snippet__features { grid-template-columns:1fr; }
  .about-snippet__image-placeholder,
  .image-placeholder { min-height:250px; }
  .about-snippet__stats-card { bottom:-10px; right:-10px; padding:1rem; }
}

/* ============================================================
   MISSION & VALUES
   ============================================================ */
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.mission-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; }
.mission-icon { font-size:2.5rem; margin-bottom:1rem; }
.mission-card h3 { margin-bottom:0.5rem; }
.mission-card p { color:var(--text-muted); font-size:0.95rem; }

.value-list { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.value-item h4 { font-size:1rem; margin-bottom:0.35rem; color:var(--navy); }
.value-item p { color:var(--text-muted); font-size:0.875rem; }

/* Team */
.team-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; }
.team-card { text-align:center; }
.team-avatar { margin:0 auto 1rem; }
.avatar-placeholder { width:110px; height:110px; border-radius:50%; background:var(--gray-light); margin:0 auto; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:var(--blue); }
.team-role { color:var(--blue); font-size:0.85rem; font-weight:500; display:block; margin:0.25rem 0 0.5rem; }
.team-card p { color:var(--text-muted); font-size:0.85rem; }

@media (max-width:992px) { .team-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .team-grid { grid-template-columns:1fr; } .mission-grid { grid-template-columns:1fr; } .value-list { grid-template-columns:1fr; } }

/* ============================================================
   WHY US (Homepage)
   ============================================================ */
.why-us__grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; }
.why-us__card { text-align:center; padding:2rem; border-radius:var(--radius-lg); transition:all var(--trans-slow); }
.why-us__card:hover { background:var(--white); box-shadow:var(--shadow-lg); }
.why-us__number { width:48px; height:48px; border-radius:50%; background:var(--blue); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:800; margin:0 auto 1rem; }
.why-us__title { margin-bottom:0.5rem; }
.why-us__text { color:var(--text-muted); font-size:0.875rem; line-height:1.6; }
@media (max-width:768px) { .why-us__grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px) { .why-us__grid { grid-template-columns:1fr; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid,
.testimonials__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }

.testimonial-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; transition:all var(--trans-slow); }
.testimonial-card:hover { box-shadow:var(--shadow-lg); border-color:transparent; }
.testimonial-card__stars { color:var(--amber); margin-bottom:0.75rem; letter-spacing:2px; }
.testimonial-card__text { color:var(--text-light); font-style:italic; margin-bottom:1.25rem; line-height:1.65; font-size:0.9rem; }
.testimonial-card__author { display:flex; align-items:center; gap:0.75rem; }
.testimonial-card__avatar { width:44px; height:44px; border-radius:50%; background:var(--gray-light); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--blue); font-size:0.8rem; flex-shrink:0; }
.testimonial-card__name { font-weight:600; font-size:0.9rem; display:block; }
.testimonial-card__role { color:var(--text-muted); font-size:0.75rem; display:block; }

@media (max-width:992px) {
  .testimonials-grid,
  .testimonials__grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px) {
  .testimonials-grid,
  .testimonials__grid { grid-template-columns:1fr; }
}

/* ============================================================
   PROCESS (Horizontal - Homepage; Vertical - Process page)
   ============================================================ */
.process-steps,
.process-snippet__steps { display:grid; grid-template-columns:repeat(5, 1fr); gap:1.5rem; }

.process-step { text-align:center; }
.process-step__number { width:56px; height:56px; border-radius:50%; background:var(--white); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:800; color:var(--blue); margin:0 auto 1rem; transition:all var(--trans-slow); }
.process-step:hover .process-step__number { background:var(--blue); color:var(--white); border-color:var(--blue); box-shadow:var(--shadow); }
.process-step__title,
.process-step h3 { margin-bottom:0.35rem; }
.process-step__text,
.process-step p { color:var(--text-muted); font-size:0.85rem; }

/* Vertical process timeline (process.html) */
.process-timeline { max-width:760px; margin:0 auto; }
.process-timeline .process-step { display:flex; gap:2rem; text-align:left; margin-bottom:2.5rem; position:relative; }
.process-timeline .process-step:last-child { margin-bottom:0; }
.process-timeline .process-step::before { content:''; position:absolute; left:28px; top:60px; bottom:-40px; width:2px; background:var(--border); }
.process-timeline .process-step:last-child::before { display:none; }

.process-number { width:56px; height:56px; border-radius:50%; background:var(--blue); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:800; flex-shrink:0; position:relative; z-index:1; box-shadow:0 4px 14px rgba(26,86,219,.3); }

.process-content { flex:1; padding-top:0.2rem; }
.process-content h2 { font-size:1.3rem; margin-bottom:0.4rem; }
.process-content p { color:var(--text-muted); font-size:0.9rem; line-height:1.65; }

@media (max-width:992px) {
  .process-steps,
  .process-snippet__steps { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:600px) {
  .process-steps,
  .process-snippet__steps { grid-template-columns:repeat(2, 1fr); }
  .process-timeline .process-step { flex-direction:column; gap:0.75rem; }
  .process-timeline .process-step::before { left:28px; top:56px; bottom:-28px; }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio-filters { display:flex; justify-content:center; gap:0.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-btn { padding:0.5rem 1.25rem; border:1px solid var(--border); border-radius:50px; background:var(--white); font-family:var(--font); font-size:0.85rem; font-weight:500; color:var(--text); cursor:pointer; transition:all var(--trans); }
.filter-btn:hover,
.filter-btn.active { background:var(--blue); color:var(--white); border-color:var(--blue); }

.portfolio-items { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }
.portfolio-item { border-radius:var(--radius-lg); overflow:hidden; background:var(--white); border:1px solid var(--border); transition:all var(--trans-slow); }
.portfolio-item:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.portfolio-image { min-height:220px; }
.portfolio-info { padding:1.25rem 1.5rem; }
.portfolio-category { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--blue); display:block; margin-bottom:0.35rem; }
.portfolio-info h3 { font-size:1.05rem; margin-bottom:0.35rem; }
.portfolio-info p { color:var(--text-muted); font-size:0.85rem; }

@media (max-width:992px) { .portfolio-items { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .portfolio-items { grid-template-columns:1fr; } }

/* ============================================================
   BLOG
   ============================================================ */
.blog-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }

.blog-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--trans-slow); }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-card-image { height:180px; background:linear-gradient(135deg, #E2E8F0, #F1F5F9); }
.blog-card-body { padding:1.25rem 1.5rem; }
.blog-category { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--blue); display:block; margin-bottom:0.35rem; }
.blog-card-body h3 { font-size:1.05rem; margin-bottom:0.5rem; line-height:1.4; }
.blog-card-body h3 a { color:var(--navy); }
.blog-card-body h3 a:hover { color:var(--blue); }
.blog-card-body p { color:var(--text-muted); font-size:0.85rem; margin-bottom:0.75rem; }
.blog-meta { display:flex; gap:1rem; font-size:0.75rem; color:var(--text-muted); }

@media (max-width:992px) { .blog-cards { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .blog-cards { grid-template-columns:1fr; } }

/* ============================================================
   PARTNERS (Homepage)
   ============================================================ */
.partners { padding:2.5rem 0; border-bottom:1px solid var(--border); }
.partners__label { text-align:center; font-size:0.8rem; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:1.5rem; }
.partners__row { display:flex; align-items:center; justify-content:space-around; gap:2rem; flex-wrap:wrap; }
.partner-placeholder { font-size:1.1rem; font-weight:600; color:var(--gray); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; }

.contact-info h2 { margin-bottom:0.75rem; }
.contact-info > p { color:var(--text-muted); margin-bottom:2rem; }

.contact-details { display:flex; flex-direction:column; gap:1.5rem; }
.contact-item h3 { font-size:0.95rem; margin-bottom:0.15rem; }
.contact-item p { color:var(--text-muted); font-size:0.9rem; }
.contact-item a { color:var(--text-muted); }
.contact-item a:hover { color:var(--blue); }

.contact-form-wrapper { background:var(--white); padding:2rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.contact-form-wrapper h2 { margin-bottom:1.25rem; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.85rem; font-weight:500; color:var(--text); margin-bottom:0.4rem; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:0.75rem 0.9rem; border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font); font-size:0.9rem; color:var(--text); background:var(--white); transition:border-color var(--trans), box-shadow var(--trans); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,86,219,.1); }
.form-group textarea { resize:vertical; min-height:130px; }
.contact-form button[type=submit] { width:100%; }

.form-group input.error,
.form-group textarea.error { border-color:#EF4444; }
.error-message { display:block; color:#EF4444; font-size:0.75rem; margin-top:0.25rem; }
.form-group button.success { background:var(--green) !important; border-color:var(--green) !important; }

@media (max-width:768px) {
  .contact-grid { grid-template-columns:1fr; gap:2rem; }
  .form-row { grid-template-columns:1fr; }
  .contact-form-wrapper { padding:1.5rem; }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section { background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); padding:5rem 0; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:60px 60px; pointer-events:none; }
.cta-section h2,
.cta-section__title { color:var(--white); margin-bottom:0.75rem; position:relative; }
.cta-section p,
.cta-section__text { color:rgba(255,255,255,.8); font-size:1.05rem; max-width:540px; margin:0 auto 2rem; position:relative; }
.cta-actions,
.cta-section__actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer,
.site-footer { background:var(--navy); color:rgba(255,255,255,.7); padding:4.5rem 0 1.5rem; }

.footer__grid,
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem; }

.footer__brand img,
.footer-about img { height:38px; width:auto; margin-bottom:0.75rem; }

.footer__brand p,
.footer-about p,
.footer__brand-text { font-size:0.875rem; line-height:1.6; max-width:300px; }

.footer h4,
.site-footer h4,
.footer__heading,
.footer-links h4,
.footer-services h4,
.footer-contact h4 { color:var(--white); margin-bottom:1rem; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; }

.footer ul li,
.site-footer ul li,
.footer__links li { margin-bottom:0.6rem; }

.footer ul li a,
.site-footer ul li a,
.footer__links a { color:rgba(255,255,255,.6); font-size:0.875rem; transition:color var(--trans); }
.footer ul li a:hover,
.site-footer ul li a:hover,
.footer__links a:hover { color:var(--white); }

.footer__bottom,
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; }

.footer__bottom-links { display:flex; gap:1.5rem; }
.footer__bottom-links a { color:rgba(255,255,255,.5); font-size:0.8rem; }
.footer__bottom-links a:hover { color:var(--white); }

.footer__social { display:flex; gap:0.75rem; margin-top:1rem; }
.footer__social a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); transition:all var(--trans); }
.footer__social a:hover { background:var(--blue); color:var(--white); }

@media (max-width:768px) {
  .footer__grid,
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .footer__bottom,
  .footer-bottom { flex-direction:column; gap:0.75rem; text-align:center; }
}
@media (max-width:480px) {
  .footer__grid,
  .footer-grid { grid-template-columns:1fr; }
}

/* ============================================================
   ANIMATIONS (Scroll reveal)
   ============================================================ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ============================================================
   MOBILE MENU active state fix
   ============================================================ */
body.menu-open { overflow:hidden; }