/* ====================================================
   MARÉ LABS — Stylesheet v2
   High-contrast, deep ocean, vivid electric accents
   ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --bg:       #020810;
  --surface:  #07111f;
  --surface2: #0a1828;
  --border:   #122030;
  --mid:      #1a3050;
  --electric: #3d8eff;
  --glow:     #60b0ff;
  --gamma-purple: #8b5cf6;
  --gamma-pink:   #ec4899;
  --chrome:   #c0d8f0;
  --fog:      #5a7a9a;
  --text:     #d8eaf6;
  --head:     #ffffff;
  --font:     'Space Grotesk', sans-serif;
  --ease:     cubic-bezier(.25,.46,.45,.94);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font); overflow-x:hidden; line-height:1.65;
}

/* === Canvas === */
#wave-canvas {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* ===========================
   HERO AMBIENT GLOW ORB
   =========================== */
.hero-glow-orb {
  position:absolute; pointer-events:none; z-index:0;
  border-radius:50%; filter:blur(90px);
}
.orb-blue {
  width:680px; height:680px;
  background:radial-gradient(circle, rgba(61,142,255,.18) 0%, transparent 70%);
  top:-120px; left:50%; transform:translateX(-50%);
  animation:orbFloat 8s ease-in-out infinite;
}
.orb-purple {
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 70%);
  top:10%; left:10%;
  animation:orbFloat 11s ease-in-out infinite reverse;
}
.orb-teal {
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(0,220,200,.08) 0%, transparent 70%);
  top:20%; right:5%;
  animation:orbFloat 13s ease-in-out infinite 2s;
}
@keyframes orbFloat {
  0%,100% { transform:translateY(0) translateX(-50%); }
  50%      { transform:translateY(-40px) translateX(-50%); }
}
.orb-purple, .orb-teal { animation: orbSide 11s ease-in-out infinite; }
.orb-teal              { animation-delay:3s; animation-duration:13s; }
@keyframes orbSide { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-32px)} }

/* === Nav === */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 56px;
  transition:background .4s var(--ease), backdrop-filter .4s;
}
nav.blur {
  background:rgba(2,8,16,.92);
  backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(61,142,255,.08);
}
.logo {
  color:var(--head); font-size:15px; font-weight:700;
  letter-spacing:.14em; text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a {
  color:var(--chrome); text-decoration:none;
  font-size:13px; font-weight:500; transition:color .2s;
}
.nav-links a:hover { color:var(--head); }
.nav-cta {
  background:var(--electric); color:#fff !important;
  padding:8px 22px; border-radius:99px;
  box-shadow:0 0 18px rgba(61,142,255,.3);
  transition:background .2s, box-shadow .2s !important;
}
.nav-cta:hover {
  background:var(--glow) !important;
  box-shadow:0 0 28px rgba(61,142,255,.5) !important;
}

/* === Hero === */
#hero {
  position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center; padding:130px 48px 80px;
  overflow:hidden;
}
.hero-kicker {
  font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--electric); margin-bottom:24px;
  animation:fadeUp .8s .1s var(--ease) both;
}
.hero-h1 {
  font-size:clamp(48px,7.5vw,100px); font-weight:700;
  line-height:1.03; letter-spacing:-.035em; color:var(--head);
  max-width:920px;
  animation:fadeUp .9s .2s var(--ease) both;
  text-shadow:0 0 80px rgba(61,142,255,.15);
}
.hero-h1 em {
  font-style:normal;
  background:linear-gradient(128deg, var(--electric) 0%, #a0d4ff 55%, var(--chrome) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub {
  font-size:clamp(16px,2vw,20px); color:var(--fog);
  max-width:500px; margin-top:22px; line-height:1.7;
  animation:fadeUp .9s .4s var(--ease) both;
}
.hero-actions {
  display:flex; gap:14px; margin-top:42px;
  flex-wrap:wrap; justify-content:center;
  animation:fadeUp .9s .55s var(--ease) both;
}
.hero-scroll {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:9px; font-weight:600; letter-spacing:.22em;
  color:rgba(90,122,154,.5); text-transform:uppercase;
  animation:fadeIn 1s 1.4s both;
}
.scroll-line {
  width:1px; height:36px;
  background:linear-gradient(to bottom, rgba(61,142,255,.4), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.4; transform:scaleY(1); transform-origin:top; }
  50%      { opacity:1;  transform:scaleY(1.15); }
}

/* === Buttons === */
.btn-solid {
  background:var(--electric); color:#fff;
  padding:14px 30px; border-radius:99px;
  text-decoration:none; font-size:15px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 0 22px rgba(61,142,255,.35);
  transition:background .2s, box-shadow .2s, transform .15s;
}
.btn-solid:hover {
  background:var(--glow); transform:translateY(-2px);
  box-shadow:0 0 36px rgba(61,142,255,.55);
}
.btn-outline {
  color:var(--chrome); padding:14px 30px; border-radius:99px;
  text-decoration:none; font-size:15px; font-weight:500;
  border:1px solid rgba(192,216,240,.18);
  transition:border-color .2s, color .2s, background .2s, transform .15s;
}
.btn-outline:hover {
  border-color:rgba(61,142,255,.4); color:var(--head);
  background:rgba(61,142,255,.06); transform:translateY(-2px);
}

/* === About === */
#about {
  position:relative; z-index:2;
  background:linear-gradient(to bottom, transparent 0%, var(--surface) 28%);
  padding:130px 48px 110px; text-align:center;
}
.manifesto-tag {
  font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fog); margin-bottom:30px;
}
.manifesto-h2 {
  font-size:clamp(36px,5.5vw,72px); font-weight:700;
  letter-spacing:-.03em; line-height:1.06; color:var(--head);
  max-width:820px; margin:0 auto 30px;
}
.manifesto-body {
  font-size:clamp(16px,1.8vw,20px); color:var(--fog);
  max-width:580px; margin:0 auto; line-height:1.8;
}
.manifesto-rule {
  width:56px; height:2px;
  background:linear-gradient(to right, var(--electric), transparent);
  margin:40px auto 0;
}

/* === Apps Header === */
#apps-header {
  background:var(--surface); padding:80px 48px 56px;
  text-align:center; position:relative; z-index:2;
  border-top:1px solid var(--border);
}
#apps-header::before {
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:600px; height:1px;
  background:linear-gradient(to right, transparent, var(--electric), transparent);
  opacity:.3;
}
.apps-kicker {
  font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--electric); margin-bottom:14px;
}
.apps-title {
  font-size:clamp(30px,4.5vw,56px); font-weight:700;
  letter-spacing:-.026em; color:var(--head);
}

/* === App Section === */
.app-section {
  background:var(--surface); position:relative; z-index:2; padding:90px 0;
  overflow:hidden;
}
.app-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 50% 50%, rgba(61,142,255,.04) 0%, transparent 100%);
}
.app-section + .app-section { border-top:1px solid var(--border); }

/* Gamma glow tint */
#gamma::before {
  background:radial-gradient(ellipse 65% 70% at 75% 50%, rgba(139,92,246,.06) 0%, transparent 100%);
}

.app-grid {
  max-width:1180px; margin:0 auto; padding:0 64px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
.app-grid.flip .app-phone { order:-1; }
.app-info { display:flex; flex-direction:column; gap:22px; }

.app-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fog);
}
.badge-dot {
  width:6px; height:6px; border-radius:50%; background:var(--electric);
  box-shadow:0 0 8px rgba(61,142,255,.6);
}

.app-icon {
  width:68px; height:68px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}

.app-name {
  font-size:clamp(28px,3.5vw,44px); font-weight:700;
  letter-spacing:-.025em; color:var(--head); line-height:1.08;
}
.app-tagline {
  font-size:clamp(16px,1.7vw,19px); color:var(--chrome); line-height:1.55; font-weight:400;
}

.features { list-style:none; display:flex; flex-direction:column; gap:14px; }
.features li {
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:var(--chrome); line-height:1.55;
}
.feat-icon {
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}

.app-actions { margin-top:10px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.app-store-btn {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--head); color:var(--bg); padding:11px 22px; border-radius:12px;
  text-decoration:none; font-size:13px; font-weight:700;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:transform .15s, box-shadow .2s;
}
.app-store-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.5); }

.badge-soon {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  color:var(--fog); padding:9px 18px; border-radius:99px;
  font-size:12px; font-weight:500;
}

/* === Phone Frame === */
.app-phone { display:flex; justify-content:center; align-items:center; position:relative; }

/* Glow halo behind phone */
.phone-halo {
  position:absolute; border-radius:50%;
  filter:blur(60px); pointer-events:none; z-index:0;
}
.gamma-halo {
  width:340px; height:500px;
  background:radial-gradient(ellipse, rgba(139,92,246,.22) 0%, rgba(61,142,255,.12) 50%, transparent 100%);
}
.obras-halo {
  width:320px; height:460px;
  background:radial-gradient(ellipse, rgba(21,128,61,.2) 0%, rgba(0,160,80,.08) 50%, transparent 100%);
}

.phone {
  width:272px; height:545px; border-radius:46px;
  border:1px solid rgba(255,255,255,.1); background:#06101e;
  position:relative; overflow:hidden; z-index:1;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 50px 100px rgba(0,0,0,.65),
    0 12px 32px rgba(0,0,0,.45),
    0 0 60px rgba(61,142,255,.08);
  transform:perspective(1000px) rotateY(-12deg) rotateX(4deg);
  transition:transform .7s var(--ease), box-shadow .5s var(--ease);
}
.phone:hover {
  transform:perspective(1000px) rotateY(-4deg) rotateX(1deg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 60px 120px rgba(0,0,0,.7),
    0 14px 40px rgba(0,0,0,.5),
    0 0 80px rgba(61,142,255,.14);
}
.flip .phone {
  transform:perspective(1000px) rotateY(12deg) rotateX(4deg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 50px 100px rgba(0,0,0,.65),
    0 12px 32px rgba(0,0,0,.45),
    0 0 60px rgba(21,128,61,.1);
}
.flip .phone:hover {
  transform:perspective(1000px) rotateY(4deg) rotateX(1deg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 60px 120px rgba(0,0,0,.7),
    0 0 80px rgba(21,128,61,.16);
}

.notch {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:90px; height:26px; background:#06101e;
  border-radius:0 0 18px 18px; z-index:20;
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.screen { width:100%; height:100%; border-radius:44px; overflow:hidden; }

/* === Gamma Screenshot Carousel === */
.gamma-carousel {
  width:100%; height:100%; position:relative;
  background:#fff;
}
.gamma-carousel img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  border-radius:44px;
  transition:opacity 1s ease;
}
.gamma-carousel img.hidden { opacity:0; }
.gamma-carousel img.visible { opacity:1; }

/* === Obras Screen (keeps HTML) === */
.obras-screen {
  background:#f0f8f0; display:flex; flex-direction:column;
  align-items:center; padding:30px 14px 14px; gap:9px; height:100%;
  font-family:'Space Grotesk',sans-serif;
}
.ob-status { align-self:stretch; display:flex; justify-content:space-between; font-size:9px; color:#888; }
.ob-app-icon {
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(135deg,#22c55e,#15803d);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(21,128,61,.3);
}
.ob-h1 { font-size:18px; font-weight:800; text-align:center; color:#111; line-height:1.2; }
.ob-h1 span { color:#15803d; }
.ob-sub { font-size:10px; text-align:center; color:#666; line-height:1.55; max-width:200px; }
.ob-cards { align-self:stretch; display:flex; flex-direction:column; gap:6px; }
.ob-card {
  background:#fff; border-radius:10px; padding:9px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.ob-card-ico {
  width:30px; height:30px; border-radius:7px; background:#dcfce7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ob-ct { font-size:11px; font-weight:700; color:#111; }
.ob-cs { font-size:9px; color:#666; }
.ob-cta {
  align-self:stretch; background:#15803d; color:#fff;
  border-radius:99px; padding:11px; text-align:center;
  font-size:12px; font-weight:700; margin-top:auto;
}

/* === Newsletter === */
#newsletter {
  background:var(--bg); position:relative; z-index:2;
  padding:110px 48px; text-align:center; overflow:hidden;
}
#newsletter::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 100%, rgba(61,142,255,.06) 0%, transparent 100%);
}
.nl-h2 {
  font-size:clamp(30px,4.5vw,58px); font-weight:700;
  letter-spacing:-.028em; color:var(--head); margin-bottom:16px;
}
.nl-sub {
  font-size:clamp(15px,1.7vw,18px); color:var(--fog);
  max-width:440px; margin:0 auto 36px; line-height:1.7;
}
.nl-form {
  display:flex; gap:10px; justify-content:center;
  flex-wrap:wrap; max-width:480px; margin:0 auto;
}
.nl-input {
  flex:1; min-width:220px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text); padding:14px 20px; border-radius:12px;
  font-size:14px; font-family:var(--font); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.nl-input::placeholder { color:var(--fog); }
.nl-input:focus {
  border-color:var(--electric);
  box-shadow:0 0 0 3px rgba(61,142,255,.12);
}

/* === Footer === */
footer {
  background:var(--bg); border-top:1px solid var(--border);
  padding:28px 56px; display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:2;
}
.foot-copy { font-size:12px; color:var(--fog); }
.foot-logo {
  font-size:14px; font-weight:700; letter-spacing:.14em; color:var(--chrome);
  display:flex; align-items:center; gap:8px; text-decoration:none;
}

/* === Keyframes === */
@keyframes fadeUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }

/* === Scroll animation === */
.fade-up {
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.fade-up.in { opacity:1; transform:none; }

/* delay helpers */
.fade-up.d1 { transition-delay:.1s; }
.fade-up.d2 { transition-delay:.22s; }
.fade-up.d3 { transition-delay:.34s; }

/* === Language toggle === */
.lang-en { display:none; }
body.en .lang-pt { display:none; }
body.en .lang-en { display:block; }
body.en span.lang-en { display:inline; }
body.en span.lang-pt { display:none; }

/* === Responsive === */
@media (max-width:960px) {
  nav { padding:16px 24px; }
  .nav-links { display:none; }
  .app-grid { grid-template-columns:1fr; gap:52px; padding:0 24px; }
  .app-grid.flip .app-phone { order:0; }
  .app-phone { order:-1; }
  #hero { padding:120px 24px 80px; }
  #about, #apps-header, #newsletter { padding-left:24px; padding-right:24px; }
  footer { flex-direction:column; gap:10px; text-align:center; padding:24px; }
}