/* =====================================================================
   MARKETING4YOUTODAY — Design System
   Vibe: Ethereal Glass (deep teal/OLED black, glowing mesh gradients)
   Layout: Editorial Split hero + Asymmetrical Bento grids
   ===================================================================== */

:root{
  color-scheme: dark;
  --ink:           #06090a;
  --bg:            #0d1517;
  --bg-soft:       #131d20;
  --surface:       rgba(255,255,255,0.05);
  --surface-strong:rgba(255,255,255,0.085);
  --border:        rgba(255,255,255,0.13);
  --border-soft:   rgba(255,255,255,0.09);
  --text:          #f5f8f7;
  --text-dim:      rgba(245,248,247,0.68);
  --text-faint:    rgba(245,248,247,0.44);

  --teal-500:      #14b8a0;
  --teal-400:      #2dd4b8;
  --teal-300:      #6ee7d6;
  --lime:          #d7ff3f;
  --lime-dim:      #b8dd2f;

  --grad-brand: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-500) 55%, #0d8a78 100%);
  --grad-mesh-1: radial-gradient(circle at 15% 20%, rgba(20,184,160,0.34), transparent 55%);
  --grad-mesh-2: radial-gradient(circle at 85% 15%, rgba(215,255,63,0.14), transparent 50%);
  --grad-mesh-3: radial-gradient(circle at 50% 100%, rgba(20,184,160,0.22), transparent 60%);

  --radius-xl: 2rem;
  --radius-lg: 1.5rem;
  --radius-md: 1.125rem;
  --radius-sm: 0.75rem;
  --radius-pill: 999px;

  --ease-fluid: cubic-bezier(0.32,0.72,0,1);
  --ease-spring: cubic-bezier(0.22,1,0.36,1);
  --ease-soft: cubic-bezier(0.16,1,0.3,1);

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:auto;
  background:var(--bg);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'General Sans','Plus Jakarta Sans',-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

h1,h2,h3,h4{
  font-family:'Clash Display','General Sans',sans-serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
svg{ display:block; }

::selection{ background:var(--teal-500); color:#06090a; }

/* ---------- Layout helpers ---------- */
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block: clamp(5rem, 10vw, 9rem); position:relative; }
.section-tight{ padding-block: clamp(3rem, 6vw, 5rem); }

/* Fixed noise + mesh background layers */
.bg-mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: var(--grad-mesh-1), var(--grad-mesh-2), var(--grad-mesh-3);
  background-repeat:no-repeat;
}
.bg-noise{
  position:fixed; inset:0; z-index:51; pointer-events:none; opacity:0.035;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.45em 1em; border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--surface);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal-300); font-weight:600;
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 10px 2px rgba(215,255,63,.6);
}

/* ---------- Typography scale ---------- */
.h-display{ font-size:clamp(2.6rem, 6.2vw, 5.6rem); }
.h-1{ font-size:clamp(2.2rem, 4.6vw, 3.8rem); }
.h-2{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); }
.h-3{ font-size:clamp(1.3rem, 2vw, 1.6rem); }
.lede{ font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--text-dim); font-weight:400; line-height:1.65; }
.eyebrow + .h-display, .eyebrow + .h-1{ margin-top:1.1em; }

.text-gradient{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.35rem .35rem .35rem 1.5rem;
  border-radius:var(--radius-pill);
  font-size:.95rem; font-weight:600;
  border:1px solid var(--border);
  background:var(--surface);
  transition: transform .5s var(--ease-fluid), background .5s var(--ease-fluid), border-color .5s var(--ease-fluid);
  isolation:isolate;
}
.btn-icon{
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  transition: transform .55s var(--ease-spring), background .5s var(--ease-fluid);
}
.btn-icon svg{ width:16px; height:16px; transition:transform .5s var(--ease-spring); }
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,0.22); }
.btn:hover .btn-icon{ background:var(--grad-brand); transform:translate(2px,-2px) scale(1.06); }
.btn:hover .btn-icon svg{ transform:translate(1px,-1px); stroke:#06090a; }
.btn:active{ transform:scale(.98) translateY(0); }

.btn-primary{
  background:var(--grad-brand); border-color:transparent; color:#052421; padding:.9rem 1.7rem;
}
.btn-primary .btn-icon{ display:none; }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); }

.btn-lime{
  background:var(--lime); color:#0b1a08; border-color:transparent; padding:.95rem 1.8rem .95rem 1.8rem;
}
.btn-lime .btn-icon{ background:rgba(0,0,0,.12); }
.btn-lime:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.btn-lime:hover .btn-icon{ background:#0b1a08; }
.btn-lime:hover .btn-icon svg{ stroke:var(--lime); }

.btn-ghost{ background:transparent; }

/* ---------- Double-bezel card ---------- */
.shell{
  padding:.4rem; border-radius:var(--radius-xl);
  background:var(--surface); border:1px solid var(--border-soft);
}
.core{
  border-radius:calc(var(--radius-xl) - 0.4rem);
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  height:100%;
}

.card{
  padding:.35rem; border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border-soft);
  transition: transform .6s var(--ease-fluid), border-color .5s var(--ease-fluid), background .5s var(--ease-fluid);
}
.card-core{
  border-radius:calc(var(--radius-lg) - .35rem);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--border-soft);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05);
  padding:1.9rem;
  height:100%;
  display:flex; flex-direction:column; gap:1.1rem;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(20,184,160,0.35); }
.card:hover .card-core{ border-color:rgba(20,184,160,0.18); }

/* ---------- Nav ---------- */
.nav-wrap{
  position:fixed; top:1.1rem; left:0; right:0; z-index:60;
  display:flex; justify-content:center; pointer-events:none;
}
.nav{
  pointer-events:auto;
  display:flex; align-items:center; gap:2.2rem;
  padding:.55rem .6rem .55rem 1.3rem;
  border-radius:var(--radius-pill);
  background:rgba(10,15,16,0.55);
  border:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  transition: background .5s var(--ease-fluid), padding .5s var(--ease-fluid), gap .5s var(--ease-fluid);
  max-width:calc(100vw - 2rem);
}
.nav-logo{ display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem; white-space:nowrap; }
.nav-logo svg{ width:26px; height:26px; }
.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a{
  font-size:.86rem; color:var(--text-dim); font-weight:500; position:relative; padding:.3rem 0;
  transition:color .4s var(--ease-fluid);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--teal-400);
  transition:right .45s var(--ease-spring);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-burger{
  display:none; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--surface-strong);
  border:1px solid var(--border); align-items:center; justify-content:center; position:relative;
}
.nav-burger span{
  position:absolute; width:14px; height:1.5px; background:var(--text); border-radius:2px;
  transition: transform .5s var(--ease-fluid), opacity .3s var(--ease-fluid), top .5s var(--ease-fluid);
}
.nav-burger span:nth-child(1){ top:38%; }
.nav-burger span:nth-child(2){ top:50%; }
.nav-burger span:nth-child(3){ top:62%; }
.nav-burger.active span:nth-child(1){ top:50%; transform:rotate(45deg); }
.nav-burger.active span:nth-child(2){ opacity:0; }
.nav-burger.active span:nth-child(3){ top:50%; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:55;
  background:rgba(6,9,10,0.92);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:1rem; padding: 2rem var(--gutter);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease-fluid), visibility 0s linear .5s;
}
.mobile-menu.active{ opacity:1; visibility:visible; transition:opacity .5s var(--ease-fluid); }
.mobile-menu a{
  font-family:'Clash Display',sans-serif; font-size:clamp(2rem,8vw,3rem); font-weight:500;
  opacity:0; transform:translateY(3rem);
  transition:opacity .6s var(--ease-spring), transform .6s var(--ease-spring);
}
.mobile-menu.active a{ opacity:1; transform:translateY(0); }
.mobile-menu-foot{
  margin-top:2rem; opacity:0; transform:translateY(2rem);
  transition:opacity .6s var(--ease-spring) .3s, transform .6s var(--ease-spring) .3s;
  display:flex; flex-direction:column; gap:.5rem; color:var(--text-dim); font-size:.9rem;
}
.mobile-menu.active .mobile-menu-foot{ opacity:1; transform:translateY(0); }

/* ---------- Reveal utility (GSAP-controlled but has safe default) ---------- */
[data-reveal]{ opacity:0; transform:translateY(2.5rem); filter:blur(6px); }
.reveal-ready [data-reveal]{ transition:none; }

/* ---------- Hero ---------- */
.hero{
  min-height:100dvh; display:flex; align-items:center; position:relative;
  padding-top:8rem; padding-bottom:4rem;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:3rem; align-items:center;
}
.hero-visual{ position:relative; aspect-ratio:1/1.05; }
.hero-badge{
  position:absolute; display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem; border-radius:var(--radius-pill);
  background:rgba(10,15,16,0.7); border:1px solid var(--border);
  backdrop-filter:blur(16px); font-size:.82rem; font-weight:600;
}
.hero-stats{ display:flex; gap:2.4rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:'Clash Display',sans-serif; font-size:1.9rem; }
.hero-stat span{ font-size:.8rem; color:var(--text-faint); }
.hero-cta-row{ display:flex; align-items:center; gap:1.2rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--text-faint); font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase;
}
.hero-scroll-line{ width:1px; height:2.4rem; background:linear-gradient(var(--teal-400), transparent); position:relative; overflow:hidden; }

/* Orb visual */
.orb-stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.orb{
  width:78%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, rgba(110,231,214,0.9), rgba(20,184,160,0.55) 40%, rgba(6,9,10,0.1) 72%);
  filter:blur(0px);
  position:relative;
  box-shadow: 0 0 120px 20px rgba(20,184,160,0.25), inset 0 0 80px rgba(0,0,0,0.35);
}
.orb::after{
  content:''; position:absolute; inset:-18%;
  border-radius:50%; border:1px dashed rgba(255,255,255,0.12);
}
.orb-ring{
  position:absolute; inset:-6%; border-radius:50%; border:1px solid rgba(255,255,255,0.08);
}

/* ---------- Marquee ---------- */
.marquee-wrap{ overflow:hidden; border-block:1px solid var(--border-soft); padding-block:1.6rem; }
.marquee-track{ display:flex; gap:4rem; width:max-content; }
.marquee-track span{
  font-family:'Clash Display',sans-serif; font-size:1.1rem; color:var(--text-faint);
  display:flex; align-items:center; gap:1rem; white-space:nowrap;
}
.marquee-track span::after{ content:'✦'; color:var(--teal-500); font-size:.8rem; }

/* ---------- Section heading row ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3.5rem; flex-wrap:wrap;
}
.section-head .lede{ max-width:420px; }

/* ---------- Bento grid (services) ---------- */
.bento{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem;
}
.bento .card{ grid-column:span 12; }
@media(min-width:860px){
  .bento .card.b-8{ grid-column:span 8; }
  .bento .card.b-4{ grid-column:span 4; }
  .bento .card.b-6{ grid-column:span 6; }
}
.service-icon{
  width:3.2rem; height:3.2rem; border-radius:1rem;
  background:var(--surface-strong); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:transform .6s var(--ease-spring), background .5s var(--ease-fluid);
}
.service-icon svg{ width:22px; height:22px; stroke:var(--teal-300); }
.card:hover .service-icon{ transform:rotate(-8deg) scale(1.08); background:var(--grad-brand); }
.card:hover .service-icon svg{ stroke:#06090a; }
.service-num{ font-family:'Clash Display',sans-serif; color:var(--text-faint); font-size:.85rem; }
.card-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; }
.tag{
  font-size:.72rem; padding:.35rem .7rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.05); border:1px solid var(--border-soft); color:var(--text-dim);
}
.card-link{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--teal-300); margin-top:.3rem; }
.card-link svg{ width:14px; height:14px; transition:transform .5s var(--ease-spring); }
.card:hover .card-link svg{ transform:translate(3px,-3px); }

/* ---------- Case cards ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.5rem; }
.case-card{ grid-column:span 12; }
@media(min-width:860px){ .case-card{ grid-column:span 6; } }
.case-mock{
  border-radius:calc(var(--radius-lg) - .2rem); overflow:hidden; aspect-ratio:16/10;
  background:linear-gradient(150deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border:1px solid var(--border-soft); position:relative;
}
.case-mock-bar{
  display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem;
  background:rgba(255,255,255,0.03); border-bottom:1px solid var(--border-soft);
}
.case-mock-bar span{ width:8px; height:8px; border-radius:50%; background:var(--border); }
.case-mock-bar em{
  font-style:normal; margin-left:.6rem; font-size:.72rem; color:var(--text-faint);
  background:rgba(255,255,255,0.04); padding:.2rem .7rem; border-radius:var(--radius-pill);
}
.case-mock-body{
  position:relative; height:calc(100% - 38px); display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.case-mock-body .glow{ position:absolute; inset:-20%; filter:blur(50px); opacity:.55; }
.case-mock-body svg{ width:64px; height:64px; stroke:var(--teal-300); position:relative; z-index:1; opacity:.85; }
.case-mock-body img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .8s var(--ease-fluid);
}
.case-mock-link:hover .case-mock-body img{ transform:scale(1.035); }
.case-meta{ display:flex; justify-content:space-between; align-items:flex-start; margin-top:1.4rem; gap:1rem; }
.case-placeholder-note{
  font-size:.72rem; color:var(--text-faint); letter-spacing:.04em; margin-top:.35rem;
}
.case-live-badge{
  display:inline-flex; align-items:center; gap:.4em; font-size:.72rem; color:var(--teal-300);
  letter-spacing:.04em; margin-top:.35rem; font-weight:600;
}
.case-live-badge::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--teal-400);
  box-shadow:0 0 8px 1px rgba(45,212,184,.7);
}
.case-mock-link{ display:block; }
.case-mock-link:hover .case-mock-bar em{ color:var(--teal-300); }
.case-link{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600;
  color:var(--teal-300); margin-top:.2rem;
}
.case-link svg{ width:14px; height:14px; transition:transform .5s var(--ease-spring); }
.case-link:hover svg{ transform:translate(3px,-3px); }

/* ---------- "Coming soon" case placeholder (skeleton shimmer, pure CSS) ---------- */
.case-mock-body.coming-soon{
  display:flex; flex-direction:column; justify-content:center; gap:.55rem;
  padding:1.5rem 1.7rem; align-items:stretch;
}
.case-mock-body.coming-soon::before{
  content:''; position:absolute; inset:-30%; opacity:.4; filter:blur(60px);
  background:radial-gradient(circle, rgba(20,184,160,.5), transparent 65%);
  animation:cs-breathe 4.5s ease-in-out infinite;
}
@keyframes cs-breathe{ 0%,100%{ transform:scale(.9); opacity:.28; } 50%{ transform:scale(1.08); opacity:.5; } }
.cs-skel{
  position:relative; border-radius:.5rem; flex-shrink:0;
  background:linear-gradient(100deg, rgba(255,255,255,0.04) 20%, rgba(110,231,214,0.16) 42%, rgba(255,255,255,0.04) 64%);
  background-size:250% 100%;
  animation:cs-shimmer 2.4s ease-in-out infinite;
}
.cs-skel.cs-bar{ width:34%; height:.55rem; border-radius:var(--radius-pill); }
.cs-skel.cs-block{ width:100%; flex:1; min-height:2.6rem; border-radius:.85rem; }
.cs-skel.cs-line{ height:.5rem; }
.cs-skel.cs-line.w-80{ width:78%; }
.cs-skel.cs-line.w-55{ width:52%; }
@keyframes cs-shimmer{
  0%{ background-position:220% 0; }
  100%{ background-position:-220% 0; }
}
.case-coming-badge{
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4em; font-size:.66rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--lime);
  background:rgba(10,15,16,0.72); border:1px solid var(--border); padding:.35em .75em; border-radius:var(--radius-pill);
  backdrop-filter:blur(8px);
}
.case-coming-badge::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--lime);
  animation:cs-blink 1.5s ease-in-out infinite;
}
@keyframes cs-blink{ 0%,100%{ opacity:1; box-shadow:0 0 8px 1px rgba(215,255,63,.7); } 50%{ opacity:.3; box-shadow:none; } }
.case-coming-note{
  display:inline-flex; align-items:center; gap:.4em; font-size:.72rem; color:var(--lime);
  letter-spacing:.04em; margin-top:.35rem; font-weight:600;
}
.case-coming-note::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--lime);
  animation:cs-blink 1.5s ease-in-out infinite;
}

/* ---------- Process steps ---------- */
.process{ display:grid; gap:1rem; }
.process-step{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center;
  padding:1.8rem; border-radius:var(--radius-lg); border:1px solid var(--border-soft);
  background:var(--surface); transition:background .5s var(--ease-fluid), border-color .5s var(--ease-fluid);
}
.process-step:hover{ background:var(--surface-strong); border-color:var(--border); }
.process-num{ font-family:'Clash Display',sans-serif; font-size:2.2rem; color:var(--text-faint); }

/* ---------- Stats strip ---------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.5rem;
}
.stat-card{ text-align:left; }
.stat-card b{ font-family:'Clash Display',sans-serif; font-size:clamp(2.2rem,4vw,3.2rem); display:block; }
.stat-card span{ color:var(--text-faint); font-size:.85rem; }

/* ---------- Testimonial ---------- */
.quote-mark{ font-family:'Clash Display',sans-serif; font-size:3.5rem; color:var(--teal-500); line-height:1; }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-xl); padding:clamp(2.5rem,6vw,5rem);
  background: linear-gradient(135deg, rgba(20,184,160,0.16), rgba(6,9,10,0.4));
  border:1px solid var(--border);
  position:relative; overflow:hidden;
  text-align:center;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(215,255,63,0.12), transparent 60%);
  pointer-events:none;
}

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--border-soft); padding-block:4rem 2rem; position:relative; z-index:2; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-faint); margin-bottom:1.1rem; font-family:'General Sans',sans-serif; font-weight:600; }
.footer-col a, .footer-col p{ display:block; color:var(--text-dim); font-size:.92rem; margin-bottom:.7rem; transition:color .3s; }
.footer-col a:hover{ color:var(--teal-300); }
.footer-bottom{
  border-top:1px solid var(--border-soft); padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  color:var(--text-faint); font-size:.82rem;
}
.footer-socials{ display:flex; gap:.7rem; }
.footer-socials a{
  width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  transition:background .4s var(--ease-fluid), transform .4s var(--ease-spring);
}
.footer-socials a:hover{ background:var(--grad-brand); transform:translateY(-3px); }
.footer-socials svg{ width:15px; height:15px; }

/* ---------- Form ---------- */
.field{ position:relative; margin-bottom:1.4rem; }
.field input, .field textarea, .field select{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:1.3rem 1.1rem .6rem; color:var(--text); font-size:.95rem; font-family:inherit;
  transition:border-color .4s var(--ease-fluid), background .4s var(--ease-fluid);
}
.field textarea{ min-height:120px; resize:vertical; }
.field select{
  color-scheme: dark;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7d6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1rem center; background-size:16px;
  padding-right:2.6rem;
}
.field select option{ background:#111a1c; color:var(--text); }
.field label{
  position:absolute; left:1.1rem; top:1.0rem; color:var(--text-faint); font-size:.95rem;
  pointer-events:none; transition:transform .3s var(--ease-fluid), font-size .3s var(--ease-fluid), color .3s var(--ease-fluid);
  transform-origin:left top;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--teal-400); background:rgba(20,184,160,0.05); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.has-value label{
  transform:translateY(-0.62rem) scale(.78); color:var(--teal-300);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }

/* ---------- Utility ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.pill-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding-top:9rem; padding-bottom:3rem; }
.breadcrumb{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-faint); margin-bottom:1.5rem; }
.breadcrumb a{ color:var(--text-dim); }
.breadcrumb a:hover{ color:var(--teal-300); }

/* ---------- Preloader (CSS-driven, never blocks on JS load timing) ---------- */
.preloader{
  animation: m4y-preloader-out .5s ease-out .7s forwards;
}
@keyframes m4y-preloader-out{
  to{ opacity:0; visibility:hidden; }
}

/* ---------- Cursor ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; background:var(--lime);
  pointer-events:none; z-index:80; mix-blend-mode:difference; transform:translate(-50%,-50%);
  transition:width .3s var(--ease-fluid), height .3s var(--ease-fluid);
  display:none;
}
@media(hover:hover) and (pointer:fine){ .cursor-dot{ display:block; } }
.cursor-dot.grow{ width:38px; height:38px; }

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:380px; margin:0 auto 1.5rem; aspect-ratio:1; }
}
@media(max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav{ padding:.5rem .5rem .5rem 1.1rem; }
  .grid-2{ grid-template-columns:1fr; gap:2rem; }
  .field-row{ grid-template-columns:1fr; }
}
@media(max-width:480px){
  .nav-cta .btn:not(.nav-burger){ display:none; }
}
@media(max-width:640px){
  .footer-top{ grid-template-columns:1fr; gap:2rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .process-step{ grid-template-columns:auto 1fr; }
  .process-step .btn-icon{ display:none; }
  .section{ padding-block:3.5rem; }
  .hero{ padding-top:6.5rem; padding-bottom:2.5rem; min-height:auto; }
  .hero-visual{ max-width:260px; margin-bottom:1rem; }
  .hero-badge{ display:none; }
  .hero-stats{ gap:1.6rem; margin-top:2rem; }
  .hero-scroll{ display:none; }
}