/* Mezsi Food Waste Disposal System – custom styles */
:root {
  --brand: #61CE70;
  --brand-2: #c6f24e;
  --ink: #07110b;
  --ink-2: #0b1a12;
  --line: rgba(255,255,255,.08);
}
html { scroll-padding-top: 90px; }
body { background: var(--ink); }
::selection { background: var(--brand); color: var(--ink); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost, .btn-dark {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  padding: .85rem 1.5rem; border-radius: 999px; transition: all .35s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden; cursor: pointer;
}
.btn-primary { background: linear-gradient(135deg, var(--brand), #3fae50); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(97,206,112,.7); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transition: transform .8s;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(97,206,112,.9); }
.btn-ghost { border: 1px solid rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }

/* ---------- Navbar ---------- */
.glass {
  background: rgba(11,26,18,.55); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08);
}
#navbar.scrolled .glass { background: rgba(7,17,11,.82); box-shadow: 0 10px 40px -20px rgba(0,0,0,.8); }
.nav-link { padding: .5rem .75rem; border-radius: .6rem; position: relative; transition: color .3s; }
.nav-link::after { content:""; position:absolute; left:.75rem; right:.75rem; bottom:.3rem; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.lang-switch { position: relative; display: flex; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 3px; }
.lang-switch button { position: relative; z-index: 1; width: 40px; height: 30px; font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.6); transition: color .3s; }
.lang-switch button.on { color: var(--ink); }
.lang-pill { position: absolute; top: 3px; left: 3px; width: 40px; height: 30px; border-radius: 999px; background: var(--brand); transition: transform .45s cubic-bezier(.6,-0.3,.3,1.4); box-shadow: 0 0 18px rgba(97,206,112,.6); }
.lang-switch[data-cur="en"] .lang-pill { transform: translateX(40px); }
[data-i18n] { transition: opacity .25s; }
body.lang-fade [data-i18n] { opacity: 0; }

/* ---------- Hero ---------- */
.mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(97,206,112,.35), transparent 60%),
    radial-gradient(35% 35% at 80% 20%, rgba(198,242,78,.18), transparent 60%),
    radial-gradient(45% 45% at 70% 80%, rgba(20,120,90,.35), transparent 60%),
    radial-gradient(30% 30% at 10% 90%, rgba(30,90,160,.25), transparent 60%);
  filter: blur(40px); animation: meshMove 22s ease-in-out infinite alternate;
}
@keyframes meshMove {
  0% { transform: translate(0,0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-3%, 4%) rotate(-6deg) scale(1.02); }
}
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
  background: rgba(97,206,112,.12); color: var(--brand); border: 1px solid rgba(97,206,112,.35); }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 rgba(97,206,112,.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(97,206,112,0); } 100% { box-shadow: 0 0 0 0 rgba(97,206,112,0); } }
.text-gradient { background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
.stat-badge { padding: .9rem .8rem; border-radius: 1rem; background: rgba(255,255,255,.04); border: 1px solid var(--line); backdrop-filter: blur(8px); transition: all .3s; }
.stat-badge:hover { border-color: rgba(97,206,112,.5); transform: translateY(-3px); }
.stat-badge b { display: block; font-family: "Space Grotesk"; font-size: 1.6rem; color: var(--brand); line-height: 1.1; }
.stat-badge small { color: rgba(255,255,255,.6); font-size: .75rem; }
.floating { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-18px) rotate(.5deg); } }
.hero-glow { position: absolute; inset: 10%; background: radial-gradient(circle, rgba(97,206,112,.45), transparent 65%); filter: blur(60px); animation: glowPulse 5s ease-in-out infinite; }
@keyframes glowPulse { 50% { opacity: .55; transform: scale(1.08); } }
.float-tag { position: absolute; display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-radius: 1rem; font-size: .85rem; font-weight: 500;
  background: rgba(7,17,11,.75); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); animation: floaty 5s ease-in-out infinite; box-shadow: 0 20px 40px -20px #000; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); }
.dot-blue { background: #4fc3f7; box-shadow: 0 0 12px #4fc3f7; }
.scroll-mouse { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.35); border-radius: 12px; position: relative; }
.scroll-mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--brand); animation: wheel 1.6s infinite; }
@keyframes wheel { to { transform: translateY(10px); opacity: 0; } }

/* ---------- Counters ---------- */
.counter-box { text-align: center; }
.counter-box .num { font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; background: linear-gradient(180deg,#fff, #a6e9b0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counter-box .num em { font-style: normal; font-size: .5em; color: var(--brand); -webkit-text-fill-color: var(--brand); margin: 0 .1em; }
.counter-box p { margin-top: .6rem; color: rgba(255,255,255,.6); font-size: .9rem; }

/* ---------- Sections ---------- */
.section { padding: 7rem 0; position: relative; }
.section-head { text-align: center; max-width: 48rem; margin: 0 auto; }
.kicker { display: inline-block; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.h2 { margin-top: .8rem; font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.02em; }
.lead { margin-top: 1rem; color: rgba(255,255,255,.65); font-size: 1.08rem; }
.blob { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(100px); opacity: .25; pointer-events: none; }
.blob-a { background: var(--brand); top: -150px; right: -150px; animation: meshMove 18s ease-in-out infinite alternate; }
.blob-b { background: #1f7a6a; bottom: -200px; left: -150px; animation: meshMove 20s ease-in-out infinite alternate-reverse; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s), transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s); }
.reveal.in { opacity: 1; transform: none; }
.reveal.from-left { transform: translateX(-50px); }
.reveal.from-right { transform: translateX(50px); }
.reveal.from-left.in, .reveal.from-right.in { transform: none; }

/* ---------- Problem cards ---------- */
.problem-card { position: relative; border-radius: 1.5rem; overflow: hidden; min-height: 440px; cursor: zoom-in; border: 1px solid var(--line); isolation: isolate; }
.problem-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s; filter: saturate(.8) brightness(.8); z-index: -2; }
.problem-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,17,11,.1) 0%, rgba(7,17,11,.6) 45%, rgba(7,17,11,.97) 100%); }
.problem-card:hover img { transform: scale(1.1); filter: saturate(1) brightness(.9); }
.problem-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; transition: border-color .4s, box-shadow .4s; }
.problem-card:hover::after { border-color: rgba(255,107,87,.6); box-shadow: inset 0 0 40px rgba(255,107,87,.15); }
.problem-body { position: absolute; inset: auto 0 0 0; padding: 1.5rem; }
.pnum { font-family: "Space Grotesk"; font-size: .8rem; font-weight: 700; color: #ff8a73; letter-spacing: .2em; }
.problem-body h3 { margin-top: .4rem; font-family: "Space Grotesk"; font-size: 1.3rem; font-weight: 700; }
.problem-body p { margin-top: .5rem; font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.55; }

/* ---------- Glow cards ---------- */
.glow-card { position: relative; padding: 2rem; border-radius: 1.5rem; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); transition: transform .4s, border-color .4s, box-shadow .4s; overflow: hidden; }
.glow-card::before { content: ""; position: absolute; width: 300px; height: 300px; left: var(--mx,50%); top: var(--my,50%); transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(97,206,112,.22), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.glow-card:hover::before { opacity: 1; }
.glow-card:hover { transform: translateY(-6px); border-color: rgba(97,206,112,.45); box-shadow: 0 30px 60px -30px rgba(97,206,112,.45); }
.glow-card h3 { margin-top: 1.2rem; font-family: "Space Grotesk"; font-size: 1.25rem; font-weight: 700; }
.glow-card p { margin-top: .6rem; color: rgba(255,255,255,.65); line-height: 1.6; }
.icon-wrap { width: 56px; height: 56px; border-radius: 1rem; display: grid; place-items: center; background: rgba(97,206,112,.12); border: 1px solid rgba(97,206,112,.35); }
.icon-wrap svg { width: 28px; height: 28px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Gallery ---------- */
.gallery-item { position: relative; border-radius: 1.25rem; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line); min-height: 200px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 1rem; font-size: .88rem; font-weight: 500; background: linear-gradient(transparent, rgba(7,17,11,.9)); transform: translateY(8px); opacity: .85; transition: all .4s; }
.gallery-item:hover figcaption { transform: none; opacity: 1; }
.gallery-item::after { content: "⤢"; position: absolute; top: .8rem; right: .8rem; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,17,11,.6); backdrop-filter: blur(6px); opacity: 0; transform: scale(.7); transition: all .3s; }
.gallery-item:hover::after { opacity: 1; transform: none; }
.feat { display: flex; gap: 1rem; padding: 1.3rem; border-radius: 1.1rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: all .35s; }
.feat:hover { border-color: rgba(97,206,112,.45); background: rgba(97,206,112,.05); transform: translateY(-3px); }
.feat-ic { flex: none; width: 46px; height: 46px; border-radius: .8rem; display: grid; place-items: center; font-weight: 700; font-size: .95rem; color: var(--ink); background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.feat h4 { font-weight: 700; }
.feat p { margin-top: .25rem; font-size: .88rem; color: rgba(255,255,255,.6); }

/* ---------- Waste ---------- */
.cat-card { padding: 1.8rem; border-radius: 1.4rem; border: 1px solid var(--line); background: rgba(255,255,255,.025); position: relative; overflow: hidden; transition: all .4s; }
.cat-card:hover { border-color: rgba(97,206,112,.5); transform: translateY(-4px); }
.cat-n { position: absolute; right: 1rem; top: -.6rem; font-family: "Space Grotesk"; font-size: 6rem; font-weight: 700; color: rgba(97,206,112,.08); }
.cat-card h3 { font-family: "Space Grotesk"; font-size: 1.2rem; font-weight: 700; color: var(--brand); }
.cat-card p { margin-top: .6rem; color: rgba(255,255,255,.65); line-height: 1.6; }
.waste-tile { position: relative; aspect-ratio: 4/3; border-radius: 1.2rem; overflow: hidden; cursor: zoom-in; }
.waste-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.waste-tile:hover img { transform: scale(1.12) rotate(1deg); }
.waste-tile figcaption { position: absolute; left: .8rem; bottom: .8rem; padding: .45rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: rgba(7,17,11,.72); backdrop-filter: blur(8px); border: 1px solid rgba(97,206,112,.4); }
.waste-tile figcaption::before { content: "✓ "; color: var(--brand); }
.waste-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .4s; }
.waste-tile:hover::after { box-shadow: inset 0 0 0 2px var(--brand), inset 0 0 50px rgba(97,206,112,.3); }
.market { padding: .65rem 1.2rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: .9rem; transition: all .3s; }
.market:hover { border-color: var(--brand); color: var(--brand); background: rgba(97,206,112,.08); transform: translateY(-2px); }

/* ---------- Process ---------- */
.phase-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1rem; }
.phase { text-align: center; display: grid; justify-items: center; gap: .8rem; font-weight: 600; font-size: .95rem; cursor: zoom-in; }
.phase img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(97,206,112,.5); box-shadow: 0 0 40px rgba(97,206,112,.25); transition: transform .5s; }
.phase:hover img { transform: scale(1.06); }
.phase-core { cursor: default; }
.gear { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(97,206,112,.25), rgba(97,206,112,.04)); border: 2px dashed rgba(97,206,112,.5); }
.gear svg { width: 70px; height: 70px; fill: none; stroke: var(--brand); stroke-width: 1.4; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.phase-line { width: clamp(30px, 8vw, 120px); height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; position: relative; overflow: hidden; }
.phase-line i { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2)); box-shadow: 0 0 12px var(--brand); animation: flow 1.8s linear infinite; }
@keyframes flow { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (max-width: 640px) {
  .phase-flow { grid-template-columns: 1fr; }
  .phase-line { width: 3px; height: 50px; margin: 0 auto; }
  .phase-line i { width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--brand)); animation-name: flowY; }
  @keyframes flowY { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
}
.timeline { position: relative; display: grid; gap: 1.2rem; grid-template-columns: 1fr; padding-left: 0; }
@media (min-width: 768px) { .timeline { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.timeline-track { position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.08); }
@media (min-width: 768px) { .timeline-track { left: 50%; } }
.timeline-fill { width: 100%; height: var(--fill, 0%); background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 0 14px var(--brand); transition: height .2s linear; }
.step { position: relative; display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 1.1rem; border: 1px solid var(--line); background: rgba(7,17,11,.6); opacity: .35; transform: translateY(20px); transition: all .7s cubic-bezier(.2,.8,.2,1); }
.step.in { opacity: 1; transform: none; border-color: rgba(97,206,112,.35); }
.step-n { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 700; background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); transition: all .6s; }
.step.in .step-n { background: var(--brand); color: var(--ink); box-shadow: 0 0 0 6px rgba(97,206,112,.15), 0 0 24px rgba(97,206,112,.6); }
.step h4 { font-weight: 700; }
.step p { margin-top: .25rem; font-size: .88rem; color: rgba(255,255,255,.6); }
.power-banner { padding: 1.4rem 1.6rem; border-radius: 1.2rem; text-align: center; font-weight: 600; font-size: 1.05rem; color: var(--ink); background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 20px 50px -20px rgba(97,206,112,.7); }

/* ---------- Before / After ---------- */
.ba { position: relative; aspect-ratio: 4/3; border-radius: 1.5rem; overflow: hidden; user-select: none; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(97,206,112,.4); }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 20px rgba(97,206,112,.9); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--brand); color: var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; box-shadow: 0 0 0 6px rgba(255,255,255,.25); animation: pulse 2s infinite; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-label { position: absolute; top: 1rem; padding: .35rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .15em; background: rgba(7,17,11,.75); backdrop-filter: blur(6px); pointer-events: none; }
.ba-label-after { background: var(--brand); color: var(--ink); }
.out-card { display: flex; gap: 1rem; padding: 1.3rem; border-radius: 1.2rem; border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: all .35s; }
.out-card:hover { border-color: rgba(97,206,112,.45); transform: translateX(6px); }
.out-card > span { font-size: 1.6rem; }
.out-card h4 { font-weight: 700; }
.out-card p { margin-top: .25rem; font-size: .9rem; color: rgba(255,255,255,.6); }
.shrink-flow { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap; padding: 2rem; border-radius: 1.5rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.sf-item { display: grid; justify-items: center; gap: .9rem; }
.sf-item b { font-family: "Space Grotesk"; font-size: 1.1rem; }
.sf-cube { border-radius: .8rem; background: linear-gradient(135deg, #8a6a3a, #4a3a20); box-shadow: 0 10px 30px -10px #000; }
.sf-big { width: 120px; height: 120px; animation: breathe 3s ease-in-out infinite; }
.sf-small { width: 26px; height: 26px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 25px var(--brand); margin: 47px 0; }
@keyframes breathe { 50% { transform: scale(.94); } }
.sf-arrow { display: grid; justify-items: center; gap: .6rem; color: rgba(255,255,255,.7); font-size: .9rem; }
.sf-arrow i { width: 160px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.sf-arrow i::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--brand)); animation: flow 1.6s linear infinite; }

/* ---------- Specs ---------- */
.spec-table { border-radius: 1.4rem; overflow: hidden; border: 1px solid var(--line); background: rgba(7,17,11,.6); }
.spec-table table { width: 100%; border-collapse: collapse; }
.spec-table th { text-align: left; padding: 1rem 1.4rem; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); background: var(--brand); }
.spec-table td { padding: 1rem 1.4rem; border-top: 1px solid var(--line); vertical-align: top; font-size: .95rem; }
.spec-table td:first-child { width: 38%; color: rgba(255,255,255,.6); font-weight: 500; }
.spec-table tbody tr { transition: background .25s; }
.spec-table tbody tr:hover { background: rgba(97,206,112,.06); }
.spec-table tbody tr:hover td:first-child { color: var(--brand); }
@media (max-width: 640px) { .spec-table td { display: block; width: 100% !important; padding: .4rem 1rem; } .spec-table td:first-child { padding-top: 1rem; border-top: 1px solid var(--line); } .spec-table td + td { border-top: 0; padding-bottom: 1rem; } }
.goal { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: all .3s; }
.goal:hover { border-color: rgba(97,206,112,.45); }
.goal::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--brand); color: var(--ink); }

/* ---------- CTA ---------- */
.cta-bg { position: absolute; inset: 0; background: linear-gradient(120deg, var(--brand), var(--brand-2), var(--brand)); background-size: 200% 200%; animation: shine 10s linear infinite; }

/* ---------- Contact ---------- */
.info { display: flex; gap: 1rem; padding: 1.2rem; border-radius: 1.1rem; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .3s; }
.info:hover { border-color: rgba(97,206,112,.45); }
.info-ic { flex: none; width: 44px; height: 44px; border-radius: .8rem; display: grid; place-items: center; background: rgba(97,206,112,.12); font-size: 1.2rem; }
.info h4 { font-weight: 700; margin-bottom: .2rem; }
.info p, .info a { font-size: .92rem; color: rgba(255,255,255,.7); }
.info .link { display: inline-block; margin-top: .4rem; color: var(--brand); font-weight: 600; }
.map { border-radius: 1.2rem; overflow: hidden; border: 1px solid var(--line); height: 260px; }
.map iframe { width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.6); }
.field { display: grid; gap: .4rem; font-size: .85rem; color: rgba(255,255,255,.7); }
.field input, .field textarea { width: 100%; padding: .85rem 1rem; border-radius: .8rem; background: rgba(7,17,11,.7); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: .95rem; transition: border-color .3s, box-shadow .3s; outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(97,206,112,.15); }
.field.err input { border-color: #ff6b57; }

/* ---------- Footer ---------- */
.foot-h { font-family: "Space Grotesk"; font-weight: 700; margin-bottom: 1rem; }
.foot-list { display: grid; gap: .55rem; font-size: .88rem; color: rgba(255,255,255,.6); }
.foot-list a:hover { color: var(--brand); }

/* ---------- WhatsApp ---------- */
.wa-float { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 10px 30px -5px rgba(37,211,102,.6); transition: transform .3s; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: ring 2s infinite; }
@keyframes ring { to { transform: scale(1.6); opacity: 0; } }
.wa-float:hover { transform: scale(1.1); }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(3,8,5,.94); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.lb.open { opacity: 1; pointer-events: auto; }
.lb-fig { max-width: min(92vw, 1200px); max-height: 86vh; display: grid; gap: .8rem; justify-items: center; transform: scale(.92); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.lb.open .lb-fig { transform: none; }
.lb-fig img { max-width: 100%; max-height: 78vh; border-radius: 1rem; box-shadow: 0 30px 80px -20px #000; transition: opacity .25s; }
.lb-fig figcaption { color: rgba(255,255,255,.8); font-size: .95rem; text-align: center; }
.lb-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); transition: all .25s; }
.lb-btn:hover { background: var(--brand); color: var(--ink); }
.lb-close { top: 1.2rem; right: 1.2rem; font-size: 1.1rem; }
.lb-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: 1.6rem; left: 1.6rem; font-size: .85rem; color: rgba(255,255,255,.6); font-family: "Space Grotesk"; }
@media (max-width: 640px) { .lb-prev, .lb-next { top: auto; bottom: 1.2rem; transform: none; } }

[data-lb] { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .step { opacity: 1; transform: none; }
}