/* ===================================================================
   REZCA | Marketing Agency Site
   Shared stylesheet
=================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Design Tokens ---------- */
:root{
  --black:        #050505;
  --bg:           #050505;
  --bg-elevated:  #0a0c10;
  --surface:      #10131a;
  --surface-2:    #161a22;
  --border:       #20242e;

  --primary:      #1F74FF;
  --primary-light:#3D8BFF;
  --primary-dark: #0F4FCC;
  --accent-text:  #1A6FFF;

  --white:        #F5F5F5;
  --off-white:    #E8ECF3;
  --muted:        #8A94A6;
  --muted-2:      #5B6472;

  --success:      #21D07A;

  --font-head: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container: 1240px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight:600; line-height:1.12; letter-spacing:-0.01em; }
::selection{ background: var(--primary); color:#fff; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--primary-dark); }

/* ---------- Layout helpers ---------- */
.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.section{ padding: 120px 0; position: relative; }
.section-sm{ padding: 72px 0; }
@media (max-width: 768px){
  .section{ padding: 80px 0; }
  .section-sm{ padding: 56px 0; }
  .container{ padding: 0 20px; }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:'';
  width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  display:inline-block;
}

.section-head{ max-width: 680px; margin-bottom: 64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 18px; }
.section-head p{ color: var(--muted); font-size: 1.08rem; }

.grad-text{
  background: linear-gradient(100deg, var(--white) 20%, var(--primary-light) 55%, var(--primary) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 100px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  isolation: isolate;
}
.btn svg{ width:16px; height:16px; transition: transform .3s var(--ease); }

.btn-primary{
  background: linear-gradient(135deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(31,116,255,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -10px rgba(31,116,255,.85), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover svg{ transform: translateX(3px); }

.btn-ghost{
  background: rgba(245,245,245,0.03);
  color: var(--white);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{
  border-color: rgba(61,139,255,.6);
  background: rgba(31,116,255,.08);
  transform: translateY(-3px);
}

.btn-sm{ padding: 12px 22px; font-size: 13px; }
.btn-block{ width:100%; }

.btn-magnetic{ will-change: transform; }

/* ---------- Preloader ---------- */
#preloader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--black);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader .mark{
  width: 56px; height:56px;
  animation: pulseMark 1.4s ease-in-out infinite;
}
@keyframes pulseMark{
  0%,100%{ opacity:.4; transform: scale(.92); }
  50%{ opacity:1; transform: scale(1); }
}

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));
  z-index: 2100;
  transition: width .08s linear;
  box-shadow: 0 0 12px rgba(61,139,255,.7);
}

/* ---------- Custom cursor (desktop only) ---------- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 2000;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width:6px; height:6px; background: var(--primary-light);
}
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(61,139,255,.55);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.active{
  width:60px; height:60px;
  background: rgba(31,116,255,.12);
  border-color: rgba(61,139,255,.9);
}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ---------- Background ambience ---------- */
.bg-glow{
  position: absolute; z-index:0; pointer-events:none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
}
.noise-overlay{
  position: fixed; inset:0; pointer-events:none; z-index:1;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

canvas#network{
  position: absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity: .55;
}

/* ---------- Navbar ---------- */
header#site-header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 26px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
header#site-header.scrolled{
  padding: 14px 0;
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 30px; width:auto; }
.brand span{
  font-family: var(--font-head); font-weight:700; font-size: 1.15rem;
  letter-spacing: 0.06em;
}

nav.primary-nav ul{ display:flex; align-items:center; gap: 8px; }
nav.primary-nav a{
  position: relative;
  padding: 10px 16px;
  font-size: 14px; font-weight:500;
  color: var(--off-white);
  border-radius: 100px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
nav.primary-nav a:hover{ color:#fff; background: rgba(255,255,255,.05); }
nav.primary-nav a.active{ color:#fff; }
nav.primary-nav a.active::after{
  content:'';
  position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 2px;
}

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; z-index:1200; position:relative;
  width: 40px; height:40px; align-items:center; justify-content:center;
  border-radius: 50%; border:1px solid var(--border);
}
.nav-toggle span{
  width:18px; height:2px; background:#fff; display:block; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  nav.primary-nav{
    position: fixed; inset:0; left: auto; width: min(78vw, 360px);
    background: rgba(8,9,13,.98); backdrop-filter: blur(20px);
    border-left: 1px solid var(--border);
    padding: 110px 36px 40px;
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    z-index: 1100;
  }
  nav.primary-nav.open{ transform: translateX(0); }
  nav.primary-nav ul{ flex-direction:column; align-items:flex-start; gap: 6px; width:100%; }
  nav.primary-nav a{ display:block; width:100%; padding: 14px 16px; font-size:16px; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-scrim{
    position: fixed; inset:0; background: rgba(0,0,0,.5); z-index:1050;
    opacity:0; pointer-events:none; transition: opacity .4s var(--ease);
  }
  .nav-scrim.open{ opacity:1; pointer-events:auto; }

  /* backdrop-filter on the scrolled header creates a CSS containing block,
     which breaks position:fixed on the nested mobile nav panel (it ends up
     anchored to the header's small box instead of the viewport). Drop the
     blur on mobile and use a solid background instead so the full-screen
     menu still opens correctly. */
  header#site-header.scrolled{
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(5,5,5,.94);
  }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-top: 120px; padding-bottom: 56px;
  overflow: hidden;
}
.hero-inner{ position:relative; z-index:2; }
.hero-logo{
  width: 68px; margin-bottom: 28px;
  animation: floatMark 4.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(31,116,255,.45));
}
@keyframes floatMark{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.hero h1{
  font-size: clamp(2.6rem, 6vw, 5rem);
  max-width: 15ch;
  margin-bottom: 26px;
}
.hero .lede{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 44px;
}
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom: 44px; }

.hero-stats{
  display:grid; grid-template-columns: repeat(4, auto);
  gap: 40px 56px;
}
.hero-stats .stat-num{
  font-family: var(--font-head); font-size: 2rem; font-weight:700;
  color:#fff;
}
.hero-stats .stat-num span{ color: var(--primary-light); }
.hero-stats .stat-label{
  font-size: 12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted-2); margin-top:6px;
}
@media (max-width: 700px){
  .hero-stats{ grid-template-columns: repeat(2, auto); }
}

.scroll-cue{
  position:relative; margin-top: 36px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--muted-2); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{
  width:1px; height: 40px; background: linear-gradient(var(--primary-light), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  50.01%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Marquee ---------- */
.marquee{
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 22px 0; overflow:hidden; position:relative; background: var(--bg-elevated);
}
.marquee-track{
  display:flex; gap: 56px; white-space:nowrap; width:max-content;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{
  font-family: var(--font-head); font-size: 14px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); display:flex; align-items:center; gap:56px;
}
.marquee-track span i{ color: var(--primary-light); font-style:normal; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Cards ---------- */
.grid{ display:grid; gap: 28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 32px;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card::before{
  content:'';
  position:absolute; inset:-1px;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(61,139,255,.18), transparent 70%);
  opacity:0; transition: opacity .4s var(--ease);
  pointer-events:none;
}
.card:hover::before{ opacity:1; }
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(61,139,255,.4);
  box-shadow: 0 24px 48px -24px rgba(31,116,255,.35);
}
.card .icon-badge{
  width: 52px; height:52px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(31,116,255,.22), rgba(61,139,255,.06));
  border: 1px solid rgba(61,139,255,.3);
  margin-bottom: 22px;
  color: var(--primary-light);
}
.card .icon-badge svg{ width:24px; height:24px; }
.card h3{ font-size: 1.28rem; margin-bottom: 12px; }
.card p{ color: var(--muted); font-size: .96rem; }
.card .tag-list{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.card .tag-list li{
  font-size: 11.5px; letter-spacing:.04em; text-transform:uppercase;
  padding: 6px 12px; border-radius:100px;
  border:1px solid var(--border); color: var(--muted);
}
.card-link{
  margin-top: 22px; display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head); font-size: 13.5px; font-weight:600; color: var(--primary-light);
}
.card-link svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.card:hover .card-link svg{ transform: translateX(4px); }

/* ---------- Numbered process ---------- */
.process-list{ display:flex; flex-direction:column; }
.process-item{
  display:grid; grid-template-columns: 120px 1fr; gap: 32px;
  padding: 46px 0; border-top: 1px solid var(--border);
  position: relative;
}
.process-item:last-child{ border-bottom: 1px solid var(--border); }
.process-num{
  font-family: var(--font-head); font-size: 3.2rem; font-weight:700;
  background: linear-gradient(180deg, var(--primary-light), var(--primary-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1;
}
.process-body h3{ font-size: 1.5rem; margin-bottom: 12px; }
.process-body p{ color: var(--muted); max-width: 640px; margin-bottom:18px; }
.process-body .sub-points{ display:grid; gap:10px; }
.process-body .sub-points li{
  display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color: var(--off-white);
}
.process-body .sub-points li svg{ width:16px; height:16px; margin-top:3px; flex-shrink:0; color: var(--success); }
@media (max-width: 700px){
  .process-item{ grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Timeline (beginning stages) ---------- */
.stage-track{
  display:grid; grid-template-columns: repeat(3,1fr); gap:2px;
  background: var(--border); border-radius: var(--radius); overflow:hidden;
  margin-top: 30px;
}
.stage{
  background: var(--surface); padding: 34px 28px;
}
.stage h4{ font-family:var(--font-head); font-size:1.05rem; margin-bottom:14px; color: var(--primary-light); }
.stage ul li{ font-size:.9rem; color: var(--muted); padding: 6px 0; border-top: 1px dashed var(--border); }
.stage ul li:first-child{ border-top:none; }
@media (max-width: 820px){ .stage-track{ grid-template-columns: 1fr; } }

/* ---------- Project / case study ---------- */
.project-feature{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:0;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden;
  background: var(--surface);
}
.project-media{ position:relative; overflow:hidden; min-height: 420px; background: linear-gradient(160deg, var(--surface-2), var(--bg-elevated)); }
.project-media img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  transition: transform 1.4s var(--ease);
  transform: scale(1.06);
}
.project-feature:hover .project-media img{ transform: scale(1.12) rotate(.4deg); }
.project-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,5,5,.85));
}
.project-media .media-badge{
  position:absolute; top:22px; left:22px; z-index:2;
  padding: 8px 16px; border-radius:100px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  font-family: var(--font-head); font-weight:600;
  background: rgba(5,5,5,.55); border: 1px solid rgba(61,139,255,.5); backdrop-filter: blur(6px);
  color: var(--primary-light);
}
.project-info{ padding: 52px 48px; display:flex; flex-direction:column; justify-content:center; }
.project-info .client-stats{ display:flex; gap:28px; margin: 26px 0 30px; flex-wrap:wrap; }
.project-info .client-stats div{ }
.project-info .client-stats .n{ font-family:var(--font-head); font-size:1.5rem; font-weight:700; color:#fff; }
.project-info .client-stats .l{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.project-info h3{ font-size: 2rem; margin-bottom:8px; }
.project-info .role{ color: var(--primary-light); font-size:.9rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; }
.project-info p.desc{ color: var(--muted); margin-bottom: 10px; }
.project-info .services-used{ display:flex; flex-wrap:wrap; gap:8px; margin: 22px 0 30px; }
.project-info .services-used li{
  font-size:12px; padding:7px 14px; border-radius:100px; border:1px solid var(--border); color: var(--off-white);
}
@media (max-width: 900px){
  .project-feature{ grid-template-columns:1fr; }
  .project-media{ min-height: 280px; }
  .project-info{ padding: 40px 28px; }
}

.coming-soon-card{
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  padding: 64px 32px; text-align:center; margin-top: 32px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 14px);
}
.coming-soon-card h3{ font-size:1.5rem; margin-bottom:14px; }
.coming-soon-card p{ color:var(--muted); max-width:520px; margin: 0 auto 26px; }

/* ---------- Stats band ---------- */
.stats-band{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--border); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden;
}
.stats-band .cell{ background: var(--surface); padding: 40px 24px; text-align:center; }
.stats-band .cell .num{ font-family:var(--font-head); font-size:2.4rem; font-weight:700; color:#fff; }
.stats-band .cell .lab{ margin-top:8px; font-size:12.5px; color:var(--muted); letter-spacing:.04em; }
@media (max-width: 800px){ .stats-band{ grid-template-columns: repeat(2,1fr); } }

/* ---------- CTA banner ---------- */
.cta-banner{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 76px 56px;
  text-align:center;
  overflow:hidden;
  background: radial-gradient(circle at 30% 20%, rgba(31,116,255,.35), transparent 55%), linear-gradient(160deg, #0b0e14, #05070b);
  border: 1px solid var(--border);
}
.cta-banner h2{ font-size: clamp(1.8rem,4vw,2.6rem); max-width: 18ch; margin: 0 auto 20px; }
.cta-banner p{ color: var(--muted); max-width: 520px; margin: 0 auto 36px; }
.cta-banner .actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
@media (max-width: 700px){ .cta-banner{ padding: 52px 26px; } }

/* ---------- Timeline dots for outreach etc ---------- */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center;
}
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Value / approach list ---------- */
.value-row{
  display:grid; grid-template-columns: 60px 1fr; gap:22px;
  padding: 28px 0; border-top: 1px solid var(--border);
}
.value-row:last-child{ border-bottom:1px solid var(--border); }
.value-row .vnum{ font-family: var(--font-head); color: var(--muted-2); font-size:.95rem; }
.value-row h4{ font-size:1.15rem; margin-bottom:8px; }
.value-row p{ color:var(--muted); font-size:.94rem; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); }
.field input, .field select, .field textarea{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 15px 16px; color:#fff; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--primary-light);
  box-shadow: 0 0 0 4px rgba(31,116,255,.16);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-2); }
@media (max-width: 700px){ .form-grid{ grid-template-columns:1fr; } }

.form-error{
  display:none; align-items:center; gap:10px;
  background: rgba(255,90,90,.08); border:1px solid rgba(255,90,90,.35);
  color:#ffb4b4; border-radius: var(--radius); padding: 14px 16px; margin-bottom:22px;
  font-size:.92rem; line-height:1.5;
}
.form-error.show{ display:flex; }

.form-success{
  display:none; text-align:center; padding: 60px 20px;
}
.form-success.show{ display:block; }
.form-success .check{
  width:70px; height:70px; border-radius:50%; margin:0 auto 26px;
  background: rgba(33,208,122,.12); border:1px solid rgba(33,208,122,.5);
  display:flex; align-items:center; justify-content:center; color: var(--success);
}
.form-success .check svg{ width:30px; height:30px; }

.contact-info-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 30px; margin-bottom: 18px;
}
.contact-info-card h4{ font-family:var(--font-head); font-size:1rem; margin-bottom:8px; color:#fff; }
.contact-info-card p{ color:var(--muted); font-size:.92rem; }

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--border);
  padding: 72px 0 32px;
  position: relative;
  background: var(--bg-elevated);
}
.footer-top{
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px;
  padding-bottom: 56px; margin-bottom: 40px; border-bottom: 1px solid var(--border);
}
.footer-brand img{ height:32px; margin-bottom:18px; }
.footer-brand p{ color: var(--muted); font-size:.92rem; max-width: 320px; margin-bottom: 22px; }
.footer-col h5{
  font-family: var(--font-head); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--muted-2); margin-bottom: 18px;
}
.footer-col ul li{ margin-bottom: 12px; }
.footer-col a{ color: var(--off-white); font-size:.94rem; transition: color .3s var(--ease); }
.footer-col a:hover{ color: var(--primary-light); }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease);
}
.social-row a:hover{ border-color: var(--primary-light); background: rgba(31,116,255,.12); color: var(--primary-light); }
.social-row svg{ width:16px; height:16px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-size: 13px; color: var(--muted-2);
}
@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ---------- Reveal animation ---------- */
[data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform: translateY(0); }
[data-reveal-scale]{ opacity:0; transform: scale(.94); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal-scale].in-view{ opacity:1; transform:scale(1); }

/* stagger children */
[data-stagger] > *{
  opacity:0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-stagger].in-view > *{ opacity:1; transform:translateY(0); }
[data-stagger].in-view > *:nth-child(1){ transition-delay: .05s; }
[data-stagger].in-view > *:nth-child(2){ transition-delay: .14s; }
[data-stagger].in-view > *:nth-child(3){ transition-delay: .23s; }
[data-stagger].in-view > *:nth-child(4){ transition-delay: .32s; }
[data-stagger].in-view > *:nth-child(5){ transition-delay: .41s; }
[data-stagger].in-view > *:nth-child(6){ transition-delay: .50s; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding: 168px 0 80px; position:relative; overflow:hidden;
}
.page-hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 16ch; }
.page-hero p.lede{ color: var(--muted); max-width: 560px; margin-top:20px; font-size:1.08rem; }
.breadcrumb{
  display:flex; align-items:center; gap:8px; font-size:13px; color: var(--muted-2); margin-bottom: 22px;
}
.breadcrumb a:hover{ color: var(--primary-light); }

/* ---------- Misc ---------- */
.divider{ height:1px; background: var(--border); width:100%; margin: 0; }
.tilt{ transform-style: preserve-3d; will-change: transform; }
.badge-soft{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px; font-size:12.5px; font-weight:600;
  background: rgba(33,208,122,.1); border:1px solid rgba(33,208,122,.35); color: var(--success);
}
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  padding:9px 16px; border-radius:100px; border:1px solid var(--border); font-size:13px; color: var(--off-white);
  display:inline-flex; align-items:center; gap:8px;
}
.pill svg{ width:14px; height:14px; color: var(--primary-light); }

.quote-block{
  border-left: 2px solid var(--primary);
  padding: 6px 0 6px 26px;
  font-family: var(--font-head); font-size: 1.3rem; font-weight:500; color:#fff;
  max-width: 640px;
}
.quote-block cite{ display:block; margin-top:16px; font-family: var(--font-body); font-size:.85rem; color: var(--muted); font-style:normal; }