/* ============================================================
   OCEAN 99 — Siddiqsons Limited
   Shared brand system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&family=Space+Mono:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;600;700&display=swap');

:root{
  /* ---- core palette ---- */
  --ink:        #0c1014;   /* near-black, cool charcoal */
  --ink-2:      #141b22;
  --navy:       #0f2740;   /* deep ocean navy */
  --navy-2:     #163350;
  --royal:      #1d4585;   /* the wordmark blue */
  --royal-bri:  #2a5cab;
  --royal-deep: #122c57;
  --gold:       #c79a4c;   /* golden-hour amber */
  --gold-bri:   #ddb567;
  --gold-deep:  #9a7430;

  /* peacock gradient (Siddiqsons mark) */
  --peacock: linear-gradient(150deg,#c6dd9b 0%,#8fcabf 45%,#5aa6d4 100%);
  --peacock-text: linear-gradient(120deg,#a9c878,#6cbcb6 55%,#4f9fff);

  /* ---- light surfaces ---- */
  --paper:      #f5f1e9;   /* warm off-white */
  --paper-2:    #ede7da;
  --paper-card: #fbf9f4;
  --line:       rgba(18,28,44,.12);
  --line-soft:  rgba(18,28,44,.07);
  --text:       #1c2128;
  --text-soft:  #4f5660;
  --text-mut:   #828a93;

  /* ---- dark surfaces ---- */
  --d-bg:       #0c1014;
  --d-bg-2:     #11181f;
  --d-card:     #151d26;
  --d-line:     rgba(255,255,255,.10);
  --d-line-soft:rgba(255,255,255,.06);
  --d-text:     #f4f3ee;
  --d-soft:     #b3bac3;
  --d-mut:      #79828d;

  /* ---- type ---- */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;
  --urdu:  'Noto Nastaliq Urdu', serif;

  --maxw: 1240px;
  --r:    14px;     /* radius */
  --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--gold);color:#fff}

/* ---------- typography helpers ---------- */
.serif{font-family:var(--serif)}
.urdu{font-family:var(--urdu);direction:rtl;line-height:2.1}
.kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:400;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.015em;
  font-size:clamp(2.6rem,6vw,5.4rem);
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.section{padding-block:clamp(72px,11vw,140px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-deep);
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:500;font-size:.92rem;letter-spacing:.02em;
  padding:.92em 1.6em;border-radius:100px;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#1a1407}
.btn-gold:hover{background:var(--gold-bri);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(199,154,76,.6)}
.btn-royal{background:var(--royal);color:#fff}
.btn-royal:hover{background:var(--royal-bri);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(29,69,133,.55)}
.btn-ghost{border:1px solid currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:currentColor}
.btn-ghost.on-dark:hover{color:var(--ink)}
.btn-ghost.on-light:hover{color:#fff}
.btn-lg{padding:1.05em 2em;font-size:1rem}
.btn-arrow{transition:transform .35s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ---------- chip / tag ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;padding:.4em .85em;border-radius:100px;
  border:1px solid var(--line);color:var(--text-soft);background:var(--paper-card);
}
.chip-gold{background:rgba(199,154,76,.12);border-color:rgba(199,154,76,.32);color:var(--gold-deep)}
.chip-green{background:rgba(90,160,120,.13);border-color:rgba(90,160,120,.34);color:#3f7a55}
.chip-red{background:rgba(190,70,70,.1);border-color:rgba(190,70,70,.3);color:#a64545}
.chip-blue{background:rgba(29,69,133,.1);border-color:rgba(29,69,133,.28);color:var(--royal)}

/* ---------- nav (marketing) ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,48px);
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(12,16,20,.82);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--d-line);padding-top:12px;padding-bottom:12px;
}
.nav-logo{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{
  font-size:.86rem;letter-spacing:.04em;color:var(--d-soft);font-weight:400;
  position:relative;padding:4px 0;transition:color .3s;
}
.nav-link:hover{color:var(--d-text)}
.nav-link::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav-link:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:18px}
/* mobile hamburger + slide-in menu */
.nav-burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--d-line);color:var(--d-text);align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(255,255,255,.04)}
.nav-burger span{display:block;width:18px;height:1.6px;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:79;background:rgba(10,14,18,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:88px clamp(24px,7vw,48px) 40px;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .4s}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a.mm-link{font-family:var(--serif);font-size:1.9rem;color:var(--d-text);padding:14px 0;border-bottom:1px solid var(--d-line-soft);display:flex;justify-content:space-between;align-items:center}
.mobile-menu a.mm-link span{font-size:.9rem;color:var(--gold-bri)}
.mobile-menu .mm-foot{margin-top:auto;display:grid;gap:12px}
.mobile-menu .mm-foot .btn{width:100%}

/* login / account button in nav */
.nav-login{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--d-soft);border:1px solid var(--d-line);border-radius:100px;padding:.55em 1.1em;transition:all .3s}
.nav-login:hover{color:var(--d-text);border-color:var(--gold)}
.nav-login svg{width:15px;height:15px}
.nav.scrolled .nav-login,.nav .nav-login{color:var(--d-soft)}
.account-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--d-line);border-radius:100px;padding:.4em .5em .4em .9em;font-size:.84rem;color:var(--d-text);transition:border-color .3s}
.account-chip:hover{border-color:var(--gold)}
.account-chip .ac-av{width:28px;height:28px;border-radius:50%;background:var(--peacock);display:grid;place-items:center;font-size:.72rem;font-weight:600;color:#0c1014}
.lang-toggle{
  display:flex;align-items:center;border:1px solid var(--d-line);border-radius:100px;overflow:hidden;font-size:.78rem;
}
.lang-toggle button{padding:.45em .9em;color:var(--d-mut);transition:all .3s}
.lang-toggle button.active{background:var(--gold);color:#1a1407}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--d-soft);padding-block:72px 36px}
.footer a:hover{color:var(--gold-bri)}

/* ---------- utility ---------- */
.divider{height:1px;background:var(--line);border:0}
.muted{color:var(--text-mut)}
.center{text-align:center}
.grad-text{
  background:var(--peacock);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* film grain / noise overlay helper */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ SHARED APP SHELL (tour / booking / crm) ============ */
.appbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px clamp(18px,3vw,32px);
  background:rgba(12,16,20,.9);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--d-line);
}
.appbar.light{background:rgba(251,249,244,.92);border-bottom-color:var(--line)}
.appbar-logo{height:26px}
.appbar-left{display:flex;align-items:center;gap:22px}
.appbar-back{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--d-soft);transition:color .3s}
.appbar-back:hover{color:var(--gold-bri)}
.appbar.light .appbar-back{color:var(--text-soft)}
.appbar.light .appbar-back:hover{color:var(--royal)}
.appbar-title{font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--d-mut)}
.appbar.light .appbar-title{color:var(--text-mut)}
.appbar-right{display:flex;align-items:center;gap:14px}

.legend{display:flex;gap:18px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--d-soft)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.dot-available{background:#6fb98a}
.dot-reserved{background:var(--gold)}
.dot-sold{background:#7a8390}
.bg-available{background:#6fb98a}
.bg-reserved{background:var(--gold)}
.bg-sold{background:#7a8390}
.txt-available{color:#4f9a6e}
.txt-reserved{color:var(--gold-deep)}
.txt-sold{color:#6b747f}

/* ============ LIQUID GLASS SYSTEM ============ */
.glass{
  position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.40));
  backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);
  border:1px solid rgba(255,255,255,.62);
  border-radius:26px;
  box-shadow:0 10px 40px -16px rgba(15,39,64,.20), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -16px 30px -24px rgba(15,39,64,.18);
  overflow:hidden;
}
.glass::before{
  content:'';position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),transparent);opacity:.7;
}
.glass-dark{
  position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.15);
  border-radius:26px;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -20px 40px -30px rgba(255,255,255,.10);
  overflow:hidden;
}
.glass-dark::before{
  content:'';position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
}
.glass-hover{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.glass-hover:hover{transform:translateY(-6px)}
.glass:hover.glass-hover{box-shadow:0 26px 64px -24px rgba(15,39,64,.34), inset 0 1px 0 rgba(255,255,255,.85)}
.glass-dark:hover.glass-hover{box-shadow:0 30px 70px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.30);border-color:rgba(255,255,255,.26)}

/* ambient drifting colour blobs — the 'liquid' the glass refracts */
.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.blob-green{background:radial-gradient(circle,#bce09a,transparent 70%)}
.blob-teal{background:radial-gradient(circle,#7fc9bf,transparent 70%)}
.blob-blue{background:radial-gradient(circle,#5a9ed6,transparent 70%)}
.blob-gold{background:radial-gradient(circle,#e3bd72,transparent 70%)}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,50px) scale(1.18)}}
.blob.a1{animation:drift1 18s ease-in-out infinite}
.blob.a2{animation:drift2 22s ease-in-out infinite}
.blob.a3{animation:drift3 26s ease-in-out infinite}

/* ============ CRO: sticky conversion bar + WhatsApp float + scarcity ============ */
.cro-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(110%);
  transition:transform .5s var(--ease);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px clamp(16px,4vw,40px);
  background:rgba(12,16,20,.86);backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--d-line);
}
.cro-bar.show{transform:none}
.cro-bar .cro-msg{display:flex;align-items:center;gap:14px;color:var(--d-text);font-size:.92rem;min-width:0}
.cro-bar .cro-msg b{font-family:var(--serif);font-size:1.15rem;font-weight:600}
.cro-bar .cro-msg .ping{width:9px;height:9px;border-radius:50%;background:#6fb98a;box-shadow:0 0 0 0 rgba(111,185,138,.6);animation:livePing 2s infinite;flex-shrink:0}
@keyframes livePing{0%{box-shadow:0 0 0 0 rgba(111,185,138,.6)}70%{box-shadow:0 0 0 8px rgba(111,185,138,0)}100%{box-shadow:0 0 0 0 rgba(111,185,138,0)}}
.cro-bar .cro-act{display:flex;gap:10px;flex-shrink:0}
@media(max-width:620px){.cro-bar .cro-msg span.hide-sm{display:none}}

.wa-float{
  position:fixed;right:20px;bottom:84px;z-index:71;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);transition:transform .35s var(--ease);
}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px}

.scarcity{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;letter-spacing:.04em;
  padding:.5em 1em;border-radius:100px;background:rgba(199,154,76,.14);border:1px solid rgba(199,154,76,.36);color:var(--gold-deep)}
.scarcity .ping{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:livePing 2s infinite}

/* funnel progress steps (booking) */
.funnel{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.fstep{display:flex;align-items:center;gap:11px;color:var(--text-mut);font-size:.86rem}
.fstep .fn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.82rem;font-weight:600;transition:all .4s var(--ease);flex-shrink:0}
.fstep.active{color:var(--text)}
.fstep.active .fn{background:var(--royal);border-color:var(--royal);color:#fff}
.fstep.done .fn{background:#6fb98a;border-color:#6fb98a;color:#fff}
.fstep.done{color:var(--text-soft)}
.fline{width:38px;height:1.5px;background:var(--line);margin:0 12px}
.fline.done{background:#6fb98a}
@media(max-width:640px){.fstep .flabel{display:none}.fline{width:20px;margin:0 6px}}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#c3bba9;border-radius:10px;border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--royal)}

/* ============ FINAL POLISH: scroll progress, tilt, count-up, page intro ============ */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--royal),var(--gold) 60%,var(--gold-bri));
  box-shadow:0 0 12px rgba(199,154,76,.5);transition:width .12s linear;pointer-events:none}

/* 3D tilt — JS sets --rx/--ry; default flat */
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transform-style:preserve-3d;transition:transform .5s var(--ease)}
[data-tilt].tilting{transition:transform .08s ease-out}
/* keep tilt transform winning over .glass-hover:hover translate */
.glass-hover[data-tilt]:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
[data-tilt] .tilt-lift{transform:translateZ(28px);transform-style:preserve-3d}

/* count-up keeps small suffix styling */
[data-count] small{font-size:.5em;color:var(--gold);font-style:italic;vertical-align:super}

/* gentle page intro on load (overridden by reduced-motion) */
.page-intro{opacity:0;animation:pageIn .7s var(--ease) forwards}
@keyframes pageIn{to{opacity:1}}

/* nicer focus ring for a11y / keyboard */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* image fade-in as they decode */
img.lazy-fade{opacity:0;transition:opacity .8s var(--ease)}
img.lazy-fade.ready{opacity:1}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-right .lang-toggle{display:none}
  .nav-right .btn{display:none}
  .nav-right .nav-login span.nl-txt{display:none}
  .nav-right .nav-login{padding:.55em .8em}
}
@media (max-width:480px){
  .btn-lg{padding:.95em 1.5em;font-size:.94rem}
  .wa-float{width:50px;height:50px;bottom:78px;right:14px}
  .wa-float svg{width:26px;height:26px}
}
@media (hover:none){
  [data-tilt]{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-progress,[data-tilt]{transition:none}
  .hero-bg img{animation:none!important}
}