/* ============================================================
   Reka Sailing — vibrant animated ocean theme
   Palette: #70cae2 #7898ef #a19af9 #c5cdf2 #ff8fdb #f9a6fe
            #f5949b #f96b5f #ff635c #fc555c
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }

html{ overflow-x:clip; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  margin:0;
  overflow-x:clip;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#f2effc;
  background:#120c30;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }

::selection{ background:#ff8fdb; color:#2a1348; }

a{ color:#70cae2; }
a:focus-visible,button:focus-visible{
  outline:3px solid #70cae2;
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#ff8fdb; color:#2a1348; font-weight:700;
  padding:.6rem 1rem; border-radius:0 0 12px 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ============================ header ============================ */

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:.4rem 1rem;
  flex-wrap:wrap;
  padding:.7rem clamp(1rem,4vw,2.5rem);
  background:rgba(24,14,58,.28);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:background .35s ease;
}
.site-header.scrolled{ background:rgba(20,12,48,.72); }

.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; font-size:1.15rem; letter-spacing:.02em;
  color:#fff; text-decoration:none;
}
.brand-mark{ width:30px; height:30px; flex:none; }

.site-header nav{ display:flex; flex-wrap:wrap; gap:.15rem .35rem; }
.site-header nav a{
  color:#fdfbff; text-decoration:none; font-weight:600; font-size:.95rem;
  padding:.4rem .8rem; border-radius:999px;
  transition:background .25s ease, color .25s ease;
}
.site-header nav a:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* ============================ hero / sky ============================ */

.hero{
  position:relative;
  min-height:640px;
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 8%,  rgba(249,166,254,.85) 0%, rgba(249,166,254,0) 55%),
    radial-gradient(100% 80% at 10% 18%, rgba(112,202,226,.95) 0%, rgba(112,202,226,0) 55%),
    radial-gradient(90% 70%  at 55% 55%, rgba(255,143,219,.7)  0%, rgba(255,143,219,0) 60%),
    radial-gradient(110% 80% at 25% 90%, rgba(245,148,155,.85) 0%, rgba(245,148,155,0) 55%),
    linear-gradient(180deg,#7898ef 0%, #a19af9 32%, #ff8fdb 62%, #f5949b 82%, #f96b5f 100%);
}

/* drifting mesh blobs */
.sky-blobs{ position:absolute; inset:0; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%;
  mix-blend-mode:screen;
}
.blob1{
  width:55vmax; height:55vmax; left:-12vmax; top:-18vmax;
  background:radial-gradient(circle, rgba(112,202,226,.75) 0%, rgba(120,152,239,.35) 45%, rgba(120,152,239,0) 70%);
  animation:blobA 26s ease-in-out infinite alternate;
}
.blob2{
  width:60vmax; height:60vmax; right:-20vmax; top:-10vmax;
  background:radial-gradient(circle, rgba(249,166,254,.7) 0%, rgba(255,143,219,.3) 45%, rgba(255,143,219,0) 70%);
  animation:blobB 31s ease-in-out infinite alternate;
}
.blob3{
  width:48vmax; height:48vmax; left:22vw; top:18vh;
  background:radial-gradient(circle, rgba(255,99,92,.4) 0%, rgba(245,148,155,.22) 45%, rgba(245,148,155,0) 70%);
  animation:blobA 38s ease-in-out infinite alternate-reverse;
}
@keyframes blobA{
  from{ translate:0 0; scale:1; }
  to  { translate:6vw 4vh; scale:1.15; }
}
@keyframes blobB{
  from{ translate:0 0; scale:1.1; }
  to  { translate:-7vw 6vh; scale:.95; }
}

/* sun */
.sky-actors{ position:absolute; inset:0; pointer-events:none; }
.sun{
  position:absolute; top:9%; right:9%;
  width:clamp(64px,9vw,120px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff9dd, #ffd36b 60%, #ffb46b);
  box-shadow:
    0 0 60px 22px rgba(255,210,130,.6),
    0 0 140px 70px rgba(255,143,219,.3);
  animation:sunpulse 7s ease-in-out infinite alternate;
}
@keyframes sunpulse{
  from{ transform:scale(1); }
  to  { transform:scale(1.07); }
}

/* clouds */
.cloud{
  position:absolute;
  height:26px; border-radius:999px;
  background:rgba(255,244,252,.4);
}
.cloud::before,.cloud::after{
  content:""; position:absolute; border-radius:50%;
  background:rgba(255,244,252,.4);
}
.cloud::before{ width:46px; height:46px; left:18%; top:-24px; }
.cloud::after{ width:30px; height:30px; right:22%; top:-14px; }
.cloud1{ width:150px; left:12%; top:16%; animation:clouddrift 34s ease-in-out infinite alternate; }
.cloud2{ width:110px; left:58%; top:8%; scale:.8; animation:clouddrift 42s ease-in-out infinite alternate-reverse; }
@keyframes clouddrift{
  from{ transform:translateX(-3vw); }
  to  { transform:translateX(3vw); }
}

/* seagulls */
.gull{ position:absolute; overflow:visible; }
.gull .wing{ fill:#fff; transform-box:fill-box; }
.gull .gbody{ fill:#fff; }
.gull .gbeak{ fill:#ff9a5c; }
.gull .wingL{ transform-origin:100% 65%; animation:flapL .8s ease-in-out infinite alternate; }
.gull .wingR{ transform-origin:0% 65%;   animation:flapR .8s ease-in-out infinite alternate; }
@keyframes flapL{ from{ transform:rotate(24deg);}  to{ transform:rotate(-26deg);} }
@keyframes flapR{ from{ transform:rotate(-24deg);} to{ transform:rotate(26deg);} }
@keyframes gullfly{
  from{ transform:translateX(-25vw); }
  to  { transform:translateX(115vw); }
}
.gull1{ width:58px; left:14%; top:14%; opacity:.98; animation:gullfly 32s linear infinite; }
.gull2{ width:42px; left:52%; top:22%; opacity:.85; animation:gullfly 44s linear infinite; animation-delay:-18s; }
.gull2 .wingL{ animation-duration:.7s; } .gull2 .wingR{ animation-duration:.7s; }
.gull3{ width:32px; left:72%; top:10%; opacity:.7; animation:gullfly 56s linear infinite; animation-delay:-39s; }
.gull3 .wingL{ animation-duration:.95s; } .gull3 .wingR{ animation-duration:.95s; }

/* hero copy */
.hero-copy{
  position:absolute; z-index:5;
  top:clamp(88px,16vh,170px); left:0; right:0;
  width:min(92vw,860px);
  margin-inline:auto;
  text-align:center;
  will-change:transform,opacity;
}
.eyebrow{
  display:inline-block;
  margin:0 0 .8rem;
  padding:.35rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff; font-weight:700; font-size:.9rem; letter-spacing:.12em;
  text-transform:uppercase;
}
.hero h1{
  margin:.1em 0 .25em;
  font-size:clamp(2.5rem,7.5vw,5rem);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.015em;
  color:#fff;
  text-shadow:0 4px 34px rgba(94,40,150,.5), 0 1px 3px rgba(80,30,120,.35);
}
.grad-word{
  background:linear-gradient(92deg,#fff7c2 5%, #ffe86b 45%, #ffd0ef 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 4px 20px rgba(94,40,150,.45));
}
.tagline{
  margin:.2rem auto 1.6rem;
  max-width:34em;
  font-size:clamp(1rem,2.4vw,1.3rem);
  font-weight:600;
  color:#fff;
  text-shadow:0 2px 18px rgba(94,40,150,.55);
}
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block;
  padding:.85rem 1.7rem;
  border-radius:999px;
  font-weight:700; font-size:1rem;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#ff8fdb,#fc555c);
  box-shadow:0 10px 30px rgba(252,85,92,.45);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(252,85,92,.55);
}
.btn-ghost{
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ transform:translateY(-3px); background:rgba(255,255,255,.28); }

/* ============================ ocean scene ============================ */

.ocean{
  position:absolute; left:0; bottom:-2px;
  width:100%; max-width:none; height:auto;
  aspect-ratio:1440/560;
  display:block;
  z-index:2;
}
@media (max-width:900px){
  .ocean{ width:180%; left:-40%; }
}
@media (max-width:560px){
  .ocean{ width:240%; left:-70%; }
}
/* short, wide viewports (landscape phones, small desktop windows):
   sink the ocean a bit so the waves don't crowd the hero copy
   (-80px keeps the clipped edge inside the settled #5b4bb8 zone,
   so it still blends seamlessly into the .sea section below) */
@media (max-height:780px) and (min-width:901px){
  .ocean{ bottom:-80px; }
}
@media (max-height:500px){
  .ocean{ bottom:-80px; }
}

/* wave bands: seamless X loop + organic Y bob */
.wx{ will-change:transform; }
@keyframes waveX{
  from{ transform:translateX(0); }
  to  { transform:translateX(-1440px); }
}
@keyframes waveY{
  from{ transform:translateY(-7px); }
  to  { transform:translateY(7px); }
}
.wx-back { animation:waveX 26s  linear infinite; }
.wx-mid  { animation:waveX 19s  linear infinite; }
.wx-mid2 { animation:waveX 13s  linear infinite; }
.wx-front{ animation:waveX 9.5s linear infinite; }
.wy-back { animation:waveY 9s   ease-in-out infinite alternate; }
.wy-mid  { animation:waveY 7.5s ease-in-out infinite alternate; animation-delay:-2s; }
.wy-mid2 { animation:waveY 6.5s ease-in-out infinite alternate; animation-delay:-4s; }
.wy-front{ animation:waveY 5.5s ease-in-out infinite alternate; animation-delay:-1s; }

.glitter{ animation:shimmer 5s ease-in-out infinite alternate; }
@keyframes shimmer{ from{ opacity:.35; } to{ opacity:.75; } }

/* sailboat */
.boat-bob{ animation:boatbob 4.8s ease-in-out infinite alternate; }
.boat-rock{
  transform-box:fill-box; transform-origin:50% 88%;
  animation:boatrock 5.6s ease-in-out infinite alternate;
}
@keyframes boatbob{ from{ transform:translateY(-9px);} to{ transform:translateY(8px);} }
@keyframes boatrock{ from{ transform:rotate(-3deg);} to{ transform:rotate(3.2deg);} }

/* dolphins — nested transforms build the leap arc */
.dol-x{ animation:dolX 9s linear infinite; }
.dol-y{ animation:dolY 9s linear infinite; }
.dol-r{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:dolR 9s linear infinite;
}
.d2 .dol-x,.d2 .dol-y,.d2 .dol-r{ animation-delay:-4.6s; animation-duration:10.5s; }
@keyframes dolX{
  0%{ transform:translateX(0); }
  30%{ transform:translateX(310px); }
  33%{ transform:translateX(0); }
  100%{ transform:translateX(0); }
}
@keyframes dolY{
  0%{ transform:translateY(0); animation-timing-function:cubic-bezier(.18,.6,.45,1); }
  15%{ transform:translateY(-300px); animation-timing-function:cubic-bezier(.55,0,.82,.4); }
  30%{ transform:translateY(0); }
  100%{ transform:translateY(0); }
}
@keyframes dolR{
  0%{ transform:rotate(-52deg); }
  30%{ transform:rotate(56deg); }
  36%{ transform:rotate(-52deg); }
  100%{ transform:rotate(-52deg); }
}

/* whale breach (hidden below the mid band at rest) */
.whale{
  transform-box:fill-box; transform-origin:50% 55%;
  animation:whalebreach 17s ease-in-out infinite;
}
@keyframes whalebreach{
  0%  { transform:translateY(0)      rotate(-10deg); }
  52% { transform:translateY(0)      rotate(-10deg); }
  64% { transform:translateY(-300px) rotate(-7deg); }
  72% { transform:translateY(-286px) rotate(7deg); }
  86% { transform:translateY(0)      rotate(13deg); }
  100%{ transform:translateY(0)      rotate(-10deg); }
}
.spout{
  opacity:0;
  transform-box:fill-box; transform-origin:50% 100%;
  animation:spout 17s linear infinite;
}
@keyframes spout{
  0%,60%{ opacity:0; transform:scaleY(.2); }
  64%{ opacity:.95; transform:scaleY(1); }
  74%{ opacity:0; transform:scaleY(1.15); }
  100%{ opacity:0; transform:scaleY(.2); }
}

/* fish */
@keyframes fishswim{
  from{ transform:translateX(-180px); }
  to  { transform:translateX(2100px); }
}
.fx1{ animation:fishswim 34s linear infinite; }
.fx2{ animation:fishswim 26s linear infinite; animation-delay:-11s; }
.fx3{ animation:fishswim 40s linear infinite; animation-delay:-23s; }
.fx4{ animation:fishswim 22s linear infinite; animation-delay:-6s; }
.fx5{ animation:fishswim 47s linear infinite; animation-delay:-31s; }
.fish-bob{ animation:fishbob 3s ease-in-out infinite alternate; }
.fb2{ animation-duration:2.4s; } .fb3{ animation-duration:3.6s; }
.fb4{ animation-duration:2.1s; } .fb5{ animation-duration:2.8s; }
@keyframes fishbob{ from{ transform:translateY(-5px);} to{ transform:translateY(5px);} }
.ftail{
  transform-box:fill-box; transform-origin:100% 50%;
  animation:tailwag .5s ease-in-out infinite alternate;
}
@keyframes tailwag{ from{ transform:rotate(-20deg);} to{ transform:rotate(20deg);} }
.f-blue{ fill:#c3cdfb; opacity:.62; }
.f-pink{ fill:#ffc9ec; opacity:.6; }
.f-cyan{ fill:#9fe0f0; opacity:.55; }

/* bubbles */
.bub{ animation:bubblerise 6s ease-in infinite; opacity:0; }
.bu2{ animation-duration:5s;   animation-delay:-2s; }
.bu3{ animation-duration:7s;   animation-delay:-4.2s; }
.bu4{ animation-duration:5.6s; animation-delay:-1.3s; }
.bu5{ animation-duration:6.6s; animation-delay:-3.4s; }
.bu6{ animation-duration:4.6s; animation-delay:-2.8s; }
@keyframes bubblerise{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:.65; }
  85%{ opacity:.35; }
  100%{ transform:translateY(-130px); opacity:0; }
}

/* sea turtle — rare visitor: one serene ~25s crossing per 70s cycle,
   off-screen the rest (steps() snaps it back while hidden) */
@keyframes turtleX{
  0%  { transform:translateX(-170px); }
  36% { transform:translateX(1660px); animation-timing-function:steps(1,end); }
  37%,100%{ transform:translateX(-170px); }
}
.turtle-x{ animation:turtleX 70s linear infinite; animation-delay:-40s; }
.turtle-bob{ animation:turtlebob 5.4s ease-in-out infinite alternate; }
@keyframes turtlebob{ from{ transform:translateY(-6px);} to{ transform:translateY(6px);} }
.tflip{
  transform-box:fill-box; transform-origin:85% 10%;
  animation:tpaddle 1.9s ease-in-out infinite alternate;
}
.tflip-farf{ animation-delay:-.95s; }
.tflip-back{ transform-origin:90% 25%; animation-duration:2.3s; }
.tflip-farb{ transform-origin:90% 25%; animation-duration:2.3s; animation-delay:-1.15s; }
@keyframes tpaddle{ from{ transform:rotate(-13deg);} to{ transform:rotate(13deg);} }

/* jellyfish family — very rare: one slow upward drift per 112s cycle */
.jtent{ fill:none; stroke:#f9a6fe; stroke-width:2.4; stroke-linecap:round; opacity:.6; }
.jarm{ fill:none; stroke:#ffc9ec; stroke-width:3; stroke-linecap:round; opacity:.55; }
.jb1 .jtent{ stroke:#9fe0f0; stroke-width:3; }
.jb2 .jtent{ stroke-width:3.2; }
@keyframes jellydrift{
  0%,80%{ transform:translate(0,0); opacity:0; }
  83%   { opacity:.9; }
  93%   { opacity:.9; }
  97%,100%{ transform:translate(-70px,-190px); opacity:0; }
}
.jelly-drift{ animation:jellydrift 112s linear infinite; animation-delay:-50s; }
.jbell{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:jellypulse 2.6s ease-in-out infinite alternate;
}
.jb1 .jbell{ animation-duration:2.1s; animation-delay:-.7s; }
.jb2 .jbell{ animation-duration:2.3s; animation-delay:-1.2s; }
@keyframes jellypulse{ from{ transform:scale(1.05,.94);} to{ transform:scale(.95,1.05);} }
.jbaby{ animation:jbob 3.6s ease-in-out infinite alternate; }
.jb2{ animation-duration:4.4s; animation-delay:-1.6s; }
@keyframes jbob{ from{ transform:translate(-5px,-7px);} to{ transform:translate(4px,6px);} }

/* ============================ content sections ============================ */

.sea{
  position:relative;
  background:linear-gradient(180deg,#5b4bb8 0%, #3a2b7e 26%, #241a55 55%, #170f3c 82%, #120c30 100%);
}

.block{
  max-width:1080px;
  margin:0 auto;
  padding:clamp(3.2rem,7vw,5.5rem) clamp(1.1rem,4vw,2.5rem) 1.5rem;
}
.block h2{
  margin:0 0 1.8rem;
  font-size:clamp(1.7rem,4vw,2.5rem);
  font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(92deg,#70cae2, #a19af9 45%, #ff8fdb 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  width:fit-content;
  padding-bottom:.55rem;
  position:relative;
}
.block h2::after{
  content:"";
  position:absolute; left:2px; bottom:0;
  width:96px; height:10px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 10"><path d="M2 6 q10 -6 22 0 t22 0 t22 0 t22 0" fill="none" stroke="%23ff8fdb" stroke-width="3.4" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;
}

.section-lead{
  margin:-.8rem 0 1.8rem;
  max-width:56em;
  color:#c5cdf2;
  font-size:1rem;
}
.subhead{
  margin:2.6rem 0 .3rem;
  font-size:1.25rem; font-weight:800; color:#fff;
}

.glass{
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 44px rgba(9,4,32,.35);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.placeholder{ color:#b9b3dd; font-style:italic; }
.placeholder.note{ text-align:center; margin-top:1.4rem; font-size:.92rem; opacity:.85; }

/* --- Rólam --- */
.about-card{
  display:flex; gap:1.8rem; align-items:flex-start;
  padding:clamp(1.4rem,3.5vw,2.2rem);
  flex-wrap:wrap;
}
.about-photo{
  flex:1 1 260px; max-width:340px;
  border-radius:18px; overflow:hidden;
  box-shadow:0 14px 34px rgba(9,4,32,.4);
}
.about-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.about-body{ flex:2 1 360px; min-width:0; }
.about-body p{ color:#e7e3fb; }
.about-body h3{ margin:.1rem 0 .15rem; font-size:1.45rem; color:#fff; }
.about-sub{ margin:0 0 .8rem; color:#f9a6fe; font-weight:600; }
.stats{
  list-style:none; margin:1.2rem 0 0; padding:0;
  display:flex; gap:.7rem; flex-wrap:wrap;
}
.stats li{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.7rem 1.1rem;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(112,202,226,.16), rgba(255,143,219,.16));
  border:1px solid rgba(255,255,255,.18);
}
.stats strong{ font-size:1.15rem; color:#fff; }
.stats span{ font-size:.82rem; color:#c5cdf2; }

/* --- Videók --- */
.grid{ display:grid; gap:1.2rem; }
.video-grid{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

.video-card{
  display:block; padding:.7rem; overflow:hidden;
  text-decoration:none; color:inherit;
}
.video-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,143,219,.55);
  box-shadow:0 20px 50px rgba(255,99,92,.22);
}
.thumb{
  position:relative;
  aspect-ratio:9/14;
  border-radius:14px;
  overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#70cae2,#7898ef 55%, #a19af9);
}
.thumb img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 62%);
  transform:translateX(-120%);
  animation:sheen 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%,55%{ transform:translateX(-120%); }
  85%,100%{ transform:translateX(120%); }
}
.play{
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(30,12,70,.35);
  transition:transform .25s ease;
  z-index:1;
}
.play::before{
  content:"";
  margin-left:5px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #5b4bb8;
}
.video-card:hover .play{ transform:scale(1.12); }
.video-card h3{
  margin:.8rem .2rem .4rem; font-size:.95rem; line-height:1.35; color:#fff; font-weight:700;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vmeta{ margin:.1rem .2rem .2rem; display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.pill{
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
  padding:.2rem .65rem; border-radius:999px;
  background:linear-gradient(135deg,#ff8fdb,#fc555c);
  color:#fff;
}
.pill-ig{ background:linear-gradient(135deg,#a19af9,#70cae2); }
.pill-alt{ background:rgba(255,255,255,.14); color:#c5cdf2; }
.tag{
  font-size:.72rem; color:#a19af9; opacity:.9;
}

/* --- Blog --- */
.blog-grid{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
.blog-card{ padding:1.5rem 1.6rem; }
.blog-card:hover{
  transform:translateY(-5px);
  border-color:rgba(112,202,226,.55);
  box-shadow:0 20px 50px rgba(112,202,226,.16);
}
.blog-cover{
  margin:-1.5rem -1.6rem 1.1rem;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:22px 22px 0 0;
}
.blog-cover img{ display:block; width:100%; height:100%; object-fit:cover; }
.bdate{
  margin:0 0 .5rem;
  display:inline-block;
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#70cae2;
  padding:.2rem .65rem;
  border:1px solid rgba(112,202,226,.4);
  border-radius:999px;
}
.blog-card h3{ margin:.3rem 0 .5rem; font-size:1.25rem; color:#fff; }
.blog-card .excerpt{ color:#c5cdf2; }
.readmore{
  display:inline-block; margin-top:.6rem;
  font-weight:700; font-size:.92rem;
  background:linear-gradient(92deg,#70cae2,#ff8fdb);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  cursor:pointer; list-style:none;
}
.readmore::-webkit-details-marker{ display:none; }
.blog-details[open] .readmore{ margin-bottom:1.2rem; }

.blog-full{ margin-top:1rem; }
.blog-full h4{
  margin:1.6rem 0 .5rem; font-size:1.05rem; color:#fff;
  font-weight:800;
}
.blog-full p{ color:#e7e3fb; margin:0 0 .9rem; }
.blog-full figure{ margin:1rem 0; }
.blog-full figure img{
  display:block; width:100%; border-radius:14px;
  box-shadow:0 12px 30px rgba(9,4,32,.35);
}
.blog-full figcaption{
  margin-top:.4rem; font-size:.85rem; color:#a19af9; font-style:italic;
}
.blog-full blockquote{
  margin:1.3rem 0; padding:1rem 1.3rem;
  border-left:3px solid #ff8fdb;
  background:rgba(255,255,255,.05);
  border-radius:0 14px 14px 0;
  color:#fff; font-weight:600; font-style:italic;
}
.src-note{
  margin-top:1.4rem !important;
  font-size:.82rem; color:#8f88b8 !important;
}
.src-note a{ color:#70cae2; }

.essay-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin:1.3rem 0;
}
.essay-grid figure{ margin:0; }
.essay-grid img{
  display:block; width:100%; aspect-ratio:9/14; object-fit:cover;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(9,4,32,.35);
}
.essay-grid figcaption{ margin-top:.4rem; font-size:.8rem; }
.essay-grid figcaption strong{ display:block; color:#f9a6fe; font-size:.78rem; letter-spacing:.03em; }
.essay-grid figcaption span{ color:#c5cdf2; }

/* --- Úti célok --- */
.places{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.place{
  position:relative;
  padding:0 0 1.2rem;
  display:flex; flex-direction:column; gap:.1rem;
  overflow:hidden;
}
.place::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px; z-index:1;
  background:linear-gradient(90deg,#70cae2,#a19af9,#ff8fdb,#f96b5f);
}
.place:hover{
  transform:translateY(-5px);
  border-color:rgba(249,166,254,.5);
  box-shadow:0 18px 44px rgba(161,154,249,.22);
}
.place-photo{ aspect-ratio:16/11; overflow:hidden; }
.place-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.place-body{
  position:relative;
  padding:1rem 1.3rem 0;
}
.flag{ font-size:1.7rem; line-height:1; display:block; margin-bottom:.45rem; }
.pname{ font-size:1.14rem; font-weight:800; color:#fff; display:block; }
.psub{ color:#c5cdf2; font-size:.92rem; display:block; }
.pidx{
  position:absolute; right:1.3rem; top:1.05rem;
  font-size:.8rem; font-weight:800;
  background:linear-gradient(135deg,#70cae2,#ff8fdb);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.9;
}

/* --- Kapcsolat --- */
.contact-card{ padding:clamp(1.5rem,4vw,2.4rem); text-align:center; }
.contact-lead{ margin:0 0 1.3rem; font-size:1.12rem; color:#fff; font-weight:600; }
.chips{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.chip{
  display:inline-block;
  padding:.65rem 1.3rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700; font-size:.98rem;
  color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.chip:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg, rgba(255,143,219,.35), rgba(252,85,92,.35));
  border-color:rgba(255,143,219,.6);
}

/* ============================ footer ============================ */

.site-footer{
  text-align:center;
  padding:3.2rem 1rem 2.4rem;
  margin-top:2.5rem;
}
.foot-wave{ width:min(560px,80vw); height:26px; display:block; margin:0 auto 1.4rem; }
.foot-brand{ margin:.2rem 0; font-weight:800; font-size:1.2rem; color:#fff; }
.foot-tag{
  margin:.1rem 0 .9rem;
  font-weight:600;
  background:linear-gradient(92deg,#70cae2,#a19af9,#ff8fdb);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.foot-copy{ margin:0; color:#8f88b8; font-size:.88rem; }

/* ============================ reveal on scroll ============================ */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============================ reduced motion ============================ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-copy{ transform:none !important; opacity:1 !important; }
  /* dolphins & whale rest hidden below the waves — scene stays calm */
  /* rare visitors (turtle, jellyfish family) stay hidden too */
  .turtles,.jellies{ display:none; }
  .thumb::after{ display:none; }
}

/* ============================ small screens ============================ */

@media (max-width:640px){
  .site-header{ justify-content:center; row-gap:.1rem; padding:.55rem .6rem; }
  .site-header nav{ justify-content:center; }
  .site-header nav a{ font-size:.86rem; padding:.32rem .6rem; }
  .hero{ min-height:600px; }
  .hero-copy{ top:clamp(118px,20vh,180px); }
  .sun{ top:12%; right:6%; }
  .stats{ gap:.5rem; }
  .about-card{ gap:1.1rem; }
}