/* ══════════════════════════════════════════════════════════════
   Mahmud Hasan Sizan — a bug in every wave
   The page is a descent. Depth drives colour, light and quiet.
   ══════════════════════════════════════════════════════════════ */

:root{
  --abyss:   #03070C;
  --abyss-2: #061019;
  --deep:    #08131E;
  --foam:    #DDEEF2;
  --foam-2:  #A2BEC6;
  --slate:   #63808A;
  --slate-2: #354A52;
  --bio:     #5FE0CC;
  --bio-2:   #92F2E2;
  --warm:    #FF8256;

  --line:   rgba(160,205,215,.13);
  --line-2: rgba(160,205,215,.07);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--abyss); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:transparent;
  color:var(--foam);
  font-family:var(--sans);
  font-size:clamp(.95rem,.5vw + .84rem,1.0625rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
::selection{ background:var(--bio); color:var(--abyss); }

.mono{
  font-family:var(--mono);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
}

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

/* ═══════════ the water ═══════════ */

#water{
  position:fixed; inset:0; z-index:-2;
  width:100%; height:100%; display:block;
  background:
    radial-gradient(ellipse 95% 55% at 50% -8%, rgba(48,150,168,.22), transparent 60%),
    linear-gradient(#04131F 0%, #030D16 40%, #02070C 100%);
}
/* darkens as the page descends — opacity driven from JS */
.deepen{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(1,4,7,.55), rgba(0,2,4,.92));
  opacity:0;
}
.grain{
  position:fixed; inset:-25%; z-index:9998; pointer-events:none;
  opacity:.028; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-2%,2%,0)}
  50%{transform:translate3d(2%,-1%,0)}  75%{transform:translate3d(-1%,-2%,0)}
}

/* ═══════════ depth gauge ═══════════ */

.gauge{
  position:fixed; right:max(1rem,2.4vw); top:50%; translate:0 -50%;
  z-index:60; display:flex; align-items:center; gap:.85rem;
  pointer-events:none;
}
.gauge__rail{
  width:1px; height:min(42vh,340px);
  background:var(--line-2); position:relative;
}
.gauge__rail i{
  position:absolute; left:-1px; top:0; width:3px; height:0%;
  background:linear-gradient(var(--bio-2),var(--bio));
  box-shadow:0 0 14px rgba(95,224,204,.7);
}
.gauge__read{
  font-family:var(--mono); text-align:right;
  display:grid; gap:.1rem; min-width:6.2ch;
}
.gauge__read b{
  font-size:1rem; font-weight:400; color:var(--bio-2);
  font-variant-numeric:tabular-nums; line-height:1;
}
.gauge__read span{ font-size:.5rem; letter-spacing:.2em; color:var(--slate-2); }
.gauge__read em{
  font-style:normal; font-size:.5rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); margin-top:.35rem;
}
@media (max-width:860px){ .gauge{ display:none } }

/* ═══════════ 0 M — surface ═══════════ */

.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(1.2rem,2.5vw,2rem) var(--pad) clamp(1.4rem,3vh,2.4rem);
}
.hero__top{ display:flex; justify-content:space-between; align-items:center; color:var(--slate); }
.hero__avail{ display:inline-flex; align-items:center; gap:.5rem; color:var(--bio); }
.hero__avail i{
  width:5px; height:5px; border-radius:50%; background:var(--bio);
  box-shadow:0 0 8px var(--bio); animation:blip 2.6s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{opacity:.35} 50%{opacity:1} }

.hero__mid{ display:grid; align-content:center; justify-items:center; text-align:center; gap:1.1rem; }
.hero__kicker{ color:var(--slate); letter-spacing:.34em; font-size:.625rem; }
.hero h1{
  margin:0; font-family:var(--serif); font-weight:200;
  font-size:clamp(2.9rem,10.5vw,8.5rem); line-height:.94; letter-spacing:-.022em;
  text-shadow:0 0 70px rgba(3,7,12,.85);
}
.hero h1 em{ font-style:italic; color:var(--bio-2); }
.hero__line{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,2.4vw,1.6rem); color:var(--foam-2);
  letter-spacing:.01em;
}

.hero__foot{ display:flex; justify-content:space-between; align-items:flex-end; color:var(--slate-2); }
.cue{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--slate);
      transition:color .4s var(--ease); }
.cue:hover{ color:var(--bio); }
.cue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--slate-2),transparent);
        position:relative; overflow:hidden; }
.cue i::after{ content:""; position:absolute; inset:0; background:var(--bio);
               animation:sink 2.6s var(--ease) infinite; }
@keyframes sink{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
@media (max-width:620px){ .hero__hint{ display:none } }

/* hero: credibility + fit, front-loaded for the ten-second scan */
.hero__proof{
  margin:.15rem 0 0; max-width:48ch;
  font-size:clamp(.9rem,1.7vw,1.05rem); line-height:1.55; color:var(--foam-2);
}
.hero__proof b{ color:var(--foam); font-weight:500; }
.hero__open{
  margin:.1rem 0 0; max-width:52ch; color:var(--slate);
  font-size:.625rem; letter-spacing:.12em; line-height:1.7;
}
.hero__cta{ display:flex; align-items:center; flex-wrap:wrap; gap:.9rem 1.3rem; }
.hero__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.58rem 1.05rem; border:1px solid var(--line); border-radius:2px;
  color:var(--foam-2); text-decoration:none; font-size:.6875rem; letter-spacing:.14em;
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.hero__btn:hover{ border-color:var(--bio); color:var(--bio); background:rgba(95,224,204,.06); }
.hero__link{
  color:var(--slate); text-decoration:none; font-size:.6875rem; letter-spacing:.14em;
  transition:color .4s var(--ease);
}
.hero__link:hover{ color:var(--bio); }

/* contact: logistics a recruiter needs before they decide to write */
.contact__meta{
  margin:.6rem 0 clamp(1.8rem,3.6vw,2.6rem);
  color:var(--foam-2); font-size:.6875rem; letter-spacing:.1em; line-height:1.85;
}
.cvbtn{
  display:inline-flex; align-items:center; gap:.5rem; margin:1.4rem 0 0;
  padding:.7rem 1.2rem; border:1px solid var(--line); border-radius:2px;
  color:var(--foam-2); text-decoration:none; font-size:.75rem; letter-spacing:.08em;
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.cvbtn i{ font-style:normal; color:var(--bio); transition:transform .4s var(--ease); }
.cvbtn:hover{ border-color:var(--bio); color:var(--bio); background:rgba(95,224,204,.06); }
.cvbtn:hover i{ transform:translateY(3px); }

/* ═══════════ sections ═══════════ */

.sec{ position:relative; padding-block:clamp(5.5rem,14vh,10rem); }

.mark{
  display:flex; align-items:center; gap:1rem;
  color:var(--slate-2); margin:0 0 1.6rem;
  font-size:.625rem; letter-spacing:.24em;
}
.mark span{ color:var(--bio); }
.mark::after{ content:""; flex:1; height:1px; background:var(--line-2); }

.sec h2{
  margin:0 0 1.1rem; font-family:var(--serif); font-weight:200;
  font-size:clamp(1.75rem,4.4vw,3.1rem); line-height:1.12; letter-spacing:-.012em;
  max-width:22ch;
}
.sub{ margin:0 0 clamp(2.4rem,5vw,3.6rem); color:var(--foam-2); max-width:56ch; font-size:.9375rem; }
.sub a{ color:var(--bio); text-underline-offset:3px; }
.sub b{ color:var(--foam); font-weight:500; }
.note{ color:var(--slate); font-size:.625rem; letter-spacing:.16em; margin:clamp(2rem,4vw,3rem) 0 0; }

.reveal{ opacity:0; transform:translateY(20px);
         transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ═══════════ 200 M — the record ═══════════ */

.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
@media (max-width:860px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:420px){ .grid{ grid-template-columns:1fr } }
.cell{
  background:rgba(4,12,20,.62); backdrop-filter:blur(3px);
  padding:clamp(1.3rem,2.6vw,2rem) clamp(1rem,1.8vw,1.5rem);
  display:grid; gap:.5rem; transition:background .5s var(--ease);
}
.cell:hover{ background:rgba(10,26,38,.75); }
.cell b{
  font-family:var(--serif); font-weight:200; line-height:1;
  font-size:clamp(2.3rem,4.6vw,3.4rem); color:var(--foam);
  font-variant-numeric:tabular-nums;
}
.cell:hover b{ color:var(--bio-2); }
.cell span{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.14em;
            text-transform:uppercase; color:var(--slate); }
.cell span i{ font-style:normal; color:var(--slate-2); }

.flags{
  list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.5rem;
}
.flags li{ display:grid; gap:.3rem; padding-left:.9rem; border-left:1px solid var(--bio); }
.flags b{ font-family:var(--serif); font-size:1.1rem; font-weight:400; }
.flags span{ color:var(--slate); font-size:.8125rem; }

/* ═══════════ 1000 M — every wave ═══════════ */

/* a wall of the companies that put their name to his findings.
   marks are monochrome so nothing fights the abyss — they glow foam, and
   brighten like disturbed plankton on hover. cells stay transparent so the
   water still moves behind them. */
.logos{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--wrap); padding-inline:var(--pad);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(.5rem,1.2vw,.85rem);
}
.logo{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.95rem; min-height:130px; padding:1.5rem 1rem; text-align:center;
  border:1px solid var(--line-2);
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.logo:hover{ background:rgba(10,28,40,.5); border-color:rgba(95,224,204,.32); z-index:1; }

.logo__mk{ width:38px; height:38px; display:grid; place-items:center; }
.logo__mk svg{
  width:100%; height:100%; fill:var(--foam-2); opacity:.8;
  transition:fill .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
}
.logo:hover .logo__mk svg{
  fill:var(--bio-2); opacity:1;
  filter:drop-shadow(0 0 9px rgba(95,224,204,.5));
}
.logo__n{
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate);
  transition:color .5s var(--ease);
}
.logo:hover .logo__n{ color:var(--foam-2); }

/* companies with no clean vector mark: the name itself is the logo */
.logo--word .logo__n{
  font-family:var(--serif); font-weight:300; text-transform:none;
  font-size:clamp(1.05rem,2.1vw,1.3rem); letter-spacing:0;
  color:var(--foam-2); opacity:.92; line-height:1.15;
}
.logo--word:hover .logo__n{ color:var(--bio-2); }

@media (max-width:520px){
  .logos{ grid-template-columns:repeat(2,1fr); padding-inline:clamp(1rem,5vw,2rem) }
}

/* ═══════════ 4000 M — the dark ═══════════ */

.flagship{
  border:1px solid var(--line);
  background:
    radial-gradient(ellipse 80% 130% at 0% 0%, rgba(95,224,204,.09), transparent 62%),
    rgba(4,14,22,.68);
  padding:clamp(1.6rem,3.4vw,2.8rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.flagship__tag{ color:var(--bio); font-size:.5625rem; letter-spacing:.24em; }
.flagship__row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.5rem; margin:1.4rem 0 1.5rem;
}
.flagship__row div{ display:grid; gap:.35rem; }
.flagship__row b{
  font-family:var(--serif); font-weight:200; font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1; color:var(--bio-2);
}
.flagship__row span{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.13em;
                     text-transform:uppercase; color:var(--slate); }
.flagship__note{ margin:0; color:var(--foam-2); font-size:.9375rem; max-width:60ch; }

.ghosts{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.ghosts li{
  position:relative; display:flex; align-items:center; gap:.9rem;
  padding:.55rem .9rem;
  border:1px solid var(--line-2);
  /* fill width tracks that program's share of reputation */
  background:linear-gradient(90deg,
    rgba(95,224,204,.13) 0%,
    rgba(95,224,204,.03) calc(var(--r,20) * 1%),
    transparent calc(var(--r,20) * 1%));
  transition:border-color .4s var(--ease);
}
.ghosts li:hover{ border-color:rgba(95,224,204,.35); }
.ghosts li span{ color:var(--bio-2); font-size:.625rem; min-width:6ch; }
.ghosts li em{ font-style:normal; color:var(--slate); font-family:var(--mono);
               font-size:.5625rem; letter-spacing:.14em; }
.ghosts li::after{
  content:"private"; margin-left:auto; font-family:var(--mono);
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-2);
}

/* ═══════════ 5000 M — acknowledged ═══════════ */

.creds{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;   /* 4 cards → 2×2 */
        background:var(--line-2); border:1px solid var(--line-2); }
@media (max-width:720px){ .creds{ grid-template-columns:1fr } }
.cred{ background:rgba(4,12,20,.66); padding:clamp(1.4rem,2.8vw,2.1rem);
       transition:background .5s var(--ease); }
.cred:hover{ background:rgba(10,26,38,.8); }
.cred header{ display:grid; gap:.35rem; margin-bottom:.9rem; }
.cred h3{ margin:0; font-family:var(--serif); font-weight:300; font-size:1.5rem; }
.cred header .mono{ color:var(--slate-2); font-size:.5625rem; letter-spacing:.16em; }
.cred p{ margin:0 0 1rem; color:var(--foam-2); font-size:.875rem; }
.cred p b{ color:var(--foam); font-weight:500; }
.cred ul{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.cred ul li{ color:var(--slate); font-size:.5625rem; letter-spacing:.14em; }
.cred--apple{ background:
  radial-gradient(ellipse 90% 120% at 100% 0%, rgba(95,224,204,.10), transparent 60%),
  rgba(4,12,20,.66); }
.cred__src{ display:inline-block; margin-top:.9rem; color:var(--bio);
            text-decoration:none; font-size:.5625rem; letter-spacing:.12em;
            text-transform:none; border-bottom:1px solid rgba(95,224,204,.3); }
.cred__src:hover{ color:var(--bio-2); }

/* ═══════════ 5500 M — classes ═══════════ */

.classes{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.classes li{
  display:grid; grid-template-columns:60px minmax(190px,1fr) 2fr;
  gap:clamp(.7rem,2.2vw,1.8rem); align-items:baseline;
  padding:clamp(1rem,2.1vw,1.4rem) .2rem;
  border-bottom:1px solid var(--line-2);
  transition:padding-left .45s var(--ease), background .45s var(--ease);
}
.classes li:hover{ padding-left:1rem; background:rgba(10,28,40,.4); }
.classes li span{ color:var(--bio); font-size:.625rem; }
.classes li b{ font-family:var(--serif); font-weight:300; font-size:clamp(1.1rem,2.2vw,1.4rem); }
.classes li em{ font-style:normal; color:var(--slate); font-size:.875rem; }
@media (max-width:740px){
  .classes li{ grid-template-columns:52px 1fr }
  .classes li em{ grid-column:2 }
}

/* ═══════════ 5800 M — instruments ═══════════ */

.tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
        background:var(--line-2); border:1px solid var(--line-2); }
@media (max-width:760px){ .tools{ grid-template-columns:1fr } }
.tool{ background:rgba(4,12,20,.66); padding:clamp(1.4rem,2.8vw,2.2rem); }
.tool--wide{ grid-column:1/-1; }
.tool header{ display:grid; gap:.4rem; margin-bottom:.9rem; }
.tool h3{ margin:0; font-family:var(--serif); font-weight:300; font-size:1.5rem; }
.tool header a, .tool header span{ color:var(--slate-2); font-size:.5625rem;
  letter-spacing:.16em; text-decoration:none; transition:color .4s var(--ease); }
.tool header a:hover{ color:var(--bio); }
.tool p{ margin:0 0 1.1rem; color:var(--foam-2); font-size:.875rem; max-width:62ch; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; }
.chips li{ border:1px solid var(--line); padding:.35rem .7rem; color:var(--slate);
  font-size:.5rem; letter-spacing:.14em; transition:border-color .4s var(--ease), color .4s var(--ease); }
.chips li:hover{ border-color:var(--bio); color:var(--bio); }

/* ═══════════ 6000 M — contact ═══════════ */

.sec--contact{ padding-bottom:0; }
.contact__h{ max-width:26ch; font-size:clamp(1.5rem,3.8vw,2.6rem); }
.mail{
  display:inline-flex; align-items:center; gap:.9rem; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:.8rem;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.mail .mono{ font-size:clamp(.75rem,1.8vw,1rem); text-transform:none; letter-spacing:.05em; }
.mail i{ font-style:normal; color:var(--bio); transition:transform .4s var(--ease); }
.mail:hover{ color:var(--bio-2); border-color:var(--bio); }
.mail:hover i{ transform:translate(4px,-4px); }

.links{
  list-style:none; margin:clamp(2.6rem,5vw,4rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
@media (max-width:820px){ .links{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:420px){ .links{ grid-template-columns:1fr } }
.links a{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:rgba(4,12,20,.66); padding:1.1rem 1.15rem; text-decoration:none;
  font-family:var(--serif); font-size:1.05rem;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.links a i{ font-style:normal; color:var(--slate-2); transition:transform .4s var(--ease), color .4s var(--ease); }
.links a:hover{ background:rgba(10,28,40,.85); color:var(--bio-2); }
.links a:hover i{ transform:translate(3px,-3px); color:var(--bio); }

.langs{ margin-top:clamp(2.2rem,4vw,3.2rem); color:var(--slate); font-size:.5625rem; letter-spacing:.14em; }

.foot{
  margin-top:clamp(4.5rem,10vh,7rem);
  border-top:1px solid var(--line-2);
  padding-block:clamp(2.2rem,4.5vw,3rem);
  background:rgba(1,5,9,.7);
}
.foot p{ margin:0; color:var(--slate); font-size:.5625rem; letter-spacing:.07em;
         line-height:2.1; text-transform:none; max-width:80ch; }
.foot__end{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:1.5rem !important; padding-top:1.3rem;
  border-top:1px solid var(--line-2);
  letter-spacing:.16em !important; text-transform:uppercase !important;
}
.foot__end a{ text-decoration:none; transition:color .4s var(--ease); }
.foot__end a:hover{ color:var(--bio); }

/* ═══════════ a11y ═══════════ */

a:focus-visible{ outline:1px solid var(--bio); outline-offset:4px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .grain{ display:none; }
}