/* ============================================================
   HexHydro — Smart Aquaculture Solutions
   Dark cinematic ocean. Navy dominant, electric-blue accents.
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #061320;
  --bg-1:      #07182b;
  --bg-2:      #0a2138;
  --bg-3:      #0e2a45;
  --panel:     #0b2034;
  /* ink */
  --ink:       #eaf2f9;
  --ink-soft:  #c3d4e3;
  --muted:     #8aa2b8;
  --faint:     #5d7488;
  /* brand */
  --navy:      #0d2c4d;
  --blue:      #2f86d6;
  --blue-2:    #3f9ae6;
  --cyan:      #5cc4ea;
  /* lines */
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  /* type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
  /* layout */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 80px);
  --grad: linear-gradient(120deg, #12365f 0%, #2f86d6 60%, #5cc4ea 100%);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--blue); color: #fff; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ---- eyebrow / mono label ---- */
.eyebrow{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
.eyebrow::before{
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

h1,h2,h3{ font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -0.015em; }
.h-xl{ font-size: clamp(40px, 7vw, 86px); }
.h-lg{ font-size: clamp(32px, 4.6vw, 60px); }
.h-md{ font-size: clamp(25px, 2.8vw, 38px); }
p{ text-wrap: pretty; }
.lede{ font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); }
.muted{ color: var(--muted); }

/* gradient text accent */
.grad-text{
  background: linear-gradient(100deg, #6fb6f0, #5cc4ea);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- buttons ---- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 2px; cursor: pointer;
  border: 1px solid transparent; transition: .25s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--blue); color: #fff; box-shadow: 0 8px 30px -10px rgba(47,134,214,.7); }
.btn-primary:hover{ background: var(--blue-2); transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(63,154,230,.8); }
.btn-ghost{ border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color: var(--cyan); color: #fff; background: rgba(92,196,234,.08); }
.btn .arr{ transition: transform .25s ease; }
.btn:hover .arr{ transform: translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: padding .3s ease, background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  padding-block: 14px;
  background: rgba(6,19,32,.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__brand{ display: flex; align-items: center; gap: 12px; }
.nav__brand img.mark{ height: 38px; width: auto; transition: height .3s ease; }
.nav.scrolled .nav__brand img.mark{ height: 32px; }
.nav__brand img.word{ height: 19px; width: auto; opacity: .96; }
.nav__links{ display: flex; align-items: center; gap: 38px; }
.nav__links a{
  font-size: 14.5px; color: var(--ink-soft); font-weight: 500;
  position: relative; transition: color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  background: var(--cyan); transition: width .25s ease;
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:18px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:var(--ink); transition:.3s; }

/* mobile menu */
.mobile-menu{
  position: fixed; inset: 0; z-index: 99;
  background: rgba(6,19,32,.97); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: var(--pad);
  transform: translateY(-100%); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--display); font-size: 30px; font-weight: 600; }
.mobile-menu .btn{ margin-top: 20px; align-self: flex-start; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform: scale(1.06); will-change: transform;
}
.hero__scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,19,32,.55) 0%, rgba(6,19,32,.18) 30%, rgba(6,19,32,.55) 62%, rgba(6,19,32,.96) 100%),
    radial-gradient(120% 80% at 80% 10%, rgba(47,134,214,.18), transparent 60%);
}
.hero__inner{ position: relative; z-index: 2; width: 100%; padding-bottom: clamp(60px, 9vh, 110px); padding-top: 140px; }
.hero h1{ max-width: none; margin: 22px 0 26px; }
.hero .lede{ max-width: 52ch; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.hero__meta{
  display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 64px;
  padding-top: 30px; border-top: 1px solid var(--line);
}
.hero__meta .stat .n{ font-family: var(--display); font-size: clamp(28px,3vw,40px); font-weight: 600; line-height: 1; }
.hero__meta .stat .l{ font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.hero__cue{
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero__cue .line{ width:1px; height:46px; background:linear-gradient(var(--cyan), transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue{ 0%,100%{ transform: scaleY(.4); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ position: relative; }
.section{ padding-block: clamp(80px, 12vh, 150px); }
.section-head{ max-width: 760px; }
.section-head h2{ margin: 20px 0 0; }
.section-head .lede{ margin-top: 24px; }

/* hex bullet / divider accents */
.hexrow{ display:flex; gap:6px; }
.hexrow i{ width:9px; height:10px; background: var(--blue); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); opacity:.5; }
.hexrow i:nth-child(2){ opacity:.75; } .hexrow i:nth-child(3){ opacity:1; }

/* ---- statement ---- */
.statement{ border-top: 1px solid var(--line); }
.statement .big{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3.6vw, 50px); line-height: 1.18; letter-spacing: -.01em;
  max-width: 20ch; margin-top: 30px;
}
.statement .big b{ font-weight: 600; }

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 100%); border-top:1px solid var(--line); }
.sol-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 70px; background: var(--line); border: 1px solid var(--line); }
.sol-card{
  background: var(--bg-1); padding: 44px 38px 40px; position: relative; overflow: hidden;
  transition: background .35s ease;
}
.sol-card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0; background: var(--grad); transition: width .5s cubic-bezier(.16,1,.3,1);
}
.sol-card:hover{ background: var(--bg-2); }
.sol-card:hover::before{ width:100%; }
.sol-card .num{ font-family: var(--mono); font-size: 12px; letter-spacing:.25em; color: var(--cyan); }
.sol-card .hexicon{
  width: 58px; height: 64px; margin: 26px 0 26px; position: relative;
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: linear-gradient(145deg, var(--navy), #16456f);
  border: 1px solid var(--line-2);
}
.sol-card .hexicon svg{ width: 26px; height: 26px; stroke: var(--cyan); fill:none; stroke-width:1.6; }
.sol-card h3{ font-size: 24px; margin-bottom: 14px; }
.sol-card p{ color: var(--muted); font-size: 15.5px; }
.sol-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 24px; }
.sol-card .tags span{ font-family: var(--mono); font-size: 11px; letter-spacing:.06em; color: var(--ink-soft); border:1px solid var(--line); padding: 5px 10px; border-radius: 2px; white-space: nowrap; }

/* ============================================================
   TECHNOLOGY / PLATFORM
   ============================================================ */
.tech{ border-top:1px solid var(--line); }
.tech-block{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: center; margin-top: 86px; }
.tech-block:first-of-type{ margin-top: 70px; }
.tech-block.flip .tech-media{ order: 2; }
.tech-media{ position: relative; border: 1px solid var(--line-2); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-2); }
.tech-media video{ width:100%; height:100%; object-fit: cover; }
.tech-media .frame-label{
  position:absolute; left:14px; top:14px; z-index:3;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: rgba(6,19,32,.6); border:1px solid var(--line-2); padding: 6px 10px; backdrop-filter: blur(4px);
}
.tech-media::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 80px rgba(6,19,32,.5); pointer-events:none; }
.tech-info h3{ font-size: clamp(24px,2.6vw,34px); margin: 18px 0 18px; }
.tech-info p{ color: var(--muted); max-width: 46ch; }
.feature-list{ list-style:none; margin-top: 28px; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.feature-list li{ background: var(--bg-1); padding: 15px 18px; display:flex; align-items:flex-start; gap:14px; font-size:15px; line-height:1.45; }
.feature-list li .dot{ width:7px; height:8px; margin-top:7px; flex:0 0 auto; background: var(--cyan); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.feature-list li b{ color: var(--ink); font-weight:600; }
.feature-list li span{ color: var(--muted); }

/* telemetry panel */
.telemetry{
  margin-top: 80px; border:1px solid var(--line-2); background:
   linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 30px clamp(22px,3vw,44px); border-radius: 2px; position: relative; overflow:hidden;
}
.telemetry::before{ content:""; position:absolute; inset:0; background: radial-gradient(80% 120% at 100% 0, rgba(92,196,234,.10), transparent 55%); pointer-events:none; }
.telemetry .tel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.telemetry .live{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-soft); }
.telemetry .live .pulse{ width:8px; height:8px; border-radius:50%; background:#54e08a; box-shadow:0 0 0 0 rgba(84,224,138,.6); animation: pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(84,224,138,.55) } 70%{ box-shadow:0 0 0 9px rgba(84,224,138,0) } 100%{ box-shadow:0 0 0 0 rgba(84,224,138,0) } }
.tel-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.tel-cell{ background: var(--bg-1); padding: 20px 22px; }
.tel-cell .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }
.tel-cell .v{ font-family: var(--display); font-size: clamp(26px,3vw,38px); font-weight:600; margin-top:10px; line-height:1; }
.tel-cell .v small{ font-family: var(--mono); font-size: 13px; font-weight:400; color: var(--muted); margin-left:4px; }
.tel-cell .spark{ display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:14px; }
.tel-cell .spark i{ flex:1; background: linear-gradient(var(--cyan), var(--blue)); opacity:.55; border-radius:1px; transition: height .5s ease; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background: linear-gradient(180deg, var(--bg-1), var(--bg)); border-top:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,90px); align-items:start; }
.about-grid .lede{ margin-top:26px; }
.about-grid h2{ font-size: clamp(28px, 3.4vw, 46px); max-width: 440px; }
.values{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.value{ background: var(--bg-1); padding: 26px 28px; }
.value .vk{ display:flex; align-items:center; gap:14px; }
.value .vk .idx{ font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.2em; }
.value h4{ font-family: var(--display); font-size: 20px; font-weight:600; }
.value p{ color: var(--muted); font-size:15px; margin-top:10px; }

.imageband{ margin-top: 90px; position: relative; overflow: hidden; border:1px solid var(--line-2); }
.imageband img{ width:100%; height: clamp(260px, 42vh, 460px); object-fit: cover; transform: scale(1.05); }
.imageband .ib-scrim{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(6,19,32,.85) 0%, rgba(6,19,32,.2) 50%, rgba(6,19,32,.55) 100%); }
.imageband .ib-cap{ position:absolute; left: clamp(22px,4vw,52px); bottom: clamp(22px,4vw,46px); max-width: 30ch; }
.imageband .ib-cap .q{ font-family: var(--display); font-size: clamp(20px,2.4vw,30px); font-weight:500; line-height:1.25; }

/* team */
.team{ margin-top: 90px; }
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 44px; }
.member .photo{
  aspect-ratio: 3/4; border:1px solid var(--line-2); background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg-1) 14px 28px);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.member .photo span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--faint); }
.member h4{ font-family: var(--display); font-size:17px; font-weight:600; margin-top:18px; }
.member .role{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color: var(--cyan); text-transform:uppercase; margin-top:6px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ border-top:1px solid var(--line); background:
  radial-gradient(120% 90% at 50% 0%, rgba(47,134,214,.14), transparent 60%), var(--bg-1); }
.contact-inner{ max-width: 880px; margin: 0 auto; text-align: center; display:flex; flex-direction:column; align-items:center; }
.contact h2{ margin: 22px 0 24px; }
.contact .lede{ max-width: 56ch; }
.contact .email-line{ margin-top: 44px; }
.contact .email-line .k{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.contact a.email{
  font-family: var(--display); font-size: clamp(28px,4vw,52px); font-weight:600;
  display:inline-flex; align-items:center; gap:16px; margin-top:14px;
  border-bottom: 1px solid transparent; transition:.25s;
}
.contact a.email:hover{ color: var(--cyan); border-bottom-color: var(--cyan); }
.contact .reasons{ margin-top: 56px; display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; text-align:left; width:100%; padding-top: 40px; border-top:1px solid var(--line); }
.contact .reasons .r{ display:flex; gap:14px; align-items:flex-start; color: var(--ink-soft); font-size:15px; }
.contact .reasons .r .dot{ width:8px;height:9px;margin-top:7px;flex:0 0 auto;background:var(--cyan);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

/* form */
.form{ background: var(--bg); border:1px solid var(--line-2); padding: clamp(26px,3vw,40px); border-radius:2px; }
.form .field{ margin-bottom: 22px; }
.form label{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:9px; }
.form input, .form textarea{
  width:100%; background: var(--bg-2); border:1px solid var(--line); color: var(--ink);
  font-family: var(--body); font-size:15.5px; padding: 13px 15px; border-radius:2px; transition:.2s;
}
.form input:focus, .form textarea:focus{ outline:none; border-color: var(--cyan); background:#0c243b; box-shadow:0 0 0 3px rgba(92,196,234,.12); }
.form textarea{ resize:vertical; min-height: 120px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form .err{ color:#ff8a8a; font-family:var(--mono); font-size:11px; letter-spacing:.04em; margin-top:7px; display:none; }
.form .field.invalid .err{ display:block; }
.form .field.invalid input, .form .field.invalid textarea{ border-color:#ff8a8a; }
.form .btn{ width:100%; justify-content:center; margin-top:6px; }
.form .form-note{ font-size:13px; color:var(--muted); margin-top:16px; text-align:center; }
.form.sent .form-body{ display:none; }
.form .sent-msg{ display:none; text-align:center; padding: 30px 0; }
.form.sent .sent-msg{ display:block; }
.form .sent-msg .check{ width:54px;height:54px;border-radius:50%;border:1.5px solid var(--cyan);display:flex;align-items:center;justify-content:center;margin:0 auto 20px; }
.form .sent-msg h4{ font-family:var(--display); font-size:22px; font-weight:600; }
.form .sent-msg p{ color:var(--muted); margin-top:10px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding-block: 64px 40px; background: var(--bg); }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-brand img{ height: 30px; margin-bottom: 18px; }
.footer-brand p{ color: var(--muted); font-size:14px; max-width: 32ch; }
.footer-nav{ display:flex; gap: clamp(40px,6vw,90px); }
.footer-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-weight:500; }
.footer-col a{ display:block; color: var(--ink-soft); font-size:14.5px; margin-bottom:11px; transition:.2s; }
.footer-col a:hover{ color: var(--cyan); }
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:56px; padding-top:26px; border-top:1px solid var(--line); }
.footer-bottom p, .footer-bottom a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color: var(--faint); }
.footer-bottom a:hover{ color: var(--cyan); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s } .reveal[data-d="3"]{ transition-delay:.24s }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__video{ transform:none; }
  *{ animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .nav__links, .nav__cta .btn{ display:none; }
  .nav__burger{ display:flex; }
  .sol-grid{ grid-template-columns: 1fr; }
  .tech-block{ grid-template-columns: 1fr; }
  .tech-block.flip .tech-media{ order: 0; }
  .tel-grid{ grid-template-columns: repeat(2,1fr); }
  .about-grid{ grid-template-columns: 1fr; }
  .contact .reasons{ grid-template-columns: 1fr; max-width: 30rem; margin-inline:auto; }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 540px){
  body{ font-size: 16px; }
  .hero__meta{ gap: 26px 40px; }
  .form .row{ grid-template-columns: 1fr; }
  .tel-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; gap:10px; }
}