/* ═══════════════════════════════════════════════════════════
   SunfishDesk – Shared Stylesheet  (Dark Theme)
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy:       #0B1D35;
  --navy-mid:   #0D2240;
  --navy-card:  rgba(255,255,255,.04);
  --navy-card2: rgba(255,255,255,.07);
  --teal:       #0891B2;
  --teal-dark:  #0E7490;
  --cyan:       #06B6D4;
  --cyan-light: #67E8F9;
  --border:     rgba(255,255,255,.1);
  --border-h:   rgba(8,145,178,.4);
  --text:       rgba(255,255,255,.88);
  --text-sub:   rgba(255,255,255,.58);
  --text-faint: rgba(255,255,255,.35);
  --grad-hero:  linear-gradient(135deg,#0B1D35 0%,#0E4D6E 55%,#0891B2 100%);
  --grad-accent:linear-gradient(135deg,#06B6D4 0%,#0891B2 100%);
  --grad-card:  linear-gradient(135deg,rgba(8,145,178,.12) 0%,rgba(6,182,212,.05) 100%);
  --shadow-teal:0 8px 32px rgba(8,145,178,.3);
  --shadow-card:0 20px 60px rgba(0,0,0,.35);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
  --ease: all .3s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* Ocean depth gradient — spans full page height so scrolling = diving */
  background-color: #000203;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(to bottom,
      #06101E 0%,     /* dark twilight sky */
      #091A32 6%,     /* deep night sky */
      #0A2E55 16%,    /* gradual shift toward ocean — no bright spike */
      #0891B2 26%,    /* shallow water */
      #06608A 39%,
      #0A3D6B 54%,
      #061B3A 69%,
      #030E22 81%,
      #010508 92%,
      #000203 100%
    );
  background-size: 64px 64px, 64px 64px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; }

/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4 { line-height:1.15; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.display { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.06; }
.h2      { font-size:clamp(1.75rem,3.5vw,2.4rem); }
.h3      { font-size:clamp(1.1rem,2vw,1.35rem); }
.body-lg { font-size:1.1rem; line-height:1.78; }
p        { color: var(--text-sub); }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.section   { padding:6rem 0; position:relative; }
.section-sm{ padding:4rem 0; position:relative; }

/* Section decoration: subtle teal glow variants */
.glow-left::before {
  content:''; position:absolute; left:-10%; top:20%; width:50%; height:60%;
  background:radial-gradient(ellipse,rgba(8,145,178,.07) 0%,transparent 70%);
  pointer-events:none;
}
.glow-right::before {
  content:''; position:absolute; right:-10%; top:20%; width:50%; height:60%;
  background:radial-gradient(ellipse,rgba(6,182,212,.07) 0%,transparent 70%);
  pointer-events:none;
}
.glow-center::before {
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:70%; height:100%;
  background:radial-gradient(ellipse,rgba(8,145,178,.06) 0%,transparent 65%);
  pointer-events:none;
}
.section-alt { background: rgba(0,0,0,.18); }

.section-header { text-align:center; max-width:680px; margin:0 auto 4rem; }
.section-header p { color:var(--text-sub); margin-top:.875rem; }

/* ── Label pill ────────────────────────────────────────────── */
.label {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan-light); background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.2);
  padding:.28rem .85rem; border-radius:100px; margin-bottom:1.25rem;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.75rem; border-radius:var(--r-md);
  font-size:.95rem; font-weight:600;
  border:none; cursor:pointer; transition:var(--ease);
  text-decoration:none;
}
.btn-primary {
  background:var(--grad-accent); color:#fff;
  box-shadow:var(--shadow-teal);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 44px rgba(8,145,178,.5); }
.btn-ghost  { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.25); }
.btn-ghost:hover  { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }
.btn-outline{ background:transparent; color:var(--cyan); border:1.5px solid rgba(6,182,212,.5); }
.btn-outline:hover{ background:rgba(6,182,212,.1); border-color:var(--cyan); transform:translateY(-2px); }

/* ── Navigation ────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:var(--ease);
}
nav.scrolled {
  background:rgba(5,20,42,.92);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(6,182,212,.12);
  box-shadow:0 4px 32px rgba(0,0,0,.45);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; max-width:1200px; margin:0 auto; padding:0 1.5rem;
}
.nav-logo {
  display:flex; align-items:center; gap:.65rem; text-decoration:none; flex-shrink:0;
}
.nav-logo img { height:52px; width:auto; object-fit:contain; }
.nav-logo-text { font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-.03em; }

/* Main links */
.nav-links { display:flex; align-items:center; gap:1.75rem; list-style:none; }
.nav-links > li > a {
  color:rgba(255,255,255,.65); font-size:.875rem; font-weight:500;
  text-decoration:none; transition:color .2s; white-space:nowrap;
}
.nav-links > li > a:hover { color:#fff; }
.nav-links > li.active > a { color:#fff; }

/* Dropdown */
.has-dropdown { position:relative; }
.has-dropdown > a::after { content:' ▾'; font-size:.65rem; opacity:.6; }
.dropdown {
  position:absolute; top:calc(100% + 10px); left:-1rem;
  background:rgba(13,34,64,.98); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  min-width:240px; padding:.6rem; list-style:none;
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s,transform .25s;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.dropdown li a {
  display:block; padding:.55rem .85rem;
  color:rgba(255,255,255,.65); font-size:.855rem; font-weight:500;
  border-radius:var(--r-sm); transition:var(--ease);
}
.dropdown li a:hover { background:rgba(8,145,178,.15); color:#fff; }
.dropdown-sep { height:1px; background:rgba(255,255,255,.08); margin:.4rem 0; }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.5rem;
}
.hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:var(--ease); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display:none; position:fixed; top:68px; left:0; right:0;
  background:rgba(11,29,53,.98); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08); z-index:999;
  max-height:calc(100vh - 68px); overflow-y:auto;
}
.mobile-menu.open { display:block; }
.mobile-menu a {
  display:block; color:rgba(255,255,255,.78); text-decoration:none;
  padding:.8rem 1.5rem; font-size:.975rem; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.06); transition:color .2s;
}
.mobile-menu a:hover { color:#fff; }
.mobile-menu .mm-section {
  display:block; color:rgba(255,255,255,.35); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.6rem 1.5rem .3rem; border-bottom:none;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  min-height:100vh; background:transparent;
  display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    /* Subtle moon/star glow — faint brightening in the dark sky */
    radial-gradient(ellipse 120% 35% at 50% -5%, rgba(80,160,220,.12) 0%, transparent 55%),
    /* Underwater light shimmer below the waves */
    radial-gradient(ellipse 80% 60% at 65% 68%, rgba(8,145,178,.14) 0%, transparent 60%),
    radial-gradient(circle at 12% 90%, rgba(6,182,212,.09) 0%, transparent 40%);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
}
.hero-fish { position:absolute; right:-3%; top:50%; transform:translateY(-50%); width:46vw; max-width:660px; opacity:.035; pointer-events:none; }
.hero .container {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
  min-height:100vh; padding-top:90px; padding-bottom:4rem; position:relative; z-index:1;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(6,182,212,.12); border:1px solid rgba(6,182,212,.25);
  color:var(--cyan-light); font-size:.78rem; font-weight:500;
  padding:.38rem 1rem; border-radius:100px; margin-bottom:1.75rem;
}
.hero-badge-dot { width:6px; height:6px; background:var(--cyan); border-radius:50%; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
.hero h1 { color:#fff; margin-bottom:1.5rem; }
.hero h1 .accent {
  background:linear-gradient(135deg,#67E8F9,#0EA5E9);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { color:rgba(255,255,255,.6); margin-bottom:2.5rem; max-width:520px; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* Dashboard card */
.hero-card {
  background:rgba(255,255,255,.06); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-xl);
  padding:1.75rem; width:100%; max-width:400px; margin-left:auto;
}
.hero-card-bar {
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.4rem;
  padding-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.07);
}
.dot-r{width:9px;height:9px;border-radius:50%;background:#ef4444;}
.dot-y{width:9px;height:9px;border-radius:50%;background:#f59e0b;margin:0 2px;}
.dot-g{width:9px;height:9px;border-radius:50%;background:#22c55e;}
.hc-title{color:rgba(255,255,255,.38);font-size:.72rem;margin-left:.2rem;}
.hc-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.hc-row:last-child{border-bottom:none;}
.hc-lbl{color:rgba(255,255,255,.45);font-size:.8rem;}
.hc-val{color:#fff;font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:.4rem;}
.badge{font-size:.64rem;padding:.17rem .52rem;border-radius:100px;font-weight:600;}
.badge-g{background:rgba(34,197,94,.15);color:#4ade80;}
.badge-b{background:rgba(59,130,246,.15);color:#60a5fa;}

/* ── Trust Bar ─────────────────────────────────────────────── */
.trust-bar { background:rgba(0,0,0,.25); padding:1.2rem 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
.trust-track { display:flex; gap:3rem; align-items:center; animation:scroll-left 28s linear infinite; white-space:nowrap; }
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.trust-item { color:rgba(255,255,255,.25); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.trust-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--teal);display:block;}

/* ── Generic dark card ─────────────────────────────────────── */
.card-dark {
  background:var(--navy-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:2rem;
  transition:var(--ease);
}
.card-dark:hover {
  background:var(--navy-card2); border-color:var(--border-h);
  transform:translateY(-3px); box-shadow:var(--shadow-card);
}

/* ── About ─────────────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-visual-card {
  background:linear-gradient(135deg,rgba(8,145,178,.18) 0%,rgba(6,182,212,.08) 100%);
  border:1px solid rgba(8,145,178,.25);
  border-radius:var(--r-xl); padding:2.5rem; position:relative; overflow:hidden;
}
.about-visual-card::after {
  content:''; position:absolute; right:-50px; top:-50px;
  width:200px; height:200px; border-radius:50%; background:rgba(6,182,212,.08);
}
.about-visual-card h3 { font-size:1.85rem; font-weight:800; color:#fff; margin-bottom:.3rem; }
.about-visual-card > p { color:rgba(255,255,255,.5); font-size:.875rem; margin-bottom:1.5rem; }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-top:1.5rem; }
.metric { background:rgba(255,255,255,.07); border-radius:var(--r-md); padding:1rem; }
.metric-v { font-size:1.7rem; font-weight:800; color:#fff; line-height:1; margin-bottom:.2rem; }
.metric-l { font-size:.7rem; color:rgba(255,255,255,.45); font-weight:500; }
.about-sub-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:1.1rem 1.4rem; margin-top:1rem;
  display:flex; align-items:center; gap:.9rem;
}
.sub-icon {
  width:38px; height:38px; background:rgba(8,145,178,.15); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; color:var(--cyan); flex-shrink:0;
}
.about-content h2 { margin-bottom:1.25rem; }
.about-content p  { color:var(--text-sub); margin-bottom:1rem; }
.about-content p:last-of-type { margin-bottom:0; }
.name-story {
  background:rgba(8,145,178,.07); border:1px solid rgba(8,145,178,.18);
  border-left:3px solid var(--teal);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:1.15rem 1.5rem; margin-top:1.75rem;
}
.name-story strong { display:block; color:var(--cyan); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; }
.name-story p { color:rgba(255,255,255,.6); font-size:.875rem; margin:0; }

/* ── Timeline ──────────────────────────────────────────────── */
.timeline { position:relative; max-width:820px; margin:0 auto; }
.timeline::before {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  top:0; bottom:0; width:1.5px;
  background:linear-gradient(to bottom,var(--teal),var(--cyan),rgba(8,145,178,.1));
}
.tl-item { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:2.75rem; position:relative; }
.tl-item:last-child { margin-bottom:0; }
.tl-dot {
  position:absolute; left:50%; top:1.5rem; transform:translateX(-50%);
  width:13px; height:13px; background:var(--teal); border-radius:50%;
  border:3px solid var(--navy); box-shadow:0 0 0 3px rgba(8,145,178,.25); z-index:1;
}
.tl-box {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); padding:1.4rem 1.5rem; transition:var(--ease);
}
.tl-box:hover { background:rgba(255,255,255,.07); border-color:rgba(8,145,178,.3); transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.tl-year { font-size:.68rem; font-weight:700; color:var(--cyan); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.4rem; }
.tl-box h3 { font-size:.975rem; margin-bottom:.45rem; color:#fff; }
.tl-box p  { font-size:.855rem; color:var(--text-sub); line-height:1.65; }
.tl-right  { grid-column:2; }

/* ── Service Cards ─────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; }
.svc-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:1.9rem;
  transition:var(--ease); position:relative; overflow:hidden;
  text-decoration:none; display:block; cursor:pointer;
}
.svc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.svc-card:hover { background:rgba(255,255,255,.07); border-color:rgba(8,145,178,.3); transform:translateY(-4px); box-shadow:var(--shadow-card); }
.svc-card:hover::before { transform:scaleX(1); }
.svc-icon {
  width:50px; height:50px;
  background:rgba(8,145,178,.12);
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem; color:var(--cyan); transition:var(--ease);
}
.svc-card:hover .svc-icon { background:var(--grad-accent); color:#fff; }
.svc-card h3 { font-size:1rem; margin-bottom:.5rem; color:#fff; }
.svc-card p  { font-size:.855rem; color:var(--text-sub); line-height:1.65; margin:0; }
.svc-link {
  display:inline-flex; align-items:center; gap:.3rem;
  color:var(--cyan); font-size:.78rem; font-weight:600;
  margin-top:.9rem; opacity:0; transform:translateX(-4px); transition:var(--ease);
}
.svc-card:hover .svc-link { opacity:1; transform:translateX(0); }

/* ── Why Items ─────────────────────────────────────────────── */
.why-grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:1.35rem; }
.why-item  {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:1.9rem;
  display:flex; gap:1.2rem; align-items:flex-start; transition:var(--ease);
}
.why-item:hover { background:rgba(255,255,255,.07); border-color:rgba(8,145,178,.25); transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.25); }
.why-icon  {
  width:42px; height:42px; min-width:42px;
  background:rgba(8,145,178,.12); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; color:var(--cyan);
}
.why-item h3 { font-size:.975rem; margin-bottom:.35rem; color:#fff; }
.why-item p  { font-size:.845rem; color:var(--text-sub); line-height:1.65; margin:0; }

/* ── Stats ─────────────────────────────────────────────────── */
.stats { background:rgba(8,145,178,.06); border-top:1px solid rgba(8,145,178,.15); border-bottom:1px solid rgba(8,145,178,.15); padding:4.5rem 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat-val {
  font-size:clamp(2rem,4.5vw,3rem); font-weight:800; line-height:1; margin-bottom:.4rem;
  background:linear-gradient(135deg,#fff,#67E8F9);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-lbl { color:var(--text-sub); font-size:.82rem; font-weight:500; }

/* ── Team ──────────────────────────────────────────────────── */
.team-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem;
  max-width:900px; margin:0 auto;
}
.team-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-xl); overflow:hidden; transition:var(--ease);
}
.team-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:rgba(8,145,178,.3); }
.tc-head {
  background:linear-gradient(135deg,rgba(8,145,178,.2) 0%,rgba(6,182,212,.1) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:2.25rem 1.75rem 1.75rem; text-align:center;
}
.avatar {
  width:96px; height:96px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:3px solid rgba(255,255,255,.15);
  margin:0 auto 1rem;
}
.avatar-initials {
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,rgba(6,182,212,.3),rgba(14,165,233,.2));
  border:3px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; font-size:1.9rem; font-weight:800; color:#fff;
}
.tc-name { color:#fff; font-size:1.2rem; font-weight:700; margin-bottom:.2rem; }
.tc-role { color:rgba(255,255,255,.5); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.tc-body { padding:1.75rem; }
.tc-bio  { font-size:.875rem; color:var(--text-sub); line-height:1.72; margin-bottom:1.25rem; }
.skills  { display:flex; flex-wrap:wrap; gap:.45rem; }
.skill   { background:rgba(8,145,178,.12); color:var(--cyan-light); font-size:.72rem; font-weight:600; padding:.28rem .7rem; border-radius:100px; border:1px solid rgba(8,145,178,.2); }

/* ── Vision / Mission ──────────────────────────────────────── */
.vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.vm-card { border-radius:var(--r-xl); padding:3rem; position:relative; overflow:hidden; }
.vm-v    { background:linear-gradient(135deg,rgba(8,145,178,.2) 0%,rgba(6,182,212,.08) 100%); border:1px solid rgba(8,145,178,.25); }
.vm-m    { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.vm-v::after { content:''; position:absolute; right:-60px; bottom:-60px; width:240px; height:240px; border-radius:50%; background:rgba(6,182,212,.07); }
.vm-lbl  { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:.9rem; }
.vm-v .vm-lbl { color:rgba(255,255,255,.45); }
.vm-m .vm-lbl { color:var(--cyan); }
.vm-card h3 { font-size:1.35rem; margin-bottom:1rem; line-height:1.3; color:#fff; }
.vm-card p  { font-size:.91rem; line-height:1.78; color:var(--text-sub); margin:0; }

/* ── Use Cases ─────────────────────────────────────────────── */
.uc-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.uc-card  { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:1.65rem; transition:var(--ease); }
.uc-card:hover { background:rgba(255,255,255,.07); border-color:rgba(8,145,178,.25); box-shadow:0 12px 40px rgba(0,0,0,.25); }
.uc-icon  { width:42px; height:42px; border-radius:var(--r-sm); background:rgba(8,145,178,.12); display:flex; align-items:center; justify-content:center; color:var(--cyan); margin-bottom:.9rem; }
.uc-card h3 { font-size:.925rem; font-weight:700; margin-bottom:.35rem; color:#fff; }
.uc-card p  { font-size:.84rem; color:var(--text-sub); line-height:1.65; margin:0; }

/* ── Testimonials ──────────────────────────────────────────── */
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.test-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:1.9rem; transition:var(--ease); }
.test-card:hover { background:rgba(255,255,255,.07); border-color:rgba(8,145,178,.25); transform:translateY(-2px); }
.test-q    { color:var(--cyan); font-size:2.2rem; line-height:1; margin-bottom:.65rem; font-family:Georgia,serif; }
.test-text { font-size:.875rem; color:var(--text-sub); line-height:1.72; margin-bottom:1.2rem; font-style:italic; }
.test-author { display:flex; align-items:center; gap:.7rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.07); }
.test-av   { width:34px; height:34px; border-radius:50%; background:var(--grad-accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.7rem; font-weight:700; flex-shrink:0; }
.test-name { font-size:.82rem; font-weight:600; color:#fff; }
.test-org  { font-size:.74rem; color:var(--text-faint); }

/* ── CTA ───────────────────────────────────────────────────── */
.cta {
  background:linear-gradient(135deg,rgba(8,145,178,.18) 0%,rgba(6,182,212,.08) 100%);
  border-top:1px solid rgba(8,145,178,.2); border-bottom:1px solid rgba(8,145,178,.1);
  padding:7rem 0; position:relative; overflow:hidden;
}
.cta::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 50%,rgba(6,182,212,.1) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(14,165,233,.07) 0%,transparent 40%);
}
.cta-inner { position:relative; z-index:1; text-align:center; max-width:600px; margin:0 auto; }
.cta h2    { color:#fff; margin-bottom:1rem; }
.cta p     { color:rgba(255,255,255,.6); margin-bottom:2.5rem; }
.cta-acts  { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background:rgba(0,0,0,.35); color:var(--text-sub);
  padding:4.5rem 0 2rem; border-top:1px solid rgba(255,255,255,.07);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand-logo { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }
.footer-brand-logo img { height:32px; width:auto; object-fit:contain; }
.footer-brand-logo span { font-size:1.1rem; font-weight:800; color:#fff; letter-spacing:-.03em; }
.footer-brand p { font-size:.86rem; line-height:1.72; max-width:270px; }
.footer-col h4 { color:#fff; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.1rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.55rem; }
.footer-col a  { color:var(--text-faint); font-size:.845rem; text-decoration:none; transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid rgba(255,255,255,.07); gap:1rem; flex-wrap:wrap; }
.footer-bottom p { font-size:.76rem; }
.footer-links   { display:flex; gap:1.5rem; }
.footer-links a { color:rgba(255,255,255,.3); font-size:.76rem; text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:rgba(255,255,255,.7); }

/* ── Contact Form ──────────────────────────────────────────── */
.contact-page { padding-top:120px; }
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; }
.contact-info h2 { margin-bottom:1rem; }
.contact-info p  { color:var(--text-sub); margin-bottom:2rem; }
.contact-detail  { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.contact-detail-icon { width:38px; height:38px; background:rgba(8,145,178,.12); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--cyan); flex-shrink:0; }
.contact-detail p { color:var(--text-sub); font-size:.875rem; margin:0; }

.form-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-xl); padding:2.5rem;
}
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-group  { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.65); margin-bottom:.5rem; }
.form-group label .req { color:var(--cyan); }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); padding:.8rem 1rem;
  color:#fff; font-family:inherit; font-size:.925rem;
  outline:none; transition:var(--ease);
  -webkit-appearance:none; appearance:none;
}
.form-group select { cursor:pointer; }
.form-group select option { background:#0D2240; color:#fff; }
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(255,255,255,.3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:rgba(8,145,178,.6);
  background:rgba(8,145,178,.07);
  box-shadow:0 0 0 3px rgba(8,145,178,.12);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error { border-color:rgba(239,68,68,.5); }
.form-error { color:#f87171; font-size:.76rem; margin-top:.35rem; display:none; }
.form-error.show { display:block; }
.form-group textarea { resize:vertical; min-height:140px; }
.form-dsgvo {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md); padding:1rem 1.1rem; margin-bottom:1.5rem;
}
.form-dsgvo p { font-size:.78rem; color:var(--text-faint); line-height:1.65; margin:0; }
.form-dsgvo a { color:var(--cyan); }
.checkbox-wrap { display:flex; align-items:flex-start; gap:.65rem; margin-bottom:1.5rem; }
.checkbox-wrap input[type="checkbox"] { width:16px; height:16px; accent-color:var(--cyan); margin-top:.15rem; flex-shrink:0; cursor:pointer; }
.checkbox-wrap label { font-size:.8rem; color:var(--text-sub); cursor:pointer; line-height:1.6; }
.checkbox-wrap label a { color:var(--cyan); }
.honeypot { display:none !important; }
.form-success {
  display:none; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25);
  border-radius:var(--r-lg); padding:1.5rem; text-align:center; margin-top:1rem;
}
.form-success.show { display:block; }
.form-success p { color:#4ade80; font-weight:600; margin:0; }

/* ── Legal Pages ───────────────────────────────────────────── */
.legal-page { padding-top:120px; }
.legal-hero { text-align:center; padding:4rem 0; position:relative; }
.legal-content { max-width:820px; margin:0 auto; padding:0 1.5rem 6rem; }
.legal-content h2 { font-size:1.35rem; color:#fff; margin:2.5rem 0 .75rem; }
.legal-content h3 { font-size:1rem; color:#fff; margin:1.75rem 0 .6rem; font-weight:600; }
.legal-content p  { color:var(--text-sub); font-size:.9rem; line-height:1.78; margin-bottom:1rem; }
.legal-content ul,
.legal-content ol { color:var(--text-sub); font-size:.9rem; line-height:1.78; padding-left:1.5rem; margin-bottom:1rem; }
.legal-content li { margin-bottom:.35rem; }
.legal-content a  { color:var(--cyan); }
.legal-content a:hover { color:var(--cyan-light); }
.legal-content .info-box {
  background:rgba(8,145,178,.07); border:1px solid rgba(8,145,178,.18);
  border-radius:var(--r-lg); padding:1.5rem; margin:1.5rem 0;
}
.legal-content .info-box p { margin:0; }
.legal-divider { border:none; border-top:1px solid rgba(255,255,255,.07); margin:2.5rem 0; }

/* ── Service Detail Pages ──────────────────────────────────── */
.service-page { padding-top:68px; }
.service-hero {
  padding:5rem 0; position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(8,145,178,.15) 0%,rgba(6,182,212,.05) 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.service-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.service-hero-icon {
  width:72px; height:72px; background:rgba(8,145,178,.15); border:1px solid rgba(8,145,178,.3);
  border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center;
  color:var(--cyan); margin-bottom:1.5rem;
}
.service-hero h1 { color:#fff; margin-bottom:1rem; }
.service-hero p  { color:rgba(255,255,255,.6); font-size:1.05rem; line-height:1.75; margin:0; }
.service-hero-visual {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl); padding:2rem;
}
.feat-list { list-style:none; }
.feat-list li {
  display:flex; align-items:center; gap:.75rem; padding:.65rem 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.75); font-size:.875rem;
}
.feat-list li:last-child { border-bottom:none; }
.feat-list li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); flex-shrink:0; }

.features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.feature-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:1.75rem; transition:var(--ease);
}
.feature-card:hover { background:rgba(255,255,255,.07); border-color:rgba(8,145,178,.25); }
.feature-card-icon { width:40px; height:40px; background:rgba(8,145,178,.12); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--cyan); margin-bottom:1rem; }
.feature-card h3 { font-size:.95rem; margin-bottom:.4rem; color:#fff; }
.feature-card p  { font-size:.845rem; color:var(--text-sub); line-height:1.65; margin:0; }

.benefits-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.benefit-item {
  background:rgba(8,145,178,.06); border:1px solid rgba(8,145,178,.15);
  border-radius:var(--r-lg); padding:1.5rem; text-align:center;
}
.benefit-num { font-size:2rem; font-weight:800; color:var(--cyan); line-height:1; margin-bottom:.4rem; }
.benefit-item h3 { font-size:.9rem; color:#fff; margin-bottom:.4rem; }
.benefit-item p  { font-size:.82rem; color:var(--text-sub); line-height:1.6; margin:0; }

/* Back link */
.back-link {
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--text-sub); font-size:.855rem; text-decoration:none;
  transition:color .2s; margin-bottom:2rem;
}
.back-link:hover { color:var(--cyan); }

/* ── Page inner hero (for simple pages) ────────────────────── */
.page-hero {
  padding:5rem 0 4rem; text-align:center;
  background:linear-gradient(135deg,rgba(8,145,178,.1) 0%,rgba(6,182,212,.04) 100%);
  border-bottom:1px solid rgba(255,255,255,.07); position:relative;
}
.page-hero h1  { color:#fff; margin-bottom:.75rem; }
.page-hero p   { color:var(--text-sub); max-width:560px; margin:0 auto; }

/* ── Reveal animations ─────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1024px) {
  .hero .container    { grid-template-columns:1fr; }
  .hero-card-wrap     { display:none; }
  .about-grid         { grid-template-columns:1fr; gap:3rem; }
  .services-grid      { grid-template-columns:repeat(2,1fr); }
  .stats-grid         { grid-template-columns:repeat(2,1fr); }
  .footer-grid        { grid-template-columns:1fr 1fr; }
  .test-grid          { grid-template-columns:repeat(2,1fr); }
  .service-hero-inner { grid-template-columns:1fr; }
  .service-hero-visual{ display:none; }
  .contact-grid       { grid-template-columns:1fr; }
  .benefits-list      { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .section { padding:3.5rem 0; }
  nav .nav-links, nav .nav-cta-d { display:none !important; }
  .hamburger { display:flex; }
  .timeline::before { left:18px; }
  .tl-item   { grid-template-columns:1fr; padding-left:46px; }
  .tl-dot    { left:18px; }
  .tl-right  { grid-column:1; }
  .services-grid { grid-template-columns:1fr; }
  .why-grid      { grid-template-columns:1fr; }
  .team-grid     { grid-template-columns:1fr; max-width:430px; }
  .vm-grid       { grid-template-columns:1fr; }
  .uc-grid       { grid-template-columns:1fr; }
  .test-grid     { grid-template-columns:1fr; }
  .footer-grid   { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .form-row      { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .benefits-list { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .hero-actions,.cta-acts { flex-direction:column; align-items:flex-start; }
  .cta-acts { align-items:center; }
}


#fish-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  background: url('../img/cursor.png') center/contain no-repeat;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-100px, -100px);
  will-change: transform;
}


/* ══════════════════════════════════════════════════════════
   OCEAN ATMOSPHERE SYSTEM
   ══════════════════════════════════════════════════════════ */

/* Sky darkening layer — keeps the nav area dark enough for white text */
.hero-sky-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 75%;
  background: linear-gradient(
    to bottom,
    rgba(2,6,18,.72) 0%,     /* very dark for nav readability */
    rgba(2,8,24,.55) 18%,
    rgba(3,11,30,.28) 44%,
    rgba(4,14,36,.06) 68%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Wave System ─────────────────────────────────────────────
   5 gradient-filled SVG layers + foam + shimmering surface line
   ──────────────────────────────────────────────────────────── */
.ocean-surface-waves {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 280px;
  z-index: 5;
  pointer-events: none;
  /* keep overflow visible so wide wave SVGs don't clip horizontally */
  overflow: visible;
}



@keyframes horizonPulse {
  0%   { opacity: .55; transform: scaleX(1.00); }
  50%  { opacity: 1.00; transform: scaleX(1.015); }
  100% { opacity: .60; transform: scaleX(.990); }
}

/* All wave SVGs share the same base positioning */
.ocean-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%; height: 100%;
}

/* ── Wave animation keyframes ────────────────────────────── */

/* Gentle long-period swell */
@keyframes waveA {
  0%   { transform: translateX(0)      scaleY(1.000); }
  30%  { transform: translateX(-1.8%)  scaleY(1.045); }
  65%  { transform: translateX(1.4%)   scaleY(0.970); }
  100% { transform: translateX(-2.2%)  scaleY(1.020); }
}

/* Shorter cross-chop */
@keyframes waveB {
  0%   { transform: translateX(0)     scaleY(1.000); }
  25%  { transform: translateX(2.6%)  scaleY(1.075); }
  60%  { transform: translateX(-1.2%) scaleY(0.938); }
  100% { transform: translateX(2.0%)  scaleY(1.042); }
}

/* Complex surface churn — front waves */
@keyframes waveC {
  0%   { transform: translateX(0)      scaleY(1.000); }
  20%  { transform: translateX(-3.0%)  scaleY(1.090); }
  50%  { transform: translateX(2.2%)   scaleY(0.920); }
  78%  { transform: translateX(-1.6%)  scaleY(1.055); }
  100% { transform: translateX(2.8%)   scaleY(0.965); }
}

/* ── Per-layer timing ─────────────────────────────────────── */
.wave-l1   { animation: waveA  24s ease-in-out          infinite; }
.wave-l2   { animation: waveB  18s ease-in-out  1.6s    infinite; }
.wave-l3   { animation: waveA  14s ease-in-out  0.9s    infinite reverse; }
.wave-l4   { animation: waveC   9.5s ease-in-out 2.2s   infinite; }
.wave-l5   { animation: waveB   6.5s ease-in-out 0.5s   infinite reverse; }
.wave-foam { animation: waveC   5.0s ease-in-out 0.25s  infinite; }

/* Underwater light shafts — fade out as user scrolls below hero */
.light-rays {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.light-ray {
  position: absolute;
  top: -20%;
  width: 70px;
  height: 130%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.11) 0%,
    rgba(255,255,255,.04) 45%,
    transparent 100%
  );
  filter: blur(10px);
  animation: rayPulse 10s ease-in-out infinite alternate;
}

.light-ray:nth-child(1) { left: 7%;  transform: rotate(-10deg); animation-duration: 9s; }
.light-ray:nth-child(2) { left: 22%; transform: rotate(-3deg);  animation-duration: 13s; animation-delay: 2s;   width: 95px; }
.light-ray:nth-child(3) { left: 41%; transform: rotate( 2deg);  animation-duration: 11s; animation-delay: 1s;   }
.light-ray:nth-child(4) { left: 60%; transform: rotate(-6deg);  animation-duration: 8s;  animation-delay: 3s;   width: 55px; }
.light-ray:nth-child(5) { left: 80%; transform: rotate( 8deg);  animation-duration: 12s; animation-delay: 0.5s; }

@keyframes rayPulse {
  0%   { opacity: .20; }
  45%  { opacity: .55; }
  100% { opacity: .14; }
}

/* Floating bubbles — only visible below the waterline (clip updated via JS) */
#bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  clip-path: inset(100% 0 0 0); /* fully hidden until JS sets waterline */
}

.bubble {
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255,255,255,.55),
    rgba(255,255,255,.06)
  );
  border: 1px solid rgba(255,255,255,.22);
  animation: bubbleFloat linear infinite;
  opacity: 0;
}

@keyframes bubbleFloat {
  0%   { transform: translateY(0px)              translateX(0px);             opacity: 0;    }
  6%   { opacity: .42; }
  88%  { opacity: .28; }
  100% { transform: translateY(calc(-100vh - 60px)) translateX(var(--drift, 12px)); opacity: 0; }
}

/* Footer depth — deep sea styling */
footer {
  background: rgba(0,0,0,.5);
  border-top: 1px solid rgba(6,182,212,.1);
}

/* CTA section — glass panel in the deep */
.cta {
  background: linear-gradient(135deg, rgba(6,182,212,.1) 0%, rgba(8,145,178,.05) 100%);
  border-top: 1px solid rgba(6,182,212,.15);
  border-bottom: 1px solid rgba(6,182,212,.08);
}

/* Glassmorphism on key interactive cards */
.hero-card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
}

.svc-card,
.why-item,
.uc-card,
.test-card,
.tl-box,
.vm-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Depth tint overlays — subtle darkening for deeper sections */
#einsatz, #vision {
  background: rgba(0,0,0,.12);
}

/* Trust bar — just below the waterline */
.trust-bar {
  background: rgba(8,145,178,.12);
  border-top: 1px solid rgba(6,182,212,.18);
  border-bottom: 1px solid rgba(6,182,212,.12);
}

/* Stats — glowing reef in deep water */
.stats {
  background: rgba(6,182,212,.04);
  border-top: 1px solid rgba(8,145,178,.12);
  border-bottom: 1px solid rgba(8,145,178,.12);
}

/* ── SEABED — the user reaches the ocean floor ─────────────────────────────
   Real seabed photo (assets/img/seabed.png) as background.

   Layer stack (back → front):
     .cta background    → image + top-fade that stays dark through content zone
     .cta::before       → centered oval scrim (text readability) + light rays
     .cta::after        → bottom vignette into the footer
     .cta-inner z:1     → content, always on top
────────────────────────────────────────────────────────────────────────── */

/* 1 · Seabed image — overlay stays opaque through the content zone,
        only opens up in the lower ~30% where the sandy floor is visible */
.cta {
  background:
    linear-gradient(to bottom,
      #000203              0%,    /* exact page bg — invisible seam at top  */
      rgba(0, 2, 3, .97)   7%,
      rgba(1, 5,14, .94)  18%,
      rgba(2, 9,20, .90)  34%,   /* dark through text / content zone        */
      rgba(2,10,22, .84)  50%,   /* ship silhouette ghosting through subtly  */
      rgba(2,11,24, .52)  68%,   /* image begins to emerge — sandy floor    */
      rgba(2,11,24, .14)  82%,
      transparent         92%
    ),
    url('../img/seabed.png') bottom center / cover no-repeat;
  border-top:    none;
  border-bottom: none;
}

/* 2 · Centered oval scrim + light rays + sediment */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Central dark oval — creates a natural reading area over the content.
       Radius is wide enough to feel atmospheric, not like a card/box. */
    radial-gradient(ellipse 72% 58% at 50% 38%,
      rgba(0,4,14,.72)  0%,
      rgba(0,4,14,.25) 55%,
      transparent      100%),
    /* Volumetric light shafts — barely perceptible, reinforce depth */
    linear-gradient(170deg,
      transparent 22%, rgba(6,182,212,.018) 22%,
      rgba(6,182,212,.018) 23.5%, transparent 23.5%),
    linear-gradient(166deg,
      transparent 30%, rgba(8,145,178,.013) 30%,
      rgba(8,145,178,.013) 32%,   transparent 32%),
    linear-gradient(162deg,
      transparent 16%, rgba(6,182,212,.011) 16%,
      rgba(6,182,212,.011) 17.4%, transparent 17.4%),
    /* Light-source diffusion from above */
    radial-gradient(ellipse 50% 28% at 36% 0%, rgba(6,182,212,.06) 0%, transparent 100%),
    /* Sediment motes — only in the lower/visible zone */
    radial-gradient(circle 2px at  8% 78%, rgba(145,185,225,.18) 0%, transparent 100%),
    radial-gradient(circle 2px at 19% 86%, rgba(125,168,215,.14) 0%, transparent 100%),
    radial-gradient(circle 3px at 31% 74%, rgba(132,175,218,.11) 0%, transparent 100%),
    radial-gradient(circle 2px at 54% 82%, rgba(115,158,206,.13) 0%, transparent 100%),
    radial-gradient(circle 2px at 67% 76%, rgba(118,160,208,.12) 0%, transparent 100%),
    radial-gradient(circle 3px at 80% 88%, rgba(128,170,214,.10) 0%, transparent 100%),
    radial-gradient(circle 2px at 92% 80%, rgba(110,155,204,.13) 0%, transparent 100%);
  animation: seabedCaustic 10s ease-in-out infinite;
}

/* 3 · Bottom vignette — darkens the floor edge to blend into the footer */
.cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to top,
    rgba(0,2,3,.80)  0%,
    transparent      100%
  );
}

/* Caustic shimmer — slow opacity breath, simulates light through water */
@keyframes seabedCaustic {
  0%   { opacity: 1;   }
  50%  { opacity: .82; }
  100% { opacity: 1;   }
}

/* Text readability over the seabed image — subtle glow/shadow so lettering
   pops against both the dark overlay and any image bleed-through */
.cta h2 {
  text-shadow: 0 2px 24px rgba(0,4,14,.80), 0 1px 6px rgba(0,4,14,.60);
}
.cta p {
  color: rgba(255,255,255,.82);   /* brighter than the base .60 */
  text-shadow: 0 1px 12px rgba(0,4,14,.70);
}
.cta .label {
  text-shadow: 0 1px 8px rgba(0,4,14,.60);
}