/* ==========================================================================
   Pilot Fish — shared styles
   Technical dark design system, inspired by the ENAHOST.cy aesthetic,
   carrying the Pilot Fish cyan from the logo as the brand accent.
   ========================================================================== */

:root {
  --bg-primary:   #0f141b;
  --bg-secondary: #161c26;
  --bg-tertiary:  #1f2733;
  --fg:           #f0f2f5;
  --fg-dim:       #a0abbc;
  --fg-mute:      #667791;

  --accent:       #3fe0cd;   /* Pilot Fish cyan (from logo) */
  --accent-dim:   #17a897;
  --accent-soft:  rgba(63, 224, 205, .12);
  --grad-start:   #6ef0e0;
  --grad-end:     #14b3a3;

  --gold:         #ffcc33;
  --status-green: #00b75a;

  --border:       #232c39;
  --border-light: #313c4d;

  --radius:       12px;
  --radius-sm:    8px;
  --maxw:         1240px;
  --font:         "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fixed technical grid + soft accent glow */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(245,240,232,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,240,232,.017) 1px, transparent 1px);
  background-size: 60px 60px;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 460px at 82% -6%, rgba(63,224,205,.10), transparent 62%),
    radial-gradient(680px 460px at 6% 4%, rgba(20,179,163,.07), transparent 60%);
}
.nav, section, .foot { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { line-height: 1.08; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.22rem; font-weight: 600; }
p  { margin: 0 0 1rem; color: var(--fg-dim); }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--fg-dim); max-width: 62ch; }
.eyebrow {
  font-family: var(--mono);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem;
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; opacity: .7; }
.grad { background: linear-gradient(120deg, var(--grad-start), var(--grad-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Header / Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(15,20,27,.82);
  border-bottom: 1px solid var(--border);
}
.nav__in { display: flex; align-items: center; gap: 24px; height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; }
.pf-fish { height: 30px; width: auto; flex: none; display: block; }
.foot .pf-fish { height: 32px; }
@media (max-width: 480px) { .pf-fish { height: 26px; } }

/* ---------- Project logo plates ---------- */
.logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; min-width: 46px; padding: 10px 16px;
  background: #fff; border-radius: 10px; margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.logo-plate--dark { background: #0d1117; border: 1px solid var(--border-light); box-shadow: none; }
.logo-plate img { height: 24px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.logo-word { font-family: var(--mono); font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: #0f141b; line-height: 1; white-space: nowrap; }
.logo-plate--dark .logo-word { color: #f0f2f5; }
.brand__word {
  font-family: var(--mono); font-weight: 800; font-size: 1.02rem;
  letter-spacing: .13em; line-height: 1; color: var(--fg);
}
.brand__word small {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: .56rem; letter-spacing: .22em; color: var(--fg-mute);
  margin-top: 5px;
}

.nav__links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav__links a {
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500;
  color: var(--fg-dim); transition: .18s;
}
.nav__links a:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.nav__links a.active { color: var(--fg); }
.nav__links a.active::after { content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background: linear-gradient(90deg,var(--grad-start),var(--grad-end)); }

.lang {
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden;
  display: inline-flex; flex: none;
}
.lang button { background: none; border: 0; color: var(--fg-mute); cursor: pointer; padding: 7px 12px; font: inherit; transition: .18s; }
.lang button.on { background: var(--accent); color: #052; font-weight: 700; }

.burger { display:none; margin-left:auto; background:none; border:1px solid var(--border-light); color:var(--fg); width:42px; height:38px; border-radius:6px; cursor:pointer; font-size:1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 12px 22px; border-radius: 6px; font-weight: 600; font-size: .93rem;
  border: 1px solid transparent; cursor: pointer; transition: .2s; white-space: nowrap; font-family: inherit;
}
.btn--primary { background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); color: #04231f; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -10px rgba(63,224,205,.45); }
.btn--ghost { border-color: var(--border-light); color: var(--fg-dim); }
.btn--ghost:hover { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.section-head { max-width: 64ch; margin-bottom: 46px; }

/* ---------- Hero ---------- */
.hero { padding: 92px 0 68px; }
.hero .lead { margin-top: 18px; }
.hero__cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero__badges { display:flex; gap:20px; flex-wrap:wrap; margin-top:44px; }
.hero__badges span { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); display:flex; align-items:center; gap:8px; }
.hero__badges span::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--status-green); box-shadow:0 0 10px var(--status-green); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 62px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 24px 22px; background: var(--bg-secondary); }
.stat b { display: block; font-family: var(--mono); font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.stat span { font-size: .78rem; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .07em; }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3,1fr); }
.grid--2 { grid-template-columns: repeat(2,1fr); }

.card {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; background: var(--bg-secondary);
  transition: .25s; overflow: hidden; display:flex; flex-direction:column;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-light); }
.card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg,var(--grad-start),var(--grad-end)); opacity:0; transition:.25s; }
.card--accent:hover::before, .card:hover::before { opacity:1; }
.card__tag { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.card h3 { display:flex; align-items:center; gap:.5em; flex-wrap:wrap; }
.card h3 .dom { font-family: var(--mono); font-size: .74rem; color: var(--fg-mute); font-weight: 500; letter-spacing: .01em; }
.card p { font-size: .95rem; margin-bottom: 16px; line-height: 1.68; }
.card .meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.card .chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { font-family: var(--mono); font-size: .66rem; letter-spacing:.05em; color: var(--fg-dim); background: var(--bg-tertiary); border-radius: 4px; padding:5px 9px; }
.status { font-family: var(--mono); font-size: .68rem; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.status::before { content:""; width:8px; height:8px; border-radius:50%; }
.status--live { color:#33d68a; } .status--live::before { background:var(--status-green); box-shadow:0 0 8px var(--status-green); }
.status--soon { color:var(--gold); } .status--soon::before { background:var(--gold); }
.card .go { color: var(--accent); font-weight:600; font-size:.9rem; transition:.2s; }
.card:hover .go { letter-spacing:.01em; }

/* ---------- Feature list ---------- */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { border:1px solid var(--border); border-radius:var(--radius-sm); padding:26px; background:var(--bg-secondary); transition:.2s; }
.feature:hover { border-color:var(--border-light); }
.feature h3 { font-size:1.08rem; }
.feature .ic { width:42px;height:42px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--bg-tertiary); color:var(--accent); font-family:var(--mono); font-weight:700; font-size:1rem; }
.feature p { font-size:.9rem; margin:0; line-height:1.7; }

/* ---------- Callout ---------- */
.callout { border:1px solid var(--border); border-radius:var(--radius); padding:48px 40px; text-align:center; background:var(--bg-secondary); position:relative; overflow:hidden; }
.callout::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(63,224,205,.08), transparent 70%); pointer-events:none; }
.callout > * { position:relative; z-index:1; }
.callout h2 { margin-bottom:.3em; }
.callout .hero__cta { justify-content:center; }

/* ---------- Plan / spec cards ---------- */
.plan { border:1px solid var(--border); border-radius:var(--radius); padding:28px; background:var(--bg-secondary); transition:.2s; }
.plan:hover { border-color:var(--border-light); }
.plan h3 { margin-bottom:.25em; }
.plan .price { font-family:var(--mono); color:var(--accent); font-size:.76rem; font-weight:600; letter-spacing:.1em; margin-bottom:16px; }
.plan ul { list-style:none; padding:0; margin:0; }
.plan li { font-size:.9rem; color:var(--fg-dim); padding:9px 0; border-top:1px solid var(--border); display:flex; gap:10px; align-items:baseline; }
.plan li:first-child { border-top:0; }
.plan li::before { content:"→"; color:var(--accent); font-weight:700; font-family:var(--mono); }

/* ---------- Locations bar (ENAHOST-style network strip) ---------- */
.locbar { display:flex; justify-content:center; align-items:center; gap:26px; flex-wrap:wrap;
  padding:22px 32px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius); margin-top:24px; }
.locbar .loc-label { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--fg-mute); }
.loc { display:flex; align-items:center; gap:9px; color:var(--fg-dim); font-size:.9rem; }
.loc.home { color:var(--fg); font-weight:600; }
.loc .dot { width:9px; height:9px; border-radius:50%; background:var(--fg-mute); }
.loc.home .dot { background:var(--accent); box-shadow:0 0 10px var(--accent); }

/* ---------- Terminal ---------- */
.terminal { background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; max-width:640px; }
.terminal__bar { background:var(--bg-secondary); padding:11px 14px; display:flex; gap:8px; border-bottom:1px solid var(--border); }
.terminal__bar i { width:11px; height:11px; border-radius:50%; background:var(--border-light); display:block; }
.terminal__bar i.r{background:#ff5f56;} .terminal__bar i.y{background:#ffbd2e;} .terminal__bar i.g{background:#27ca40;}
.terminal__body { padding:20px; font-family:var(--mono); font-size:.84rem; line-height:1.9; }
.terminal__body .p { color:var(--accent); } .terminal__body .c { color:var(--fg); } .terminal__body .o { color:var(--fg-dim); } .terminal__body .s { color:var(--status-green); }

/* ---------- Footer ---------- */
.foot { border-top:1px solid var(--border); padding:64px 0 40px; margin-top:40px; background:var(--bg-secondary); }
.foot__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
.foot h4 { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:16px; font-weight:600; }
.foot a { display:block; color:var(--fg-dim); font-size:.9rem; padding:5px 0; transition:.16s; }
.foot a:hover { color:var(--accent); }
.foot__brand .brand { margin-bottom:16px; }
.foot__brand p { font-size:.9rem; max-width:36ch; line-height:1.7; }
.foot__legal { margin-top:44px; padding-top:22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--fg-mute); font-family:var(--mono); letter-spacing:.03em; }

/* ---------- Interior page hero ---------- */
.phero { padding:76px 0 40px; }
.phero .lead { margin-top:14px; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .nav__links { position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch;
    background:rgba(15,20,27,.98); border-bottom:1px solid var(--border); padding:12px; gap:2px;
    transform:translateY(-140%); transition:.28s; }
  .nav__links.open { transform:none; }
  .nav__links a { padding:13px 16px; }
  .burger { display:block; }
  .lang { order:3; }
  .grid--3, .grid--2, .features { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .foot__grid { grid-template-columns:1fr 1fr; }
  section { padding:60px 0; }
}
@media (max-width:480px){ .stats{grid-template-columns:1fr 1fr;} .foot__grid{grid-template-columns:1fr;} .wrap{padding:0 20px;} }