/* =====================================================================
   Sepiascribe — placeholder (Murmur-huisstijl)
   Bron: 9.murmur\1. Assets\Murmur-Huisstijl-Basis.md
   Zee-met-zonlicht · Murmur-font · koper-accent
   ===================================================================== */

/* ---- Webfonts (woff2) ---- */
@font-face { font-family:"Murmur"; font-weight:300; font-style:normal; font-display:swap; src:url("assets/fonts/Murmur-Light.woff2")    format("woff2"); }
@font-face { font-family:"Murmur"; font-weight:400; font-style:normal; font-display:swap; src:url("assets/fonts/Murmur-Regular.woff2")  format("woff2"); }
@font-face { font-family:"Murmur"; font-weight:500; font-style:normal; font-display:swap; src:url("assets/fonts/Murmur-Medium.woff2")   format("woff2"); }
@font-face { font-family:"Murmur"; font-weight:600; font-style:normal; font-display:swap; src:url("assets/fonts/Murmur-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Murmur"; font-weight:700; font-style:normal; font-display:swap; src:url("assets/fonts/Murmur-Bold.woff2")     format("woff2"); }

/* ---- Huisstijl-tokens ---- */
:root{
  --sea-top:#143048; --sea-bot:#081826;
  --glow:rgba(120,166,198,.55);
  --card:#1f4663; --card-border:#3a678f;
  --copper:#d29a5f; --copper-deep:#b3814f;
  --fg:#e9f1f5; --soft:#cdd6e6; --mute:#8ea7bd; --label:#acc0d2;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth}
body{
  font-family:"Murmur",system-ui,sans-serif;
  font-weight:400; color:var(--fg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(130% 100% at 84% -8%, var(--glow) 0%, rgba(120,166,198,0) 58%),
    linear-gradient(180deg, var(--sea-top) 0%, var(--sea-bot) 100%);
  background-attachment:fixed;
  min-height:100vh;
  display:flex; flex-direction:column;
}
/* zachte korrel voor diepte */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* groot, vaag visje-watermerk rechtsonder */
body::after{
  content:""; position:fixed; right:-4vw; bottom:-6vh; z-index:-1;
  width:min(52vw,640px); aspect-ratio:2/1; pointer-events:none; opacity:.05;
  background:url("assets/visje-enkel-wit.png") no-repeat center/contain;
  transform:rotate(-6deg);
}

/* ================= HERO / PLACEHOLDER ================= */
main{
  flex:1 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:64px 28px 40px;
}
.stage{width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center}

.kicker{
  font-weight:600; font-size:.76rem; letter-spacing:.30em; text-transform:uppercase;
  color:var(--copper); display:inline-flex; align-items:center; gap:.7em; margin-bottom:30px;
}
.kicker::before,.kicker::after{content:"";width:24px;height:2px;background:var(--copper);opacity:.8}

.logo{width:clamp(96px,16vw,140px);height:auto;display:block;margin-bottom:22px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));}

.wordmark{
  font-weight:600; letter-spacing:.005em; line-height:1;
  font-size:clamp(2.6rem,7vw,4.4rem); margin-bottom:20px;
}

.lead{
  font-weight:400; color:var(--soft);
  font-size:clamp(1.02rem,2vw,1.2rem); width:100%; max-width:560px; margin:0 auto;
}
.lead .accent{color:var(--copper);font-weight:500}

/* ================= POWERED BY ================= */
.poweredby{
  flex:none;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:34px 28px 40px;
  border-top:1px solid rgba(58,103,143,.28);
}
.poweredby .pb-link{
  display:inline-flex; align-items:center; gap:13px;
  color:var(--mute); font-size:.95rem; font-weight:500;
  transition:color .22s var(--ease), transform .22s var(--ease);
}
.poweredby .pb-link img{height:26px;width:auto;display:block;opacity:.85;transition:opacity .22s}
.poweredby .pb-link b{font-weight:600;color:var(--soft);transition:color .22s}
.poweredby .pb-link:hover{transform:translateY(-2px)}
.poweredby .pb-link:hover img{opacity:1}
.poweredby .pb-link:hover b{color:var(--copper)}
.poweredby .pb-note{color:var(--mute);opacity:.6;font-size:.8rem;letter-spacing:.02em}

/* ---- Reveal ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:fadeUp .8s var(--ease) forwards}
.d1{animation-delay:.10s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.52s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;animation:none!important}}