/* =========================================================
   WAKAWISE — MASTER STYLESHEET v2.0
   Font: Raleway · Ultra-slim Apple aesthetic
   ========================================================= */

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

:root {
  --blue:#1A6BFF; --blue-dark:#0F4DC7; --blue-bg:#EFF4FF; --blue-glow:rgba(26,107,255,0.13);
  --gold:#F5C842; --gold-dark:#D4A017; --gold-light:#FFE57A;
  --ink:#0B1120; --ink2:#1C2B40; --ink3:#2E3D52;
  --slate:#607080; --muted:#96A4B4; --border:#E4EAF2; --border2:#C8D5E8;
  --white:#fff; --bg:#F5F7FA; --bg2:#ECEEF2;
  --green:#10B981; --green-bg:#DCFCE7;
  --warn:#F59E0B; --red:#EF4444;
  --glass:rgba(255,255,255,0.78); --glass-border:rgba(255,255,255,0.55);
  --font:'Raleway',system-ui,sans-serif;
  --r:16px; --rs:10px;
  --sh-sm:0 2px 16px rgba(11,17,32,0.07);
  --sh:0 6px 36px rgba(11,17,32,0.11);
  --sh-lg:0 20px 80px rgba(11,17,32,0.18);
  --sh-xl:0 40px 120px rgba(11,17,32,0.24);
  --t:.22s cubic-bezier(.4,0,.2,1);
}
html { scroll-behavior:smooth; }
body { font-family:var(--font); font-weight:300; font-size:16px; line-height:1.65; color:var(--ink); background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-weight:600; letter-spacing:-.03em; line-height:1.15; }
em { font-style:normal; }
a,button { cursor:pointer; }
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── NAV ─────────────────────────────────────────────────── */
#nav { position:fixed; top:0; left:0; right:0; z-index:999; height:62px; display:flex; align-items:center; padding:0 1.5rem; transition:background var(--t),box-shadow var(--t); }
#nav.scrolled { background:rgba(255,255,255,.92); backdrop-filter:blur(22px); box-shadow:0 1px 24px rgba(11,17,32,.08); border-bottom:1px solid rgba(255,255,255,.6); }
.nav-inner { max-width:1280px; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-name { font-size:1.3rem; font-weight:800; letter-spacing:-.04em; color:var(--white); transition:color var(--t); }
#nav.scrolled .logo-name { color:var(--ink); }
.logo-name em { color:var(--gold); }
.logo-tag { font-size:.48rem; font-weight:300; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); transition:color var(--t); }
#nav.scrolled .logo-tag { color:var(--muted); }
.nav-links { display:flex; list-style:none; gap:.1rem; }
.nav-a { background:none; border:none; font-family:var(--font); font-size:.75rem; font-weight:500; color:rgba(255,255,255,.72); padding:6px 12px; border-radius:8px; transition:all var(--t); }
.nav-a:hover, .nav-a.on { background:rgba(255,255,255,.14); color:var(--white); }
#nav.scrolled .nav-a { color:var(--slate); }
#nav.scrolled .nav-a:hover, #nav.scrolled .nav-a.on { background:var(--blue-bg); color:var(--blue); }
.nav-right { display:flex; align-items:center; gap:.55rem; }
.currency-pill { font-size:.7rem; font-weight:600; color:rgba(255,255,255,.65); padding:4px 10px; border:1px solid rgba(255,255,255,.2); border-radius:20px; }
#nav.scrolled .currency-pill { color:var(--slate); border-color:var(--border); }
.btn-ghost,.btn-solid { padding:7px 17px; border-radius:30px; font-family:var(--font); font-size:.73rem; font-weight:600; border:none; transition:all var(--t); letter-spacing:.02em; }
.btn-ghost { background:rgba(255,255,255,.12); color:var(--white); border:1px solid rgba(255,255,255,.3); }
.btn-ghost:hover { background:rgba(255,255,255,.24); }
#nav.scrolled .btn-ghost { background:transparent; color:var(--blue); border-color:rgba(26,107,255,.35); }
#nav.scrolled .btn-ghost:hover { background:var(--blue-bg); }
.btn-solid { background:var(--gold); color:var(--ink); }
.btn-solid:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:0 6px 20px rgba(245,200,66,.4); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all var(--t); }
#nav.scrolled .hamburger span { background:var(--ink); }

/* ── PAGE ──────────────────────────────────────────────────── */
.page { display:none; min-height:100vh; }
.page.on { display:block; animation:fadeUp .38s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── HERO ───────────────────────────────────────────────────── */
.hero { position:relative; height:100vh; min-height:680px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; }
.hero-track { position:absolute; inset:0; display:flex; transition:transform 1.1s cubic-bezier(.76,0,.24,1); }
.hero-slide { min-width:100%; height:100%; background-size:cover; background-position:center; flex-shrink:0; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(5,12,32,.18) 0%,rgba(5,12,32,.42) 40%,rgba(5,12,32,.82) 80%,rgba(5,12,32,.96) 100%); z-index:1; }
.hero-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; text-align:center; width:100%; max-width:820px; padding:0 1.5rem; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(245,200,66,.12); border:1px solid rgba(245,200,66,.3); color:var(--gold); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:5px 15px; border-radius:30px; margin-bottom:1.3rem; animation:fadeUp .7s .1s both; }
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
.hero-h1 { font-size:clamp(2rem,5vw,4rem); font-weight:200; color:var(--white); line-height:1.1; letter-spacing:-.05em; margin-bottom:1rem; animation:fadeUp .7s .2s both; }
.hero-h1 em { color:var(--gold); font-weight:700; transition:all .3s ease; }
.hero-sub { font-size:clamp(.82rem,1.3vw,.98rem); font-weight:200; color:rgba(255,255,255,.62); max-width:520px; margin:0 auto 1.8rem; line-height:1.75; animation:fadeUp .7s .3s both; }
.hero-cta { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .7s .4s both; }
.btn-hero-primary { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:var(--white); border:none; border-radius:11px; padding:13px 30px; font-family:var(--font); font-size:.86rem; font-weight:600; transition:all var(--t); letter-spacing:.02em; }
.btn-hero-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(26,107,255,.4); }
.btn-hero-ghost { background:rgba(255,255,255,.1); color:var(--white); border:1px solid rgba(255,255,255,.3); border-radius:11px; padding:13px 30px; font-family:var(--font); font-size:.86rem; font-weight:500; transition:all var(--t); backdrop-filter:blur(8px); }
.btn-hero-ghost:hover { background:rgba(255,255,255,.2); }
.slide-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25); color:var(--white); width:44px; height:44px; border-radius:50%; font-size:1.4rem; display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.slide-nav:hover { background:rgba(255,255,255,.25); }
.slide-prev { left:1.5rem; } .slide-next { right:1.5rem; }
.slide-progress { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); display:flex; gap:.45rem; z-index:4; }
.slide-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3); border:none; transition:all .35s; padding:0; }
.slide-dot.on { width:26px; border-radius:4px; background:var(--gold); }

/* Quick Order Bar */
.hero-quick-order { position:absolute; bottom:0; left:50%; transform:translateX(-50%) translateY(50%); width:calc(100% - 2rem); max-width:900px; z-index:10; animation:fadeUp .85s .55s both; }
.quick-order-card { padding:1.4rem; }
.qo-label { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-bottom:.9rem; text-align:center; }
.qo-products { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.qo-btn { background:var(--bg); border:1.5px solid var(--border); border-radius:12px; padding:.9rem .75rem; display:flex; flex-direction:column; align-items:center; gap:.3rem; transition:all var(--t); font-family:var(--font); }
.qo-btn:hover { border-color:var(--blue); background:var(--blue-bg); transform:translateY(-2px); box-shadow:var(--sh); }
.qo-icon { font-size:1.3rem; }
.qo-name { font-size:.72rem; font-weight:600; color:var(--ink); }
.qo-price { font-size:.8rem; font-weight:800; color:var(--blue); }

/* Glass card */
.glass-card { background:var(--glass); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1px solid var(--glass-border); border-radius:20px; box-shadow:0 28px 90px rgba(11,17,32,.22),0 0 0 1px rgba(255,255,255,.4) inset; }

/* ── BELOW HERO ─────────────────────────────────────────────── */
.below-hero { padding-top:calc(50vh + 90px); background:var(--bg); }
.section { max-width:1280px; margin:0 auto; padding:3.5rem 1.5rem; }

/* ── FEATURES GRID (image 6 style) ─────────────────────────── */
.features-section { background:linear-gradient(135deg,#EEF4FF,#F5F7FA); padding:1px 0; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
.feat-card { background:var(--white); border-radius:var(--r); padding:1.4rem 1rem; text-align:center; border:1px solid var(--border); box-shadow:var(--sh-sm); transition:all var(--t); }
.feat-card:hover { transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--blue-bg); }
.feat-icon-wrap { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto .9rem; border:2px solid transparent; }
.feat-icon-wrap.green { background:#E8FBF2; border-color:#BBF7D0; }
.feat-icon-wrap.blue  { background:#EFF4FF; border-color:#BFDBFE; }
.feat-icon-wrap.orange{ background:#FFF7ED; border-color:#FED7AA; }
.feat-icon-wrap.purple{ background:#F5F0FF; border-color:#DDD6FE; }
.feat-icon-wrap.gold  { background:#FFFBEB; border-color:#FDE68A; }
.feat-icon-wrap.teal  { background:#ECFEFF; border-color:#A5F3FC; }
.feat-icon-wrap.red   { background:#FFF1F2; border-color:#FECDD3; }
.feat-icon { font-size:1.5rem; }
.feat-title { font-size:.82rem; font-weight:700; color:var(--blue); margin-bottom:.3rem; }
.feat-desc { font-size:.72rem; color:var(--slate); font-weight:300; line-height:1.55; }

/* ── PRODUCT CARDS (competitor-style) ───────────────────────── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.2rem; }
.product-card { background:var(--white); border-radius:var(--r); border:1.5px solid var(--border); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh-sm); transition:all var(--t); }
.product-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--blue); }
.product-card-top { padding:1.6rem 1.3rem 1.2rem; text-align:center; }
.pc-icon { font-size:2rem; margin-bottom:.5rem; }
.pc-name { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.3rem; }
.pc-tagline { font-size:.68rem; color:var(--slate); font-weight:300; margin-bottom:.9rem; }
.pc-price { font-size:1.9rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.pc-unit { font-size:.72rem; font-weight:300; color:var(--slate); margin-left:2px; }
.product-card-body { padding:1.1rem 1.3rem; flex:1; }
.pc-features { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.pc-features li { font-size:.78rem; color:var(--ink); display:flex; align-items:flex-start; gap:.45rem; font-weight:400; line-height:1.45; }
.pc-features li::before { content:'■'; font-size:.42rem; color:var(--blue); flex-shrink:0; margin-top:.3rem; }
.pc-note { font-size:.66rem; color:var(--muted); margin-top:.75rem; padding:.5rem; background:var(--bg); border-radius:6px; line-height:1.5; font-style:italic; }
.product-card-footer { padding:.9rem 1.3rem 1.3rem; }
.pc-btn { width:100%; background:var(--ink); color:var(--white); border:none; border-radius:9px; padding:12px; font-family:var(--font); font-size:.82rem; font-weight:800; letter-spacing:.05em; transition:all var(--t); }
.pc-btn:hover { background:var(--blue); transform:translateY(-1px); box-shadow:0 8px 24px rgba(26,107,255,.3); }

/* Delivery note */
.delivery-note { margin-top:2rem; background:var(--blue-bg); border:1px solid rgba(26,107,255,.15); border-radius:var(--r); padding:1.2rem 1.5rem; display:flex; align-items:flex-start; gap:1rem; }
.dn-icon { font-size:1.5rem; flex-shrink:0; }
.dn-title { font-size:.88rem; font-weight:700; color:var(--ink); margin-bottom:.2rem; }
.dn-sub { font-size:.78rem; color:var(--slate); font-weight:300; line-height:1.6; }

/* ── WHY US ─────────────────────────────────────────────────── */
.why-section { background:linear-gradient(135deg,var(--ink),var(--ink2)); padding:1px 0; }
.why-inner { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:start; }
.why-inner .sec-title { color:var(--white); }
.why-inner .eyebrow { color:rgba(255,255,255,.45); }
.why-list { list-style:none; display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; }
.why-list li { font-size:.82rem; color:rgba(255,255,255,.7); display:flex; align-items:flex-start; gap:.6rem; font-weight:300; line-height:1.5; }
.why-list li::before { content:'■'; font-size:.38rem; color:var(--blue); flex-shrink:0; margin-top:.42rem; }
.why-right { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.why-stat-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); padding:1.4rem; text-align:center; transition:all var(--t); }
.why-stat-card:hover { background:rgba(255,255,255,.1); }
.wsc-num { font-size:1.9rem; font-weight:800; color:var(--gold); letter-spacing:-.04em; }
.wsc-lbl { font-size:.65rem; color:rgba(255,255,255,.4); font-weight:300; margin-top:2px; letter-spacing:.04em; }
.why-cta { grid-column:1/-1; }

/* ── SAMPLE PREVIEW ─────────────────────────────────────────── */
.samples-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.sample-preview-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:all var(--t); }
.sample-preview-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--blue); }
.spc-label { padding:.75rem 1rem; background:var(--blue-bg); font-size:.72rem; font-weight:700; color:var(--blue); border-bottom:1px solid rgba(26,107,255,.1); }
.spc-inner { height:220px; overflow:hidden; position:relative; }
.spc-cta { padding:.75rem 1rem; text-align:center; font-size:.72rem; font-weight:600; color:var(--blue); border-top:1px solid var(--border); }

/* Samples page */
.samples-section { max-width:760px; }
.samples-tabs { display:flex; gap:4px; margin-bottom:1.5rem; background:rgba(11,17,32,.06); padding:4px; border-radius:12px; width:fit-content; }
.stab { background:none; border:none; font-family:var(--font); font-size:.76rem; font-weight:600; color:var(--slate); padding:8px 16px; border-radius:9px; transition:all var(--t); }
.stab.on { background:var(--white); color:var(--ink); box-shadow:0 2px 14px rgba(0,0,0,.08); }
.stab:not(.on):hover { color:var(--ink); }
.sample-container {}
.sample-panel { display:none; }
.sample-panel.on { display:block; animation:fadeUp .3s ease both; }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testi-section { background:var(--white); padding:1px 0; }
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; margin-top:2rem; }
.testi-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:1.6rem; transition:all var(--t); }
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--sh); }
.featured-testi { background:linear-gradient(135deg,var(--ink),var(--ink2)); border-color:transparent; }
.testi-stars { color:var(--gold); font-size:.85rem; margin-bottom:.7rem; }
.testi-card p { font-size:.83rem; color:var(--slate); font-weight:300; line-height:1.7; margin-bottom:1.1rem; font-style:italic; }
.featured-testi p { color:rgba(255,255,255,.6); }
.testi-author { display:flex; align-items:center; gap:.7rem; }
.testi-av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800; color:var(--white); flex-shrink:0; }
.testi-card .testi-author b { font-size:.82rem; color:var(--ink); display:block; }
.featured-testi .testi-author b { color:var(--white); }
.testi-card .testi-author span { font-size:.7rem; color:var(--muted); font-weight:300; }

/* ── SECTION UTILS ──────────────────────────────────────────── */
.sec-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.eyebrow { font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:.3rem; }
.sec-title { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; color:var(--ink); letter-spacing:-.04em; margin-bottom:.35rem; }
.sec-sub { font-size:.83rem; color:var(--slate); font-weight:300; max-width:440px; line-height:1.65; }
.btn-outline-small { font-size:.74rem; font-weight:600; color:var(--blue); padding:7px 15px; border:1.5px solid rgba(26,107,255,.2); border-radius:20px; background:none; transition:all var(--t); white-space:nowrap; }
.btn-outline-small:hover { background:var(--blue-bg); border-color:var(--blue); }

/* ── PAGE BANNERS ───────────────────────────────────────────── */
.page-banner { background:linear-gradient(135deg,var(--ink),var(--ink2)); padding:1.5rem 2rem; margin-top:62px; }
.pb-inner { max-width:1280px; margin:0 auto; }
.pb-route { font-size:1.2rem; font-weight:700; color:var(--white); letter-spacing:-.03em; }
.pb-sub { font-size:.72rem; color:rgba(255,255,255,.45); font-weight:300; margin-top:3px; }

/* ── ORDER MODAL ────────────────────────────────────────────── */
.modal-bg { display:none; position:fixed; inset:0; z-index:2000; background:rgba(11,17,32,.6); align-items:center; justify-content:center; padding:1.5rem; backdrop-filter:blur(6px); }
.modal-bg.open { display:flex; animation:fadeUp .28s ease; }
.modal-box { background:var(--white); border-radius:22px; padding:2rem; width:100%; max-width:480px; position:relative; max-height:92vh; overflow-y:auto; box-shadow:var(--sh-xl); }
.modal-order-box { max-width:560px; }
.modal-close { position:absolute; top:1rem; right:1rem; background:var(--bg2); border:none; border-radius:50%; width:30px; height:30px; font-size:.9rem; display:flex; align-items:center; justify-content:center; color:var(--slate); transition:all var(--t); font-family:var(--font); }
.modal-close:hover { background:var(--blue); color:var(--white); }
.modal-logo { font-size:2rem; margin-bottom:.7rem; }
.modal-title { font-size:1.25rem; font-weight:700; color:var(--ink); letter-spacing:-.04em; margin-bottom:.25rem; }
.modal-sub { font-size:.78rem; color:var(--slate); font-weight:300; margin-bottom:1.2rem; }
.modal-switch { text-align:center; margin-top:1rem; font-size:.78rem; color:var(--slate); font-weight:300; }
.modal-switch a { color:var(--blue); font-weight:600; }
.order-header { margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:2px solid; }
.order-product-name { font-size:1rem; font-weight:700; color:var(--ink); }
.order-product-price { font-size:.82rem; color:var(--slate); font-weight:300; }
.order-step-label { font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem; }
.step-pill { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:800; flex-shrink:0; }
.ff { margin-bottom:.8rem; }
.ff label { display:block; font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.ff input,.ff select,.fg input,.fg select { border:1.5px solid var(--border); border-radius:var(--rs); padding:10px 13px; font-family:var(--font); font-size:.84rem; font-weight:400; color:var(--ink); background:#FAFBFD; outline:none; transition:border var(--t),box-shadow var(--t); -webkit-appearance:none; }
.ff input:focus,.ff select:focus,.fg input:focus,.fg select:focus { border-color:var(--blue); background:var(--white); box-shadow:0 0 0 3px var(--blue-glow); }
.ff select { width:100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396A4B4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.ff input { width:100%; }
.ff-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.fg { display:flex; flex-direction:column; gap:4px; }
.fg label { font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.fg input,.fg select { padding:10px 13px; font-size:.84rem; }
.grid-2,.grid-3,.grid-4 { display:grid; gap:.75rem; }
.grid-2 { grid-template-columns:1fr 1fr; }
.grid-3 { grid-template-columns:1fr 1fr 1fr; }
.grid-4 { grid-template-columns:1.1fr 1.1fr .9fr .9fr; }
.order-price-box { background:var(--blue-bg); border-radius:var(--rs); padding:1rem 1.1rem; margin:.9rem 0; }
.opb-row { display:flex; justify-content:space-between; font-size:.8rem; color:var(--slate); padding:3px 0; font-weight:400; }
.opb-row.opb-total { font-weight:800; font-size:.92rem; color:var(--ink); border-top:1px solid var(--border); margin-top:.5rem; padding-top:.65rem; }
.btn-confirm { width:100%; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:var(--white); border:none; border-radius:11px; padding:14px; font-family:var(--font); font-size:.88rem; font-weight:700; transition:all var(--t); letter-spacing:.02em; }
.btn-confirm:hover { box-shadow:0 10px 32px rgba(26,107,255,.38); transform:translateY(-1px); }
.security-note { text-align:center; font-size:.63rem; color:var(--muted); margin-top:.65rem; font-weight:300; }
.processing-icon { font-size:3rem; margin-bottom:.8rem; animation:spin 2s linear infinite; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.processing-title { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; }
.processing-sub { font-size:.8rem; color:var(--slate); font-weight:300; margin-bottom:1.2rem; }
.processing-bar { height:6px; background:var(--bg2); border-radius:3px; overflow:hidden; }
.processing-fill { height:100%; background:linear-gradient(to right,var(--blue),var(--gold)); border-radius:3px; width:0; transition:width 1.5s ease; }

/* ── FORM CARDS ─────────────────────────────────────────────── */
.form-card { background:var(--white); border-radius:var(--r); border:1px solid var(--border); padding:1.6rem; box-shadow:var(--sh-sm); margin-bottom:1.1rem; }
.form-card-title { font-size:.88rem; font-weight:700; color:var(--ink); margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem; }

/* ── PNR PAGE ───────────────────────────────────────────────── */
.pnr-hero { background:linear-gradient(135deg,var(--ink),var(--ink2)); padding:4rem 2rem 6rem; text-align:center; }
.pnr-hero-inner { max-width:540px; margin:0 auto; }
.pnr-hero-title { font-size:2rem; font-weight:700; color:var(--white); letter-spacing:-.04em; margin-bottom:.5rem; }
.pnr-hero-sub { font-size:.83rem; color:rgba(255,255,255,.45); font-weight:300; }
.pnr-search-wrap { max-width:500px; margin:-3rem auto 0; padding:0 1.5rem; position:relative; z-index:2; }
.pnr-card { padding:1.8rem; }
.btn-search { width:100%; margin-top:.9rem; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:var(--white); border:none; border-radius:11px; padding:13px 28px; font-family:var(--font); font-size:.86rem; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; transition:all var(--t); }
.btn-search:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(26,107,255,.38); }

/* PNR result */
.pnr-confirmed-banner { display:flex; align-items:center; gap:1rem; background:var(--green-bg); border:1px solid rgba(21,128,61,.2); border-radius:var(--rs); padding:1rem; margin-bottom:1.2rem; }
.pnr-icon { width:38px; height:38px; border-radius:50%; background:var(--green); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; flex-shrink:0; }
.pnr-confirmed-title { font-size:.9rem; font-weight:700; color:var(--ink); }
.pnr-confirmed-sub { font-size:.72rem; color:var(--slate); font-weight:300; margin-top:1px; }
.pnr-details-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.9rem; margin-bottom:1.3rem; }
.pnr-det-l { font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; margin-bottom:2px; }
.pnr-det-v { font-size:.86rem; font-weight:600; color:var(--ink); }
.pnr-det-v.mono { font-family:monospace; font-weight:800; color:var(--blue); letter-spacing:.06em; }
.status-confirmed { color:var(--green) !important; }
.timeline-wrap { border-top:1px solid var(--border); padding-top:1.1rem; }
.tl-row { display:flex; gap:1rem; align-items:flex-start; }
.tl-left { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.tl-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.tl-dot.done { background:var(--green); }
.tl-dot.active { background:var(--blue); box-shadow:0 0 0 4px rgba(26,107,255,.18); }
.tl-dot.pend { background:var(--border); }
.tl-connector { width:2px; flex:1; min-height:18px; background:var(--border); }
.tl-connector.done { background:var(--green); }
.tl-body { padding-bottom:.9rem; }
.tl-title { font-size:.83rem; font-weight:600; color:var(--ink); }
.tl-sub { font-size:.7rem; color:var(--slate); font-weight:300; }

/* ── MY BOOKINGS ────────────────────────────────────────────── */
.bk-list { display:flex; flex-direction:column; gap:.9rem; }
.bk-card { background:var(--white); border-radius:var(--r); border:1.5px solid var(--border); padding:1.1rem 1.3rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; box-shadow:var(--sh-sm); transition:all var(--t); }
.bk-card:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 6px 28px rgba(26,107,255,.1); }
.bk-icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.bk-main { flex:1; min-width:140px; }
.bk-route { font-weight:700; font-size:.88rem; color:var(--ink); }
.bk-meta { font-size:.7rem; color:var(--slate); font-weight:300; margin-top:1px; }
.bk-pnr { font-size:.66rem; font-weight:700; color:var(--blue); letter-spacing:.06em; font-family:monospace; margin-top:1px; }
.bk-status { font-size:.64rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.bk-status.confirmed { background:var(--green-bg); color:#15803D; border:1px solid rgba(21,128,61,.2); }
.bk-price { font-weight:800; font-size:.9rem; color:var(--ink); white-space:nowrap; }
.btn-select { background:var(--blue); color:var(--white); border:none; border-radius:8px; padding:8px 16px; font-family:var(--font); font-size:.72rem; font-weight:600; transition:all var(--t); white-space:nowrap; }
.btn-select:hover { background:var(--blue-dark); transform:translateY(-1px); }
.empty-state { text-align:center; padding:4rem 2rem; }
.empty-icon { font-size:3rem; margin-bottom:1rem; }
.empty-state h3 { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; }
.empty-state p { font-size:.83rem; color:var(--slate); font-weight:300; }

/* ── CONTACT ────────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:2rem; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:1rem; }
.ci-card { background:var(--white); border-radius:var(--r); border:1px solid var(--border); padding:1.2rem; display:flex; align-items:flex-start; gap:.75rem; box-shadow:var(--sh-sm); }
.ci-icon { font-size:1.3rem; flex-shrink:0; }
.ci-label { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.ci-val { font-size:.82rem; color:var(--ink); font-weight:500; line-height:1.55; }

/* ── TOAST ──────────────────────────────────────────────────── */
.toast { position:fixed; bottom:2rem; right:2rem; z-index:9000; background:var(--ink); color:var(--white); padding:1rem 1.5rem; border-radius:13px; font-size:.8rem; font-weight:400; box-shadow:var(--sh-xl); max-width:380px; border-left:4px solid var(--gold); transform:translateY(80px); opacity:0; transition:all .35s cubic-bezier(.4,0,.2,1); }
.toast.show { transform:translateY(0); opacity:1; }

/* ── MOBILE NAV ─────────────────────────────────────────────── */
.mobile-nav-overlay { display:none; position:fixed; inset:0; z-index:1500; background:rgba(5,12,32,.97); backdrop-filter:blur(20px); flex-direction:column; align-items:center; justify-content:center; padding:2rem; }
.mobile-nav-overlay.open { display:flex; animation:fadeUp .3s ease; }
.mobile-nav-close { position:absolute; top:1.2rem; right:1.5rem; background:none; border:none; color:rgba(255,255,255,.6); font-size:1.5rem; }
.mobile-nav-links { list-style:none; display:flex; flex-direction:column; gap:.15rem; text-align:center; width:100%; max-width:280px; }
.mobile-nav-links button { width:100%; background:none; border:none; font-family:var(--font); font-size:1.05rem; font-weight:500; color:rgba(255,255,255,.75); padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); transition:color var(--t); }
.mobile-nav-links button:hover { color:var(--gold); }
.mobile-nav-cta { display:flex; gap:.75rem; margin-top:2rem; }

/* ── TICKET BUTTONS ─────────────────────────────────────────── */
.tk-btn-primary { background:var(--ink); color:var(--white); border:none; border-radius:8px; padding:8px 16px; font-family:var(--font); font-size:.72rem; font-weight:600; transition:all var(--t); }
.tk-btn-primary:hover { background:var(--blue); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:900px) {
  .why-inner { grid-template-columns:1fr; gap:2rem; }
  .samples-preview-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .currency-pill { display:none; }
  .qo-products { grid-template-columns:1fr 1fr; }
  .grid-4,.grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .ff-row { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .hero-content { padding-bottom:0; top:45%; }
  .below-hero { padding-top:calc(50vh + 120px + 200px); }
  .hero-quick-order { position:relative; bottom:auto; left:auto; transform:none; margin:0 1rem; width:calc(100% - 2rem); }
}
@media(max-width:480px) {
  .hero-h1 { font-size:1.9rem; }
  .products-grid { grid-template-columns:1fr; }
  .qo-products { grid-template-columns:1fr 1fr; gap:.5rem; }
  .why-right { grid-template-columns:1fr 1fr; }
  .testi-grid { grid-template-columns:1fr; }
}