/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height: 92vh;
  display:grid;
  align-items:center;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 15% 10%, #244A3E 0%, #12291F 45%, #0B1913 100%),
    linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.28) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 70px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: minmax(320px, 480px) 1fr;
  gap: 10px;
  align-items: center;
}
.hero-title{
  color: var(--paper);
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.06;
  margin-top: 20px;
  max-width: 14ch;
}
.hero-sub{
  color: #CBD8D1;
  font-size: 18px;
  max-width: 50ch;
  margin: 26px 0 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-motto-wrap{ margin-top: 32px; display:inline-block; position: relative; z-index: 3; }
.hero-motto{
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A9D3BE;
  font-size: 13px;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.motto-wave{
  width: 100%;
  max-width: 320px;
  height: 12px;
  margin-top: 6px;
  overflow: visible;
}
.motto-wave path{
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-wave 1.6s ease-out .4s forwards, bob-wave 3.5s ease-in-out 2s infinite;
}
@keyframes draw-wave{ to{ stroke-dashoffset: 0; } }
@keyframes bob-wave{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(2px); }
}

/* ---------- HERO VISUAL ---------- */
.hero-visual{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 560px;
  will-change: transform;
}
.hero-glow{
  position: absolute;
  top: 50%; left: 50%;
  width: 640px; height: 640px;
  max-width: 92vw; max-height: 92vw;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95,169,135,0.38) 0%, rgba(95,169,135,0.09) 45%, transparent 70%);
  filter: blur(6px);
  animation: glow-pulse 7s ease-in-out infinite;
  z-index: 0;
}
@keyframes glow-pulse{
  0%, 100%{ transform: translate(-50%,-50%) scale(1); opacity: 0.75; }
  50%{ transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
}
.hero-ring{
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(159,203,178,0.2);
  border-radius: 50%;
  pointer-events: none;
}
.ring-1{ width: 460px; height: 460px; margin: -230px 0 0 -230px; animation: spin-slow 40s linear infinite; }
.ring-2{ width: 580px; height: 580px; margin: -290px 0 0 -290px; border-style: dashed; animation: spin-slow-rev 60s linear infinite; }
@keyframes spin-slow{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }
@keyframes spin-slow-rev{ from{ transform: rotate(360deg); } to{ transform: rotate(0); } }

.hero-watermark{
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  max-width: 620px;
  opacity: 0.13;
  transform: translate(-50%,-50%) rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}
.hero-watermark.spin-anim{ animation: hero-watermark-drift 22s ease-in-out infinite; }
@keyframes hero-watermark-drift{
  0%, 100%{ transform: translate(-50%,-50%) rotate(-6deg) scale(1); }
  50%{ transform: translate(-50%,-50%) rotate(0deg) scale(1.06); }
}
.hero-cad{
  position: relative;
  width: 100%;
  max-width: 500px;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5));
  z-index: 1;
}
.float-anim{ animation: float-y 6s ease-in-out infinite; }
@keyframes float-y{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(0.6deg); }
}
@media (max-width: 900px){
  .hero-content{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; min-height: 320px; margin-bottom: 8px; }
  .hero-cad{ max-width: 300px; }
  .hero-ring, .hero-glow{ display: none; }
  .hero-watermark{ max-width: 380px; }
}

/* ---------- ABOUT ---------- */
.about{ background: var(--sand); padding: 108px 0 96px; }
.about-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.about-title{
  font-size: clamp(28px, 3.4vw, 40px);
  margin-top: 18px;
  line-height: 1.12;
}
@media (max-width: 820px){
  .about-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- CAD SECTION ---------- */
.cad-section{
  position: relative;
  background: var(--ink);
  padding: 110px 0;
  overflow: hidden;
}
.cad-bg{ position:absolute; inset:0; }
.cad-waves{ width:100%; height:100%; }
.cad-content{
  position: relative; z-index: 2;
  display:grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.cad-title{
  color: var(--paper);
  font-size: clamp(28px, 3.6vw, 42px);
  margin-top: 16px;
  line-height: 1.1;
}
.cad-copy{
  color: #C3D2CB;
  font-size: 16.5px;
  max-width: 46ch;
  margin-top: 18px;
}
.cad-quote{
  margin: 34px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--amber);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  color: var(--algae-lt);
  line-height: 1.4;
}
.cad-image img{
  filter: drop-shadow(0 30px 46px rgba(0,0,0,0.55));
}
@media (max-width: 860px){
  .cad-content{ grid-template-columns: 1fr; }
  .cad-image{ order: -1; }
}

/* ---------- CLOSING CTA ---------- */
.closing{ background: var(--sand-2); padding: 90px 0; }
.closing-inner{ text-align:center; }
.closing-inner h2{
  font-size: clamp(26px,3.2vw,36px);
  margin-bottom: 14px;
}