/*
Theme Name: Habibi Del Mar
Theme URI: https://habibidelmar.com
Author: Habibi Del Mar
Author URI: https://habibidelmar.com
Description: Single-page portfolio theme for Habibi Del Mar — Afro House DJ & Producer. Events in Colombia & Dominican Republic.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: habibi-del-mar
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --night:#050E14;--deep:#091A26;--dusk:#0C2235;
  --teal:#1EC8B8;--teal2:#0FA89A;--teal3:#7EECD8;
  --gold:#C9A86C;--sand:#E8D5A8;--cream:#EDF4F2;
  --navy:#0A2540;--cobalt:#1A4068;
  --text:#EDF4F2;--muted:rgba(237,244,242,.72);--faint:rgba(30,200,184,.06);
  --border:rgba(30,200,184,.15);
}
body{background:var(--night);color:var(--text);font-family:"Jost",sans-serif;font-weight:300;line-height:1.7;overflow-x:hidden}
::selection{background:var(--teal2);color:#050E14}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--night)}::-webkit-scrollbar-thumb{background:var(--teal2);border-radius:2px}
.cg{font-family:"Cormorant Garamond",serif}
.ey{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);font-weight:500}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 52px;display:flex;align-items:center;justify-content:space-between;transition:all .35s}
nav.scrolled{background:rgba(7,5,14,.95);backdrop-filter:blur(20px);padding:14px 52px;border-bottom:1px solid var(--border)}
.logo{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:600;color:var(--text);text-decoration:none;letter-spacing:.05em}
.logo span{color:var(--gold)}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--teal)}
.nav-cta{background:var(--teal2)!important;color:#050E14!important;padding:9px 22px;border-radius:3px;font-weight:700!important}
.nav-cta:hover{background:var(--teal)!important}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.ham span{display:block;width:24px;height:1.5px;background:var(--text);transition:all .3s}

/* MOBILE MENU */
.mob{display:none;position:fixed;inset:0;background:rgba(7,5,14,.98);z-index:199;flex-direction:column;align-items:center;justify-content:center;gap:32px}
.mob.open{display:flex}
.mob a{font-family:"Bebas Neue",sans-serif;font-size:48px;letter-spacing:.06em;color:var(--text);text-decoration:none;transition:color .2s}
.mob a:hover{color:var(--teal)}
.mob-close{position:absolute;top:24px;right:28px;background:none;border:none;color:var(--muted);font-size:28px;cursor:pointer;line-height:1}

/* BTNS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-radius:3px;transition:all .25s;cursor:pointer;border:none}
.btn-p{background:linear-gradient(135deg,var(--teal2),var(--teal));color:#050E14;padding:14px 36px;box-shadow:0 8px 30px rgba(30,200,184,.3);font-weight:700}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(30,200,184,.5)}
.btn-s{background:transparent;color:var(--text);padding:13px 36px;border:1px solid rgba(30,200,184,.35)}
.btn-s:hover{border-color:var(--teal);color:var(--teal)}

/* HERO */
#home{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-img{position:absolute;inset:0;will-change:transform}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,5,14,.5) 0%,rgba(7,5,14,.18) 40%,rgba(7,5,14,.18) 60%,rgba(7,5,14,.72) 88%,rgba(7,5,14,1) 100%)}
.hero-ov2{position:absolute;inset:0;background:radial-gradient(ellipse 120% 80% at 50% 110%,rgba(30,200,184,.12) 0%,transparent 55%)}
.hero-content{position:relative;z-index:2;text-align:center;max-width:960px;padding:0 24px}
.h-ey{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:22px;opacity:0;animation:fadeUp .8s ease .3s forwards}
.h-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(76px,15vw,168px);line-height:.88;letter-spacing:.03em;margin-bottom:26px;opacity:0;animation:fadeUp .9s ease .5s forwards}
.h-title .gt{background:linear-gradient(135deg,var(--teal3) 0%,var(--teal) 40%,var(--gold) 75%,var(--sand) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.h-title .wt{color:var(--text);display:block}
.h-tag{font-family:"Cormorant Garamond",serif;font-size:clamp(17px,2.5vw,23px);font-style:italic;color:var(--sand);margin-bottom:46px;letter-spacing:.04em;opacity:0;animation:fadeUp .9s ease .7s forwards}
.h-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .9s ease .9s forwards}
.scroll-ind{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeIn 1s ease 1.4s forwards;z-index:2}
.scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--teal),transparent);animation:spulse 2s ease-in-out infinite}
.scroll-txt{font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;writing-mode:vertical-rl}
.hero-wave{position:absolute;bottom:-1px;left:0;right:0;line-height:0;z-index:3}
.hero-wave svg{display:block;width:100%}

/* SECTIONS */
.sec{padding:110px 52px;max-width:1240px;margin:0 auto}
.sec-wide{padding:110px 0}
.sec-wide .inner{max-width:1240px;margin:0 auto;padding:0 52px}
.sec-head{margin-bottom:64px}
.sec-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(44px,7vw,84px);letter-spacing:.04em;line-height:.9;margin-top:12px}
.sec-title .ac{color:var(--teal)}

/* REVEAL */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rv.visible{opacity:1;transform:none}
.rv2{opacity:0;transform:translateY(28px);transition:opacity .7s ease .15s,transform .7s ease .15s}
.rv2.visible{opacity:1;transform:none}
.rv3{opacity:0;transform:translateY(28px);transition:opacity .7s ease .3s,transform .7s ease .3s}
.rv3.visible{opacity:1;transform:none}

/* ABOUT */
#about{background:linear-gradient(180deg,var(--night) 0%,#061520 100%)}
.ab-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}
.ab-photo{position:relative}
.ab-frame{width:100%;aspect-ratio:9/14;overflow:hidden;border-radius:2px;border:1px solid var(--border);position:relative}
.ab-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.ab-corner{position:absolute;top:-16px;left:-16px;width:72px;height:72px;border-top:2px solid var(--teal);border-left:2px solid var(--teal)}
.ab-badge{position:absolute;bottom:-16px;right:-16px;background:var(--teal2);color:#050E14;padding:12px 20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ab-text .ey{margin-bottom:14px}
.ab-h{font-family:"Cormorant Garamond",serif;font-size:clamp(30px,4vw,48px);font-weight:600;line-height:1.15;margin-bottom:26px}
.ab-h em{font-style:italic;color:var(--teal)}
.ab-p{font-size:15px;color:rgba(237,244,242,.82);line-height:1.85;margin-bottom:16px;font-weight:350}

/* MUSIC */
#music{position:relative}
#music::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 80% 50%,rgba(30,200,184,.05) 0%,transparent 60%);pointer-events:none}
.mu-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:48px}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:3px;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.vid-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.tracklist{background:var(--deep);border:1px solid var(--border);border-radius:3px;overflow:hidden;margin-top:20px}
.tl-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sc-dot{width:32px;height:32px;background:#FF5500;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.tl-meta{flex:1}.tl-title{font-size:13px;font-weight:500}.tl-sub{font-size:11px;color:var(--muted)}
.abars{display:flex;gap:2px;align-items:flex-end;height:16px}
.bar{width:3px;background:var(--teal);border-radius:1px;animation:barD .8s ease-in-out infinite alternate}
.bar:nth-child(1){height:6px;animation-delay:0s}.bar:nth-child(2){height:12px;animation-delay:.1s}.bar:nth-child(3){height:8px;animation-delay:.15s}.bar:nth-child(4){height:14px;animation-delay:.05s}.bar:nth-child(5){height:5px;animation-delay:.2s}
@keyframes barD{from{transform:scaleY(1);opacity:.7}to{transform:scaleY(.3);opacity:1}}
.track{display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:4px;transition:background .15s;text-decoration:none;color:inherit;margin:6px 10px}
.track:hover{background:rgba(255,255,255,.05)}
.tn{font-size:11px;color:var(--muted);width:18px;text-align:center}
.tt{width:36px;height:36px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.ti{flex:1}.ti-name{font-size:13px;color:var(--text);font-weight:400;line-height:1.3}.ti-artist{font-size:11px;color:var(--muted);margin-top:2px}
.mu-side{display:flex;flex-direction:column;gap:16px}
.mu-photo{width:100%;border-radius:3px;overflow:hidden;border:1px solid var(--border);position:relative}
.mu-photo img{width:100%;display:block;object-fit:cover}
.mu-photo-label{position:absolute;bottom:0;left:0;right:0;padding:20px 18px 18px;background:linear-gradient(to top,rgba(7,5,14,.88),transparent);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;color:var(--sand)}
.plat-card{background:linear-gradient(135deg,var(--deep) 0%,rgba(9,26,38,.8) 100%);border:1px solid var(--border);border-radius:10px;padding:20px 22px;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:16px;transition:all .3s;position:relative;overflow:hidden}
.plat-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;border-radius:10px}
.plat-card.sc::before{background:linear-gradient(135deg,rgba(255,85,0,.08),transparent)}
.plat-card.yt::before{background:linear-gradient(135deg,rgba(255,0,0,.08),transparent)}
.plat-card.wa::before{background:linear-gradient(135deg,rgba(37,211,102,.08),transparent)}
.plat-card.sp::before{background:linear-gradient(135deg,rgba(29,185,84,.06),transparent)}
.plat-card:hover::before{opacity:1}
.plat-card.sc:hover{border-color:rgba(255,85,0,.5);box-shadow:0 8px 32px rgba(255,85,0,.15);transform:translateY(-2px)}
.plat-card.yt:hover{border-color:rgba(255,0,0,.5);box-shadow:0 8px 32px rgba(255,0,0,.15);transform:translateY(-2px)}
.plat-card.wa:hover{border-color:rgba(37,211,102,.5);box-shadow:0 8px 32px rgba(37,211,102,.15);transform:translateY(-2px)}
.plat-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s}
.plat-card:hover .plat-icon{transform:scale(1.08)}
.plat-icon.sc-i{background:linear-gradient(135deg,#FF5500,#FF8800);box-shadow:0 4px 16px rgba(255,85,0,.35)}
.plat-icon.yt-i{background:linear-gradient(135deg,#CC0000,#FF0000);box-shadow:0 4px 16px rgba(255,0,0,.3)}
.plat-icon.wa-i{background:linear-gradient(135deg,#128C7E,#25D366);box-shadow:0 4px 16px rgba(37,211,102,.3)}
.plat-icon.sp-i{background:linear-gradient(135deg,#1a1a1a,#282828);box-shadow:0 4px 16px rgba(0,0,0,.3);opacity:.5}
.plat-l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plat-n{font-family:"Cormorant Garamond",serif;font-size:21px;font-weight:600;margin-top:2px}
.plat-arr{margin-left:auto;color:var(--muted);font-size:20px;transition:all .3s}
.plat-card.sc:hover .plat-arr{color:#FF5500;transform:translateX(5px)}
.plat-card.yt:hover .plat-arr{color:#FF0000;transform:translateX(5px)}
.plat-card.wa:hover .plat-arr{color:#25D366;transform:translateX(5px)}
.soon-pill{margin-left:auto;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--faint);border:1px solid var(--border);padding:3px 9px;border-radius:20px}

/* EVENTS */
#events{background:linear-gradient(180deg,var(--night) 0%,#071828 100%)}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;margin-top:56px}
.ev-card{background:var(--deep);border:1px solid var(--border);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:all .3s}
.ev-card:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.35);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ev-banner{height:220px;position:relative;overflow:hidden}
.ev-banner img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .5s}
.ev-card:hover .ev-banner img{transform:scale(1.05)}
.ev-bov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,5,14,.15) 0%,rgba(7,5,14,.6) 100%)}
.ev-date-badge{position:absolute;top:14px;left:14px;background:var(--teal2);color:#050E14;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 12px;border-radius:2px}
.ev-loc-badge{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);color:var(--sand);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:2px;backdrop-filter:blur(8px)}
.ev-body{padding:26px 28px 28px;flex:1;display:flex;flex-direction:column}
.ev-venue{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:8px}
.ev-name{font-family:"Cormorant Garamond",serif;font-size:26px;font-weight:600;color:var(--text);line-height:1.2;margin-bottom:12px}
.ev-desc{font-size:13px;color:rgba(237,244,242,.75);line-height:1.75;flex:1;font-weight:350}
.ev-foot{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.ev-price-n{font-family:"Bebas Neue",sans-serif;font-size:30px;color:var(--teal);letter-spacing:.04em;line-height:1}
.ev-price-l{font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.ev-btn{background:linear-gradient(135deg,var(--teal2),var(--teal));color:#050E14;padding:11px 24px;border-radius:3px;text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;transition:all .25s;box-shadow:0 4px 16px rgba(30,200,184,.25)}
.ev-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(30,200,184,.45)}

/* BOOKING */
#booking{position:relative;overflow:hidden}
#booking::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(30,200,184,.08) 0%,transparent 55%);pointer-events:none}
.bk-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.bk-left{}
.bk-photo{width:100%;aspect-ratio:3/4;border-radius:3px;overflow:hidden;border:1px solid var(--border);position:relative;margin-bottom:36px}
.bk-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.bk-photo-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,5,14,.88) 100%)}
.bk-photo-text{position:absolute;bottom:24px;left:24px;right:24px}
.bk-photo-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.bk-photo-q{font-family:"Cormorant Garamond",serif;font-size:21px;font-style:italic;color:var(--text);line-height:1.35}
.bk-info .ey{margin-bottom:14px}
.bk-h{font-family:"Cormorant Garamond",serif;font-size:clamp(28px,4vw,46px);font-weight:600;line-height:1.15;margin-bottom:22px}
.bk-h em{font-style:italic;color:var(--teal)}
.bk-p{font-size:15px;color:rgba(237,244,242,.82);line-height:1.85;margin-bottom:32px;font-weight:350}
.bk-details{display:flex;flex-direction:column;gap:14px}
.bk-det{display:flex;align-items:flex-start;gap:14px;padding:15px 18px;background:var(--faint);border:1px solid var(--border);border-radius:3px}
.det-icon{font-size:18px;flex-shrink:0;margin-top:2px}
.det-l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:3px;font-weight:500}
.det-t{font-size:13px;color:var(--muted);line-height:1.5}
.bk-form{background:var(--deep);border:1px solid var(--border);border-radius:3px;padding:40px}
.form-title{font-family:"Cormorant Garamond",serif;font-size:26px;font-weight:600;margin-bottom:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:500}
.form-input,.form-select,.form-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:3px;padding:13px 16px;color:var(--text);font-family:"Jost",sans-serif;font-size:14px;font-weight:300;transition:border-color .2s;outline:none;appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--teal)}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(245,237,220,.2)}
.form-select option{background:#1A0F2E;color:var(--text)}
.form-textarea{resize:vertical;min-height:100px;line-height:1.6}
.form-submit{width:100%;margin-top:8px}
.form-note{text-align:center;font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:.04em}
.form-success{display:none;text-align:center;padding:48px 20px}
.fs-icon{font-size:52px;margin-bottom:16px}
.fs-title{font-family:"Cormorant Garamond",serif;font-size:28px;font-weight:600;color:var(--teal);margin-bottom:10px}
.fs-body{font-size:14px;color:var(--muted)}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:52px;max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.ft-brand{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:600;letter-spacing:.04em}
.ft-brand{color:#EDF4F2!important;text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.ft-brand span{color:#EDF4F2!important}
.ft-links{display:flex;gap:28px;list-style:none}
.ft-links a{font-size:11px;color:var(--muted);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.ft-links a:hover{color:var(--teal)}
.ft-social{display:flex;gap:12px}
.soc{width:48px;height:48px;border:1px solid rgba(255,255,255,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .3s;background:rgba(255,255,255,.04)}
.soc:hover{transform:translateY(-3px)}
.soc-ig{color:#E1306C}
.soc-ig:hover{border-color:rgba(225,48,108,.5);background:rgba(225,48,108,.12);box-shadow:0 6px 20px rgba(225,48,108,.25)}
.soc-yt{color:#FF0000}
.soc-yt:hover{border-color:rgba(255,0,0,.5);background:rgba(255,0,0,.12);box-shadow:0 6px 20px rgba(255,0,0,.25)}
.soc-sc{color:#FF5500}
.soc-sc:hover{border-color:rgba(255,85,0,.5);background:rgba(255,85,0,.12);box-shadow:0 6px 20px rgba(255,85,0,.25)}
.soc-wa{color:#25D366}
.soc-wa:hover{border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.12);box-shadow:0 6px 20px rgba(37,211,102,.25)}
.ft-copy{width:100%;text-align:center;font-size:11px;color:rgba(245,237,220,.18);letter-spacing:.1em;padding-top:24px;border-top:1px solid var(--border)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spulse{0%,100%{opacity:.4}50%{opacity:1}}

/* RESPONSIVE */
@media(max-width:960px){
  nav,nav.scrolled{padding:18px 24px}
  .nav-links{display:none}
  .ham{display:flex}
  .sec{padding:80px 24px}
  .sec-wide .inner{padding:0 24px}
  footer{padding:40px 24px;flex-direction:column;align-items:flex-start;gap:24px}
  .ft-links{flex-wrap:wrap;gap:16px}
  .ft-social{margin-top:8px}
  .ab-grid{grid-template-columns:1fr;gap:40px}
  .ab-photo{max-width:420px;margin:0 auto}
  .mu-grid{grid-template-columns:1fr}
  .mu-photo{max-height:320px;object-fit:cover}
  .bk-grid{grid-template-columns:1fr;gap:40px}
  .bk-form{padding:28px 22px}
  .form-row{grid-template-columns:1fr}
  .ev-grid{grid-template-columns:1fr}
  .plat-list{grid-template-columns:1fr}
  .wave-divider svg{height:50px}
}

@media(max-width:768px){
  .h-title{font-size:clamp(60px,18vw,120px)}
  .sec-title{font-size:clamp(28px,6vw,48px)}
  .ab-h{font-size:clamp(28px,7vw,52px)}
  .bk-h{font-size:clamp(28px,7vw,52px)}
  .sec{padding:64px 20px}
  .bk-photo{display:none}
  .mu-sidebar{padding:24px}
  .plat-card{padding:16px 18px}
  .plat-icon{width:44px;height:44px}
  .ev-card{padding:24px}
}

@media(max-width:520px){
  .h-ctas{flex-direction:column;align-items:center}
  .h-ctas .btn{width:100%;max-width:300px;text-align:center}
  .ab-photo{max-width:100%}
  .ab-corner,.ab-badge{display:none}
  .scroll-hint{display:none}
  .soc{width:42px;height:42px}
  .soc svg{width:18px;height:18px}
  footer{gap:20px}
  .ft-links{gap:12px;font-size:11px}
  .wave-divider{display:none}
  .palm-left,.palm-right{opacity:.15}
  .h-ctas .btn{width:100%;max-width:280px}
  .gs{grid-template-columns:1fr}
  .bk-photo{display:none}
}

/* YT CARD */
.yt-card{display:block;position:relative;width:100%;aspect-ratio:16/9;border-radius:3px;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.5);text-decoration:none}
.yt-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.yt-card:hover .yt-thumb{transform:scale(1.03)}
.yt-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:background .25s}
.yt-card:hover .yt-overlay{background:rgba(0,0,0,.2)}
.yt-play{width:64px;height:64px;background:rgba(255,0,0,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.yt-card:hover .yt-play{transform:scale(1.1);background:rgba(255,0,0,1)}
.yt-badge{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:3px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(8px)}

/* TROPICAL ELEMENTS */
.palm-left,.palm-right{position:absolute;bottom:0;pointer-events:none;z-index:1;opacity:.25}
.palm-left{left:-20px;transform-origin:bottom left}
.palm-right{right:-20px;transform-origin:bottom right;transform:scaleX(-1)}

/* Wave dividers */
.wave-divider{line-height:0;overflow:hidden;position:relative;z-index:4}
.wave-divider svg{display:block;width:100%;height:80px}

/* Sun glow on hero */
.sun-glow{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none}
.sun-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,108,.18) 0%,rgba(30,200,184,.08) 50%,transparent 70%);animation:sunPulse 4s ease-in-out infinite}
@keyframes sunPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}

/* Horizon line on hero */
.horizon-line{position:absolute;bottom:38%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(30,200,184,.3),rgba(201,168,108,.4),rgba(30,200,184,.3),transparent);z-index:1;filter:blur(1px)}

/* Water ripple texture on sections */
.ripple-bg{position:absolute;inset:0;pointer-events:none;opacity:.03;background-image:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(30,200,184,.5) 40px,rgba(30,200,184,.5) 41px)}

/* Floating leaf accents */
.leaf-accent{position:absolute;pointer-events:none;opacity:.08;z-index:0}