/* =====================================================================
   360 HOTEL SOLUTIONS — style.css
   Base + desktop styles. All responsive rules live in mobile.css.
   No inline CSS in the HTML — every style is a class here.
   ===================================================================== */

:root {
  --navy:#020F4D;--blue:#0E63FF;--cyan:#1CCFFF;--purple:#7B2EFF;
  --bg:#F8FAFF;--white:#FFFFFF;--gray:#E8EDF7;
  --muted:#6B7494;--muted-light:#97A3C9;
  --grad:linear-gradient(120deg,var(--purple) 0%,var(--blue) 55%,var(--cyan) 100%);
  --radius:20px;
  --tint-blue:#F2F6FF;--tint-purple:#F8F5FF;--tint-cyan:#F1FBFF;--tint-green:#F0FDF4;
  --footer-bg:#0A1638;
  /* whatsapp */
  --wa-green:#25D366;--wa-dark:#128C7E;--wa-bg:#ECE5DD;--wa-sent:#DCF8C6;--wa-recv:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--white);color:var(--navy);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body.nav-open{overflow:hidden;}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-0.02em;}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,32px);}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}

/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:200;background:rgba(248,250,255,0.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.logo img{height:36px;width:auto;}
nav.main-nav{display:flex;align-items:center;gap:6px;}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--navy);padding:10px 14px;border-radius:10px;white-space:nowrap;}
.nav-link:hover{background:rgba(14,99,255,0.06);}
.nav-link svg{width:14px;height:14px;transition:transform .2s;color:var(--muted);flex-shrink:0;}
.nav-item:hover .nav-link svg{transform:rotate(180deg);}
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:white;border-radius:18px;border:1px solid var(--gray);box-shadow:0 24px 60px -16px rgba(2,15,77,0.18);padding:24px;width:min(760px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(3,1fr);gap:4px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;}
.mega.mega-single{width:min(360px,calc(100vw - 32px));grid-template-columns:1fr;padding:18px;}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-col{padding:6px;}
.mega-link{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;}
.mega-link:hover{background:var(--bg);}
.mega-link-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.mega-link-icon.s{background:rgba(14,99,255,0.1);color:var(--blue);}
.mega-link-icon.g{background:rgba(123,46,255,0.1);color:var(--purple);}
.mega-link-icon.o{background:rgba(28,207,255,0.12);color:#0e9fc9;}
.mega-link-text h5{font-size:13.5px;font-weight:700;margin-bottom:2px;}
.mega-link-text p{font-size:11.5px;color:var(--muted);line-height:1.4;}
.nav-cta{background:var(--grad);color:white;padding:11px 22px;border-radius:100px;font-size:14px;font-weight:700;margin-left:10px;white-space:nowrap;}

/* hamburger — hidden on desktop, shown in mobile.css */
.nav-toggle{display:none;}
/* mobile drawer + overlay — hidden on desktop, defined in mobile.css */
.mobile-nav{display:none;}
.nav-overlay{display:none;}

/* ===== SHARED ===== */
.label-tag{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:16px;}
.label-tag::before{content:'';width:16px;height:2px;background:var(--grad);border-radius:2px;}
.label-tag.center{justify-content:center;}
.label-tag.cyan{color:var(--cyan);}
.btn-primary{background:var(--grad);color:white;padding:15px 28px;border-radius:100px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 30px -8px rgba(14,99,255,0.45);transition:transform .15s,box-shadow .15s;border:none;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px -8px rgba(14,99,255,0.55);}
.btn-secondary{border:1.5px solid var(--gray);color:var(--navy);background:white;padding:15px 28px;border-radius:100px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}

/* ===== HERO ===== */
.hero{position:relative;padding:clamp(56px,10vw,96px) 0 60px;overflow:hidden;background:var(--white);}
.hero-glow{position:absolute;top:-200px;right:-200px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(123,46,255,0.08) 0%,rgba(14,99,255,0.05) 45%,transparent 70%);pointer-events:none;}
.hero-glow.two{top:200px;left:-250px;right:auto;width:500px;height:500px;background:radial-gradient(circle,rgba(28,207,255,0.07) 0%,transparent 70%);}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative;z-index:1;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:white;padding:9px 18px 9px 9px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:24px;box-shadow:0 8px 24px -8px rgba(2,15,77,0.4);}
.eyebrow .dot-wrap{width:24px;height:24px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;}
.eyebrow .dot-wrap svg{width:13px;height:13px;color:white;}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-0.025em;margin-bottom:22px;}
.hero h1 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{font-size:clamp(16px,1.6vw,18.5px);color:var(--muted);max-width:480px;margin-bottom:32px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px;}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;}
.markets-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px;}
.hero-pill{display:inline-flex;align-items:center;gap:7px;background:white;border:1px solid var(--gray);padding:8px 14px;border-radius:100px;font-size:12.5px;font-weight:600;color:var(--navy);}
.hero-pill .ico{width:14px;height:14px;color:var(--blue);flex-shrink:0;}

/* ===== HERO VISUAL — floating stats + REAL WhatsApp phone ===== */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:540px;padding:0 50px;}

/* sleek ultra-thin phone shell */
.phone-shell{
  width:248px;position:relative;z-index:2;
  background:linear-gradient(160deg,#2c2c2c 0%,#111 100%);
  border-radius:46px;
  padding:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.12),0 0 0 1.5px #111,0 40px 80px -20px rgba(2,15,77,0.5),inset 0 1px 0 rgba(255,255,255,0.08);
}
/* dynamic island */
.phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:66px;height:20px;background:#111;border-radius:11px;z-index:4;}
.phone-screen-wrap{background:#f0f0f0;border-radius:41px;overflow:hidden;height:486px;display:flex;flex-direction:column;position:relative;}

/* status bar — proper iOS layout */
.wa-statusbar{height:44px;background:var(--wa-dark);display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 6px;font-size:9.5px;color:white;font-weight:700;}
.wa-statusbar .live-clock{font-size:9.5px;}
.wa-sb-icons{display:flex;gap:5px;align-items:center;}
.wa-signal{display:flex;align-items:flex-end;gap:1px;height:9px;}
.wa-signal i{display:block;width:2px;border-radius:1px;background:white;}
.wa-signal i:nth-child(1){height:3px;background:rgba(255,255,255,0.6);}
.wa-signal i:nth-child(2){height:5px;background:rgba(255,255,255,0.8);}
.wa-signal i:nth-child(3){height:7px;}
.wa-signal i:nth-child(4){height:9px;}
.wa-battery{display:flex;align-items:center;gap:1px;}
.wa-battery-body{width:18px;height:8px;border:1.5px solid white;border-radius:2px;padding:1px;display:flex;align-items:center;}
.wa-battery-fill{width:75%;height:100%;background:white;border-radius:1px;}
.wa-battery-tip{width:2px;height:4px;background:rgba(255,255,255,0.6);border-radius:0 1px 1px 0;}

/* WhatsApp header */
.wa-header{background:var(--wa-dark);padding:8px 12px;display:flex;align-items:center;gap:10px;}
.wa-back{color:white;opacity:0.9;}
.wa-back svg{width:16px;height:16px;}
.wa-avatar{width:34px;height:34px;border-radius:50%;background:var(--wa-green);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:white;flex-shrink:0;}
.wa-contact{flex:1;}
.wa-name{font-size:13px;font-weight:700;color:white;line-height:1.2;}
.wa-online{font-size:10px;color:rgba(255,255,255,0.75);}
.wa-actions{display:flex;gap:12px;color:rgba(255,255,255,0.85);}
.wa-actions svg{width:17px;height:17px;}

/* WhatsApp chat body — scrollable so old messages move up */
.wa-body{flex:1;padding:8px 10px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;position:relative;scroll-behavior:smooth;}
.wa-body::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23ECE5DD'/%3E%3C/svg%3E");opacity:0.5;pointer-events:none;}

/* chat messages */
.wa-msg{max-width:80%;padding:6px 10px 4px;border-radius:10px;font-size:11.5px;line-height:1.45;position:relative;z-index:1;opacity:0;transform:translateY(6px);}
.wa-msg.recv{background:var(--wa-recv);align-self:flex-start;border-top-left-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.06);}
.wa-msg.sent{background:var(--wa-sent);align-self:flex-end;border-top-right-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.06);}
.wa-msg .wa-time{font-size:9px;color:rgba(0,0,0,0.45);float:right;margin-left:6px;margin-top:2px;}
.wa-msg.sent .wa-time{color:rgba(0,0,0,0.4);}
.wa-ticks{display:inline-block;color:#34B7F1;margin-left:2px;font-size:10px;}

/* system message */
.wa-system{align-self:center;background:rgba(0,0,0,0.12);color:rgba(0,0,0,0.65);font-size:9.5px;padding:3px 10px;border-radius:10px;position:relative;z-index:1;opacity:0;transform:translateY(6px);}

/* typing indicator */
.wa-typing{background:white;border-radius:10px;border-top-left-radius:3px;padding:8px 12px;align-self:flex-start;display:none;box-shadow:0 1px 1px rgba(0,0,0,0.06);position:relative;z-index:1;}
.wa-typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#999;margin:0 2px;animation:typingDot 1s infinite;}
.wa-typing span:nth-child(2){animation-delay:.2s;}
.wa-typing span:nth-child(3){animation-delay:.4s;}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-4px);}}

/* WhatsApp input bar */
.wa-inputbar{background:var(--wa-bg);padding:6px 8px;display:flex;align-items:center;gap:7px;border-top:1px solid rgba(0,0,0,0.06);}
.wa-input-emoji{position:relative;z-index:1;color:rgba(0,0,0,0.4);display:flex;}
.wa-input-pill{flex:1;background:white;border-radius:24px;padding:8px 12px;font-size:11px;color:#aaa;border:none;}
.wa-send{width:34px;height:34px;border-radius:50%;background:var(--wa-green);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-send svg{width:16px;height:16px;color:white;}

/* animate messages */
.wa-anim{animation:msgIn .35s ease forwards;}
@keyframes msgIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes rippleFade{0%{opacity:1;}100%{opacity:0;}}

/* WA chatbot quick-reply buttons */
.wa-qr{align-self:stretch;position:relative;z-index:1;margin-top:2px;}
.wa-qr-btn{display:block;width:100%;background:white;border:1.5px solid #25D366;color:#128C7E;font-size:11px;font-weight:700;padding:7px 10px;border-radius:8px;margin-bottom:5px;text-align:center;cursor:pointer;opacity:0;animation:msgIn .35s ease forwards;font-family:inherit;}
.wa-qr-btn.pay{background:#25D366;color:#fff;border:none;font-weight:800;font-size:12px;}
/* WA room option card */
.wa-room{background:white;border-radius:10px;overflow:hidden;max-width:88%;align-self:flex-start;box-shadow:0 1px 3px rgba(0,0,0,0.1);position:relative;z-index:1;opacity:0;animation:msgIn .35s ease forwards;}
.wa-room-img{height:64px;position:relative;}
.wa-room-img .grad{position:absolute;inset:0;}
.wa-room-img .grad.g1{background:linear-gradient(135deg,#128C7E,#25D366);}
.wa-room-img .grad.g2{background:linear-gradient(135deg,#1e40af,#3b82f6);}
.wa-room-img .grad.g3{background:linear-gradient(135deg,#7B2EFF,#0E63FF);}
.wa-room-img .lbl{position:absolute;bottom:4px;left:8px;font-size:9px;color:white;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.wa-room-info{padding:8px 10px 6px;}
.wa-room-name{font-size:11.5px;font-weight:700;color:#111;}
.wa-room-price{font-size:11px;color:#25D366;font-weight:700;}
.wa-room-btn{width:100%;background:#25D366;color:white;font-size:11px;font-weight:700;padding:7px;border:none;cursor:pointer;font-family:inherit;}

/* ===== INSTAGRAM AD PHASE (phone phase 1) ===== */
.ig-phase{position:absolute;inset:0;display:flex;flex-direction:column;z-index:5;background:#fafafa;transition:opacity .5s;}
.ig-statusbar{height:44px;background:#fff;display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 6px;font-size:9px;color:#111;font-weight:700;border-bottom:1px solid #eee;}
.ig-statusbar .live-clock{font-size:9px;}
.ig-status-icons{display:flex;gap:4px;align-items:center;}
.ig-feed{background:#fff;flex:1;display:flex;flex-direction:column;overflow:hidden;}
.ig-stories{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid #f0f0f0;}
.ig-story{display:flex;flex-direction:column;align-items:center;gap:3px;}
.ig-story-ring{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);padding:2px;}
.ig-story-ring.alt{background:linear-gradient(135deg,#f09433,#cc2366);}
.ig-story-inner{width:100%;height:100%;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#111;}
.ig-story-inner.g1{background:#888;}
.ig-story-inner.g2{background:#aab;}
.ig-story-label{font-size:8px;color:#333;}
.ig-post-head{padding:8px 10px 4px;display:flex;align-items:center;gap:7px;}
.ig-post-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#128C7E,#25D366);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:white;}
.ig-post-name{font-size:10px;font-weight:700;color:#111;}
.ig-post-sponsored{font-size:8.5px;color:#888;}
.ig-tap{cursor:pointer;position:relative;}
.ig-post-img{height:130px;position:relative;overflow:hidden;}
.ig-post-img-bg{position:absolute;inset:0;background:url('../images/stock/hotel-social-ad-mockup.webp') center/cover;}
.ig-post-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.45) 100%);}
.ig-post-caption{position:absolute;bottom:8px;left:10px;right:10px;}
.ig-post-title{font-size:13px;font-weight:800;color:white;text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.ig-post-sub{font-size:10px;color:rgba(255,255,255,0.9);text-shadow:0 1px 2px rgba(0,0,0,0.4);}
.ig-booknow-wrap{padding:8px 10px;border-bottom:1px solid #f0f0f0;}
.ig-booknow{background:#0861F2;color:white;border-radius:6px;padding:9px;text-align:center;font-size:12px;font-weight:700;letter-spacing:0.01em;}
.ig-ripple{display:none;position:absolute;inset:0;background:rgba(255,255,255,0.4);z-index:10;animation:rippleFade .4s ease forwards;}
.ig-actions{padding:6px 10px;display:flex;gap:12px;border-bottom:1px solid #f5f5f5;}
.ig-likes{padding:6px 10px;font-size:9.5px;color:#555;}
.ig-likes b{font-weight:700;color:#111;}
.ig-likes .wa-tag{color:#25D366;font-weight:700;}

/* ===== WHATSAPP CONVERSATION PHASE (phone phase 2) ===== */
.wa-phase{position:absolute;inset:0;display:flex;flex-direction:column;z-index:4;opacity:0;transition:opacity .5s;}

/* float pills */
.float-pills{display:contents;}
.float-pill{position:absolute;background:white;border-radius:14px;padding:10px 14px;box-shadow:0 10px 30px -8px rgba(2,15,77,0.18);z-index:3;display:flex;align-items:center;gap:9px;opacity:0;animation:float-in .6s ease forwards;white-space:nowrap;}
.float-pill .fp-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.float-pill .fp-icon svg{width:15px;height:15px;}
.float-pill .fp-num{font-size:15px;font-weight:800;line-height:1;}
.float-pill .fp-label{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}
.fp-1{top:18%;left:0;animation-delay:.6s;} .fp-1 .fp-icon{background:rgba(37,211,102,0.12);color:#25D366;}
.fp-2{bottom:22%;right:0;animation-delay:1s;} .fp-2 .fp-icon{background:rgba(123,46,255,0.1);color:var(--purple);}
.fp-3{top:54%;left:0;animation-delay:1.4s;} .fp-3 .fp-icon{background:rgba(14,99,255,0.1);color:var(--blue);}
@keyframes float-in{from{opacity:0;transform:translateY(14px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ===== PROBLEM ===== */
.problem{padding:80px 0 90px;background:var(--tint-blue);}
.problem-head{max-width:600px;margin:0 auto 52px;text-align:center;}
.problem-head h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.problem-card{background:white;border:1px solid var(--gray);border-radius:var(--radius);padding:32px 28px;transition:transform .2s,box-shadow .2s;}
.problem-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(2,15,77,0.12);}
.problem-card .stat{font-size:38px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px;}
.problem-card p{font-size:14.5px;color:var(--muted);line-height:1.6;}

/* ===== GROWTH JOURNEY — compact horizontal flow ===== */
.journey{padding:80px 0;background:var(--white);}
.journey-head{text-align:center;max-width:640px;margin:0 auto 52px;}
.journey-head h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;margin-bottom:14px;}
.journey-head p{color:var(--muted);font-size:16px;}
.journey-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;}
.journey-flow::before{content:'';position:absolute;top:36px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--blue),var(--purple),var(--cyan));z-index:0;transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.4,0,.2,1);}
.journey-flow.animated::before{transform:scaleX(1);}
.jf-step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;padding:0 6px;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;}
.jf-step.animated{opacity:1;transform:translateY(0);}
.jf-num{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:white;margin-bottom:14px;border:3px solid white;flex-shrink:0;position:relative;}
.jf-num::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid currentColor;opacity:0.2;}
.jf-card{background:white;border:1px solid var(--gray);border-radius:16px;padding:16px 12px;width:100%;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.jf-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -12px rgba(2,15,77,0.14);}
.jf-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:6px;display:inline-block;margin-bottom:8px;}
.jf-card h3{font-size:13.5px;font-weight:700;margin-bottom:6px;line-height:1.3;}
.jf-card p{font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.jf-svcs{display:flex;flex-wrap:wrap;gap:4px;}
.jf-svc{font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;}
.jf-1 .jf-num{background:var(--blue);} .jf-1 .jf-tag{background:rgba(14,99,255,0.1);color:var(--blue);} .jf-1 .jf-svc{background:rgba(14,99,255,0.08);color:var(--blue);}
.jf-2 .jf-num{background:#25D366;} .jf-2 .jf-tag{background:rgba(37,211,102,0.12);color:#16a34a;} .jf-2 .jf-svc{background:rgba(37,211,102,0.1);color:#16a34a;}
.jf-3 .jf-num{background:var(--purple);} .jf-3 .jf-tag{background:rgba(123,46,255,0.1);color:var(--purple);} .jf-3 .jf-svc{background:rgba(123,46,255,0.08);color:var(--purple);}
.jf-4 .jf-num{background:#D97706;} .jf-4 .jf-tag{background:rgba(217,119,6,0.1);color:#D97706;} .jf-4 .jf-svc{background:rgba(217,119,6,0.08);color:#D97706;}
.jf-5 .jf-num{background:#16a34a;} .jf-5 .jf-tag{background:rgba(22,163,74,0.12);color:#16a34a;} .jf-5 .jf-svc{background:rgba(22,163,74,0.1);color:#16a34a;}
.jf-step.spotlight .jf-card{transform:translateY(-6px);box-shadow:0 20px 40px -12px rgba(2,15,77,0.2);border-color:rgba(14,99,255,0.3);}
.jf-step.spotlight .jf-num{box-shadow:0 0 0 6px rgba(14,99,255,0.15);}

/* journey carousel dots — hidden on desktop */
.journey-dots{display:none;}

/* result highlight */
.journey-result{background:var(--navy);border-radius:18px;padding:24px 32px;margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.jr-text{color:white;font-size:16.5px;font-weight:600;line-height:1.4;max-width:560px;}
.jr-text span{color:var(--cyan);}
.jr-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;}
.jr-stat{text-align:center;flex-shrink:0;}
.jr-stat .jrs-num{font-size:28px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.jr-stat .jrs-label{font-size:11px;color:var(--muted-light);}

/* ===== CONCIERGE FLOW ===== */
.concierge{padding:90px 0;background:var(--tint-cyan);}
.concierge-head{text-align:center;max-width:620px;margin:0 auto 60px;}
.concierge-head h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;margin-bottom:16px;}
.concierge-head p{color:var(--muted);font-size:16.5px;line-height:1.65;}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.flow-step{background:white;border:1px solid var(--gray);border-radius:18px;padding:26px 22px;transition:transform .2s,box-shadow .2s;}
.flow-step:hover{transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(2,15,77,0.1);}
.flow-step-icon{width:42px;height:42px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:white;}
.flow-step h3{font-size:16.5px;margin-bottom:8px;}
.flow-step p{color:var(--muted);font-size:13.5px;line-height:1.55;}

/* ===== DASHBOARD ===== */
.dashboard-section{padding:90px 0;background:var(--tint-purple);}
.dash-head{text-align:center;max-width:600px;margin:0 auto 52px;}
.dash-head h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;margin-bottom:16px;}
.dash-head p{color:var(--muted);font-size:16.5px;}
.dash-frame{background:#0D1530;border-radius:24px;padding:clamp(10px,2vw,18px);box-shadow:0 50px 100px -30px rgba(2,15,77,0.35);}
.dash-titlebar{display:flex;align-items:center;gap:7px;padding:10px 6px 14px;}
.dash-dot{width:10px;height:10px;border-radius:50%;}
.dash-dot.r{background:#FF5F57;} .dash-dot.y{background:#FEBC2E;} .dash-dot.g{background:#28C840;}
.dash-body{background:var(--bg);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:200px 1fr;min-height:500px;}
.dash-sidebar{background:var(--navy);padding:24px 16px;display:flex;flex-direction:column;gap:4px;}
.dash-sb-logo{display:flex;align-items:center;gap:8px;padding:0 8px 22px;}
.dash-sb-logo .mark{width:22px;height:22px;border-radius:6px;background:var(--grad);}
.dash-sb-logo span{color:white;font-size:12px;font-weight:700;line-height:1.2;}
.dash-sb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:12.5px;color:var(--muted-light);font-weight:600;}
.dash-sb-item.active{background:rgba(14,99,255,0.18);color:white;}
.dash-sb-item svg{width:15px;height:15px;flex-shrink:0;}
.dash-main{padding:26px 28px;display:flex;flex-direction:column;gap:18px;}
.dash-main-head{display:flex;justify-content:space-between;align-items:center;}
.dash-main-head h4{font-size:18px;color:var(--navy);}
.dash-avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.dash-stat-card{background:white;border:1px solid var(--gray);border-radius:12px;padding:14px 16px;}
.dash-stat-card .dl{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.dash-stat-card .dv{font-size:19px;font-weight:800;color:var(--navy);}
.dash-stat-card .dv.up{color:#16A34A;}
.dash-stat-card .dtrend{font-size:10.5px;color:#16A34A;font-weight:600;margin-top:3px;}
.dash-charts{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;}
.dash-chart-card{background:white;border:1px solid var(--gray);border-radius:12px;padding:16px;}
.dash-chart-label{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:14px;}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:80px;}
.bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;}
.bar{width:100%;border-radius:6px 6px 0 0;background:var(--grad);min-height:4px;transition:height .3s;}
.bar.b1{height:38px;} .bar.b2{height:44px;} .bar.b3{height:40px;} .bar.b4{height:52px;} .bar.b5{height:58px;}
.bar.b6{height:70px;background:linear-gradient(180deg,#1CCFFF,#0E63FF);}
.bar-label{font-size:8.5px;color:var(--muted);font-weight:600;}
.guest-trend{display:flex;flex-direction:column;gap:8px;}
.gt-row{display:flex;align-items:center;gap:8px;}
.gt-label{font-size:11px;color:var(--muted);width:28px;font-weight:600;}
.gt-bar-bg{flex:1;height:8px;background:var(--gray);border-radius:4px;overflow:hidden;}
.gt-bar-fill{height:100%;border-radius:4px;background:var(--grad);}
.gt-bar-fill.direct{width:72%;}
.gt-bar-fill.ota{width:18%;background:var(--purple);}
.gt-bar-fill.walkin{width:10%;background:#D97706;}
.gt-val{font-size:10.5px;color:var(--navy);font-weight:700;width:24px;text-align:right;}
.dash-table{background:white;border:1px solid var(--gray);border-radius:12px;overflow:hidden;}
.dash-trow{display:grid;grid-template-columns:1.4fr 1fr 1fr 0.8fr;padding:11px 16px;font-size:12px;align-items:center;}
.dash-trow.head{background:var(--bg);font-weight:700;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;}
.dash-trow:not(.head){border-top:1px solid var(--gray);color:var(--navy);}
.dash-status{display:inline-block;padding:3px 9px;border-radius:6px;font-size:10.5px;font-weight:700;}
.dash-status.ok{background:rgba(22,163,74,0.12);color:#16A34A;}
.dash-status.pending{background:rgba(217,119,6,0.12);color:#D97706;}

/* mobile dashboard-in-phone — hidden on desktop, styled in mobile.css */
.dash-mobile{display:none;}

/* ===== SERVICES — colorful cards ===== */
.services{padding:90px 0;background:var(--tint-blue);}
.services-head{text-align:center;max-width:600px;margin:0 auto 56px;}
.services-head h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;}
.services-head p{color:var(--muted);font-size:16.5px;margin-top:14px;}
.services-head.tight{margin-bottom:0;}
.category-block{margin-bottom:56px;}
.category-block:last-child{margin-bottom:0;}
.category-head{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.category-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.category-icon.solutions{background:rgba(14,99,255,0.1);color:var(--blue);}
.category-icon.growth{background:rgba(123,46,255,0.1);color:var(--purple);}
.category-icon.operations{background:rgba(13,148,136,0.12);color:#0d9488;}
.category-head h3{font-size:21px;}
.category-head .cat-sub{font-size:13.5px;color:var(--muted);margin-top:2px;}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.service-card{background:white;border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;border:1px solid var(--gray);color:inherit;}
.service-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -16px rgba(2,15,77,0.18);}
.service-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}
.service-card-top{height:120px;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between;padding:14px 16px;background-size:cover;background-position:center;}
.service-card-top::before{content:'';position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;}
.service-card-top::after{content:'';position:absolute;inset:0;}
.sc-blue::after{background:linear-gradient(135deg,rgba(2,15,77,0.78) 0%,rgba(14,99,255,0.55) 100%);}
.sc-teal::after{background:linear-gradient(135deg,rgba(2,77,60,0.78) 0%,rgba(13,148,136,0.55) 100%);}
.sc-green::after{background:linear-gradient(135deg,rgba(2,60,20,0.78) 0%,rgba(37,211,102,0.50) 100%);}
.sc-purple::after{background:linear-gradient(135deg,rgba(45,2,77,0.78) 0%,rgba(123,46,255,0.55) 100%);}
.sc-pink::after{background:linear-gradient(135deg,rgba(77,2,50,0.78) 0%,rgba(219,39,119,0.55) 100%);}
.sc-indigo::after{background:linear-gradient(135deg,rgba(20,2,77,0.78) 0%,rgba(99,102,241,0.55) 100%);}
.sc-orange::after{background:linear-gradient(135deg,rgba(77,25,2,0.78) 0%,rgba(234,88,12,0.50) 100%);}
.sc-slate::after{background:linear-gradient(135deg,rgba(15,23,42,0.82) 0%,rgba(51,65,85,0.65) 100%);}
.sc-emerald::after{background:linear-gradient(135deg,rgba(2,77,40,0.80) 0%,rgba(5,150,105,0.55) 100%);}
.sc-cyan::after{background:linear-gradient(135deg,rgba(2,50,77,0.80) 0%,rgba(14,116,144,0.55) 100%);}
/* service card images */
.simg-1{background-image:url('../images/stock/hotel-website-service.webp');}
.simg-2{background-image:url('../images/stock/booking-engine-service.webp');}
.simg-3{background-image:url('../images/stock/whatsapp-ai-automation-service.webp');}
.simg-4{background-image:url('../images/stock/guest-crm-service.webp');}
.simg-5{background-image:url('../images/stock/search-engine-optimization-service.webp');}
.simg-6{background-image:url('../images/stock/social-media-marketing-service.webp');}
.simg-7{background-image:url('../images/stock/reputation-management-service.webp');}
.simg-8{background-image:url('../images/stock/influencer-marketing-service.webp');}
.simg-9{background-image:url('../images/stock/google-ads-service.webp');}
.simg-10{background-image:url('../images/stock/property-management-system-service.webp');}
.simg-11{background-image:url('../images/stock/channel-manager-service.webp');}
.simg-12{background-image:url('../images/stock/google-hotel-center-service.webp');}
.simg-13{background-image:url('../images/stock/point-of-sale-service.webp');}
.simg-14{background-image:url('../images/stock/ota-management-service.webp');}
.service-card-top-icon{position:relative;z-index:2;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,0.18);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;}
.service-card-top-icon svg{width:18px;height:18px;color:white;}
.service-card-body{padding:18px 18px 20px;flex:1;}
.service-card h4{font-size:15.5px;margin-bottom:6px;}
.service-card p{font-size:13px;color:var(--muted);line-height:1.55;}
.category-actions{display:flex;justify-content:center;margin-top:22px;}
.badge{position:relative;z-index:2;display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:white;background:rgba(255,255,255,0.22);backdrop-filter:blur(4px);padding:4px 10px;border-radius:6px;}

/* ===== WHY ONE PLATFORM ===== */
.why-band{padding:0 0 90px;background:var(--tint-blue);}
.why{background:var(--navy);color:white;padding:90px 0;border-radius:40px;margin:0 clamp(16px,3vw,32px);position:relative;overflow:hidden;}
.why::before{content:'';position:absolute;top:-150px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(123,46,255,0.2) 0%,transparent 70%);}
.why-inner{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,32px);position:relative;z-index:1;}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;}
.why-content h2{font-size:clamp(24px,3vw,34px);line-height:1.25;margin-bottom:18px;color:white;}
.why-content p{color:var(--muted-light);font-size:15.5px;line-height:1.7;margin-bottom:14px;}
.why-content p.lead{color:white;font-weight:600;}
.compare-table{background:rgba(255,255,255,0.05);border-radius:16px;border:1px solid rgba(255,255,255,0.1);overflow:hidden;}
.compare-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;}
.compare-row>div{padding:14px 18px;font-size:13px;}
.compare-row.head{background:rgba(0,0,0,0.2);}
.compare-row.head>div{color:white;font-weight:700;font-size:12px;}
.compare-row:not(.head){border-top:1px solid rgba(255,255,255,0.08);}
.compare-row>div:first-child{color:white;font-weight:500;}
.compare-row .no{color:var(--muted-light);}
.compare-row .yes{color:var(--cyan);font-weight:700;}
.compare-row.highlight{background:rgba(28,207,255,0.04);}

/* ===== CLIENTS ===== */
.clients{padding:80px 0;background:var(--tint-green);}
.clients-head{text-align:center;max-width:560px;margin:0 auto 44px;}
.clients-head h2{font-size:clamp(24px,2.8vw,32px);line-height:1.2;}
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.client-card{background:white;border:1px solid var(--gray);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;gap:14px;}
.client-logo-ph{width:48px;height:48px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:white;font-weight:800;font-size:16px;}
.client-card h5{font-size:14.5px;line-height:1.3;}
.client-card .loc{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.client-card .loc svg{width:12px;height:12px;}

/* clients auto-scroll carousel */
.clients-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.clients-track{display:flex;gap:20px;width:max-content;animation:marquee 32s linear infinite;}
.clients-marquee:hover .clients-track{animation-play-state:paused;}
.clients-track .client-card{flex:0 0 278px;}

/* ===== PARTNERS / OTA + PAYMENTS CAROUSEL ===== */
.partners{padding:72px 0;background:var(--white);overflow:hidden;}
.partners-head{text-align:center;max-width:620px;margin:0 auto 36px;}
.partners-head h2{font-size:clamp(22px,2.6vw,30px);line-height:1.2;}
.partners-head p{color:var(--muted);font-size:15px;margin-top:12px;}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee + .marquee{margin-top:16px;}
.marquee-track{display:flex;gap:16px;width:max-content;align-items:center;animation:marquee 30s linear infinite;}
.marquee-track.reverse{animation-direction:reverse;animation-duration:26s;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.partner-logo{flex:0 0 auto;width:174px;height:84px;padding:16px 22px;background:var(--white);border:1px solid var(--gray);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -14px rgba(2,15,77,0.25);}
.partner-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.partners-sub{text-align:center;font-size:12.5px;color:var(--muted-light);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:32px 0 16px;}
.partners-pay{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;}

/* ===== RESULTS ===== */
.results{padding:90px 0;text-align:center;background:var(--white);}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px;}
.result-stat{background:var(--bg);border:1px solid var(--gray);border-radius:18px;padding:32px 20px;}
.result-stat .num{font-size:38px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;}
.result-stat p{font-size:13.5px;color:var(--muted);}
.results-note{font-size:12.5px;color:var(--muted-light);margin-top:20px;}

/* ===== CTA ===== */
.cta-band{padding:90px 0;background:var(--white);}
.final-cta{background:var(--navy);color:white;padding:90px clamp(24px,5vw,60px);text-align:center;border-radius:36px;margin:0 clamp(16px,3vw,32px);position:relative;overflow:hidden;}
.final-cta::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(14,99,255,0.25) 0%,transparent 70%);}
.final-cta h2{font-size:clamp(26px,3.6vw,40px);color:white;max-width:600px;margin:0 auto 18px;line-height:1.2;position:relative;z-index:1;}
.final-cta p{color:var(--muted-light);font-size:16px;margin-bottom:36px;position:relative;z-index:1;}
.final-cta .btn-primary{position:relative;z-index:1;}

/* ===== FOOTER ===== */
footer{padding:70px 0 0;background:var(--footer-bg);color:white;margin-top:90px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-bottom:50px;}
.footer-brand img{height:32px;margin-bottom:14px;filter:brightness(0) invert(1);}
.footer-brand p{color:var(--muted-light);font-size:13.5px;max-width:260px;line-height:1.6;}
.footer-brand .footer-geo{margin-top:8px;font-size:13.5px;color:var(--muted-light);line-height:1.6;}
.footer-social{display:flex;gap:10px;margin-top:18px;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);color:white;transition:background .2s,color .2s,transform .2s;}
.footer-social a:hover{background:var(--cyan);color:var(--navy);transform:translateY(-2px);}

/* ===== FLOATING WHATSAPP ===== */
.wa-float{position:fixed;right:24px;bottom:24px;bottom:calc(24px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:var(--wa-green);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -6px rgba(37,211,102,0.55);z-index:150;transition:transform .2s,box-shadow .2s;}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 34px -6px rgba(37,211,102,0.65);}
.wa-float::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--wa-green);animation:waPulse 2.2s ease-out infinite;z-index:-1;}
@keyframes waPulse{0%{opacity:.55;transform:scale(1);}100%{opacity:0;transform:scale(1.8);}}
@media(prefers-reduced-motion:reduce){.wa-float::before{animation:none;}}
.footer-col h4{font-size:12.5px;margin-bottom:16px;color:white;text-transform:uppercase;letter-spacing:.03em;}
.footer-col a{display:block;font-size:14px;color:var(--muted-light);margin-bottom:11px;}
.footer-col a:hover{color:var(--cyan);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding:22px 0;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted-light);}
.footer-legal{display:flex;flex-wrap:wrap;gap:20px;}
.footer-legal a{color:var(--muted-light);font-size:12.5px;}
.footer-legal a:hover{color:var(--cyan);}
.footer-powered a{color:white;font-weight:600;}
.footer-powered a:hover{color:var(--cyan);}