/* Generated by AI. Apologies for anyone reading */
/* Base styles shared across mockups */
:root{
  --bg:#0f1115;
  --panel:#161a22;
  --card:#1c2230;
  --text:#e8eefc;
  --muted:#a6b0c3;
  --primary:#7cc4ff;
  --accent:#ffd166;
  --ok:#2dd4bf;
  --danger:#ff6b6b;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top: 64px}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  /* Random-looking paw prints: large SVG tile with scattered paws, layered twice with different size/offset */
  background:
    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22800%22 viewBox=%220 0 800 800%22><g fill=%22%23ffffff%22 fill-opacity=%220.05%22><g transform=%22translate(80 120) rotate(12) scale(3)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(220 60) rotate(-18) scale(2.6)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(360 200) rotate(7) scale(3.2)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(520 140) rotate(25) scale(2.8)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(660 260) rotate(-10) scale(3)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(120 340) rotate(-4) scale(2.9)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(300 420) rotate(18) scale(3.4)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(540 420) rotate(-22) scale(2.7)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(700 520) rotate(9) scale(3.1)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(440 600) rotate(28) scale(2.5)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(220 620) rotate(-15) scale(3.2)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(60 520) rotate(6) scale(2.6)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g></g></svg>') 0 0/800px 800px repeat,
    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22800%22 viewBox=%220 0 800 800%22><g fill=%22%23ffffff%22 fill-opacity=%220.04%22><g transform=%22translate(140 40) rotate(-8) scale(3.1)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(360 120) rotate(16) scale(2.7)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(560 220) rotate(-20) scale(3.3)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(720 120) rotate(5) scale(2.5)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(80 680) rotate(18) scale(2.8)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(300 700) rotate(-14) scale(3.1)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(520 620) rotate(10) scale(2.6)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g></g></svg>') 400px 400px/900px 900px repeat,
    linear-gradient(180deg,#0d1016 0%, #0f1115 100%);
}
.container{max-width:1400px;margin:0 auto;padding:24px}
.flex{display:flex;gap:16px}
.center{align-items:center}
.between{justify-content:space-between}
.site-header{position:sticky;top:0;background:rgba(13,16,22,.8);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #232838;z-index:10}
.brand .logo{font-weight:800;letter-spacing:.5px;margin-right:10px}
.brand .tagline{color:var(--muted)}
.lang-switch .lang-btn{background:rgba(255,255,255,.6);color:#000;border:1px solid rgba(255,255,255,.95);padding:8px 12px;border-radius:10px;cursor:pointer;backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.6);text-shadow:0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.25);transition:background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease}
.lang-switch .lang-btn.is-active{background:rgba(0,0,0,.85);color:#fff;border-color:#000;box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.9)}
.lang-switch .lang-btn:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
.intro h1{margin:.4em 0 .2em;font-size:2rem}
.intro p{color:var(--muted);max-width:72ch}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid #2a3145;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card-media{height:140px;background:#0b0e13;display:grid;place-items:center;color:#25304b;font-size:48px;font-weight:800}
.card-media.magic{background:radial-gradient(120% 120% at 0% 0%, #3a1d6a 0%, #21263b 50%, #0b0e13 100%)}
.card-body{padding:16px}
.card-body h2{margin:8px 0;font-size:1.1rem}
.card-body p{margin:0;color:var(--muted)}
.notes{margin-top:30px}
.notes h3{margin-bottom:8px}
.notes ul{margin:0;padding-left:18px;color:var(--muted)}
.site-footer{border-top:1px solid #c5cbd5;margin-top:40px}
.site-footer p{color:var(--muted)}
.muted{opacity:.8}

/* Mockup shared blocks */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero .visual{background:#0b0e13;border:1px solid #2a3145;border-radius:20px;min-height:300px;display:grid;place-items:center;color:#2c3652;overflow:hidden}
.hero .visual img{width:100%;height:100%;object-fit:cover;display:block}
.hero .content h1{font-size:2.2rem;margin:.2em 0}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.badge{font-size:.9rem;padding:6px 10px;border-radius:999px;border:1px solid #2a3145;background:#121826}
.cta{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.button{background:var(--primary);color:#0b0e13;border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
.button.secondary{background:transparent;color:var(--text);border:1px solid #2a3145}
.section-light h2{margin:0; padding: 1em 0;}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kv .item{background:var(--panel);border:1px solid #2a3145;border-radius:14px;padding:12px}
.list{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.gallery .ph{background:#0b0e13;border:1px dashed #3a4769;border-radius:12px;height:140px;display:grid;place-items:center;color:#3a4769}
/* Real image support for galleries */
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:12px;border:none;display:block}
.video-ph{aspect-ratio:16/9;background:#0b0e13;border:1px dashed #3a4769;border-radius:14px;display:grid;place-items:center;color:#3a4769}
.timeline{border-left:2px solid #2a3145;margin-left:10px;padding-left:16px}
.timeline .event{margin:14px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cardL{background:var(--panel);border:1px solid #2a3145;border-radius:16px;padding:16px}

/* Fairy theme tweaks */
.fairy{
  background: radial-gradient(160% 120% at 20% 0%, #2a1a55 0%, #0f1115 60%), url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22><defs><radialGradient id=%22g%22><stop offset=%220%22 stop-color=%22%23ffffff%22 stop-opacity=%220.2%22/><stop offset=%221%22 stop-color=%22%23000000%22 stop-opacity=%220%22/></radialGradient></defs><circle cx=%2220%22 cy=%2230%22 r=%221%22 fill=%22url(%23g)%22/></svg>') repeat;
}
.fairy .script{font-family:"Marck Script", cursive;font-size:2.4rem;color:#f6f3ff}
.fairy .sparkle{color:#ffd6ff}

/* Sunny theme */
.sunny{
  --bg:#f7fbff;
  --panel:#ffffffee;
  --card:#ffffff;
  --text:#14324a;
  --muted:#4b6b83;
  --primary:#2fb3ff;
  --accent:#ffd36b;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22800%22 viewBox=%220 0 800 800%22><g fill=%22%2314334a%22 fill-opacity=%220.05%22><g transform=%22translate(60 100) rotate(10) scale(3)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(200 40) rotate(-16) scale(2.6)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(340 220) rotate(6) scale(3.2)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(500 120) rotate(22) scale(2.8)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(640 240) rotate(-8) scale(3)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(100 320) rotate(-2) scale(2.9)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(280 420) rotate(16) scale(3.4)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(520 420) rotate(-20) scale(2.7)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(680 540) rotate(7) scale(3.1)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(420 600) rotate(24) scale(2.5)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(200 640) rotate(-12) scale(3.2)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(40 540) rotate(5) scale(2.6)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g></g></svg>') 0 0/800px 800px repeat,
    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22800%22 viewBox=%220 0 800 800%22><g fill=%22%2314334a%22 fill-opacity=%220.04%22><g transform=%22translate(120 20) rotate(-6) scale(3.1)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(340 100) rotate(14) scale(2.7)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(540 200) rotate(-18) scale(3.3)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(700 100) rotate(3) scale(2.5)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(60 660) rotate(16) scale(2.8)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(280 680) rotate(-12) scale(3.1)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g><g transform=%22translate(500 600) rotate(8) scale(2.6)%22><ellipse cx=%220%22 cy=%226%22 rx=%226%22 ry=%225%22/><circle cx=%22-5%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%22-1%22 r=%222.4%22/><circle cx=%225%22 cy=%220%22 r=%222.2%22/><circle cx=%220%22 cy=%223%22 r=%222.1%22/></g></g></svg>') 400px 400px/900px 900px repeat,
    linear-gradient(180deg, #eaf7ff 0%, #fffef6 60%, #fff7e6 100%);
  color:var(--text);
}
.sunny .site-header{background:rgba(255,255,255,.6);border-bottom-color:#e5eef6}
.sunny .card, .sunny .kv .item, .sunny .cardL, .sunny .hero .visual{
  border-color:#e5eef6;
  box-shadow:0 8px 24px rgba(17, 64, 107, 0.08);
  background:var(--card);
}
.sunny .gallery .ph, .sunny .video-ph{border-color:#cfe6ff;color:#8fb3d1;background:#f4fbff}
.sunny .gallery img{border:none}
.sunny .button{background:linear-gradient(90deg,#2fb3ff,#58d2ff);color:white;box-shadow:0 8px 20px rgba(47,179,255,.35);transition:transform .2s ease, box-shadow .2s ease}
.sunny .button:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(47,179,255,.45)}
.sunny .button.secondary{background:transparent;color:var(--text);border-color:#b9d9f4}

/* Sunny decorative elements */
.sunny .sky{position:relative;overflow:hidden;border-radius:20px}
.sunny .sun{position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle at 30% 30%, #fff6cc 0%, #ffd564 40%, #ffb84d 60%, rgba(255,184,77,0) 70%);filter:blur(1px);animation:pulseSun 6s ease-in-out infinite}
.sunny .cloud{position:absolute;top:20px;left:-20%;width:180px;height:60px;background:rgba(255,255,255,.9);border-radius:50px;box-shadow:40px 10px 0 10px rgba(255,255,255,.9), 90px 15px 0 0 rgba(255,255,255,.85);animation:drift 30s linear infinite}
.sunny .cloud.c2{top:80px;animation-duration:40s;opacity:.85}
.sunny .cloud.c3{top:130px;animation-duration:55s;opacity:.75}

@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(140%)} }
@keyframes pulseSun{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Support for images in custom blocks */
.big-photo img, .photo-grid img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:none;display:block}


/* Section reveal */
.reveal{opacity:0;transform:translateY(12px);animation:reveal .8s ease forwards;animation-delay:.1s}
/* New utility for JS-driven reveals */
.will-reveal{opacity:0;transform:translateY(14px)}
.revealed{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
@keyframes reveal{to{opacity:1;transform:none}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sunny .cloud, .sunny .sun{animation:none}
  .button{transition:none}
  .will-reveal{opacity:1;transform:none}
}

/* Responsive */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr;}
}

/* Override: refined paw pattern using external SVG tiles (clean pad, 4 toes) */
body{
  background:
    url('../img/pawtile-dark.svg') 0 0 / 560px 560px repeat,
    linear-gradient(180deg,#0d1016 0%, #0f1115 100%);
}
.sunny{
  background:
    url('../img/pawtile-light.svg') 0 0 / 560px 560px repeat,
    linear-gradient(180deg, #eaf7ff 0%, #fffef6 60%, #fff7e6 100%);
}


/* Page-specific styles moved from inline <style> blocks (mockup 8 / index) */

/* Cover section and hearts */
.cover{position:relative;width:100%;height:100vh;overflow:hidden;box-shadow:0 20px 50px rgba(17, 64, 107, 0.15);background:#000;isolation:isolate}
.cover video,.cover .video-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));color:#fff;padding:24px}
.cover .headline{font-size:clamp(28px, 6vw, 60px);font-weight:800;letter-spacing:.5px;text-shadow:0 4px 24px rgba(0,0,0,.45);opacity:0;transform:translateY(12px);animation:popIn .9s ease-out .2s forwards}
.cover .sub{margin-top:10px;max-width:60ch;opacity:0;transform:translateY(12px);animation:popIn .9s ease-out .35s forwards}
.cover .hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.heart{position:absolute;width:18px;height:18px;transform:rotate(-45deg);background:#ff6f91;border-radius:3px;filter:drop-shadow(0 4px 6px rgba(255, 61, 110, .25));opacity:.9;animation:floatUp linear infinite}
.heart::before,.heart::after{content:"";position:absolute;width:18px;height:18px;background:#ff6f91;border-radius:50%}
.heart::before{top:-9px;left:0}
.heart::after{left:9px;top:0}
@keyframes floatUp{0%{transform:translateY(30px) rotate(-20deg)}100%{transform:translateY(-110vh) rotate(-10deg)}}
@keyframes popIn{to{opacity:1;transform:none}}

/* Content sections */
main.page{max-width:1400px;margin:0 auto;padding:24px}
.section-light{margin-top:36px}
.big-photo{border-radius:18px;background:#f4fbff;border:1px solid #cfe6ff;display:grid;place-items:center;color:#8fb3d1}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
/*.two-col .big-photo{align-self:stretch}*/
.highlights li{margin:8px 0}

/* Slider (legacy in-page) */
.slider{position:relative;height:clamp(360px, 70svh, 780px);border-radius:18px;overflow:hidden;border:1px solid #cfe6ff;box-shadow:0 10px 30px rgba(17,64,107,.12)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide.active{opacity:1}
.caption{position:absolute;left:16px;right:16px;bottom:16px;padding:12px 14px;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));color:#fff;border-radius:12px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.highlights li.active span:last-child{font-weight:800;color:#0f3a5a}

/* Full-viewport slideshow (unused in live index but kept for mockup reference) */
.slideshow-section{display:grid}
.slider-full{position:relative;width:100%;height:100%;min-height:70vh;border-radius:18px;overflow:hidden;border:1px solid #cfe6ff;box-shadow:0 10px 30px rgba(17,64,107,.12)}
.slides{display:flex;width:100%;height:100%;transform:translateX(0);transition:transform .9s ease}
.slideFull{min-width:100%;height:100%;position:relative}
.slideFull img{width:100%;height:100%;object-fit:cover;display:block}
.slider-full .headline{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 16px;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));color:#fff;border-radius:12px;font-weight:800;letter-spacing:.3px;text-shadow:0 3px 16px rgba(0,0,0,.5);font-size:clamp(20px, 3.4vw, 38px)}
@media (max-width:880px){.slider-full .headline{font-size:clamp(18px, 4.6vw, 28px)}}

/* Reveal on scroll hook used by JS */
.reveal-on-scroll{opacity:0;transform:translateY(12px)}
/* Ensure revealed state overrides hidden state regardless of order */
.reveal-on-scroll.revealed{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
/* .revealed already defined in base; kept behavior consistent */

/* Cute accent bullets */
.heart-bullet{display:inline-flex;align-items:center;gap:8px}
.heart-bullet .mini{width:14px;height:14px;border-radius:2px;transform:rotate(-45deg);background:#ff7aa5;position:relative}
.heart-bullet .mini:before,.heart-bullet .mini:after{content:"";position:absolute;width:14px;height:14px;background:#ff7aa5;border-radius:50%}
.heart-bullet .mini:before{top:-7px;left:0}
.heart-bullet .mini:after{left:7px;top:0}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:16px}
.ph-lg{height:380px}

/* Responsive tweak */
@media (max-width:880px){.two-col{grid-template-columns:1fr}}

/* Fade/zoom slideshow */
.slider-fade{position:relative;width:100%;height:100%;min-height:100svh;border-radius:18px;overflow:hidden;border:1px solid #cfe6ff;box-shadow:0 10px 30px rgba(17,64,107,.12);background:#000}
.slideFade{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;background:#000}
.slideFade.active{opacity:1}
.slideFade img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.12);animation:kenburns 8s ease forwards}
.slide-caption{position:absolute;left:16px;right:16px;bottom:16px;padding:16px;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.6));color:#fff;border-radius:12px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.slide-caption h2{margin:6px 0;font-size:clamp(22px,3.6vw,40px);letter-spacing:.3px}
.slide-caption p{margin:0;max-width:65ch}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1.08)}}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:50}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .close,.lightbox .prev,.lightbox .next{position:fixed;top:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer;backdrop-filter:saturate(1.2) blur(4px)}
.lightbox .close{right:16px}
.lightbox .prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox .next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox .counter{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(255,255,255,.12);padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25)}
@media (prefers-reduced-motion: reduce){.slideFade img{animation:none;transform:none}}

/* Slideshow nav buttons */
.slider-fade .nav{position:absolute;inset:0;pointer-events:none}
.slider-fade .slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.28);color:#fff;border:1px solid rgba(255,255,255,.45);padding:10px 12px;border-radius:10px;cursor:pointer;backdrop-filter:saturate(1.2) blur(4px);pointer-events:auto;z-index:5}
.slider-fade .slider-btn.prev{left:12px}
.slider-fade .slider-btn.next{right:12px}
.slider-fade .slider-btn:hover{background:rgba(0,0,0,.38)}
.slider-fade .slider-btn:focus{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}

/* Share bar */
.share-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.7);color:#000;text-decoration:none;cursor:pointer;backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.2)}
.share-btn:hover{background:rgba(255,255,255,.85)}
.share-btn.dark{background:rgba(0,0,0,.85);color:#fff;border-color:#000;box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.25)}
.share-btn .ico{font-size:16px;line-height:1}
.share-btn .ico svg{width:18px;height:18px;display:block}

/* Contact section layout (photo in-flow on the right column) */
#contact{display:grid;align-content:start;position:relative;min-height:100svh}
#contact .two-col{margin-bottom:24px}
/* Removed absolute .contact-photo; using .big-photo within .two-col instead */

/* Utilities for moved inline styles */
.min-100svh{min-height:100svh}
.cardL-narrow{max-width:800px;margin-bottom:16px}

/* Header/lang switch overrides for this layout */
.site-header.lang-only{background:transparent;border:none;box-shadow:none}
.site-header.lang-only .lang-switch{position:fixed;top:14px;right:14px;z-index:20;background:transparent}


/* Footer contacts and Messenger icon */
.site-footer .footer-contacts{color:var(--muted)}
.site-footer .footer-contacts a{color:inherit;text-decoration:underline}
.site-footer .messenger-ico{width:18px;height:18px;margin-right:6px;vertical-align:-3px;display:inline-block}


/* Gallery hover tiny zoom */
.photo-grid img{transition:transform .25s ease;will-change:transform}
.photo-grid img:hover{transform:scale(1.03)}
@media (prefers-reduced-motion: reduce){.photo-grid img{transition:none}}


/* Mobile: full-bleed slideshow without borders/background */
@media (max-width: 768px){
  /* Make the slideshow section escape main container padding */
  main.page > .slideshow-section{
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
  }
  /* Remove borders, radius and shadows on mobile for edge-to-edge look */
  .slideshow-section .slider-fade{
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #000;
  }
}