*{box-sizing:border-box}html,body{margin:0;background:#020916;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.hero{min-height:100vh;position:relative;background:linear-gradient(180deg,rgba(0,7,18,.40),rgba(0,7,18,.46) 48%,rgba(0,7,18,.84)),url('../assets/background.png') center/cover no-repeat}.topbar{width:min(1480px,96vw);margin:auto;height:76px;display:grid;grid-template-columns:250px 1fr 250px;align-items:center;gap:20px;position:relative;z-index:5}.brand-logo{display:block;height:34px;width:auto;max-width:220px;object-fit:contain}.menu{display:flex;justify-content:center;gap:34px}.menu a{color:#c8d5df;text-decoration:none;font-size:12px}.actions{display:flex;justify-content:flex-end;align-items:center;gap:20px}.login{border:1px solid #6fd7ff;padding:10px 24px;border-radius:10px;color:#fff;text-decoration:none;box-shadow:0 0 14px rgba(52,147,255,.35)}.center{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 20px 12px}.main-logo{display:block;width:min(560px,58vw);max-height:110px;object-fit:contain;filter:drop-shadow(0 0 10px #7bcfff)}.world-title{font-size:clamp(18px,2vw,30px);letter-spacing:.55em;padding-left:.55em;margin-top:6px}.subtitle{margin-top:10px;max-width:680px;font-size:15px}.cta{margin-top:22px;padding:14px 36px;border-radius:16px;color:#fff;text-decoration:none;font-size:13px;font-weight:700;border:1px solid #7bdcff;box-shadow:0 0 18px rgba(45,154,255,.5)}.down{margin-top:12px;font-size:23px}.discover{margin-top:6px;font-size:9px;letter-spacing:.36em;color:#9db1c1}.projects{width:100%;overflow:hidden;padding:12px 0 20px;margin-top:-12px}.track{display:flex;gap:16px;width:max-content;animation:scroll 120s linear infinite}.projects:hover .track{animation-play-state:running}.card{width:330px;height:190px;flex:0 0 auto;border-radius:14px;padding:1px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#2c6aff,#7be0ff,#c38cff,#57bfff,#2c6aff);background-size:300% 300%;animation:borderFlow 6s ease-in-out infinite;box-shadow:0 0 14px rgba(65,166,255,.3)}.card-inner{height:100%;border-radius:13px;overflow:hidden;position:relative;background:#061120}.card img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}.card-inner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,5,16,.68) 100%)}.card-arrow{position:absolute;right:12px;bottom:12px;z-index:2;width:32px;height:32px;border:1px solid #8ddfff;border-radius:50%;display:grid;place-items:center;background:rgba(0,10,22,.45);font-size:18px}.logo-fallback{display:none;font-weight:800;letter-spacing:.08em;text-shadow:0 0 10px #7bcfff}.top-fallback{font-size:20px}.center-fallback{font-size:64px}@keyframes scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}@keyframes borderFlow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@media(max-width:900px){.topbar{grid-template-columns:1fr auto;height:auto;padding:18px 0}.menu{grid-column:1/-1;order:3;flex-wrap:wrap;gap:18px}.center{min-height:430px}}@media(max-width:640px){.card{width:300px;height:175px}.menu{gap:12px}.menu a{font-size:10px}.main-logo{width:76vw}.world-title{letter-spacing:.28em;padding-left:.28em}.center-fallback{font-size:42px}}

.side-note{position:absolute;top:138px;z-index:6;font-size:10px;line-height:2.05;letter-spacing:.38em;color:#b7c5d1;text-transform:uppercase}
.left-side{left:3.1vw}
.right-side{right:3.2vw;text-align:right}
.bottom-meta{width:min(1480px,94vw);margin:6px auto 0;padding:10px 0 22px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:18px;color:#9cafbe;font-size:10px;letter-spacing:.14em}
.meta-center{display:flex;justify-content:center;gap:34px;flex-wrap:wrap}
.meta-right{text-align:right;display:flex;flex-direction:column;gap:4px}
.meta-right strong{font-size:14px;color:#dbeaff;font-weight:500}
.meta-right small{font-size:8px;letter-spacing:.08em}
@media(max-width:900px){.side-note{display:none}.bottom-meta{grid-template-columns:1fr}.meta-center{justify-content:flex-start;gap:14px}.meta-right{text-align:left}}


.card-title{
  font-family:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-shadow:0 2px 8px #000;
}
.card-sub{
  font-family:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  font-size:9px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b8c8d4;
  margin-top:4px;
  line-height:1.25;
  text-shadow:0 2px 6px #000;
}


.handwritten-note{
  position:absolute;
  right:5.5vw;
  bottom:70px;
  z-index:8;
  color:rgba(255,255,255,.74);
  font-family:"Segoe Script","Bradley Hand","Comic Sans MS",cursive;
  font-size:18px;
  line-height:1.15;
  font-style:italic;
  letter-spacing:.02em;
  text-align:right;
  transform:rotate(-7deg);
  text-shadow:0 0 8px rgba(255,255,255,.18);
}
@media(max-width:900px){.handwritten-note{display:none}}


/* --- Earth parallax / rotation layer --- */
.parallax-scene{position:relative; overflow:hidden; isolation:isolate;}
.parallax-scene .hero-bg{will-change:transform; transition:transform .12s linear;}
.planet-orb{
  transform-style:preserve-3d;
  position:absolute;
  top:1.8%;
  left:50%;
  width:min(55vw, 850px);
  aspect-ratio:1/1;
  transform:translateX(-50%);
  border-radius:50%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:.98;
  will-change:transform;
  filter:drop-shadow(0 18px 44px rgba(48,120,255,.18));
}
.planet-orb::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hero-bg-url);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 0%;
  transform:scale(1.18);
  animation:earthDrift 38s linear infinite;
}
.planet-orb::after{
  backface-visibility:hidden;
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 33% 34%, rgba(255,255,255,.22), rgba(255,255,255,0) 22%),
    radial-gradient(circle at 50% 42%, rgba(57,136,255,.12), rgba(0,0,0,0) 58%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 59%, rgba(118,187,255,.48) 78%, rgba(255,255,255,.18) 84%, rgba(0,0,0,0) 100%);
  mix-blend-mode:screen;
}
@keyframes earthDrift{
  0%{transform:scale(1.18) rotate(0deg) translateX(-1.2%);}
  50%{transform:scale(1.20) rotate(1.6deg) translateX(1.4%);}
  100%{transform:scale(1.18) rotate(0deg) translateX(-1.2%);}
}
@media (max-width:1200px){
  .planet-orb{
  transform-style:preserve-3d;width:min(66vw, 760px); top:3%;}
}
@media (max-width:900px){
  .planet-orb{
  transform-style:preserve-3d;width:min(72vw, 640px); top:5%; opacity:.92;}
}


/* --- hero fit tuning --- */
body.hero-fit-tune {}
.hero,
.parallax-scene.hero,
.parallax-scene{
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}
.hero-inner,
.hero-content{
  transform-origin: top center;
}
@media (min-width: 1100px){
  .hero-content{
    transform: scale(.91);
  }
}
@media (max-width: 1099px){
  .hero-content{
    transform: scale(.95);
  }
}
.hero .main-title, .hero .title, .hero h1{
  margin-bottom: 12px !important;
}
.hero .subtitle, .hero .description, .hero p{
  margin-bottom: 10px !important;
}
.hero .cta, .hero .hero-actions, .hero .btn-wrap{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.hero .scroll-indicator, .hero .scroll-down{
  bottom: 20px !important;
}
.cards-section, .projects-carousel-wrap, .carousel-section{
  margin-top: 8px !important;
}
.top-script-signature{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: calc(100% + 10px);
  z-index: 6;
  color: rgba(255,255,255,.92);
  font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
  font-size: 28px;
  letter-spacing: .5px;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(120,180,255,.35);
  pointer-events:none;
}
@media (max-width:900px){
  .top-script-signature{font-size:20px; bottom: calc(100% + 6px);}
}

/* bottom meta strip with icons/arrows */
.bottom-meta-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 0 8px 2px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bottom-meta-strip .meta-group{
  display:flex;
  align-items:center;
  gap: 28px;
  flex-wrap: wrap;
}
.bottom-meta-strip .meta-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  opacity: .95;
}
.bottom-meta-strip .meta-item .icon{
  width: 16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
  opacity: .9; font-size: 14px;
}
.bottom-meta-strip .brand-end{
  display:flex; align-items:center; gap:12px; white-space:nowrap;
}
.bottom-meta-strip .brand-end .line{
  width: 60px; height: 1px; background: rgba(255,255,255,.25);
}
.bottom-meta-strip .brand-end .brand-text{
  display:flex; flex-direction:column; gap: 2px; text-align:right;
}
.bottom-meta-strip .brand-end .brand-text small{
  font-size: 10px; letter-spacing: .18em; opacity:.75;
}
.carousel-nav-clones{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  z-index: 5;
}
.carousel-nav-clones .nav-btn{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(8,14,28,.36);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 18px rgba(80,150,255,.12);
  backdrop-filter: blur(6px);
}


.card-caption{
  position:absolute;
  left:18px;
  right:54px;
  bottom:18px;
  z-index:3;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.42);
}
.card-caption .t1{
  display:block;
  font-weight:700;
  font-size:clamp(22px, 2vw, 28px);
  line-height:1.02;
  letter-spacing:.02em;
  text-transform: uppercase;
}
.card-caption .t2{
  display:block;
  margin-top:8px;
  font-size:clamp(12px, .95vw, 14px);
  line-height:1.25;
  letter-spacing:.06em;
  text-transform: uppercase;
  opacity:.92;
}


/* Earth: auto-rotate while idle, pause and react while mouse moves */
.planet-orb::before{
  animation:earthAutoSpin 26s linear infinite !important;
  will-change:background-position, transform;
}
.planet-orb.mouse-active::before{
  animation-play-state:paused !important;
}
@keyframes earthAutoSpin{
  0%{
    background-position:38% 0%;
    transform:scale(1.18) rotate(0deg);
  }
  50%{
    background-position:62% 0%;
    transform:scale(1.20) rotate(.4deg);
  }
  100%{
    background-position:38% 0%;
    transform:scale(1.18) rotate(0deg);
  }
}


/* FINAL COMPACT LAYOUT — preserves ALL header/hero elements */
.hero.parallax-scene{
  height:100vh !important;
  min-height:620px !important;
  max-height:100vh !important;
  overflow:hidden !important;
}
.topbar{
  height:58px !important;
}
.center{
  min-height:300px !important;
  padding:4px 20px 4px !important;
}
.main-logo{
  max-height:82px !important;
  width:min(520px,52vw) !important;
}
.world-title{
  margin-top:3px !important;
  font-size:clamp(16px,1.65vw,25px) !important;
}
.subtitle{
  margin-top:7px !important;
  font-size:13px !important;
  line-height:1.25 !important;
}
.cta{
  margin-top:10px !important;
  padding:10px 30px !important;
}
.down{
  margin-top:5px !important;
  font-size:20px !important;
}
.discover{
  margin-top:1px !important;
}
.side-note{
  top:88px !important;
  line-height:1.75 !important;
}
.projects{
  padding:4px 0 4px !important;
  margin-top:0 !important;
}
.card{
  width:330px !important;
  height:158px !important;
}
.bottom-meta{
  margin:0 auto !important;
  padding:4px 0 4px !important;
  min-height:38px !important;
  font-size:8px !important;
}
.meta-center{
  gap:20px !important;
}
.meta-right{
  gap:1px !important;
}
.meta-right strong{
  font-size:12px !important;
}
.meta-right small{
  font-size:7px !important;
}
/* handwritten phrase above the carousel */
.handwritten-note{
  bottom:205px !important;
  right:5.5vw !important;
  font-size:17px !important;
  z-index:10 !important;
}
.card-inner{
  position:relative !important;
}
.card-label{
  position:absolute;
  left:14px;
  right:54px;
  bottom:10px;
  z-index:7;
  pointer-events:none;
}
.card-label .card-name{
  display:block;
  color:#fff;
  font-family:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-shadow:0 2px 8px #000;
}
.card-label .card-desc{
  display:block;
  margin-top:5px;
  color:#c4d3df;
  font-family:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  font-size:8px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-shadow:0 2px 7px #000;
}
.card-inner:after{
  background:linear-gradient(180deg,transparent 44%,rgba(0,5,16,.90) 100%) !important;
}
.card-arrow{
  right:11px !important;
  bottom:11px !important;
  z-index:8 !important;
}
@media(max-height:720px) and (min-width:901px){
  .topbar{height:52px !important;}
  .center{min-height:265px !important;}
  .main-logo{max-height:68px !important;}
  .card{height:140px !important;width:300px !important;}
  .handwritten-note{bottom:182px !important;font-size:15px !important;}
  .bottom-meta{min-height:34px !important;}
}


/* === FINAL POSITION FIX: carousel near bottom, 1cm visual gap === */
html, body{
  height:100%;
  margin:0;
  overflow:hidden;
}

.hero.parallax-scene{
  position:relative !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  overflow:hidden !important;
  display:block !important;
}

/* keep header compact at the top */
.topbar{
  height:56px !important;
  min-height:56px !important;
  position:relative !important;
  z-index:20 !important;
}

/* compact hero copy while preserving everything */
.center{
  position:relative !important;
  z-index:10 !important;
  min-height:0 !important;
  height:auto !important;
  padding:4px 20px 0 !important;
  margin:0 auto !important;
}

.center .main-logo{
  max-height:76px !important;
  width:min(500px,50vw) !important;
}
.center .world-title{
  margin-top:2px !important;
  font-size:clamp(15px,1.45vw,23px) !important;
}
.center .subtitle{
  margin-top:7px !important;
  margin-bottom:0 !important;
  font-size:13px !important;
  line-height:1.25 !important;
}
.center .cta{
  margin-top:10px !important;
  padding:9px 28px !important;
}
.center .down{
  margin-top:4px !important;
  font-size:18px !important;
}
.center .discover{
  margin-top:0 !important;
}

/* CAROUSEL: pinned near bottom with ~1cm gap */
.projects{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:38px !important; /* ~1cm visual gap on standard displays */
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  z-index:15 !important;
  overflow:hidden !important;
}

.track{
  gap:14px !important;
}

.card{
  width:330px !important;
  height:150px !important;
}

/* handwritten phrase just above carousel */
.handwritten-note{
  position:absolute !important;
  right:5.2vw !important;
  bottom:198px !important;
  z-index:16 !important;
  font-size:16px !important;
  line-height:1.06 !important;
}

/* bottom meta exactly under carousel, still on same screen */
.bottom-meta{
  position:absolute !important;
  left:3vw !important;
  right:3vw !important;
  bottom:6px !important;
  width:auto !important;
  min-height:28px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:17 !important;
  font-size:8px !important;
}

.meta-center{
  gap:18px !important;
}
.meta-right{
  gap:0 !important;
}
.meta-right strong{
  font-size:11px !important;
}
.meta-right small{
  font-size:7px !important;
}

/* side notes stay visible */
.side-note{
  top:88px !important;
  line-height:1.7 !important;
}

/* make sure labels remain visible on cards */
.card-label{
  bottom:9px !important;
}
.card-label .card-name{
  font-size:17px !important;
}
.card-label .card-desc{
  font-size:7.5px !important;
  margin-top:4px !important;
}

/* low-height screens: compress further while keeping every element */
@media (max-height:760px) and (min-width:901px){
  .topbar{
    height:50px !important;
    min-height:50px !important;
  }
  .center .main-logo{
    max-height:62px !important;
  }
  .center .world-title{
    font-size:19px !important;
  }
  .center .subtitle{
    margin-top:5px !important;
    font-size:12px !important;
  }
  .center .cta{
    margin-top:7px !important;
    padding:7px 24px !important;
  }
  .center .down{
    margin-top:2px !important;
    font-size:16px !important;
  }
  .card{
    width:300px !important;
    height:128px !important;
  }
  .projects{
    bottom:34px !important;
  }
  .handwritten-note{
    bottom:166px !important;
    font-size:14px !important;
  }
  .bottom-meta{
    bottom:4px !important;
    min-height:24px !important;
    font-size:7px !important;
  }
  .side-note{
    top:78px !important;
  }
}

/* mobile/tablet can scroll vertically normally */
@media (max-width:900px){
  html, body{
    height:auto;
    overflow:auto;
  }
  .hero.parallax-scene{
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .projects,
  .bottom-meta,
  .handwritten-note{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
  }
  .projects{
    margin-top:18px !important;
  }
  .handwritten-note{
    text-align:right;
    margin:8px 6vw 8px auto;
    width:max-content;
  }
  .bottom-meta{
    margin:10px auto 0 !important;
    width:94vw !important;
    padding-bottom:12px !important;
  }
}


/* === FIX central block back into Earth + working Earth parallax === */
.hero.parallax-scene{
  position:relative !important;
  perspective:1200px;
}

/* actual Earth layer */
.planet-orb{
  position:absolute;
  left:50%;
  top:2.2%;
  width:min(56vw, 860px);
  aspect-ratio:1/1;
  transform:translateX(-50%);
  transform-style:preserve-3d;
  border-radius:50%;
  overflow:hidden;
  z-index:4;
  pointer-events:none;
  filter:drop-shadow(0 18px 38px rgba(73,130,255,.22));
}
.planet-orb::before{
  content:"";
  position:absolute;
  inset:-2%;
  background-image:var(--hero-bg-url);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 0%;
  transform:scale(1.18);
  animation:earthIdleSpin 24s linear infinite;
  will-change:background-position,transform;
}
.planet-orb.mouse-active::before{
  animation-play-state:paused;
}
.planet-orb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.24), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 58%, rgba(130,190,255,.50) 77%, rgba(255,255,255,.17) 83%, rgba(0,0,0,0) 100%);
  mix-blend-mode:screen;
}
@keyframes earthIdleSpin{
  0%{background-position:38% 0%; transform:scale(1.18) rotate(0deg)}
  50%{background-position:62% 0%; transform:scale(1.20) rotate(.45deg)}
  100%{background-position:38% 0%; transform:scale(1.18) rotate(0deg)}
}

/* central content back into the Earth */
.center{
  position:absolute !important;
  left:50% !important;
  top:19.5% !important;
  transform:translateX(-50%) !important;
  width:min(900px, 92vw) !important;
  z-index:10 !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 20px !important;
}
.center .main-logo{
  max-height:86px !important;
}
.center .world-title{
  margin-top:6px !important;
}
.center .subtitle{
  margin-top:10px !important;
}
.center .cta{
  margin-top:14px !important;
}
.center .down{
  margin-top:7px !important;
}

/* keep carousel lower and note above it */
.projects{ bottom:38px !important; z-index:15 !important; }
.handwritten-note{ bottom:196px !important; z-index:16 !important; }

@media (max-height:760px) and (min-width:901px){
  .planet-orb{ width:min(52vw,760px); top:3%; }
  .center{ top:17.5% !important; }
  .center .main-logo{ max-height:72px !important; }
  .handwritten-note{ bottom:166px !important; }
}
@media (max-width:900px){
  .planet-orb{ width:min(84vw,640px); top:7%; }
  .center{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    margin:0 auto !important;
    padding-top:120px !important;
  }
}


/* === requested tweak: restore card height + raise handwritten note ~1cm === */
.card{
  height:176px !important; /* back to earlier full height */
}
.handwritten-note{
  bottom:234px !important; /* roughly 1 cm higher above the carousel */
}
@media (max-height:760px) and (min-width:901px){
  .card{
    height:150px !important;
  }
  .handwritten-note{
    bottom:198px !important;
  }
}


/* === requested rework: remove sphere, enlarge cards, lower center stack === */

/* 1) remove the non-working sphere completely */
.planet-orb{
  display:none !important;
}

/* 2) cards: about +15% taller */
.card{
  width:330px !important;
  height:203px !important;
}
@media (max-height:760px) and (min-width:901px){
  .card{
    width:315px !important;
    height:182px !important;
  }
}

/* keep carousel low, but allow taller cards to rise upward */
.projects{
  bottom:38px !important;
}

/* handwritten note stays above carousel */
.handwritten-note{
  bottom:262px !important;
}
@media (max-height:760px) and (min-width:901px){
  .handwritten-note{
    bottom:236px !important;
  }
}

/* 3) central stack goes down, above cards:
   discover -> button -> subtitle -> title -> logo  */
.center{
  position:absolute !important;
  left:50% !important;
  top:auto !important;
  bottom:286px !important;   /* ~1 cm above the cards */
  transform:translateX(-50%) !important;
  width:min(900px, 92vw) !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 20px !important;
  z-index:12 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  text-align:center !important;
}

.center .main-logo{
  max-height:88px !important;
  width:min(520px,52vw) !important;
  margin-bottom:10px !important; /* slightly higher from title */
}
.center .world-title{
  margin-top:0 !important;
  margin-bottom:8px !important;
  font-size:clamp(16px,1.55vw,24px) !important;
}
.center .subtitle{
  margin-top:0 !important;
  margin-bottom:10px !important;
  font-size:13px !important;
  line-height:1.28 !important;
}
.center .cta{
  margin-top:0 !important;
  margin-bottom:4px !important;
  padding:10px 30px !important;
}
.center .down{
  margin-top:0 !important;
  margin-bottom:3px !important;
  font-size:18px !important;
}
.center .discover{
  margin-top:0 !important;
  margin-bottom:0 !important;
  letter-spacing:.28em !important;
}

/* low-height desktop screens */
@media (max-height:760px) and (min-width:901px){
  .center{
    bottom:256px !important;
  }
  .center .main-logo{
    max-height:74px !important;
    margin-bottom:7px !important;
  }
  .center .world-title{
    margin-bottom:6px !important;
    font-size:20px !important;
  }
  .center .subtitle{
    margin-bottom:8px !important;
    font-size:12px !important;
  }
  .center .cta{
    padding:8px 26px !important;
    margin-bottom:3px !important;
  }
  .center .down{
    font-size:16px !important;
    margin-bottom:2px !important;
  }
}

/* mobile fallback */
@media (max-width:900px){
  .planet-orb{display:none !important;}
  .center{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    margin:0 auto !important;
    padding:90px 20px 0 !important;
  }
  .projects{
    position:relative !important;
    bottom:auto !important;
    margin-top:16px !important;
  }
  .handwritten-note{
    position:relative !important;
    bottom:auto !important;
    margin:10px 6vw 8px auto !important;
  }
}


/* === final requested tweak: +20% card text, handwritten note higher/right === */

/* Card text +20% */
.card-label .card-name{
  font-size:20.4px !important;   /* from 17px approx +20% */
}
.card-label .card-desc{
  font-size:9px !important;      /* from 7.5px approx +20% */
  line-height:1.18 !important;
}

/* Handwritten Together: +3 cm up, +5 mm right */
.handwritten-note{
  bottom:375px !important; /* was 262px; raised by ~113px */
  right:calc(5.2vw - 19px) !important; /* move visually to the right by ~5mm */
}

@media (max-height:760px) and (min-width:901px){
  .card-label .card-name{
    font-size:19.2px !important;
  }
  .card-label .card-desc{
    font-size:8.4px !important;
  }
  .handwritten-note{
    bottom:349px !important;
    right:calc(5.2vw - 19px) !important;
  }
}


/* === X-WORLD FINAL AGREED UI PATCH === */
.projects{max-width:100vw !important;overflow:hidden !important;}
.track{animation-play-state:running !important;will-change:transform;}
.projects:hover .track{animation-play-state:running !important;}
.card{transition:transform .24s ease,filter .24s ease,box-shadow .24s ease;transform-origin:center bottom;}
.card:hover{transform:translateY(-8px) scale(1.035);filter:brightness(1.06);box-shadow:0 12px 28px rgba(55,160,255,.24);z-index:30;}

.center .main-logo{margin-bottom:16px !important;}
.center .world-title{margin-bottom:13px !important;}
.center .subtitle{margin-bottom:15px !important;font-size:14px !important;letter-spacing:.025em;text-transform:uppercase;}
.center .cta{margin-bottom:8px !important;}
.center .discover{margin-top:2px !important;}

.cta,.login,.side-note,.handwritten-note,.bottom-meta{transition:transform .25s ease,filter .25s ease,text-shadow .25s ease,box-shadow .25s ease;}
.cta:hover,.login:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(77,183,255,.58);}
.left-side:hover{transform:translateX(4px);text-shadow:0 0 12px rgba(160,220,255,.38);}
.right-side:hover{transform:translateX(-4px);text-shadow:0 0 12px rgba(160,220,255,.38);}
.handwritten-note:hover{filter:brightness(1.25);text-shadow:0 0 14px rgba(255,255,255,.38);}

.menu a{position:relative;padding-bottom:5px;transition:color .2s ease,text-shadow .2s ease;}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:#8bdfff;box-shadow:0 0 8px rgba(123,220,255,.65);transition:right .22s ease;}
.menu a:hover{color:#fff;text-shadow:0 0 10px rgba(130,210,255,.35);}
.menu a:hover::after{right:0;}

.lang-switcher{position:relative;z-index:60;}
.lang-current{min-width:168px;height:38px;padding:0 14px;border:1px solid rgba(111,215,255,.58);border-radius:10px;background:rgba(3,15,31,.58);color:#e8f5ff;font:600 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.03em;display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;cursor:pointer;backdrop-filter:blur(8px);}
.lang-current:hover,.lang-switcher.open .lang-current{border-color:#8be4ff;background:rgba(5,24,46,.82);box-shadow:0 0 16px rgba(80,180,255,.22);}
.lang-menu{position:absolute;top:46px;right:0;min-width:205px;padding:7px;border:1px solid rgba(120,205,255,.26);border-radius:12px;background:rgba(2,10,24,.96);box-shadow:0 16px 36px rgba(0,0,0,.38);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease;}
.lang-switcher.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu button{width:100%;border:0;background:transparent;color:#dcecf7;padding:9px 10px;border-radius:7px;text-align:left;font-size:12px;cursor:pointer;}
.lang-menu button:hover{background:rgba(90,180,255,.12);color:#fff;}
html[dir="rtl"] .lang-menu button{text-align:right;}

.planet-orb{display:none !important;}
.earth-life{position:absolute;inset:58px 0 250px;z-index:3;pointer-events:none;overflow:hidden;opacity:.95;}
.cloud{position:absolute;width:120px;height:32px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.17),rgba(255,255,255,.055) 55%,transparent 74%);filter:blur(5px);opacity:.35;}
.cloud-a{left:17%;top:28%;animation:cloudDriftA 34s linear infinite;}
.cloud-b{left:62%;top:18%;transform:scale(.75);animation:cloudDriftB 42s linear infinite;}
.cloud-c{left:42%;top:51%;transform:scale(.58);animation:cloudDriftA 49s linear infinite reverse;}
@keyframes cloudDriftA{0%{translate:-50px 0}50%{translate:42px 7px}100%{translate:-50px 0}}
@keyframes cloudDriftB{0%{translate:55px 0}50%{translate:-48px 4px}100%{translate:55px 0}}

.city-light{position:absolute;width:4px;height:4px;border-radius:50%;background:#d9f5ff;box-shadow:0 0 5px #8fe8ff,0 0 12px rgba(80,170,255,.75);animation:cityBlink 5.6s ease-in-out infinite;}
.light-1{left:42%;top:43%;animation-delay:.2s}.light-2{left:47%;top:48%;animation-delay:1.4s}.light-3{left:52%;top:39%;animation-delay:2.2s}.light-4{left:58%;top:51%;animation-delay:3.5s}.light-5{left:37%;top:55%;animation-delay:4.1s}.light-6{left:63%;top:35%;animation-delay:5s}
@keyframes cityBlink{0%,14%,48%,100%{opacity:.15;transform:scale(.7)}20%,38%{opacity:1;transform:scale(1.5)}}

.travel-line{position:absolute;height:1px;width:105px;background:linear-gradient(90deg,transparent,#a7ecff 40%,#fff 55%,transparent);filter:drop-shadow(0 0 4px #77d8ff);opacity:0;animation:lightRun 11s linear infinite;}
.line-1{left:43%;top:47%;transform:rotate(-18deg);animation-delay:1s}.line-2{left:51%;top:55%;transform:rotate(12deg);animation-delay:6s}
@keyframes lightRun{0%,72%,100%{opacity:0;clip-path:inset(0 100% 0 0)}76%{opacity:.9}92%{opacity:.8;clip-path:inset(0 0 0 0)}96%{opacity:0}}

.plane-flight{position:absolute;width:180px;height:28px;opacity:0;animation:planePass 28s linear infinite;}
.plane-1{left:9%;top:39%;animation-delay:2s}.plane-2{left:64%;top:31%;animation-delay:12s;transform:scale(.72)}.plane-3{left:29%;top:60%;animation-delay:21s;transform:scale(.58)}
.plane{position:absolute;right:0;top:0;font-size:14px;color:rgba(235,250,255,.8);text-shadow:0 0 7px rgba(100,200,255,.65)}
.contrail{position:absolute;right:13px;top:9px;width:150px;height:1px;background:linear-gradient(90deg,transparent,rgba(230,247,255,.36))}
@keyframes planePass{0%,3%{opacity:0;translate:-110px 20px}7%{opacity:.65}24%{opacity:.65;translate:180px -38px}28%,100%{opacity:0;translate:240px -55px}}


/* === PATCH: cloudless base + 20s hold / 10s crossfade cloud cycle === */
.hero.parallax-scene{
  background:
    linear-gradient(180deg,rgba(0,7,18,.40),rgba(0,7,18,.46) 48%,rgba(0,7,18,.84)),
    url('../assets/background_no_clouds.png') center/cover no-repeat !important;
}

.cloud-earth-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,7,18,.40),rgba(0,7,18,.46) 48%,rgba(0,7,18,.84)),
    url('../assets/background.png') center/cover no-repeat;
  opacity:0;
  will-change:opacity;
  animation:cloudPictureCycle 60s linear infinite;
}

/* 0–20s: clear Earth
   20–30s: cloudy picture fades in
   30–50s: cloudy picture stays
   50–60s: cloudy picture fades out */
@keyframes cloudPictureCycle{
  0%,33.333%{opacity:0}
  50%,83.333%{opacity:1}
  100%{opacity:0}
}

/* Flights and travel lines always stay above the changing Earth layer. */
.earth-life{
  z-index:3 !important;
}
.city-light,.cloud{
  display:none !important;
}

/* Card fix: no dark bars from contain/background and enough headroom for hover lift. */
.card-inner{
  background:transparent !important;
}
.card img{
  object-fit:cover !important;
  object-position:center !important;
}
.track{
  padding-top:12px !important;
  padding-bottom:2px !important;
}
.projects{
  padding-top:0 !important;
  padding-bottom:0 !important;
}


img.logo-load-failed{display:none!important}.logo-fallback-visible{display:block!important}

/* Keep the right-hand note below the moon; preserve the existing mobile visibility. */
.side-note.right-side{top:auto !important;bottom:425px !important;}
@media(max-height:760px) and (min-width:901px){.side-note.right-side{bottom:396px !important;}}

/* Responsive layout: document flow on tablets, phones and short windows. */
@media (max-width:1100px), (max-height:650px){
  html,body{height:auto!important;min-height:100%;overflow-x:clip!important;overflow-y:auto!important;}
  .hero.parallax-scene{height:auto!important;min-height:100svh!important;max-height:none!important;overflow:visible!important;}
  .topbar{width:calc(100% - 40px)!important;height:auto!important;min-height:0!important;padding:18px 0!important;grid-template-columns:minmax(0,1fr) auto!important;gap:14px 20px!important;}
  .brand-logo{width:200px!important;max-width:100%!important;height:auto!important;}
  .actions{gap:12px!important;min-width:0;}
  .menu{grid-column:1/-1!important;order:3;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:4px 20px!important;min-width:0;}
  .menu a{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:12px!important;padding:8px 2px!important;}
  .login{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px!important;white-space:nowrap;}
  .lang-current{height:44px;font-size:12px;}
  .lang-menu{max-height:min(440px,60svh);overflow-y:auto;overscroll-behavior:contain;}
  .lang-menu button{min-height:44px;font-size:14px;}
  .center{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;min-height:360px!important;height:auto!important;margin:0!important;padding:60px 24px 36px!important;justify-content:center!important;}
  .center .main-logo{width:min(520px,80vw)!important;max-height:100px!important;height:auto!important;}
  .center .world-title{font-size:clamp(18px,2.5vw,24px)!important;letter-spacing:.3em!important;padding-left:.3em!important;}
  .center .subtitle{max-width:620px;font-size:14px!important;line-height:1.5!important;}
  .center .cta{min-height:48px;display:flex;align-items:center;justify-content:center;padding:12px 24px!important;font-size:13px!important;}
  .center .discover{font-size:10px!important;line-height:1.6;letter-spacing:.16em!important;}
  .side-note{display:none!important;}
  .projects{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;margin:0!important;padding:12px 0!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scroll-padding-inline:20px;overscroll-behavior-x:contain;}
  .track{animation:none!important;transform:none!important;width:max-content!important;gap:16px!important;padding:12px 20px!important;will-change:auto;}
  .card{width:300px!important;height:180px!important;scroll-snap-align:start;}
  .card:nth-child(n+25){display:none;}
  .card-label .card-name{font-size:20px!important;}
  .card-label .card-desc{font-size:10px!important;line-height:1.3!important;}
  .bottom-meta{position:relative!important;inset:auto!important;width:calc(100% - 40px)!important;min-height:0!important;margin:0 auto!important;padding:24px 0!important;display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:16px!important;font-size:10px!important;line-height:1.6;letter-spacing:.08em!important;}
  .meta-center{justify-content:flex-start!important;gap:12px!important;flex-wrap:wrap;}
  .meta-right{text-align:left!important;gap:4px!important;}
  .meta-right strong{font-size:13px!important;}.meta-right small{font-size:9px!important;}
  .handwritten-note{display:none!important;}
}
@media(max-width:560px){
  .topbar{width:calc(100% - 32px)!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
  .topbar>div:first-child{justify-self:center;}
  .brand-logo{width:190px!important;}
  .actions{width:100%;justify-content:space-between!important;gap:10px!important;}
  .lang-switcher{flex:1;min-width:0;}.lang-current{width:100%;min-width:0;}
  .lang-menu{left:0;right:auto;min-width:100%;width:min(240px,calc(100vw - 32px));}
  .menu{grid-column:1!important;gap:0 12px!important;}
  .menu a{font-size:11px!important;}
  .center{min-height:330px!important;padding:40px 20px 32px!important;}
  .center .subtitle{font-size:13px!important;}.center .subtitle br{display:none;}
  .center .world-title{font-size:18px!important;letter-spacing:.2em!important;padding-left:.2em!important;}
  .card{width:min(300px,calc(100vw - 48px))!important;height:180px!important;}
  .bottom-meta{width:calc(100% - 32px)!important;flex-direction:column;}
}

@media(max-width:1100px),(max-height:650px){.projects{scrollbar-width:thin;scrollbar-color:#426780 #071528;}.projects:focus-visible{outline:2px solid #8bdfff;outline-offset:-2px;}}