/* ===================================================================
   VIRTUA CONNECT — DESIGN TOKENS
=================================================================== */
:root{
  --bg:            #0A0B0D;
  --bg-elevated:   #131519;
  --bg-elevated-2: #191B20;
  --line:          #232529;
  --line-bright:   #34373D;

  --text:          #F2F1ED;
  --text-muted:    #8B8D93;
  --text-faint:    #7E8088;

  --primary:       #F89724;
  --primary-dim:   #C97318;
  --primary-glow:  rgba(248,151,36,0.35);
  --primary-soft:  rgba(248,151,36,0.10);

  --ok:            #6FCF97;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --container: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  margin:0;
  letter-spacing:-0.02em;
}

p{ margin:0; color:var(--text-muted); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.mono{ font-family:var(--font-mono); }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100px; left:16px;
  background:var(--primary); color:#0A0B0D;
  padding:12px 20px; border-radius:var(--radius-sm);
  font-weight:600; z-index:1000; transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:16px; }

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ===================================================================
   BUTTONS
=================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  border-radius:999px;
  padding:13px 24px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.btn svg{ transition:transform .25s var(--ease-out); flex-shrink:0; }
.btn:hover svg{ transform:translateX(3px); }

.btn--primary{
  background:var(--primary);
  color:#16110A;
  box-shadow:0 0 0 0 var(--primary-glow);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px -6px var(--primary-glow);
}
.btn--primary:active{ transform:translateY(0); }

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line-bright);
}
.btn--ghost:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-2px);
}

.btn--sm{ padding:9px 18px; font-size:0.85rem; }
.btn--lg{ padding:16px 30px; font-size:1rem; }
.btn--block{ width:100%; }

/* ===================================================================
   NAV
=================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav.is-scrolled{
  background:rgba(10,11,13,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.nav__logo{
  display:flex; align-items:center;
  font-family:var(--font-display);
  font-weight:600; font-size:1.1rem;
  flex-shrink:0;
}
.nav__logo img{
  display:block;
  max-height:2.1rem;
  width:auto;
}
.nav__logo-mark{
  width:10px; height:10px; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 12px var(--primary-glow);
}
.nav__logo-accent{ color:var(--primary); }

.nav__links{
  display:flex; gap:32px;
  font-size:0.92rem; font-weight:500; color:var(--text-muted);
}
.nav__links a{ transition:color .2s ease; position:relative; }
.nav__links a:hover{ color:var(--text); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:var(--primary);
  transition:width .25s var(--ease-out);
}
.nav__links a:hover::after{ width:100%; }

.nav__cta{ display:flex; gap:10px; align-items:center; flex-shrink:0; }

.nav__burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
}
.nav__burger span{
  width:22px; height:2px; background:var(--text);
  transition:transform .25s ease, opacity .25s ease;
}

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:4px;
  padding:8px 24px 24px;
  background:rgba(10,11,13,0.98);
  border-bottom:1px solid var(--line);
}
.mobile-menu a{
  padding:14px 0;
  font-size:1rem; font-weight:500;
  border-bottom:1px solid var(--line);
}
.mobile-menu .btn{ margin-top:14px; width:100%; }

@media (max-width:880px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .mobile-menu{ display:flex; }
}

/* ===================================================================
   HERO
=================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:140px 24px 32px;
  overflow:hidden;
  background:
    radial-gradient(50% 60% at 50% 30%, rgba(248,151,36,0.08) 0%, transparent 70%),
    var(--bg);
}
.hero__canvas-wrap{
  position:absolute; inset:0;
  z-index:0;
}
#orbCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.hero__vignette{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(10,11,13,0) 0%, rgba(10,11,13,0.55) 65%, rgba(10,11,13,0.95) 100%),
    linear-gradient(180deg, rgba(10,11,13,0.2) 0%, rgba(10,11,13,0) 25%, rgba(10,11,13,0.85) 100%);
  pointer-events:none;
}

.hero__content{
  position:relative; z-index:2;
  max-width:var(--container);
  margin:auto auto 0;
  width:100%;
  text-align:center;
  padding-bottom:48px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--primary);
  font-weight:500;
}
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 8px var(--primary-glow);
}
.hero__eyebrow{ margin-bottom:24px; }

.hero__headline{
  font-size:clamp(2.6rem, 7vw, 6rem);
  font-weight:700;
  line-height:0.96;
  letter-spacing:-0.03em;
  margin:0 auto 28px;
  max-width:14ch;
}
.hero__line{ display:block; overflow:hidden; padding-bottom:0.04em; }
.hero__headline em{
  font-style:normal;
  color:var(--primary);
  position:relative;
}

.hero__sub{
  font-size:clamp(1rem, 1.4vw, 1.125rem);
  line-height:1.6;
  color:var(--text-muted);
  max-width:620px;
  margin:0 auto 40px;
}

.hero__actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-bottom:64px;
}

.hero__stats{
  display:flex; justify-content:center; gap:48px; flex-wrap:wrap;
  margin:0; padding-top:36px;
  border-top:1px solid var(--line);
  max-width:640px;
  margin-inline:auto;
}
.hero__stat{ text-align:left; }
.hero__stat dt{
  font-size:0.78rem; color:var(--text-faint);
  margin:0 0 6px; font-weight:500;
}
.hero__stat dd{
  margin:0; font-size:1rem; font-weight:600; color:var(--text);
}
.hero__stat .mono{ color:var(--primary); }

.hero__scroll-cue{
  position:relative; z-index:2;
  margin:0 auto;
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.7rem;
  color:var(--text-faint); letter-spacing:0.08em; text-transform:uppercase;
}
.hero__scroll-line{
  width:1px; height:36px; background:var(--line-bright); position:relative; overflow:hidden;
}
.hero__scroll-fill{
  position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--primary);
  animation:scrollFill 2s ease-in-out infinite;
}
@keyframes scrollFill{
  0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; }
}

@media (prefers-reduced-motion: reduce){
  .hero__scroll-fill{ animation:none; top:0; }
}

/* ===================================================================
   SECTION HEAD (shared)
=================================================================== */
.section-head{
  max-width:680px;
  margin:0 0 56px;
}
.section-head h2{
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  margin:14px 0 16px;
}
.section-head__sub{
  font-size:1.05rem;
  color:var(--text-muted);
}

section{ position:relative; padding:120px 0; }

/* ===================================================================
   PROBLEMS
=================================================================== */
.problems{ background:var(--bg); }

.problem-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.problem-card{
  background:var(--bg-elevated);
  padding:36px 32px;
  position:relative;
  transition:background .3s ease;
}
.problem-card:hover{ background:var(--bg-elevated-2); }
.problem-card__signal{
  display:block; width:8px; height:8px; border-radius:50%;
  background:var(--primary); margin-bottom:20px;
  box-shadow:0 0 10px var(--primary-glow);
  opacity:0.85;
}
.problem-card h3{
  font-size:1.15rem; margin-bottom:10px; color:var(--text);
}
.problem-card p{ font-size:0.95rem; }

.problem-card--cta{
  background:linear-gradient(135deg, rgba(248,151,36,0.14), rgba(248,151,36,0.03));
  display:flex; flex-direction:column; justify-content:center;
}
.problem-card--cta h3{ color:var(--primary); }
.link-arrow{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px; font-weight:600; font-size:0.92rem; color:var(--primary);
}
.link-arrow svg{ transition:transform .25s var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(4px); }

@media (max-width:880px){
  .problem-grid{ grid-template-columns:1fr; }
}

/* ===================================================================
   USP
=================================================================== */
.usp{
  background:
    radial-gradient(60% 100% at 50% 0%, var(--primary-soft) 0%, transparent 70%),
    var(--bg-elevated);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
  padding:100px 0;
}
.usp__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.usp__formula{
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap;
  font-family:var(--font-display);
}
.usp__term{
  font-size:clamp(1.5rem, 4vw, 2.6rem);
  font-weight:700;
  padding:10px 22px;
  border:1px solid var(--line-bright);
  border-radius:var(--radius-md);
  background:var(--bg);
  letter-spacing:0.02em;
}
.usp__op{
  font-size:clamp(1.3rem, 3vw, 2rem);
  color:var(--text-faint);
}
.usp__op--eq{ color:var(--primary); }
.usp__result{
  font-size:clamp(1.5rem, 4vw, 2.6rem);
  font-weight:700;
  color:var(--primary);
}
.usp__sub{
  max-width:560px; font-size:1.05rem;
}

@media (max-width:640px){
  .usp__formula{ flex-direction:column; gap:12px; }
}

/* ===================================================================
   SERVICES
=================================================================== */
.service-list{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.service-row{
  display:grid;
  grid-template-columns:80px 1fr 200px;
  align-items:center;
  gap:32px;
  padding:36px 8px;
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.service-row:hover{ background:rgba(248,151,36,0.03); }
.service-row__index{
  font-size:0.9rem; color:var(--primary); font-weight:500;
}
.service-row__body h3{
  font-size:1.4rem; margin-bottom:8px; color:var(--text);
}
.service-row__body p{ font-size:0.98rem; max-width:520px; }

.service-row__visual{ position:relative; height:2px; }
.pulse-line{
  position:relative; width:100%; height:1px; background:var(--line-bright);
  overflow:visible;
}
.pulse-line::after{
  content:''; position:absolute; top:50%; left:0;
  width:8px; height:8px; border-radius:50%;
  background:var(--primary);
  transform:translateY(-50%);
  box-shadow:0 0 12px 2px var(--primary-glow);
  animation:pulseTravel 3.2s ease-in-out infinite;
}
.service-row:nth-child(2) .pulse-line::after{ animation-delay:.5s; }
.service-row:nth-child(3) .pulse-line::after{ animation-delay:1s; }
.service-row:nth-child(4) .pulse-line::after{ animation-delay:1.5s; }
.service-row:nth-child(5) .pulse-line::after{ animation-delay:2s; }

@keyframes pulseTravel{
  0%{ left:0; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pulse-line::after{ animation:none; left:50%; opacity:1; }
}

@media (max-width:780px){
  .service-row{ grid-template-columns:50px 1fr; }
  .service-row__visual{ display:none; }
}

/* ===================================================================
   INDUSTRIES — horizontal stacked card rail
=================================================================== */
.industries{ padding-bottom:80px; }

.industry-rail-wrap{
  position:relative;
  margin-top:8px;
}
.industry-rail-wrap::after{
  /* fade hint that more cards continue off-screen */
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:64px;
  background:linear-gradient(90deg, transparent, var(--bg) 88%);
  pointer-events:none;
}

.industry-rail{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:8px 24px 28px;
  margin:0 calc(50% - 50vw);
  padding-left:max(24px, calc(50% - var(--container) / 2));
  padding-right:max(24px, calc(50% - var(--container) / 2));
  scrollbar-width:thin;
  scrollbar-color:var(--line-bright) transparent;
  border-radius:var(--radius-lg);
}
.industry-rail:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:4px;
}
.industry-rail::-webkit-scrollbar{ height:6px; }
.industry-rail::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:99px; }
.industry-rail::-webkit-scrollbar-track{ background:transparent; }

.industry-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:272px;
  min-height:300px;
  border-radius:var(--radius-lg);
  padding:28px 26px;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease-out), border-color .35s ease;
}
.industry-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-bright);
}

.industry-card__icon{
  width:40px; height:40px;
  color:var(--primary);
  margin-bottom:auto;
  flex-shrink:0;
}
.industry-card h3{
  font-size:1.15rem;
  color:var(--text);
  margin:24px 0 10px;
  position:relative;
}
.industry-card p{
  font-size:0.92rem;
  line-height:1.55;
  position:relative;
}

/* Each card carries its own gradient mood, built from the same accent
   so the rail reads as one family rather than a flat repeated chip. */
.industry-card--ecom{
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(248,151,36,0.16) 0%, transparent 55%),
    linear-gradient(160deg, #15171B 0%, #0E1013 100%);
}
.industry-card--coach{
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(248,151,36,0.12) 0%, transparent 55%),
    linear-gradient(200deg, #131419 0%, #0B0C0F 100%);
}
.industry-card--agency{
  background:
    radial-gradient(100% 80% at 50% 100%, rgba(248,151,36,0.14) 0%, transparent 60%),
    linear-gradient(180deg, #16151A 0%, #0D0E11 100%);
}
.industry-card--health{
  background:
    radial-gradient(110% 90% at 0% 100%, rgba(248,151,36,0.1) 0%, transparent 55%),
    linear-gradient(150deg, #14171A 0%, #0C0D10 100%);
}
.industry-card--realestate{
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(248,151,36,0.15) 0%, transparent 55%),
    linear-gradient(170deg, #16161B 0%, #0E0F12 100%);
}
.industry-card--saas{
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(248,151,36,0.13) 0%, transparent 60%),
    linear-gradient(210deg, #131418 0%, #0B0C0E 100%);
}
.industry-card--edu{
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(248,151,36,0.11) 0%, transparent 55%),
    linear-gradient(190deg, #151619 0%, #0D0E10 100%);
}
.industry-card--local{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(248,151,36,0.17) 0%, transparent 60%),
    linear-gradient(165deg, #161519 0%, #0E0D10 100%);
}

@media (max-width:560px){
  .industry-card{ width:228px; min-height:270px; padding:24px 22px; }
}


/* ===================================================================
   PRICING
=================================================================== */
.pricing{ background:var(--bg-elevated); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.pricing-table{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg);
  margin-bottom:56px;
}
.pricing-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  padding:22px 28px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.pricing-row:last-child{ border-bottom:none; }
.pricing-row--head{
  background:var(--bg-elevated-2);
  font-family:var(--font-mono);
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-faint);
  padding:16px 28px;
}
.pricing-row__tier{ font-size:1.05rem; font-weight:500; color:var(--text); }
.pricing-row__price{ font-size:1.2rem; font-weight:600; color:var(--primary); }
.pricing-row__price span{ font-size:0.85rem; color:var(--text-faint); font-weight:400; margin-left:2px; }

.pricing-row--featured{
  background:rgba(248,151,36,0.06);
}
.pricing-row__badge{
  position:absolute; top:-1px; right:28px;
  background:var(--primary); color:#16110A;
  font-size:0.65rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:0 0 6px 6px;
}

.fup{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-bottom:48px;
}
.fup__col{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 30px;
  background:var(--bg);
}
.fup__col h3{
  display:flex; align-items:center; gap:10px;
  font-size:1.05rem; margin-bottom:18px; color:var(--text);
}
.fup__icon{ width:18px; height:18px; border-radius:50%; flex-shrink:0; position:relative; }
.fup__icon--ok{ background:rgba(111,207,151,0.15); }
.fup__icon--ok::after{
  content:''; position:absolute; inset:5px; border-radius:1px;
  border-right:2px solid var(--ok); border-bottom:2px solid var(--ok);
  transform:rotate(45deg) translate(-1px,-2px); width:5px; height:9px;
}
.fup__icon--add{ background:var(--primary-soft); }
.fup__icon--add::after{
  content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-weight:700; font-size:0.9rem;
}
.fup__col ul{ display:flex; flex-direction:column; gap:12px; }
.fup__col li{
  font-size:0.95rem; color:var(--text-muted);
  padding-left:18px; position:relative;
}
.fup__col li::before{
  content:''; position:absolute; left:0; top:9px;
  width:4px; height:4px; border-radius:50%; background:var(--text-faint);
}

.pricing-cta{ text-align:center; }

@media (max-width:780px){
  .fup{ grid-template-columns:1fr; }
  .pricing-row{ padding:18px 20px; }
}

/* ===================================================================
   ABOUT
=================================================================== */
.about{ text-align:center; }
.about__inner{ max-width:780px; }
.about h2{
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  margin:16px 0 24px;
}
.about__body{ font-size:1.08rem; }

/* ===================================================================
   CONTACT
=================================================================== */
.contact{
  background:
    radial-gradient(50% 60% at 100% 0%, var(--primary-soft) 0%, transparent 60%),
    var(--bg-elevated);
  border-top:1px solid var(--line);
}
.contact__inner{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
}
.contact__intro h2{ font-size:clamp(1.8rem, 3.4vw, 2.4rem); margin:14px 0 18px; }
.contact__points{
  margin-top:32px; display:flex; flex-direction:column; gap:14px;
}
.contact__points li{
  display:flex; align-items:center; gap:10px;
  font-size:0.95rem; color:var(--text-muted);
}
.contact__points li::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--primary); flex-shrink:0;
  box-shadow:0 0 8px var(--primary-glow);
}

.contact__form{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  display:flex; flex-direction:column; gap:20px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{
  font-size:0.85rem; font-weight:500; color:var(--text-muted);
}
.form-field__optional{ color:var(--text-faint); font-weight:400; }

.form-field input,
.form-field select,
.form-field textarea{
  background:var(--bg-elevated);
  border:1px solid var(--line-bright);
  border-radius:var(--radius-sm);
  padding:13px 14px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--text-faint); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.form-field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238B8D93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px;
}
.form-field textarea{ resize:vertical; min-height:90px; font-family:var(--font-body); }

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color:#E5604E;
}
.form-error{
  font-size:0.8rem; color:#E5604E; min-height:1em; display:block;
}

.form-status{
  text-align:center; font-size:0.9rem; min-height:1.2em; margin:0;
}
.form-status.is-success{ color:var(--ok); }
.form-status.is-error{ color:#E5604E; }

@media (max-width:880px){
  .contact__inner{ grid-template-columns:1fr; gap:40px; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .contact__form{ padding:24px 20px; }
}

/* ===================================================================
   FOOTER
=================================================================== */
.footer{
  border-top:1px solid var(--line);
  padding:40px 0;
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
}
.footer__links{ display:flex; gap:28px; font-size:0.9rem; color:var(--text-muted); }
.footer__links a:hover{ color:var(--primary); }
.footer__copy{ font-size:0.85rem; color:var(--text-faint); }

@media (max-width:640px){
  .footer__inner{ flex-direction:column; text-align:center; }
}

/* ===================================================================
   GENERIC RESPONSIVE / SECTION SPACING
=================================================================== */
@media (max-width:880px){
  section{ padding:88px 0; }
  .hero{ padding-top:120px; }
}

/* ===================================================================
   SCROLL-REVEAL BASE STATE (GSAP controls the animation in)
=================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); }
[data-card]{ opacity:0; transform:translateY(24px); }

.no-js [data-reveal],
.no-js [data-card]{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-card]{ opacity:1; transform:none; }
}