/*
Theme Name: X Falafel Mother
Theme URI: https://xfalafel.com
Author: X Falafel
Author URI: https://xfalafel.com
Description: Official mother theme for X Falafel Worldwide - 100% Plant Based Street Food
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xfalafel-mother
Domain Path: /languages
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ============================================
   X FALAFEL WORLDWIDE - MOTHER THEME
   Premium Dark Theme with GSAP Animations
   ============================================ */

:root{
  --bg:#0a0a0c;
  --bg-elevated:#111114;
  --panel:#141418;
  --panel-2:#1a1a1f;
  --text:#ffffff;
  --text-secondary:#a0a0a8;
  --text-muted:#6b6b74;
  --line:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.12);
  --red:#e02020;
  --red-glow:rgba(224,32,32,.4);
  --red-dark:#b81818;
  --radius:20px;
  --radius-sm:12px;
  --transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce:0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset & Base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Selection */
::selection{background:var(--red);color:white}

/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* ============================================
   PRELOADER
   ============================================ */
.preloader{
  position:fixed;
  inset:0;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.preloader-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-bottom:40px;
}

.preloader-logo{
  height:80px;
  width:auto;
  animation:logoPulse 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 30px rgba(224,32,32,0.4));
}

@keyframes logoPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 30px rgba(224,32,32,0.4))}
  50%{transform:scale(1.05);filter:drop-shadow(0 0 50px rgba(224,32,32,0.6))}
}

.preloader-bar{
  width:200px;
  height:3px;
  background:var(--line);
  border-radius:3px;
  overflow:hidden;
}

.preloader-progress{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--red), #ff4444);
  animation:loadProgress 1.5s ease-out forwards;
}

@keyframes loadProgress{
  0%{width:0%}
  100%{width:100%}
}

/* ============================================
   PARTICLE CANVAS
   ============================================ */
.particle-canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.6;
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor,
.cursor-follower{
  position:fixed;
  pointer-events:none;
  z-index:10000;
  border-radius:50%;
  transform:translate(-50%, -50%);
  transition:transform 0.1s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
}

.cursor{
  width:8px;
  height:8px;
  background:var(--red);
}

.cursor-follower{
  width:40px;
  height:40px;
  border:1px solid var(--red);
  opacity:0.5;
  transition:transform 0.15s ease-out, width 0.3s ease, height 0.3s ease;
}

.cursor.hover{
  width:12px;
  height:12px;
  background:white;
}

.cursor-follower.hover{
  width:60px;
  height:60px;
  border-color:white;
  opacity:0.3;
}

@media (pointer: coarse){
  .cursor, .cursor-follower{display:none}
}

/* ============================================
   LAYOUT
   ============================================ */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ============================================
   HEADER
   ============================================ */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(10,10,12,0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  transition:background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled{
  background:rgba(10,10,12,0.95);
  border-color:var(--line-strong);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:80px;
}

/* Brand */
.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:var(--text);
}

.brand-logo{
  height:40px;
  width:auto;
  display:block;
  transition:transform 0.3s ease;
}

.brand:hover .brand-logo{
  transform:scale(1.05);
}

/* Navigation */
.nav{
  display:flex;
  gap:8px;
  align-items:center;
}

.nav a{
  color:var(--text-secondary);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  transition:color 0.2s ease, background 0.2s ease;
  position:relative;
}

.nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,0.05);
}

.nav a.is-active{
  color:var(--red);
  background:rgba(224,32,32,0.1);
}

/* Mobile Menu Toggle */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--text);
  cursor:pointer;
  padding:8px;
}

.menu-toggle svg{
  width:24px;
  height:24px;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero{
  min-height:100vh;
  padding:140px 0 100px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

/* Video Background */
.hero-video-container{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,0.7) 0%, rgba(10,10,12,0.5) 50%, rgba(10,10,12,0.8) 100%);
  z-index:1;
}

/* Fallback when video doesn't load */
.hero-video-container::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/hero-video-poster.jpg') center/cover no-repeat;
  z-index:-1;
}

/* Hero Background Elements */
.hero-bg-elements{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.5;
}

.hero-glow-1{
  width:600px;
  height:600px;
  background:var(--red-glow);
  top:-200px;
  left:-100px;
  animation:glowPulse 8s ease-in-out infinite;
}

.hero-glow-2{
  width:400px;
  height:400px;
  background:rgba(255,255,255,0.08);
  top:20%;
  right:-100px;
  animation:glowPulse 10s ease-in-out infinite reverse;
}

@keyframes glowPulse{
  0%,100%{transform:scale(1);opacity:0.5}
  50%{transform:scale(1.2);opacity:0.3}
}

.hero-grid-pattern{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:0.5;
}

/* Hero Grid */
.hero-grid{
  display:grid;
  grid-template-columns:1.4fr 0.8fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* Hero Tagline */
.hero-tagline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}

.tagline-dot{
  width:8px;
  height:8px;
  background:var(--red);
  border-radius:50%;
  animation:dotPulse 2s ease-in-out infinite;
}

.tagline-text{
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-secondary);
}

@keyframes dotPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.8)}
}

/* Hero Logo */
.hero-logo-container{
  margin:0 0 20px;
}

.hero-logo{
  max-width:400px;
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 40px rgba(224,32,32,0.3));
  animation:logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 40px rgba(224,32,32,0.3))}
  50%{filter:drop-shadow(0 0 60px rgba(224,32,32,0.5))}
}

/* Kicker */
.kicker{
  margin:0 0 24px;
  font-size:20px;
  font-weight:600;
  color:var(--text-secondary);
}

/* Lede */
.lede{
  margin:0 0 32px;
  max-width:520px;
  font-size:17px;
  color:var(--text-secondary);
  line-height:1.7;
}

/* Hero CTA */
.hero-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 28px;
  border-radius:var(--radius-sm);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity:0;
  transition:opacity 0.3s ease;
}

.btn:hover::before{opacity:1}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:var(--red);
  color:white;
  box-shadow:0 4px 20px rgba(224,32,32,0.3);
}

.btn-primary:hover{
  background:var(--red-dark);
  box-shadow:0 6px 30px rgba(224,32,32,0.4);
}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line-strong);
}

.btn-ghost:hover{
  border-color:var(--red);
  background:rgba(224,32,32,0.05);
}

.btn-sm{
  padding:10px 18px;
  font-size:13px;
}

.btn-arrow{
  width:18px;
  height:18px;
  transition:transform 0.3s ease;
}

.btn:hover .btn-arrow{
  transform:translateX(4px);
}

.btn-icon{
  width:16px;
  height:16px;
}

/* Stat Card */
.hero-stat{
  display:flex;
  justify-content:flex-end;
}

.stat-card{
  background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  text-align:center;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
  transform-style:preserve-3d;
  perspective:1000px;
}

.stat-glow{
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(224,32,32,0.15), transparent 50%);
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
}

.stat-card:hover .stat-glow{
  opacity:1;
}

.stat-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:12px;
}

.stat-number{
  font-size:80px;
  font-weight:900;
  color:var(--red);
  line-height:1;
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}

.stat-sub{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  margin-bottom:16px;
}

.stat-flags{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:12px;
}

.flag{
  font-size:24px;
  filter:grayscale(0.3);
  transition:filter 0.3s ease, transform 0.3s ease;
}

.flag:hover{
  filter:grayscale(0);
  transform:scale(1.2);
}

.stat-note{
  font-size:12px;
  color:var(--text-muted);
}

/* Scroll Indicator */
.scroll-indicator{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:0.6;
  animation:fadeInUp 1s ease 1s both;
}

.scroll-mouse{
  width:26px;
  height:40px;
  border:2px solid var(--line-strong);
  border-radius:13px;
  display:flex;
  justify-content:center;
  padding-top:8px;
}

.scroll-wheel{
  width:4px;
  height:8px;
  background:var(--red);
  border-radius:2px;
  animation:scrollWheel 2s ease-in-out infinite;
}

.scroll-text{
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-muted);
}

@keyframes scrollWheel{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(8px);opacity:0.3}
}

@keyframes fadeInUp{
  from{opacity:0;transform:translate(-50%, 20px)}
  to{opacity:0.6;transform:translate(-50%, 0)}
}

/* ============================================
   SECTIONS
   ============================================ */
.section{
  padding:100px 0;
  position:relative;
}

.section-dark{
  background:var(--bg-elevated);
}

.section-head{
  margin-bottom:60px;
}

.section-head.centered{
  text-align:center;
}

.section-head.centered p{
  margin-left:auto;
  margin-right:auto;
}

.section-label{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:16px;
}

.section-title{
  font-size:48px;
  font-weight:800;
  margin:0 0 20px;
  letter-spacing:-1px;
}

.section-head p{
  font-size:18px;
  color:var(--text-secondary);
  max-width:600px;
  line-height:1.7;
}

/* ============================================
   STORY SECTION
   ============================================ */
.story-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.story-card{
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.story-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--red), transparent);
  opacity:0;
  transition:opacity 0.3s ease;
}

.story-card:hover{
  border-color:rgba(224,32,32,0.3);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}

.story-card:hover::before{
  opacity:1;
}

.story-icon{
  width:48px;
  height:48px;
  margin-bottom:20px;
  color:var(--red);
}

.story-icon svg{
  width:100%;
  height:100%;
}

.story-card h3{
  font-size:20px;
  font-weight:700;
  margin:0 0 12px;
}

.story-card p{
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.7;
  margin:0;
}

/* Stats Row */
.stats-row{
  display:flex;
  justify-content:center;
  gap:80px;
  margin-top:80px;
  padding-top:60px;
  border-top:1px solid var(--line);
}

.stat-item{
  text-align:center;
}

.stat-item-number{
  font-size:56px;
  font-weight:900;
  color:var(--red);
  line-height:1;
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}

.stat-item-label{
  font-size:14px;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* ============================================
   WORLD MAP SECTION
   ============================================ */
.world-map-container{
  position:relative;
  padding:40px 0;
}

.world-map{
  position:relative;
  max-width:900px;
  margin:0 auto;
}

.map-svg{
  width:100%;
  height:auto;
}

.map-continents path{
  fill:rgba(255,255,255,0.02);
  transition:fill 0.3s ease;
}

.map-continents path:hover{
  fill:rgba(255,255,255,0.05);
}

/* Map Pins */
.map-pin{
  cursor:pointer;
}

.map-pin .pin-pulse{
  animation:pinPulse 2s ease-out infinite;
  transform-origin:center;
}

.map-pin .pin-pulse:nth-child(2){
  animation-delay:0.5s;
}

@keyframes pinPulse{
  0%{transform:scale(0.5);opacity:1}
  100%{transform:scale(2);opacity:0}
}

.map-pin .pin-dot{
  transition:transform 0.3s ease;
}

.map-pin:hover .pin-dot{
  transform:scale(1.5);
}

/* Map Labels */
.map-labels{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.map-label{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:rgba(10,10,12,0.9);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(10px);
  transform:translate(-50%, -50%);
  transition:border-color 0.3s ease, transform 0.3s ease;
  pointer-events:auto;
  cursor:pointer;
}

.map-label:hover{
  border-color:var(--red);
  transform:translate(-50%, -50%) scale(1.05);
}

.label-flag{
  font-size:18px;
}

.label-text{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}

/* ============================================
   LOCATIONS SECTION
   ============================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  aspect-ratio:4/5;
  transform-style:preserve-3d;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover{
  border-color:rgba(224,32,32,0.3);
  box-shadow:0 25px 60px rgba(0,0,0,0.5);
}

.card-media{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.card-media.split{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.split-half{
  background-size:cover;
  background-position:center;
  transition:transform 0.5s ease;
}

.card:hover .split-half:first-child{
  transform:scale(1.05);
}

.card:hover .split-half:last-child{
  transform:scale(1.05);
}

.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}

.card:hover .card-media img{
  transform:scale(1.05);
}

.card-badge{
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 12px;
  background:var(--red);
  color:white;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  border-radius:20px;
  z-index:3;
}

.card-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px;
  gap:10px;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.9) 100%);
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  z-index:2;
}

.card-hover:hover .card-overlay{
  opacity:1;
  transform:translateY(0);
}

.card-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-secondary);
}

.flag-large{
  font-size:20px;
}

.card-overlay h3{
  margin:0;
  font-size:24px;
  font-weight:800;
  color:var(--text);
}

.card-overlay p{
  margin:0;
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.6;
}

.overlay-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

/* Coming Soon */
.coming-soon{
  text-align:center;
  margin-top:60px;
  padding:48px;
  background:linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
}

.coming-soon-icon{
  font-size:48px;
  margin-bottom:16px;
}

.coming-soon h3{
  font-size:24px;
  font-weight:700;
  margin:0 0 8px;
}

.coming-soon p{
  font-size:15px;
  color:var(--text-secondary);
  margin:0 0 24px;
}

/* ============================================
   SOCIAL SECTION
   ============================================ */
.social-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.social-card{
  position:relative;
  aspect-ratio:1;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid var(--line);
  transition:border-color 0.3s ease, transform 0.3s ease;
}

.social-card:hover{
  border-color:var(--red);
  transform:translateY(-4px);
}

.social-card-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  transition:background 0.3s ease;
}

.social-card:hover .social-card-bg{
  background:linear-gradient(145deg, rgba(224,32,32,0.1), rgba(224,32,32,0.02));
}

.social-card-content{
  position:relative;
  text-align:center;
  z-index:2;
}

.social-icon{
  width:48px;
  height:48px;
  margin:0 auto 16px;
  color:var(--red);
}

.social-icon svg{
  width:100%;
  height:100%;
}

.social-handle{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}

.social-location{
  font-size:14px;
  color:var(--text-secondary);
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */
.newsletter-section{
  padding:60px 0 100px;
}

.newsletter-card{
  position:relative;
  background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:60px;
  overflow:hidden;
}

.newsletter-glow{
  position:absolute;
  top:-50%;
  right:-20%;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(224,32,32,0.2), transparent 60%);
  pointer-events:none;
}

.newsletter-content{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  z-index:2;
}

.newsletter-text{
  flex:1;
}

.newsletter-text h2{
  font-size:36px;
  font-weight:800;
  margin:0 0 12px;
}

.newsletter-text p{
  font-size:16px;
  color:var(--text-secondary);
  margin:0;
}

.newsletter-form{
  flex:1;
  max-width:400px;
}

.form-group{
  display:flex;
  gap:12px;
}

.newsletter-input{
  flex:1;
  padding:16px 20px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:15px;
  transition:border-color 0.3s ease, background 0.3s ease;
}

.newsletter-input:focus{
  outline:none;
  border-color:var(--red);
  background:rgba(255,255,255,0.08);
}

.newsletter-input::placeholder{
  color:var(--text-muted);
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-wrapper{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
}

/* Contact Form */
.contact-form-container{
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.contact-form .form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.contact-form label{
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  padding:14px 18px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:15px;
  transition:border-color 0.3s ease, background 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--red);
  background:rgba(255,255,255,0.08);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:var(--text-muted);
}

.contact-form select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b6b74' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:44px;
}

.contact-form select option{
  background:var(--bg);
  color:var(--text);
}

.contact-form textarea{
  resize:vertical;
  min-height:120px;
}

.btn-full{
  width:100%;
}

/* Form Success Message */
.form-success{
  display:none;
  text-align:center;
  padding:40px;
}

.form-success.active{
  display:block;
}

.success-icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  background:var(--red);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  color:white;
}

.form-success h3{
  font-size:24px;
  font-weight:700;
  margin:0 0 8px;
}

.form-success p{
  font-size:15px;
  color:var(--text-secondary);
  margin:0;
}

/* Contact Cards */
.contact-cards{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-card-large{
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:28px;
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color 0.3s ease, transform 0.3s ease;
}

.contact-card-large:hover{
  border-color:rgba(224,32,32,0.3);
  transform:translateY(-4px);
}

.contact-icon{
  width:44px;
  height:44px;
  flex-shrink:0;
  color:var(--red);
}

.contact-icon svg{
  width:100%;
  height:100%;
}

.contact-info{
  flex:1;
}

.contact-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:6px;
}

.contact-email{
  display:block;
  font-size:18px;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  margin-bottom:6px;
  transition:color 0.3s ease;
}

.contact-email:hover{
  color:var(--red);
}

.contact-desc{
  font-size:14px;
  color:var(--text-muted);
  margin:0;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{
  padding:60px 0 40px;
  border-top:1px solid var(--line);
  background:var(--bg-elevated);
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}

.footer-brand{
  text-align:center;
}

.footer-brand .brand-logo{
  height:50px;
}

.footer-tagline{
  font-size:14px;
  color:var(--text-secondary);
  margin-top:12px;
}

.footer-links{
  display:flex;
  gap:32px;
}

.footer-links a{
  font-size:14px;
  font-weight:600;
  color:var(--text-secondary);
  text-decoration:none;
  transition:color 0.3s ease;
}

.footer-links a:hover{
  color:var(--text);
}

.footer-social{
  display:flex;
  gap:16px;
}

.social-link{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--line);
  border-radius:50%;
  color:var(--text);
  transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.social-link:hover{
  background:var(--red);
  color:white;
  transform:translateY(-2px);
}

.social-link svg{
  width:20px;
  height:20px;
}

.footer-meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--text-muted);
}

.footer-divider{
  opacity:0.5;
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].revealed{
  opacity:1;
  transform:translateY(0);
}

[data-reveal="up"]{
  transform:translateY(40px);
}

[data-reveal="up"].revealed{
  transform:translateY(0);
}

.reveal-text{
  opacity:0;
  transform:translateY(20px);
}

.reveal-text.revealed{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================
   WORDPRESS SPECIFIC
   ============================================ */
.admin-bar .site-header{
  top:32px;
}

@media screen and (max-width:782px){
  .admin-bar .site-header{
    top:46px;
  }
}

/* WordPress Alignment */
.alignleft{float:left;margin-right:20px}
.alignright{float:right;margin-left:20px}
.aligncenter{display:block;margin:0 auto}

/* WordPress Gallery */
.gallery{display:grid;gap:16px}
.gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.gallery-columns-3{grid-template-columns:repeat(3,1fr)}
.gallery-columns-4{grid-template-columns:repeat(4,1fr)}

/* WordPress Captions */
.wp-caption{max-width:100%}
.wp-caption-text{font-size:14px;color:var(--text-muted);margin-top:8px}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px){
  .hero-logo{max-width:320px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-stat{justify-content:flex-start}
  .cards{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:repeat(2,1fr)}
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .contact-wrapper{grid-template-columns:1fr}
  .stats-row{gap:48px}
  .newsletter-content{flex-direction:column;gap:32px;text-align:center}
  .newsletter-form{max-width:100%;width:100%}
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:80px;left:0;right:0;background:var(--bg-elevated);flex-direction:column;padding:20px;border-bottom:1px solid var(--line)}
  .nav.active{display:flex}
}

@media (max-width:768px){
  .hero-logo{max-width:280px}
  .section-title{font-size:36px}
  .hero{padding:120px 0 80px}
  .section{padding:70px 0}
  .cards{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}
  .social-grid{grid-template-columns:1fr}
  .contact-wrapper{grid-template-columns:1fr}
  .contact-form .form-row{grid-template-columns:1fr}
  .stats-row{flex-direction:column;gap:32px}
  .stat-number{font-size:64px}
  .newsletter-card{padding:40px 24px}
  .form-group{flex-direction:column}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:20px}
  .header-inner{height:70px}
}

@media (max-width:480px){
  .hero-logo{max-width:240px}
  .stat-card{padding:24px}
  .stat-number{font-size:56px}
  .btn{width:100%}
  .hero-cta{flex-direction:column}
}