:root{
    --sand:#D6DFDC;
    --sand-ink:#233238;
    --shallow:#AABFC2;
    --shallow-ink:#1c2b31;
    --mid:#4C7A84;
    --deep:#2F4952;
    --abyss:#23373E;
    --floor:#182529;
    --white:#f6f8f7;
    --ease: cubic-bezier(.19,1,.22,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Tajawal',sans-serif; background:var(--sand); color:var(--sand-ink); overflow-x:hidden;}
  h1,h2,h3{font-family:'Markazi Text',serif; font-weight:700;}
  .gauge-num, .tag, .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  ::selection{background:var(--mid); color:#fff;}
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- TOP BAR ---------- */
  header.top{position:fixed; inset:0 0 auto 0; z-index:300; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; pointer-events:none;}
  header.top *{pointer-events:auto;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand svg{width:34px; height:20px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));}
  .brand span{font-family:'Markazi Text',serif; font-weight:700; font-size:19px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.35);}
  .menu-btn{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:4px;}
  .menu-btn span{width:16px; height:1.5px; background:#fff; display:block;}

  /* ---------- DEPTH GAUGE ---------- */
  .gauge{position:fixed; left:26px; top:0; bottom:0; width:60px; z-index:250; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none;}
  .gauge-line{position:relative; width:1px; height:62vh; background:rgba(255,255,255,0.28);}
  .gauge-fill{position:absolute; top:0; right:-.5px; width:2px; background:var(--shallow); height:0%; transition:height .1s linear;}
  .gauge-dot{position:absolute; right:-4.5px; width:10px; height:10px; border-radius:50%; background:var(--shallow); top:0; box-shadow:0 0 0 4px rgba(170,191,194,.25); transition:top .1s linear;}
  .gauge-num{position:absolute; right:14px; top:0; transform:translateY(-50%); font-size:12px; color:#fff; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.4); transition:top .1s linear, color .3s;}
  @media (max-width:900px){ .gauge{display:none;} }

  /* ---------- NAV OVERLAY ---------- */
  .overlay{position:fixed; inset:0; z-index:400; background:var(--floor); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .5s var(--ease);}
  .overlay.open{opacity:1; pointer-events:auto;}
  .overlay-close{position:absolute; top:24px; left:32px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;}
  .overlay nav{display:flex; flex-direction:column; gap:6px; text-align:center;}
  .overlay nav a{display:flex; align-items:baseline; gap:16px; justify-content:center; font-family:'Markazi Text',serif; font-size:clamp(28px,5vw,46px); color:rgba(255,255,255,.5); padding:10px 0; transition:color .3s;}
  .overlay nav a:hover{color:#fff;}
  .overlay nav a b{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:400; color:var(--shallow); direction:ltr;}

  /* ---------- SECTION SCAFFOLD ---------- */
  section{position:relative; padding:150px 0;}
  .tag{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:28px;}
  .tag::before{content:""; width:22px; height:1px; background:currentColor;}
  .big-quote{font-family:'Markazi Text',serif; font-weight:700; line-height:1.3;}

  /* ---------- SURFACE / HERO ---------- */
  .surface{min-height:100svh; display:flex; align-items:center; background:linear-gradient(180deg, var(--sand) 0%, var(--shallow) 100%); overflow:hidden; padding-top:140px;}
  .surface-watermark{position:absolute; top:6%; left:50%; transform:translateX(-50%); font-family:'IBM Plex Mono',monospace; font-size:min(30vw,320px); color:rgba(255,255,255,0.5); font-weight:600; line-height:1; z-index:0; user-select:none;}
  .surface .wrap{position:relative; z-index:2;}
  .surface h1{font-size:clamp(34px,6vw,74px); color:var(--sand-ink); max-width:820px; line-height:1.22;}
  .surface h1 em{font-style:normal; color:var(--deep); border-bottom:3px solid var(--mid);}
  .surface p.lead{margin-top:28px; font-size:18px; color:#3b4c52; max-width:560px; font-weight:400;}
  .surface-actions{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap;}
  .btn{padding:15px 30px; border-radius:100px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:10px; transition:transform .35s var(--ease), background .35s, color .35s;}
  .btn-solid{background:var(--abyss); color:#fff;}
  .btn-solid:hover{transform:translateY(-3px); background:var(--deep);}
  .btn-line{border:1.5px solid var(--sand-ink); color:var(--sand-ink);}
  .btn-line:hover{background:var(--sand-ink); color:var(--sand);}
  .droplet-field{position:absolute; inset:0; z-index:1; pointer-events:none;}
  .droplet{position:absolute; bottom:-30px; border-radius:50%; background:rgba(35,55,62,0.14); animation:rise linear infinite;}
  @keyframes rise{to{transform:translateY(-120vh);}}

  .wave-seam{display:block; width:100%; height:auto; margin-top:-2px;}

  /* ---------- SOURCE (about) ---------- */
  .source{background:var(--shallow); color:var(--shallow-ink); padding-top:120px;}
  .source-grid{display:grid; grid-template-columns:.42fr 1fr; gap:60px;}
  .rotated-label{writing-mode:vertical-rl; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:4px; color:rgba(28,43,49,0.55); align-self:start; padding-top:8px;}
  .source-copy h2{font-size:clamp(28px,3.6vw,44px); max-width:640px; margin-bottom:30px;}
  .source-copy p{font-size:17px; color:#33474e; max-width:640px; margin-bottom:20px;}
  .source-copy p b{color:var(--shallow-ink);}
  .pillar-strip{display:flex; gap:14px; flex-wrap:wrap; margin-top:40px;}
  .pillar-chip{background:rgba(255,255,255,.5); border:1px solid rgba(28,43,49,.14); border-radius:14px; padding:16px 20px; flex:1; min-width:180px;}
  .pillar-chip svg{width:22px; height:22px; color:var(--deep); margin-bottom:10px;}
  .pillar-chip b{display:block; font-size:14.5px; margin-bottom:4px;}
  .pillar-chip p{font-size:12.5px; color:#4c6169; margin:0;}

  /* ---------- ESSENCE (layered panels) ---------- */
  .essence{background:var(--mid); color:#fff;}
  .essence-head{max-width:640px; margin-bottom:70px;}
  .essence-head .tag{color:rgba(255,255,255,.75);}
  .essence-head h2{font-size:clamp(28px,3.6vw,44px);}
  .layers{position:relative; max-width:920px; margin:0 auto;}
  .layer-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:26px; padding:44px 46px; backdrop-filter:blur(4px);}
  .layer-card + .layer-card{margin-top:-40px; margin-inline-start:6%; }
  .layer-card .tag{color:var(--sand);}
  .layer-card h3{font-size:26px; margin-bottom:14px;}
  .layer-card p{font-size:16px; color:rgba(255,255,255,.85); max-width:640px;}
  .layer-card:nth-child(1){background:rgba(255,255,255,.1);}
  .layer-card:nth-child(2){background:rgba(35,55,62,.32);}
  .layer-card:nth-child(3){background:rgba(35,55,62,.5); margin-inline-start:12%;}

  /* ---------- CURRENT (values) ---------- */
  .current{background:var(--deep); color:#fff;}
  .current-head{max-width:640px; margin-bottom:80px;}
  .current-head .tag{color:var(--shallow);}
  .current-head h2{font-size:clamp(28px,3.6vw,44px);}
  .current-wrap{position:relative;}
  .current-svg{width:100%; height:auto; display:block;}
  .value-node{position:absolute; width:180px; text-align:center; transform:translate(-50%,-50%);}
  .value-node .dot{width:14px; height:14px; border-radius:50%; background:var(--sand); margin:0 auto 14px; box-shadow:0 0 0 6px rgba(214,223,220,.18);}
  .value-node h4{font-size:19px; margin-bottom:6px; color:#fff;}
  .value-node p{font-size:12.5px; color:rgba(255,255,255,.72);}
  @media (max-width:900px){
    .current-wrap{display:flex; flex-direction:column; gap:34px;}
    .value-node{position:static; transform:none; width:auto; text-align:center; margin:0 auto;}
  }

  /* ---------- JOURNEY ---------- */
  .journey{background:var(--abyss); color:#fff;}
  .journey-head{text-align:center; max-width:680px; margin:0 auto 90px;}
  .journey-head .tag{justify-content:center; color:var(--shallow);}
  .journey-head h2{font-size:clamp(28px,3.6vw,44px);}
  .journey-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:stretch;}
  .journey-step{position:relative; padding:0 26px; text-align:center;}
  .journey-step .ring{width:78px; height:78px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; background:rgba(255,255,255,.04);}
  .journey-step .ring svg{width:30px; height:30px; color:var(--shallow);}
  .journey-step h4{font-size:18px; margin-bottom:10px;}
  .journey-step p{font-size:13.5px; color:rgba(255,255,255,.68);}
  .journey-arrow{position:absolute; top:39px; right:-14%; width:28%; height:1px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px);}
  .journey-step:last-child .journey-arrow{display:none;}
  @media (max-width:900px){
    .journey-flow{grid-template-columns:1fr; gap:50px;}
    .journey-arrow{display:none;}
  }

  /* ---------- FLOOR (why us) ---------- */
  .floor{background:var(--floor); color:#fff;}
  .floor-head{max-width:640px; margin-bottom:70px;}
  .floor-head .tag{color:var(--shallow);}
  .floor-head h2{font-size:clamp(28px,3.6vw,44px);}
  .floor-masonry{columns:3 260px; column-gap:18px;}
  .floor-card{break-inside:avoid; margin-bottom:18px; border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:26px 24px; background:rgba(255,255,255,.03);}
  .floor-card.lead{background:rgba(170,191,194,.1); border-color:rgba(170,191,194,.35);}
  .floor-card .gauge-num{font-size:11px; color:var(--shallow); display:block; margin-bottom:10px;}
  .floor-card p{font-size:15px; line-height:1.6; color:rgba(255,255,255,.9);}
  @media (max-width:900px){ .floor-masonry{columns:1 100%;} }

  /* ---------- TONE STRIP ---------- */
  .tone-strip{background:var(--floor); color:#fff; padding-top:0; padding-bottom:150px;}
  .tone-inner{border-top:1px solid rgba(255,255,255,.14); padding-top:80px; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
  .tone-copy p{font-size:16px; color:rgba(255,255,255,.72); max-width:480px;}
  .tone-wave{display:flex; align-items:center; gap:26px; justify-content:center;}
  .tone-word{text-align:center;}
  .tone-word svg{width:44px; height:26px; margin:0 auto 12px; color:var(--shallow);}
  .tone-word b{display:block; font-family:'Markazi Text',serif; font-size:20px;}

  /* ---------- SHORE (contact) ---------- */
  .shore{background:linear-gradient(180deg, var(--sand) 0%, #eef2f0 100%); color:var(--sand-ink); padding-top:150px;}
  .shore-inner{text-align:center; max-width:680px; margin:0 auto 90px;}
  .shore-inner h2{font-size:clamp(30px,4.4vw,52px); margin-bottom:22px;}
  .shore-inner p{font-size:17px; color:#3b4c52; margin-bottom:40px;}
  .shore-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; border-top:1px solid rgba(28,43,49,.14); padding-top:50px;}
  .shore-brand p{font-size:14px; color:#4c6169; margin-top:16px; max-width:300px;}
  .shore-col h5{font-size:12px; letter-spacing:2px; color:var(--deep); margin-bottom:16px; text-transform:uppercase;}
  .shore-col li{list-style:none; margin-bottom:10px; font-size:14.5px; color:#33474e;}
  .shore-col li a:hover{color:var(--deep);}
  .shore-bottom{margin-top:60px; padding-top:24px; border-top:1px solid rgba(28,43,49,.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:#5c6f75;}

  a:focus-visible, button:focus-visible{outline:2px solid var(--deep); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}}

  @media (max-width:1020px){
    .source-grid{grid-template-columns:1fr; gap:30px;}
    .rotated-label{writing-mode:horizontal-tb;}
    .layer-card + .layer-card{margin-inline-start:0 !important;}
    .journey-flow{grid-template-columns:1fr 1fr;}
    .tone-inner{grid-template-columns:1fr;}
    .shore-grid{grid-template-columns:1fr 1fr; row-gap:34px;}
  }
  @media (max-width:720px){
    .wrap{padding:0 20px;}
    section{padding:100px 0;}
    .floor-masonry{columns:1;}
    .journey-flow{grid-template-columns:1fr;}
    .shore-grid{grid-template-columns:1fr;}
    .pillar-strip{flex-direction:column;}
  }

.lang-switch{margin:20px auto 0;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:10px 24px;font-family:'IBM Plex Mono',monospace;cursor:pointer;font-size:14px}.lang-switch:hover{background:rgba(255,255,255,.1)}html[dir="ltr"] .overlay-close{left:auto;right:32px}html[dir="ltr"] .gauge{left:auto;right:26px}html[dir="ltr"] .journey-arrow{right:auto;left:-14%}html[dir="ltr"] .rotated-label{writing-mode:vertical-lr}@media(max-width:1020px){html[dir="ltr"] .rotated-label{writing-mode:horizontal-tb}}body.menu-open{overflow:hidden}.menu-btn,.overlay-close{appearance:none;-webkit-appearance:none}.menu-btn:focus-visible,.overlay-close:focus-visible,.lang-switch:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* =========================================================
   V2 CINEMATIC OCEAN HERO
   ========================================================= */
.surface{
  min-height:100svh;
  isolation:isolate;
  display:flex;
  align-items:center;
  padding:150px 0 180px;
  background:linear-gradient(180deg,#dbe7e5 0%,#afcbd0 42%,#4f8794 100%);
  color:#fff;
  overflow:hidden;
}
.surface::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 72% 17%,rgba(255,255,255,.42),transparent 20%),linear-gradient(120deg,rgba(255,255,255,.18),transparent 45%);
  pointer-events:none;
}
.hero-sky{position:absolute;inset:0 0 43% 0;z-index:-5;background:linear-gradient(180deg,#e8efed 0%,#bcd1d1 65%,rgba(149,190,197,.6) 100%)}
.hero-sun{position:absolute;top:11%;left:68%;width:180px;height:180px;border-radius:50%;z-index:-4;background:radial-gradient(circle,rgba(255,250,222,.95) 0%,rgba(255,245,202,.42) 34%,transparent 70%);filter:blur(.2px);animation:sunPulse 6s ease-in-out infinite}
.hero-sun span{position:absolute;inset:31%;border-radius:50%;background:#fff9da;box-shadow:0 0 65px 22px rgba(255,245,210,.65)}
.hero-rays{position:absolute;top:-12%;left:56%;width:46%;height:82%;z-index:-3;transform:rotate(9deg);background:repeating-linear-gradient(100deg,transparent 0 8%,rgba(255,255,255,.13) 10%,transparent 14%);filter:blur(8px);opacity:.75;animation:raysMove 12s ease-in-out infinite alternate}
.surface-watermark{top:7%;left:auto;right:3%;transform:none;font-size:clamp(150px,25vw,340px);color:rgba(255,255,255,.10);z-index:-1;letter-spacing:-.08em}
.hero-water{position:absolute;left:-5%;right:-5%;top:38%;bottom:-1px;z-index:-2;overflow:hidden;background:linear-gradient(180deg,rgba(88,151,164,.73) 0%,#3f7784 35%,#2f5863 100%)}
.hero-water::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);transform:translateX(-100%);animation:waterSweep 8s linear infinite}
.wave-layer{position:absolute;left:-10%;width:120%;height:180px;will-change:transform}
.wave-layer span{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat-x;background-size:50% 100%;transform-origin:center}
.wave-back{top:-70px;opacity:.55;animation:waveFloat 7s ease-in-out infinite alternate}
.wave-back span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cpath d='M0 80 C170 10 330 145 510 70 C690 -5 830 135 1010 62 C1090 30 1150 28 1200 60 L1200 150 L0 150Z' fill='%239fc6ca'/%3E%3C/svg%3E");animation:waveDrift 18s linear infinite}
.wave-mid{top:-35px;opacity:.82;animation:waveFloat 5s ease-in-out infinite alternate-reverse}
.wave-mid span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cpath d='M0 78 C150 140 300 15 470 78 C650 145 800 8 980 72 C1080 108 1140 75 1200 60 L1200 150 L0 150Z' fill='%236ea2ad'/%3E%3C/svg%3E");animation:waveDriftReverse 13s linear infinite}
.wave-front{top:3px;opacity:.9}
.wave-front span{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cpath d='M0 55 C180 15 320 130 520 72 C720 14 870 120 1040 58 C1110 32 1160 42 1200 55 L1200 150 L0 150Z' fill='%234d8490'/%3E%3C/svg%3E");animation:waveDrift 10s linear infinite}
.sea-shimmer{position:absolute;inset:8% 0 0;background:linear-gradient(110deg,transparent 10%,rgba(255,255,255,.16) 26%,transparent 38%,rgba(255,255,255,.08) 52%,transparent 68%);background-size:220% 100%;mix-blend-mode:screen;animation:shimmer 9s linear infinite}
.sea-current{position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;filter:blur(1px)}
.sea-current-one{width:720px;height:210px;left:7%;top:30%;transform:rotate(-8deg);animation:currentMove 12s ease-in-out infinite alternate}
.sea-current-two{width:560px;height:170px;right:-8%;top:56%;transform:rotate(7deg);animation:currentMove 9s ease-in-out infinite alternate-reverse}
.hero-wrap{position:relative;z-index:4;width:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:center;gap:70px}
.hero-content{max-width:790px;will-change:transform}
.hero-kicker{display:flex;align-items:center;gap:15px;margin-bottom:24px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2.3px;text-transform:uppercase;color:rgba(255,255,255,.9)}
.hero-kicker-line{width:48px;height:1px;background:rgba(255,255,255,.75);position:relative}
.hero-kicker-line::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;right:0;top:-2px;box-shadow:0 0 14px rgba(255,255,255,.8)}
.surface h1{max-width:780px;font-size:clamp(48px,6.4vw,88px);line-height:1.04;color:#fff;text-shadow:0 8px 40px rgba(23,52,59,.26);letter-spacing:-.02em}
.surface h1 em{display:inline;color:#eef7f5;border:0;position:relative;white-space:nowrap}
.surface h1 em::after{content:"";position:absolute;height:7px;left:0;right:0;bottom:4px;background:rgba(214,235,231,.3);border-radius:999px;z-index:-1;transform:skewX(-10deg)}
.surface p.lead{max-width:640px;margin-top:27px;font-size:clamp(16px,1.25vw,19px);line-height:1.9;color:rgba(255,255,255,.86);text-shadow:0 2px 18px rgba(20,48,55,.2)}
.surface-actions{margin-top:38px}
.surface .btn{min-height:55px;padding:15px 31px;border-radius:999px}
.surface .btn-solid{background:#fff;color:#244650;box-shadow:0 15px 45px rgba(25,61,69,.25)}
.surface .btn-solid:hover{background:#edf7f5;color:#182f36;transform:translateY(-4px);box-shadow:0 20px 50px rgba(25,61,69,.32)}
.surface .btn-line{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.07);backdrop-filter:blur(10px)}
.surface .btn-line:hover{background:#fff;color:#244650;border-color:#fff;transform:translateY(-4px)}
.hero-trust{display:flex;align-items:center;gap:24px;margin-top:35px;flex-wrap:wrap}
.hero-trust span{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.76)}
.hero-trust i{width:6px;height:6px;border-radius:50%;background:#d8eeea;box-shadow:0 0 0 5px rgba(216,238,234,.12)}
.hero-trust b{font-weight:500}
.hero-orbit{justify-self:end;position:relative;width:min(34vw,410px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;filter:drop-shadow(0 22px 45px rgba(18,48,56,.24));animation:heroFloat 7s ease-in-out infinite}
.hero-orbit::before{content:"";position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.28),rgba(31,88,101,.18) 42%,rgba(20,63,73,.38) 100%);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);box-shadow:inset 0 0 70px rgba(255,255,255,.08),0 0 0 18px rgba(255,255,255,.025)}
.orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.orbit-one{inset:2%;animation:orbitSpin 18s linear infinite}
.orbit-one::before,.orbit-one::after,.orbit-two::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#e4f4f1;box-shadow:0 0 18px #fff}
.orbit-one::before{left:15%;top:10%}.orbit-one::after{right:4%;bottom:27%}
.orbit-two{inset:22%;border-style:dashed;opacity:.65;animation:orbitSpinReverse 13s linear infinite}
.orbit-two::before{left:50%;bottom:-5px}
.hero-mark{position:relative;z-index:2;width:48%;color:#fff}
.hero-mark svg{width:100%;height:auto;filter:drop-shadow(0 12px 22px rgba(9,37,44,.35))}
.orbit-label{position:absolute;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:4px;color:rgba(255,255,255,.6)}
.orbit-label-one{left:0;top:44%;transform:rotate(-90deg)}.orbit-label-two{right:3%;top:47%;transform:rotate(90deg)}
.droplet-field{z-index:1}
.droplet{background:rgba(223,245,242,.28);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 9px rgba(255,255,255,.2);animation-name:riseBubble}
.marine-life{position:absolute;inset:42% 0 0;z-index:0;pointer-events:none;opacity:.28}
.fish{position:absolute;font:0/0 a;color:transparent;width:32px;height:13px;border-radius:50% 60% 60% 50%;background:rgba(9,46,55,.55);animation:fishSwim linear infinite}
.fish::before{content:"";position:absolute;right:-11px;top:2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:12px solid rgba(9,46,55,.55)}
.fish i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.7);left:6px;top:4px}
.fish-one{top:24%;left:-5%;animation-duration:24s}.fish-two{top:50%;left:-12%;transform:scale(.7);animation-duration:31s;animation-delay:-9s}.fish-three{top:70%;left:-8%;transform:scale(.45);animation-duration:38s;animation-delay:-19s}
.scroll-cue{position:absolute;z-index:6;bottom:84px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.68);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px}
.scroll-cue-line{height:46px;width:1px;background:linear-gradient(to bottom,transparent,#fff);position:relative;overflow:hidden}
.scroll-cue-line::after{content:"";position:absolute;left:0;top:-20px;width:1px;height:18px;background:#fff;animation:scrollCue 2s ease-in-out infinite}
.hero-seam{position:absolute;left:0;right:0;bottom:-2px;z-index:5;height:145px;pointer-events:none}
.hero-seam svg{width:100%;height:100%;display:block}
header.top{transition:padding .35s var(--ease),background .35s,box-shadow .35s}
header.top.is-scrolled{padding-top:12px;padding-bottom:12px;background:rgba(30,68,77,.68);backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(18,47,54,.12)}
.menu-btn{transition:transform .3s,background .3s,border-color .3s}.menu-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
@keyframes waveDrift{to{transform:translateX(-50%)}}@keyframes waveDriftReverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes waveFloat{from{transform:translateY(-5px)}to{transform:translateY(8px)}}
@keyframes waterSweep{to{transform:translateX(100%)}}@keyframes shimmer{to{background-position:-220% 0}}
@keyframes sunPulse{50%{transform:scale(1.08);opacity:.8}}@keyframes raysMove{to{transform:rotate(13deg) translateX(30px)}}
@keyframes currentMove{to{transform:translateX(70px) rotate(-4deg) scale(1.06)}}
@keyframes heroFloat{50%{transform:translateY(-15px) rotate(1.5deg)}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes orbitSpinReverse{to{transform:rotate(-360deg)}}
@keyframes riseBubble{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}12%{opacity:.8}100%{transform:translate3d(25px,-115vh,0) scale(1.15);opacity:0}}
@keyframes fishSwim{0%{transform:translateX(0)}100%{transform:translateX(115vw)}}@keyframes scrollCue{to{transform:translateY(70px)}}
html[dir="ltr"] .hero-kicker-line::after{right:auto;left:0}
html[dir="ltr"] .surface-watermark{right:auto;left:3%}
@media(max-width:1020px){
 .surface{padding-top:135px;min-height:960px}.hero-wrap{grid-template-columns:1fr;gap:35px}.hero-content{max-width:760px}.hero-orbit{position:absolute;width:330px;right:-75px;bottom:-115px;opacity:.38}.surface h1{max-width:690px}.hero-water{top:43%}.scroll-cue{display:none}
 html[dir="ltr"] .hero-orbit{right:auto;left:-75px}
}
@media(max-width:720px){
 .surface{min-height:880px;align-items:flex-start;padding:126px 0 160px}.surface::before{background:radial-gradient(circle at 72% 12%,rgba(255,255,255,.34),transparent 20%)}.hero-sun{width:120px;height:120px;top:9%;left:68%}.hero-rays{left:45%;width:70%}.hero-water{top:49%}.surface-watermark{top:8%;right:-4%;font-size:150px}.hero-wrap{display:block}.surface h1{font-size:clamp(42px,13vw,62px);line-height:1.07}.surface h1 em{white-space:normal}.surface p.lead{font-size:15.5px;line-height:1.75;margin-top:22px}.hero-kicker{font-size:10px;letter-spacing:1.5px;margin-bottom:20px}.hero-kicker-line{width:30px}.surface-actions{margin-top:29px;gap:11px}.surface .btn{min-height:50px;padding:13px 21px;font-size:14px}.hero-trust{gap:16px;margin-top:27px}.hero-trust span{font-size:12px}.hero-orbit{width:245px;right:-72px;bottom:-195px;opacity:.38}.hero-seam{height:100px}.marine-life{inset:50% 0 0}.wave-layer{height:130px}.wave-back{top:-50px}.wave-mid{top:-25px}.wave-front{top:0}.scroll-cue{display:none}
 html[dir="ltr"] .hero-orbit{right:auto;left:-72px}
}
@media(max-width:430px){.surface{min-height:910px}.surface-actions{display:grid;grid-template-columns:1fr 1fr}.surface .btn{justify-content:center;padding-inline:15px}.hero-trust{gap:13px}.hero-trust span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-sun,.hero-rays,.wave-layer,.wave-layer span,.sea-shimmer,.sea-current,.hero-orbit,.orbit-ring,.droplet,.fish,.scroll-cue-line::after{animation:none!important}}