/* =============================================
   FRUTOSWEBS — style.css
   ============================================= */

/* ── RESET & BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:           #07080f;
  --bg2:          #0d0f1e;
  --glass:        rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.10);
  --glass-hover:  rgba(255,255,255,0.09);
  --text:         #f0eeff;
  --muted:        rgba(240,238,255,0.8);
  --a1:           #7c5cfc;
  --a2:           #c65cfc;
  --a3:           #5cf0e0;
  --a4:           #fc5c8a;
}

html  { scroll-behavior: smooth; }
body  { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* ── INTRO ANIMATION ── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  overflow: hidden;
}

.intro-left, .intro-right {
  width: 50%;
  height: 100%;
  background: #07080f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform 1s cubic-bezier(.76,0,.24,1);
}

.intro-content {
  position: absolute;
  width: 200vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  pointer-events: none;
  text-align: center;
}
.intro-left  .intro-content { right: -100vw; left: auto; }
.intro-right .intro-content { left: -100vw; }

.intro-logo {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -2px;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  animation: introFadeUp 0.7s ease 0.4s forwards;
}
.intro-logo em {
  font-style: normal;
  background: linear-gradient(135deg, #7c5cfc, #c65cfc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.6rem, 1.5vw, 0.85rem);
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(200,180,255,0.5);
  display: flex;
  gap: 2rem;
  opacity: 0;
  animation: introFadeUp 0.7s ease 0.7s forwards;
}
.intro-tagline span { position: relative; }
.intro-tagline span::after {
  content: '·';
  position: absolute;
  right: -1.2rem;
  color: rgba(124,92,252,0.4);
}
.intro-tagline span:last-child::after { display: none; }

.intro-line {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(124,92,252,0.6), transparent);
  transform: translateX(-50%) scaleY(0);
  z-index: 10;
  animation: introLineIn 0.5s ease 1s forwards;
}

#intro.split .intro-left  { transform: translateX(-100%); }
#intro.split .intro-right { transform: translateX(100%); }
#intro.split .intro-line  { opacity: 0; transition: opacity 0.2s; }
#intro.hidden { display: none; }

@keyframes introFadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes introLineIn {
  0%   { transform: translateX(-50%) scaleY(0); }
  100% { transform: translateX(-50%) scaleY(1); }
}
/* ── ORBS ── */
.orb {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(80px); opacity: 0.35;
  animation: float 12s ease-in-out infinite;
}
.orb1 { width:500px; height:500px; background:radial-gradient(circle,#7c5cfc,transparent 70%); top:-100px;  left:-100px;  animation-delay:0s;  }
.orb2 { width:400px; height:400px; background:radial-gradient(circle,#c65cfc,transparent 70%); top:30%;     right:-80px;  animation-delay:-4s; }
.orb3 { width:350px; height:350px; background:radial-gradient(circle,#5cf0e0,transparent 70%); bottom:10%;  left:20%;     animation-delay:-8s; opacity:.2; }
.orb4 { width:300px; height:300px; background:radial-gradient(circle,#fc5c8a,transparent 70%); bottom:-50px;right:30%;    animation-delay:-2s; opacity:.25;}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 2.5rem;
  background: rgba(7,8,15,0.5);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nav-logo {
  font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 800;
  text-decoration: none; letter-spacing: -0.5px;
  background: linear-gradient(135deg, #fff 30%, rgba(200,180,255,.8));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-logo em {
  font-style: normal;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ISLA */
.nav-island {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.nav-island::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: 999px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 80deg,
    #7c5cfc 90deg,
    #c65cfc 110deg,
    #fc5c8a 120deg,
    #fff 125deg,
    #fc5c8a 130deg,
    #c65cfc 140deg,
    #7c5cfc 150deg,
    transparent 160deg,
    transparent 360deg
  );
  animation: snakeSpin 3s linear infinite;
  z-index: 0;
}

.nav-island::after {
  content: '';
  position: absolute; inset: 1.5px;
  border-radius: 999px;
  background: rgba(10,8,20,0.95);
  backdrop-filter: blur(12px);
  z-index: 1;
}

@keyframes snakeSpin {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

#nav-links {
  display: flex;
  gap: 0.15rem;
  list-style: none;
  position: relative;
  z-index: 2;
  padding: 0;
  margin: 0;
}

#nav-links a {
  color: rgba(240,238,255,0.5);
  text-decoration: none;
  font-size: 0.84rem; font-weight: 500;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  transition: color 0.3s ease;
  white-space: nowrap;
  display: block;
}
#nav-links a:hover { color: #fff; }

.nav-pill {
  position: absolute;
  height: calc(100% - 0.7rem);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124,92,252,0.2), rgba(198,92,252,0.12));
  border: 1px solid rgba(200,150,255,0.4);
  top: 0.35rem;
  transition: left 0.35s cubic-bezier(.4,0,.2,1),
              width 0.35s cubic-bezier(.4,0,.2,1),
              opacity 0.25s;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  box-shadow: 0 0 18px rgba(180,120,255,0.4), 0 0 6px rgba(255,255,255,0.15);
}

.nav-cta {
  font-family: 'Syne', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  text-decoration: none;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: #fff;
  box-shadow: 0 0 20px rgba(124,92,252,0.3);
  transition: all 0.3s;
  white-space: nowrap;
}
.nav-cta:hover {
  box-shadow: 0 0 30px rgba(124,92,252,0.5);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span { display:block; width:22px; height:1.5px; background:var(--muted); transition: all .3s; }

/* ── LOGO BANNER ── */
#logo-banner {
  padding-top: 74px; overflow: hidden; position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(7,8,15,.95), transparent);
}
.logo-banner-inner { display:flex; align-items:center; justify-content:center; padding: 2rem 2rem 1rem; }

.logo-left {
  font-family: 'Syne', sans-serif; font-size: clamp(3rem,8vw,6.5rem);
  font-weight: 800; letter-spacing: -3px; line-height: 1; white-space: nowrap;
  background: linear-gradient(135deg, #fff, rgba(220,210,255,.85));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateX(-120%); opacity: 0;
  animation: slideL 1s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.logo-right {
  font-family: 'Syne', sans-serif; font-size: clamp(3rem,8vw,6.5rem);
  font-weight: 800; letter-spacing: -3px; line-height: 1; white-space: nowrap;
  background: linear-gradient(135deg, var(--a1), var(--a2) 60%, var(--a4));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  transform: translateX(120%); opacity: 0;
  animation: slideR 1s cubic-bezier(.22,1,.36,1) .3s forwards, gradShift 6s ease 1.3s infinite;
}
.logo-dot {
  width: clamp(8px,1.2vw,14px); height: clamp(8px,1.2vw,14px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 20px rgba(124,92,252,.7);
  flex-shrink: 0; align-self: center; margin: 0 .15em; position: relative; top: -.1em;
  transform: scale(0);
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1) 1.1s forwards;
}
.logo-underline { display:flex; justify-content:center; padding-bottom: 1rem; overflow:hidden; }
.logo-underline-inner {
  height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, rgba(124,92,252,.5), rgba(198,92,252,.5), transparent);
  animation: expandLine .8s ease 1.2s forwards;
}
.logo-tagline {
  text-align: center; font-size: .78rem; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(200,180,255,.4); font-weight: 500;
  padding-bottom: 1.5rem; opacity: 0;
  animation: fadeUp .6s ease 1.4s forwards;
}

/* ── HERO ── */
#hero {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.5rem 2rem 3rem;
}
.hero-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(200,180,255,.7);
  background: rgba(124,92,252,.12); border: 1px solid rgba(124,92,252,.25);
  border-radius: 999px; padding: .4rem 1rem; margin-bottom: 1.8rem;
}
.hero-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a1); animation: blink 2s infinite;
}
#hero h1 {
  font-family: 'Syne', sans-serif; font-size: clamp(2.5rem,6vw,5rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -2px; margin-bottom: 1.2rem;
}
#hero h1 .line1 { display: block; color: #fff; }
#hero h1 .grad {
  display: block;
  background: linear-gradient(135deg, var(--a1), var(--a2) 50%, var(--a4));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%; animation: gradShift 6s ease infinite;
}
.hero-p {
  max-width: 540px; font-size: 1.05rem; color: var(--muted);
  line-height: 1.75; margin-bottom: 2.2rem; font-weight: 300;
}
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-pills { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top: 2.5rem; }
.pill {
  font-size: .78rem; font-weight: 500; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; padding: .35rem .9rem;
}

/* ── BOTONES ── */
.btn-glow {
  display: inline-block; padding: .85rem 2.2rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff;
  box-shadow: 0 0 30px rgba(124,92,252,.4); transition: transform .3s, box-shadow .3s;
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 50px rgba(124,92,252,.6); }

.btn-ghost {
  display: inline-block; padding: .85rem 2.2rem; border-radius: 999px;
  font-size: .9rem; font-weight: 500; text-decoration: none; color: #fff;
  border: 1px solid var(--glass-border); background: var(--glass);
  backdrop-filter: blur(10px); transition: all .3s;
}
.btn-ghost:hover { background: var(--glass-hover); border-color: rgba(255,255,255,.2); }

/* ── SECTION HEADER ── */
section { position: relative; z-index: 1; }
.sec-head { text-align: center; margin-bottom: 2.5rem; }
.sec-eyebrow {
  display: block; font-size: .75rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(222,222,222,1); margin-bottom: .6rem;
}
.sec-title {
  font-family: 'Syne', sans-serif; font-size: clamp(1.8rem,3.5vw,2.8rem);
  font-weight: 800; letter-spacing: -1px; color: #fff; line-height: 1.2;
}
.sec-title span {
  background: linear-gradient(135deg, var(--a1), var(--a2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── SERVICIOS ── */
#servicios { padding: 3rem 2rem; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1050px;
  margin: 0 auto;
}

.scard {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(16px);
  position: relative;
  overflow: visible;
  transition: border-color .4s,
              transform .5s cubic-bezier(.34,1.56,.64,1),
              box-shadow .4s,
              opacity .4s,
              background .4s;
}
.scard::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124,92,252,.08), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.scard:hover { border-color: rgba(124,92,252,.35); box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 0 1px rgba(124,92,252,.15); }
.scard:hover::before { opacity: 1; }

.scard-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.ic1 { background: linear-gradient(135deg,rgba(124,92,252,.25),rgba(198,92,252,.15)); }
.ic2 { background: linear-gradient(135deg,rgba(92,240,224,.2),rgba(92,180,252,.15)); }
.ic3 { background: linear-gradient(135deg,rgba(252,92,138,.2),rgba(252,180,92,.1)); }
.ic4 { background: linear-gradient(135deg,rgba(198,92,252,.2),rgba(124,92,252,.15)); }

.scard-title {
  font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700;
  color: #fff; margin-bottom: .5rem; letter-spacing: -.3px;
}
.scard-desc { font-size: .88rem; color: var(--muted); line-height: 1.6; }

.scard-extra {
  font-size: .85rem;
  color: rgba(200,180,255,.6);
  line-height: 1.65;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height .45s cubic-bezier(.4,0,.2,1),
              opacity .35s ease,
              margin .35s ease;
}
.scard.open .scard-extra {
  max-height: 300px;
  opacity: 1;
  margin-top: .85rem;
}

.scard-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(200,180,255,.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', sans-serif;
  transition: color .3s;
  position: relative;
  z-index: 2;
}
.scard-toggle .arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.scard.open .scard-toggle .arrow { transform: rotate(90deg); }
.scard:hover .scard-toggle { color: rgba(200,180,255,.9); }

.scard.featured {
  transform: scale(1.04);
  border-color: rgba(124,92,252,.6);
  box-shadow: 0 30px 70px rgba(0,0,0,.4),
              0 0 0 1px rgba(124,92,252,.3),
              0 0 40px rgba(124,92,252,.15);
  z-index: 10;
  background: rgba(255,255,255,.09);
}
.scard.featured .scard-title {
  background: linear-gradient(135deg, #fff, rgba(200,180,255,.9));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scard.featured .scard-toggle { color: var(--a1); }

.services-grid:has(.scard.featured) .scard:not(.featured) {
  opacity: 0.5;
  transform: scale(0.97);
}

/* ── PROCESO ── */
#proceso {
  padding: 3rem 2rem;
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.steps { max-width: 780px; margin: 0 auto; display:flex; flex-direction:column; gap:.75rem; }
.step-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 1.2rem; align-items: start;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 1.2rem 1.5rem;
  backdrop-filter: blur(12px); transition: all .3s;
}
.step-row:hover { border-color: rgba(124,92,252,.3); background: var(--glass-hover); transform: translateX(4px); }
.step-dot {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:.82rem; font-weight:800; flex-shrink:0;
}
.sd1 { background:linear-gradient(135deg,var(--a1),var(--a2)); color:#fff; }
.sd2 { background:linear-gradient(135deg,var(--a2),var(--a4)); color:#fff; }
.sd3 { background:linear-gradient(135deg,var(--a3),var(--a1)); color:#07080f; }
.sd4 { background:linear-gradient(135deg,var(--a4),var(--a2)); color:#fff; }
.step-title { font-family:'Syne',sans-serif; font-size:.98rem; font-weight:700; color:#fff; margin-bottom:.25rem; }
.step-desc  { font-size:.86rem; color:var(--muted); line-height:1.55; }

/* ── CONTACTO ── */
#contacto { padding: 3rem 2rem 5rem; }
.contact-box {
  max-width: 650px; margin: 0 auto;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
  border-radius: 24px; padding: 2.5rem;
  backdrop-filter: blur(20px); position: relative; overflow: visible;
}
.contact-box::before {
  content: ''; position: absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background: linear-gradient(90deg,transparent,rgba(124,92,252,.6),transparent);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group {
  display: flex; flex-direction: column;
  gap: .35rem; margin-bottom: .9rem; min-width: 0;
}
.form-label { font-size:.73rem; font-weight:600; letter-spacing:.5px; color:rgba(200,180,255,.6); }
.form-input, .form-select, .form-textarea {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: #fff; font-family:'Inter',sans-serif;
  font-size:.93rem; padding:.7rem 1rem; outline:none; transition:all .3s;
  width:100%; max-width:100%; box-sizing: border-box;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: rgba(124,92,252,.5); background:rgba(124,92,252,.07);
  box-shadow: 0 0 0 3px rgba(124,92,252,.1);
}
.form-input::placeholder, .form-textarea::placeholder { color:rgba(240,238,255,.2); }
.form-select option { background:#13141f; color:#fff; }
.form-textarea { resize:vertical; min-height:110px; }
.form-submit {
  width:100%; padding:.85rem; border-radius:999px; border:none; cursor:pointer;
  font-family:'Syne',sans-serif; font-size:.93rem; font-weight:700; letter-spacing:.5px;
  background:linear-gradient(135deg,var(--a1),var(--a2)); color:#fff;
  box-shadow:0 0 30px rgba(124,92,252,.3); margin-top:.3rem; transition:all .3s;
}
.form-submit:hover { box-shadow:0 0 50px rgba(124,92,252,.5); transform:translateY(-1px); }
.form-submit:disabled { opacity:.6; transform:none; cursor:default; }
.form-ok {
  display:none; text-align:center; margin-top:.8rem; padding:.75rem; border-radius:10px;
  background:rgba(92,240,224,.1); border:1px solid rgba(92,240,224,.2);
  font-size:.86rem; font-weight:500; color:var(--a3);
}

/* ── FOOTER ── */
footer {
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem; padding:1.5rem 3rem;
  border-top:1px solid var(--glass-border);
  background:rgba(7,8,15,.7); backdrop-filter:blur(10px);
}
.foot-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1rem;
  text-decoration:none;
  background:linear-gradient(135deg,#fff,rgba(200,180,255,.7));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.foot-logo em {
  font-style:normal;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.foot-copy { font-size:.78rem; color:rgba(240,238,255,.3); }

/* ── FADE-IN SCROLL ── */
.fi { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fi.v { opacity:1; transform:translateY(0); }

/* ── ANIMACIONES ── */
@keyframes float      { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-40px) scale(1.05)} 66%{transform:translate(-20px,20px) scale(.97)} }
@keyframes slideL     { 0%{transform:translateX(-120%);opacity:0} 100%{transform:translateX(0);opacity:1} }
@keyframes slideR     { 0%{transform:translateX(120%);opacity:0}  100%{transform:translateX(0);opacity:1} }
@keyframes popIn      { 0%{transform:scale(0)} 100%{transform:scale(1)} }
@keyframes expandLine { 0%{width:0;opacity:0} 100%{width:min(600px,80%);opacity:1} }
@keyframes fadeUp     { 0%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes gradShift  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes slideL-mobile { 0%{transform:translateX(-60%);opacity:0} 100%{transform:translateX(0);opacity:1} }
@keyframes slideR-mobile { 0%{transform:translateX(60%);opacity:0}  100%{transform:translateX(0);opacity:1} }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  .nav-island { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav-island.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 64px; left: 0; right: 0;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 !important;
    z-index: 99;
    background: #07080f !important;
  }
  .nav-island.mobile-open::before {
    opacity: 0 !important;
    animation: none !important;
    background: transparent !important;
  }
  .nav-island.mobile-open::after {
    background: #07080f !important;
    inset: 0 !important;
  }
  .nav-island.mobile-open .nav-pill { opacity: 0 !important; }
.nav-island.mobile-open #nav-links {
  position: relative !important;
  z-index: 999 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin-top: 0 !important;
}
  .nav-island.mobile-open #nav-links a {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: rgba(240,238,255,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-island.mobile-open::after {
  position: relative !important;
  inset: auto !important;
  background: transparent !important;
}


  footer { padding:1.5rem; flex-direction:column; text-align:center; }

  .contact-box { padding:1.8rem 1.2rem; width:90%; overflow:hidden; }
  .form-row { display: flex !important; flex-direction: column !important; gap: .75rem; }

  .services-grid { grid-template-columns: 1fr; }

  #logo-banner { overflow: hidden; }
  .logo-banner-inner { padding: 1.5rem 1rem 0.5rem; }
  .logo-left, .logo-right { font-size: 9vw; letter-spacing: -1px; }
  .logo-left  { animation: slideL-mobile 1s cubic-bezier(.22,1,.36,1) .3s forwards; }
  .logo-right { animation: slideR-mobile 1s cubic-bezier(.22,1,.36,1) .3s forwards, gradShift 6s ease 1.3s infinite; }
  .logo-tagline { font-size: 0.6rem; letter-spacing: 1.5px; padding: 0 1rem 1rem; }
}