/* Fonts: Space Grotesk + Nunito */
:root{
  --bg:#0b1526;
  --ink:#e8edf7;
  --muted:#9fb2d1;
  --brand:#ff7a00;
  --brand-2:#4bd3ff;
  --glass:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height:1.5;
}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; z-index:50; mix-blend:normal;
  background:linear-gradient(180deg, rgba(11,21,38,.75), rgba(11,21,38,0));
  backdrop-filter:saturate(120%) blur(6px);
}
.logo{font-family:'Space Grotesk', sans-serif; font-weight:800; letter-spacing:.06em}
.nav-small .chip{
  margin-left:8px; text-decoration:none; color:var(--ink);
  border:1px solid rgba(255,255,255,.2);
  padding:6px 10px; border-radius:999px; font-size:13px;
  transition:transform .15s ease, background .2s ease;
  background:var(--glass)
}
.nav-small .chip:hover{transform:translateY(-1px); background:rgba(255,255,255,.12)}

/* Sections */
.section{min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden}
.container{width:min(1080px, 92vw); margin:0 auto}

/* Hero */
.hero{isolation:isolate}
.hero-bg{
  position:absolute; inset:0;
  background-image:var(--bg);
  background-image:var(--bg), var(--bg);
  background: center/cover no-repeat;
}
.hero-bg::before{
  content:''; position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;
  background-image: var(--bg);
}
.hero-bg{background-image: var(--bg), url('../img/Platopus1.png')}
.hero-overlay{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 40%, rgba(11,21,38,0) 0%, rgba(11,21,38,.22) 48%, rgba(11,21,38,.78) 100%);
}
.hero-inner{position:relative; z-index:2; padding:8vh 0; text-align:center; width:100%}
.title{font-family:'Space Grotesk',sans-serif; font-size:clamp(34px, 5.3vw, 68px); margin:0 0 10px}
.title span{color:var(--brand)}
.glow{text-shadow:0 8px 32px rgba(75,211,255,.35), 0 0 0 transparent}
.subtitle{color:var(--muted); max-width:780px; margin:0 auto 18px}
.btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

.btn{display:inline-block; text-decoration:none; color:#07121f; background:linear-gradient(180deg, #fff 0, #e9f0ff 100%);
  padding:10px 16px; border-radius:999px; font-weight:800; letter-spacing:.02em}
.btn.small{font-size:14px}
.btn.tiny{font-size:13px}
.btn.ghost{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.25); color:var(--ink)}
.btn.more{background:linear-gradient(180deg, #ffb36a 0, #ff7a00 100%); color:#1b0c00}

.scroll-indicator{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  font-size:12px; color:var(--muted); letter-spacing:.3em; text-transform:uppercase
}

/* About */
.about .about-grid{display:grid; gap:32px; grid-template-columns:1.1fr .9fr; align-items:center}
.about h2{font-family:'Space Grotesk',sans-serif; font-size:clamp(28px,3.4vw,42px); margin:0 0 12px}
.about p{color:#c7d6ef}
.about-art img{width:100%; border-radius:18px; box-shadow:0 10px 40px rgba(0,0,0,.35)}

/* Utility cards */
.center{text-align:center}
.lead{color:#c7d6ef; margin-top:-6px; margin-bottom:22px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12); padding:18px; border-radius:16px}
.card-ico{font-size:28px}
.card h3{margin:8px 0 6px}

/* Gallery */
.grid-images{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-images img{width:100%; border-radius:16px; display:block}

/* Footer */
.footer{padding:26px 0; background:rgba(0,0,0,.3)}
.footer-flex{display:flex; justify-content:space-between; align-items:center}
.footer a{color:#cfe5ff; text-decoration:none}
.mini{color:#9ab0cf; font-size:13px}
.sep{margin:0 8px; opacity:.4}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 980px){
  .about .about-grid{grid-template-columns:1fr; gap:22px}
  .cards{grid-template-columns:1fr; gap:12px}
  .grid-images{grid-template-columns:1fr 1fr}
}

/* Journey two-card layout */
.journey .story-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.story{display:grid; grid-template-columns: 1.1fr 1fr; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden}
/* Journey media: keep full image, no ugly cropping */
.story-media{display:flex; align-items:center; justify-content:center; padding:10px; background:rgba(255,255,255,.04)}
.story{align-items:stretch}

.story-media{margin:0}
.story-media img{display:block; width:100%; height:auto; object-fit:contain}
.story-body{padding:18px 18px 20px}
.story h3{margin:6px 0 8px}
.story .slogan{margin:10px 0 0; font-weight:800; letter-spacing:.02em; color:#ffb36a}
@media (max-width: 980px){
  .journey .story-cards{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}
}

/* Tighter vertical spacing between sections */
.section{min-height:92vh; padding:5vh 0; background:linear-gradient(180deg,#0b1526 0%, #0e1c33 50%, #0b1526 100%);}
.hero.section{min-height:100vh; padding:8vh 0 6vh}

/* More interesting animated global background */
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(75,211,255,.10), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(255,122,0,.10), transparent 60%),
    linear-gradient(180deg,#0b1526 0%, #0e1c33 50%, #0b1526 100%);
  position: relative;
  overflow-x: hidden;
}
body::after{
  content:''; position:fixed; inset:-100px; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.04) 0 1px, transparent 1px) 0 0/12px 12px,
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.02) 0 1px, transparent 1px) 0 0/16px 16px;
  animation: drift 24s linear infinite;
  opacity:.35;
}
@keyframes drift{to{transform:translate3d(-40px,-20px,0)}}


/* Stability for the Story ("about") section: disable reveal shift and add scroll offset */
.about .reveal{opacity:1 !important; transform:none !important; transition:none !important}
.section{scroll-margin-top:76px}
/* Finale section */
.finale .final-wrap{display:flex; justify-content:center}
.final-art{margin:0; position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 12px 46px rgba(0,0,0,.45); max-width:1100px}
.final-art img{display:block; width:100%; height:auto}
.bottom-text{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35);
  color:#fff; padding:8px 14px; border-radius:999px; font-weight:800; letter-spacing:.02em;
  text-transform:lowercase; cursor:pointer; backdrop-filter:saturate(120%) blur(1px)
 font-size:18px; padding:10px 18px; font-weight:900; letter-spacing:.03em; }
.bottom-text:hover{background:rgba(0,0,0,.5)}

/* Bubble animation elements */
.bubble{
  position:fixed; bottom:-20px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 60%, transparent 70%);
  pointer-events:none; z-index:9999; opacity:.9;
  animation: rise 2.6s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
@keyframes rise{ 0%{transform:translateY(8px) scale(.35); opacity:0} 20%{opacity:.95}
  100%{transform:translateY(-110vh) scale(1.5); opacity:0}
}


/* Bigger Journey cards */
@media (min-width: 981px){
  .journey .container{ width:min(1280px, 94vw); }
  .journey .story{ min-height: 460px; }
  .journey .story-body{ font-size:1.06rem; line-height:1.45; }
  .journey .story h3{ font-size:clamp(22px, 2.2vw, 30px); }
}

/* Modest global text bump for readability */
body{font-size:17px}
.journey .story-body{font-size:1.12rem; line-height:1.5}
.journey .story h3{font-size:clamp(24px, 2.4vw, 32px)}

/* Blurred background for Journey section */
.section.journey{
  position: relative;
  overflow: hidden;
}
.section.journey::before{
  content:'';
  position:absolute;
  inset:0;
  background: url('../img/PlatopusMap.png') center/cover no-repeat;
  filter: blur(6px);
  opacity: .20;
  transform: scale(1.05);
  z-index:0;
}
.section.journey > *{
  position: relative;
  z-index:1;
}