/* Neptune Data marketing site — shared styles for all pages. */
:root {
  --bg: #FAFAF7; --bg-alt: #F4F3EE; --ink: #1C1B18; --ink-soft: #23211C;
  --border: #E2DDD4; --border-strong: #C9C3B5;
  --text: #18160F; --text-mid: #5C5648; --text-muted: #8C8478;
  --accent: #B5813A; --accent-light: #F5ECD8; --accent-subtle: #7A6B4F;
  --good: #4A6741; --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; font-family: var(--sans); color: var(--text);
             background: var(--bg); font-size: 15.5px; line-height: 1.7;
             -webkit-font-smoothing: antialiased; }
a { color: var(--accent-subtle); text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.6rem; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.3rem);
     line-height: 1.2; margin: 0 0 0.5rem; }
.eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--accent); margin: 0 0 0.6rem; }
.lede { color: var(--text-mid); max-width: 62ch; margin: 0.4rem 0 0; }
section { padding: 4.4rem 0; }
section.alt { background: var(--bg-alt); border-top: 1px solid var(--border);
              border-bottom: 1px solid var(--border); }
section.onink { background: var(--ink); color: #C8C0B0; }
section.onink h2 { color: #F4F3EE; }
section.onink .lede { color: #A89F8F; }

/* ── nav ─────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 247, 0.9);
       backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-in { display: flex; align-items: center; gap: 1.8rem; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem;
         font-family: var(--serif); font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.brand .gold { color: var(--accent); }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
.nav-links a { font-size: 0.84rem; font-weight: 500; color: var(--text-mid); }
.nav-links a:hover, .nav-links a.here { color: var(--accent-subtle); }
.nav-links a.here { font-weight: 600; }
.btn { display: inline-block; padding: 0.62em 1.35em; border-radius: 5px;
       font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer;
       border: 1px solid var(--accent); transition: background 0.14s, color 0.14s; }
.btn.solid { background: var(--accent); color: #FAFAF7; }
.btn.solid:hover { background: #A07230; }
.btn.ghost { color: var(--accent-subtle); background: transparent; }
.btn.ghost:hover { background: var(--accent-light); }
.btn.onink { border-color: #5A554A; color: #E8E3D8; background: transparent; }
.btn.onink:hover { background: var(--ink-soft); }

/* ── heroes ──────────────────────────────────────────────────────── */
.hero { background: var(--ink); color: #C8C0B0; position: relative; overflow: hidden;
        padding: 5.4rem 0 6.2rem; }
.hero h1 { font-family: var(--serif); font-size: clamp(2.2rem, 4.8vw, 3.3rem);
           font-weight: 700; color: #F4F3EE; line-height: 1.12; margin: 1.3rem 0 1rem;
           max-width: 22ch; }
.hero .gold { color: var(--accent); }
.hero p.sub { max-width: 58ch; font-size: 1.02rem; color: #A89F8F; margin: 0 0 2rem; }
.hero .ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero .trust { margin-top: 2.5rem; font-size: 0.8rem; color: #8C8478;
               display: flex; gap: 1.6rem; flex-wrap: wrap; }
.hero .trust span::before { content: "◆ "; color: var(--accent); font-size: 0.65rem; }
.hero .logo { width: 66px; height: 66px; }
.hero.compact { padding: 4rem 0 4.6rem; }
.hero.compact h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.waves { position: absolute; bottom: -6px; left: 0; right: 0; opacity: 0.45;
         pointer-events: none; }
.crumb { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
         color: #8C8478; }
.crumb a { color: var(--accent); }

/* ── cards & grids ───────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.2rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.2rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.2rem; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 10px;
        padding: 1.5rem 1.6rem; }
.card.top { border-top: 3px solid var(--accent); }
.card.hover { transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s; }
.card.hover:hover { transform: translateY(-3px); border-color: var(--accent);
                    box-shadow: 0 10px 26px rgba(28, 27, 24, 0.09); }
.card h3 { font-family: var(--serif); font-size: 1.14rem; margin: 0.6rem 0 0.35rem; }
.card p { font-size: 0.87rem; color: var(--text-mid); margin: 0; }
.card .ic { display: block; margin-bottom: 0.2rem; }
.onink .card { background: #23211C; border-color: #3A372F; }
.onink .card h3 { color: #F4F3EE; }
.onink .card p { color: #A89F8F; }
.tag { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
       text-transform: uppercase; border-radius: 999px; padding: 0.18em 0.75em;
       background: var(--accent-light); color: var(--accent-subtle);
       border: 1px solid #E8D9B4; vertical-align: middle; }
.tag.dev { background: var(--bg-inline, #EFECE4); color: var(--text-mid);
           border-color: var(--border-strong); }
.tag.live { background: #EBF0EA; color: var(--good); border-color: #CFDCCD; }

.featlist { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.featlist li { padding: 0.42rem 0 0.42rem 1.7rem; position: relative; color: var(--text-mid); }
.featlist li::before { content: "◆"; position: absolute; left: 0; top: 0.72em;
                       color: var(--accent); font-size: 0.62rem; }
.featlist strong { color: var(--text); font-weight: 600; }
.onink .featlist strong { color: #F4F3EE; }
.onink .featlist li { color: #A89F8F; }

/* two-column feature rows */
.duo { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.duo.flip > :first-child { order: 2; }
.duo + .duo { margin-top: 4rem; }

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.4rem;
         counter-reset: step; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.step { position: relative; padding-top: 0.6rem; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero);
                font-family: var(--serif); font-size: 2.1rem; font-weight: 700;
                color: var(--accent); opacity: 0.85; display: block; line-height: 1; }
.step h3 { font-size: 1rem; margin: 0.7rem 0 0.3rem; font-family: var(--sans); font-weight: 600; }
.step p { font-size: 0.85rem; color: var(--text-mid); margin: 0; }
.onink .step h3 { color: #F4F3EE; }
.onink .step p { color: #A89F8F; }

/* stat band */
.stats { display: flex; gap: 3rem; flex-wrap: wrap; margin-top: 2.4rem; }
.stat .num { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--ink);
             line-height: 1.1; }
.stat .lbl { font-size: 0.8rem; color: var(--text-mid); max-width: 22ch; }
.onink .stat .num { color: var(--accent); }
.onink .stat .lbl { color: #A89F8F; }

/* product mock chrome (reused by page-specific mocks) */
.mock { background: #fff; border: 1px solid var(--border-strong); border-radius: 12px;
        box-shadow: 0 24px 60px rgba(28, 27, 24, 0.14); overflow: hidden; font-size: 0.72rem; }
.mock-bar { display: flex; gap: 0.45rem; padding: 0.55rem 0.8rem;
            background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mock table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.mock th, .mock td { border-bottom: 1px solid #F0EDE5; border-right: 1px solid #F0EDE5;
                     padding: 0.34rem 0.6rem; text-align: right; white-space: nowrap; }
.mock th { background: var(--bg-alt); font-weight: 600; text-align: center; }
.mock td:first-child, .mock th:first-child { text-align: left; }
.mock .cel { background: var(--accent-light); outline: 2px solid var(--accent);
             outline-offset: -2px; font-weight: 600; }
.mock .calc { background: #F7F3EA; color: var(--text-mid); }

/* FAQ / details */
.faq { max-width: 780px; margin: 2rem auto 0; }
.faq details { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 0.98rem;
               padding: 0.7rem 2rem 0.7rem 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.55rem;
                      color: var(--accent); font-size: 1.25rem; transition: transform 0.15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1rem; color: var(--text-mid); font-size: 0.92rem; max-width: 68ch; }

/* CTA band + footer */
.cta-band { text-align: center; padding: 4.6rem 0; }
.cta-band h2 { max-width: 26ch; margin: 0 auto 0.6rem; }
.cta-band p { color: var(--text-mid); margin: 0 0 1.8rem; }
footer { background: var(--ink); color: #8C8478; font-size: 0.8rem; padding: 2.6rem 0; }
.foot-in { display: flex; gap: 2.4rem; flex-wrap: wrap; align-items: flex-start; }
.foot-in .brand { color: #F4F3EE; }
.foot-legal { max-width: 58ch; line-height: 1.6; }
.foot-col { min-width: 140px; }
.foot-col h4 { color: #C8C0B0; font-size: 0.72rem; letter-spacing: 0.1em;
               text-transform: uppercase; margin: 0 0 0.5rem; }
.foot-col a { color: #A89F8F; display: block; margin-bottom: 0.3rem; }
.foot-col a:hover { color: var(--accent); }
.foot-right { margin-left: auto; display: flex; gap: 2.4rem; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .card.hover, .card.hover:hover { transform: none; }
}

@media (max-width: 960px) {
  .duo, .duo.flip { grid-template-columns: 1fr; gap: 2rem; }
  .duo.flip > :first-child { order: 0; }
  .grid3, .grid4 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid2, .grid3, .grid4, .steps, .steps.three { grid-template-columns: 1fr; }
  .nav-links a:not(.btn) { display: none; }
  section { padding: 3.2rem 0; }
  .foot-right { margin-left: 0; }
}

/* ── nav dropdowns ───────────────────────────────────────────────── */
.ndrop { position: relative; }
.ndrop > a::after { content: " ▾"; font-size: 0.62em; color: var(--text-muted); }
.nmenu { position: absolute; top: calc(100% + 6px); left: -0.7rem; min-width: 230px;
         background: #fff; border: 1px solid var(--border); border-radius: 9px;
         box-shadow: 0 14px 34px rgba(28, 27, 24, 0.13); padding: 0.45rem 0;
         display: none; z-index: 60; }
.nmenu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.ndrop:hover .nmenu, .ndrop:focus-within .nmenu { display: block; }
.nmenu a { display: block; padding: 0.4em 1.1em; font-size: 0.83rem;
           color: var(--text-mid); white-space: nowrap; }
.nmenu a:hover { background: var(--accent-light); color: var(--accent-subtle); }
.nmenu .nsep { border-top: 1px solid var(--border); margin: 0.35rem 0; }
.nmenu .nsoon { color: var(--text-muted); cursor: default; }
.nmenu .nsoon em { font-style: normal; font-size: 0.68rem; color: var(--text-muted);
                   border: 1px solid var(--border); border-radius: 999px; padding: 0.05em 0.5em;
                   margin-left: 0.4rem; }
.nmenu .nspot { color: var(--accent-subtle); font-weight: 600; }
.nmenu .ngroup { display: block; padding: 0.5em 1.1em 0.15em; font-size: 0.62rem;
                 font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
                 color: var(--text-muted); }