:root{
  --ink:#18313b;
  --muted:#73868c;
  --tiffany:#75d6ce;
  --tiffany-deep:#3fb7ad;
  --tiffany-soft:#e5faf7;
  --yellow:#fff0bd;
  --yellow-soft:#fff9e8;
  --border:rgba(255,255,255,.94);
  --shadow:0 22px 55px rgba(54,126,126,.10);
}

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

body{
  margin:0;
  color:var(--ink);
  font-family:"Inter",sans-serif;
  background:
    radial-gradient(circle at 12% 12%,rgba(229,250,247,.88),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(212,246,242,.64),transparent 30%),
    radial-gradient(circle at 56% 82%,rgba(255,240,189,.34),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#fbfffe 48%,#fffdf8 100%);
  overflow-x:hidden;
}

.intro{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
  background:white;
  transition:opacity .45s ease,visibility .45s ease;
}
.intro.hide{opacity:0;visibility:hidden}
.intro-logo{
  font-family:"Manrope",sans-serif;
  font-size:clamp(3rem,8vw,6rem);
  font-weight:800;
  letter-spacing:-.07em;
  opacity:0;
  animation:intro .7s ease forwards;
}
@keyframes intro{to{opacity:1}}

.ambient{
  position:fixed;
  border-radius:50%;
  filter:blur(95px);
  pointer-events:none;
  z-index:-2;
}
.ambient-blue{
  width:430px;height:430px;
  right:-130px;top:12%;
  background:rgba(117,214,206,.20);
}
.ambient-yellow{
  width:360px;height:360px;
  left:-130px;bottom:4%;
  background:rgba(255,230,154,.20);
}

.pointer-glow{
  position:fixed;
  width:240px;height:240px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(117,214,206,.07),transparent 70%);
  opacity:.65;
}

.glass{
  background:
    linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.48));
  border:1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(117,214,206,.07),
    0 18px 48px rgba(54,126,126,.08);
  backdrop-filter:blur(28px) saturate(135%);
  -webkit-backdrop-filter:blur(28px) saturate(135%);
}

.glass-strong{
  background:
    linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.56));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,239,189,.10),
    0 24px 60px rgba(54,126,126,.11);
  backdrop-filter:blur(34px) saturate(145%);
  -webkit-backdrop-filter:blur(34px) saturate(145%);
}

.header-wrap{
  position:fixed;
  top:18px;left:0;right:0;
  z-index:100;
  padding:0 16px;
}
.nav{
  width:min(1120px,100%);
  height:64px;
  margin:auto;
  padding:0 14px 0 18px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:800;
}
.brand-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:11px;
  color:white;
  background:linear-gradient(135deg,var(--tiffany),var(--tiffany-deep));
}
.nav-links{display:flex;gap:30px}
.nav-links a{
  color:#667b81;
  text-decoration:none;
  font-size:.9rem;
}
.nav-links a:hover{color:var(--ink)}
.nav-button{
  padding:11px 16px;
  border-radius:12px;
  color:var(--ink);
  text-decoration:none;
  font-size:.88rem;
  font-weight:700;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.92);
}

.page-width{width:min(1160px,calc(100% - 40px));margin:auto}

.hero{
  min-height:100vh;
  padding:150px 0 90px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:48px;
}
.eyebrow{
  width:max-content;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border-radius:999px;
  color:#6d8389;
  font-size:.82rem;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(54,126,126,.06);
}
.dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--tiffany-deep);
  box-shadow:0 0 0 5px rgba(63,183,173,.09);
}

.hero h1{
  margin:24px 0 8px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(5rem,10vw,9rem);
  line-height:.9;
  letter-spacing:-.08em;
  background:linear-gradient(90deg,#20343e 0%,#4dc4ba 72%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h2{
  margin:0 0 24px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(2rem,4vw,3.6rem);
  letter-spacing:-.045em;
}
.hero-copy>p{
  max-width:560px;
  color:var(--muted);
  font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.75;
}
.actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:32px;
}
.button{
  min-height:50px;
  padding:0 21px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:800;
  transition:transform .2s ease;
}
.button:hover{transform:translateY(-2px)}
.primary{
  color:white;
  background:linear-gradient(135deg,#7bdad2,#42b8ae);
  box-shadow:0 14px 30px rgba(63,183,173,.18);
}
.secondary{
  color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.94);
}

.hero-visual{
  position:relative;
  min-height:600px;
  perspective:1200px;
}
.main-card{
  position:absolute;
  z-index:2;
  width:360px;
  min-height:410px;
  left:43%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-2deg);
  padding:32px;
  border-radius:30px;
}
.card-icon,.project-icon,.mini-icon{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:15px;
  color:var(--tiffany-deep);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.98);
  box-shadow:0 12px 28px rgba(54,126,126,.08);
  font-weight:800;
}
.mini-label{
  display:block;
  color:#89a0a5;
  font-size:.66rem;
  letter-spacing:.15em;
  margin-top:38px;
}
.main-card h3{
  margin:10px 0 12px;
  font-size:1.55rem;
}
.main-card p,.mini-card p{
  color:var(--muted);
  line-height:1.65;
}
.accent-line{
  width:42px;height:3px;
  margin-top:34px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--tiffany),var(--yellow));
}

.mini-card{
  position:absolute;
  width:220px;
  min-height:205px;
  padding:20px;
  border-radius:22px;
}
.mini-card .mini-label{margin-top:20px}
.mini-card strong{
  display:block;
  margin:8px 0;
  font-size:.95rem;
}
.learner-card{
  right:0;
  top:90px;
  z-index:4;
}
.explorer-card{
  right:6px;
  bottom:48px;
  z-index:3;
}
.glass-orb{
  position:absolute;
  z-index:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(117,214,206,.15));
  box-shadow:inset 0 1px 0 white,0 18px 45px rgba(54,126,126,.08);
  backdrop-filter:blur(18px);
}
.orb-one{width:92px;height:92px;right:0;top:35px}
.orb-two{width:56px;height:56px;left:54px;bottom:36px;background:linear-gradient(145deg,rgba(255,255,255,.6),rgba(255,240,189,.20))}

.section{padding:100px 0}
.section-heading{max-width:700px;margin-bottom:40px}
.section-heading>span,.about-intro>span,.contact-card>div>span{
  color:var(--tiffany-deep);
  font-size:.72rem;
  letter-spacing:.17em;
  font-weight:800;
}
.section-heading h2,.about-intro h2,.contact-card h2{
  margin:13px 0 14px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(2.6rem,5vw,4.8rem);
  letter-spacing:-.055em;
}
.section-heading p,.about-intro p,.contact-card p{
  color:var(--muted);
  line-height:1.75;
  font-size:1.03rem;
}

.about-card{
  min-height:300px;
  padding:46px;
  border-radius:28px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
}
.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.about-stats div{
  padding-left:22px;
  border-left:1px solid rgba(103,148,147,.14);
}
.about-stats small{
  display:block;
  margin-bottom:12px;
  color:#8aa0a4;
  letter-spacing:.12em;
  font-size:.65rem;
}
.about-stats strong{
  font-size:.9rem;
  line-height:1.6;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.project{
  min-height:310px;
  padding:24px;
  border-radius:24px;
}
.project h3{margin:28px 0 10px;font-size:1.2rem}
.project p{
  min-height:92px;
  color:var(--muted);
  line-height:1.65;
}
.project a{
  color:var(--tiffany-deep);
  text-decoration:none;
  font-size:.84rem;
  font-weight:700;
}

.note-list{display:grid;gap:14px}
.note{
  min-height:98px;
  padding:22px 26px;
  border-radius:20px;
  display:grid;
  grid-template-columns:70px 1fr auto;
  align-items:center;
  gap:20px;
  transition:transform .2s ease;
}
.note:hover{transform:translateX(5px)}
.note span{color:#9babad;font-size:.74rem}
.note h3{margin:0;font-size:1.02rem}
.note strong{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.94);
  color:#6d8589;
  font-size:.74rem;
}

.contact{padding:90px 0 115px}
.contact-card{
  min-height:210px;
  padding:38px 42px;
  border-radius:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}
.contact-card h2{font-size:clamp(2.2rem,4vw,3.8rem)}

footer{
  padding:0 0 38px;
  display:flex;
  justify-content:space-between;
  color:#91a2a5;
  font-size:.8rem;
}

.tilt{
  transform-style:preserve-3d;
  transition:transform .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.tilt.is-tilting{
  z-index:20 !important;
}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.visible{animation:reveal .7s ease forwards}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

@media(max-width:980px){
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;padding-top:140px}
  .hero-visual{min-height:580px}
  .project-grid{grid-template-columns:1fr 1fr}
  .about-card{grid-template-columns:1fr}
}
@media(max-width:680px){
  .header-wrap{top:10px;padding:0 10px}
  .nav-button{display:none}
  .page-width{width:min(100% - 28px,1160px)}
  .hero{padding-top:120px}
  .hero h1{font-size:clamp(5rem,24vw,7rem)}
  .hero h2{font-size:2rem}
  .actions{flex-direction:column}
  .actions a{width:100%}
  .hero-visual{
    min-height:545px;
    transform:scale(.9);
    transform-origin:top center;
    margin-bottom:-35px;
  }
  .main-card{left:45%;width:min(330px,88vw)}
  .learner-card{right:-20px}
  .explorer-card{right:-16px}
  .section,.contact{padding:74px 0}
  .about-card{padding:32px 24px}
  .about-stats{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .note{grid-template-columns:1fr;gap:8px}
  .contact-card{padding:32px 24px;align-items:flex-start;flex-direction:column}
  footer{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* AIR GLASS V4 — spacious transparent UI hero */
.hero-visual{
  position:relative;
  min-height:620px;
  perspective:1200px;
  isolation:isolate;
}

.hero-visual .main-card,
.hero-visual .mini-card,
.hero-visual .glass-orb{
  display:none;
}

.air-card{
  position:absolute;
  width:min(470px,88%);
  min-height:164px;
  padding:24px 26px;
  border-radius:27px;
  display:grid;
  grid-template-columns:68px 1fr 40px;
  align-items:center;
  gap:22px;
  color:var(--ink);
  text-decoration:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.20));
  border:1px solid rgba(255,255,255,.84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(117,214,206,.08),
    0 24px 54px rgba(49,127,128,.085);
  backdrop-filter:blur(34px) saturate(145%);
  -webkit-backdrop-filter:blur(34px) saturate(145%);
  overflow:hidden;
}

.air-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.10) 28%,
      transparent 49%,
      rgba(117,214,206,.055) 100%);
}

.air-card::after{
  content:"";
  position:absolute;
  left:11%;
  right:11%;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(117,214,206,.42),transparent);
}

.air-card-one{
  top:42px;
  left:1%;
  z-index:4;
}

.air-card-two{
  top:224px;
  right:0;
  z-index:3;
}

.air-card-three{
  top:406px;
  left:4%;
  z-index:2;
}

.air-icon{
  position:relative;
  z-index:1;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:21px;
  color:var(--tiffany-deep);
  font-size:1.35rem;
  font-weight:800;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 30px rgba(55,137,136,.07);
  backdrop-filter:blur(18px);
}

.air-copy{
  position:relative;
  z-index:1;
}

.air-copy span{
  color:var(--tiffany-deep);
  font-size:.68rem;
  letter-spacing:.16em;
  font-weight:800;
}

.air-copy h3{
  margin:8px 0 7px;
  font-size:1.22rem;
}

.air-copy p{
  margin:0;
  max-width:290px;
  color:var(--muted);
  font-size:.91rem;
  line-height:1.55;
}

.air-arrow{
  position:relative;
  z-index:1;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  justify-self:end;
  border-radius:50%;
  color:var(--tiffany-deep);
  font-size:1.6rem;
  background:rgba(255,255,255,.46);
  border:1px solid rgba(255,255,255,.84);
  transition:transform .2s ease,background .2s ease;
}

.air-card:hover .air-arrow{
  transform:translateX(4px);
  background:rgba(255,255,255,.72);
}

.air-orb{
  position:absolute;
  z-index:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 46px rgba(67,145,143,.07);
  backdrop-filter:blur(18px);
  pointer-events:none;
}

.air-orb-blue{
  width:100px;
  height:100px;
  right:1%;
  top:4px;
  background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(117,214,206,.13));
}

.air-orb-yellow{
  width:60px;
  height:60px;
  left:1%;
  bottom:8px;
  background:linear-gradient(145deg,rgba(255,255,255,.40),rgba(255,240,189,.18));
}

/* Softer pointer effect */
.pointer-glow{
  width:170px !important;
  height:170px !important;
  opacity:.32 !important;
  background:radial-gradient(circle,rgba(117,214,206,.045),transparent 72%) !important;
}

/* Whole-site transparent UI tuning */
.nav,
.about-card,
.project,
.note,
.contact-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.57),rgba(255,255,255,.25));
  border-color:rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(117,214,206,.055),
    0 20px 48px rgba(54,126,126,.075);
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
}

@media(max-width:980px){
  .hero-visual{
    min-height:610px;
  }
  .air-card{
    width:min(520px,92%);
  }
  .air-card-one{left:0}
  .air-card-two{right:0}
  .air-card-three{left:2%}
}

@media(max-width:680px){
  .hero-visual{
    min-height:auto;
    transform:none;
    margin:36px 0 0;
    display:grid;
    gap:14px;
  }

  .air-card{
    position:relative;
    inset:auto;
    width:100%;
    min-height:145px;
    padding:20px;
    grid-template-columns:58px 1fr 34px;
    gap:15px;
  }

  .air-icon{
    width:58px;
    height:58px;
    border-radius:18px;
  }

  .air-copy p{
    font-size:.84rem;
  }

  .air-orb{
    display:none;
  }
}


/* NAVIGATION FIX V5 */
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

section[id]{
  scroll-margin-top:100px;
}

.header-wrap{
  z-index:9999 !important;
  pointer-events:auto !important;
}

.nav,
.nav-links,
.nav-links a,
.nav-button,
.brand{
  pointer-events:auto !important;
}

.nav-links a,
.nav-button,
.brand,
.button,
.air-card,
.project a{
  cursor:pointer;
  position:relative;
  z-index:2;
}

/* Nothing decorative may intercept clicks */
.ambient,
.pointer-glow,
.air-orb,
.background-shape,
.glass-orb{
  pointer-events:none !important;
}

/* Remove any unused loading overlay from older cached CSS */
.intro{
  display:none !important;
  pointer-events:none !important;
}