/* ===========================================================
   VALORIA — Consumer pre-order landing. Arabic RTL.
   Tokens from colors_and_type.css. Warm paper + navy/burgundy.
   =========================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-sans);background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--steel-200);}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(251,249,245,0.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--divider);}
.nav .in{max-width:1120px;margin:0 auto;padding:15px 28px;display:flex;align-items:center;gap:14px;}
.nav .brand{display:flex;align-items:center;gap:10px;}
.nav .brand .m{width:34px;height:34px;border-radius:10px;background:var(--secondary-600);display:flex;align-items:center;justify-content:center;color:#F6E9DE;}
.nav .brand .m svg{width:18px;height:18px;}
.nav .wm{font-size:20px;font-weight:800;letter-spacing:-0.01em;color:var(--foreground);}
.nav .wm .dot{color:var(--secondary-600);}
.nav .grow{flex:1;}
.nav .ops{font-size:13px;font-weight:700;color:var(--foreground-500);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.nav .ops svg{width:15px;height:15px;}
.nav .cta{height:40px;padding:0 18px;border:0;border-radius:11px;background:var(--primary-700);color:#F6F2EA;font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;transition:transform var(--transition-fast),box-shadow var(--transition-fast);}
.nav .cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px var(--primary-700);}
.nav .cta svg{width:15px;height:15px;}

/* ---------- hero ---------- */
.hero{padding:64px 0 48px;}
.hero .grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;}
.hero .eye{font-size:12.5px;font-weight:800;letter-spacing:0.16em;color:var(--steel-600);margin-bottom:18px;}
.hero h1{font-size:50px;line-height:1.12;font-weight:800;letter-spacing:-0.02em;margin:0 0 18px;text-wrap:balance;}
.hero h1 .hl{color:var(--secondary-600);}
.hero p{font-size:18px;line-height:1.7;color:var(--foreground-500);font-weight:300;margin:0 0 28px;max-width:480px;}
.hero .actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.btn-lg{height:54px;padding:0 26px;border:0;border-radius:13px;font-weight:800;font-size:16px;display:inline-flex;align-items:center;gap:9px;transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast);}
.btn-lg svg{width:19px;height:19px;}
.btn-lg:active{transform:scale(.98);}
.btn-primary{background:var(--secondary-600);color:#F6E9DE;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px var(--secondary-600);}
.btn-ghost{background:transparent;color:var(--primary-700);border:1.5px solid var(--primary-200);}
.btn-ghost:hover{background:var(--primary-50);}
.hero .trust{margin-top:24px;display:flex;align-items:center;gap:18px;font-size:13px;color:var(--foreground-500);font-weight:600;flex-wrap:wrap;}
.hero .trust .it{display:flex;align-items:center;gap:7px;}
.hero .trust svg{width:16px;height:16px;color:var(--success-500);stroke-width:2.4;}

/* hero visual — the 1+1 offer */
.offer{background:var(--primary-700);border-radius:22px;padding:30px;color:#E9EEF2;box-shadow:var(--shadow-large);position:relative;overflow:hidden;}
.offer .glow{position:absolute;width:240px;height:240px;border-radius:50%;background:var(--secondary-600);filter:blur(70px);opacity:.45;inset-inline-end:-70px;top:-60px;}
.offer .otop{display:flex;align-items:center;justify-content:space-between;position:relative;}
.offer .badge11{background:var(--secondary-600);color:#F6E9DE;font-weight:800;font-size:13px;padding:7px 14px;border-radius:9999px;display:inline-flex;align-items:center;gap:7px;}
.offer .badge11 svg{width:15px;height:15px;}
.offer .fee{font-size:12.5px;color:#9FB6C7;font-weight:700;}
.offer .gifts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 6px;position:relative;}
.gift-tile{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:18px;text-align:center;position:relative;}
.gift-tile .ph{height:78px;border-radius:11px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 9px,rgba(255,255,255,.02) 9px 18px);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.gift-tile .ph svg{width:30px;height:30px;color:#7E9DB4;stroke-width:1.5;}
.gift-tile b{font-size:13.5px;font-weight:800;color:#F6F2EA;display:block;}
.gift-tile span{font-size:12px;color:#9FB6C7;}
.gift-tile.free{border-color:var(--secondary-300);}
.gift-tile.free .free-tag{position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(50%);background:var(--secondary-300);color:var(--secondary-900);font-size:11px;font-weight:800;padding:3px 11px;border-radius:9999px;}
.gift-tile .price-free{color:var(--secondary-300);font-weight:800;}
.offer .ofoot{position:relative;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;}
.offer .ofoot .l{font-size:13px;color:#9FB6C7;}
.offer .ofoot .v{font-size:20px;font-weight:800;color:#fff;direction:ltr;}
.offer .ofoot .v .cur{color:var(--secondary-300);font-size:15px;}

/* ---------- how it works ---------- */
.how{padding:30px 0 56px;}
.sec-eye{font-size:12.5px;font-weight:800;letter-spacing:0.16em;color:var(--steel-600);text-align:center;}
.sec-h{font-size:32px;font-weight:800;letter-spacing:-0.015em;text-align:center;margin:12px 0 36px;}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.step-c{background:var(--content1);border-radius:16px;box-shadow:var(--shadow-small);padding:26px 24px;}
.step-c .n{width:40px;height:40px;border-radius:11px;background:var(--secondary-50);color:var(--secondary-600);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.step-c .ic{width:22px;height:22px;color:var(--primary-700);margin-bottom:0;}
.step-c h3{font-size:17px;font-weight:800;margin:0 0 8px;letter-spacing:-0.01em;}
.step-c p{font-size:14px;line-height:1.65;color:var(--foreground-500);margin:0;}

/* ---------- form section ---------- */
.book{padding:14px 0 80px;}
.book .panel{max-width:600px;margin:0 auto;background:var(--content1);border-radius:20px;box-shadow:var(--shadow-large);overflow:hidden;}
.book .phead{padding:24px 30px 0;}
.stepper{display:flex;align-items:center;gap:0;margin-bottom:6px;}
.stepper .st{display:flex;align-items:center;flex:1;}
.stepper .st:last-child{flex:0;}
.stepper .bub{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:var(--content2);color:var(--foreground-500);transition:all var(--transition);}
.stepper .bub svg{width:15px;height:15px;stroke-width:3;}
.stepper .st.done .bub{background:var(--success-500);color:#fff;}
.stepper .st.active .bub{background:var(--primary-700);color:#fff;}
.stepper .ln{flex:1;height:2px;background:var(--content2);margin:0 6px;border-radius:2px;transition:background var(--transition);}
.stepper .st.done .ln{background:var(--success-500);}
.pbody{padding:22px 30px 4px;min-height:300px;}
.step-title{font-size:21px;font-weight:800;letter-spacing:-0.01em;margin:0 0 4px;}
.step-sub{font-size:13.5px;color:var(--foreground-500);margin:0 0 22px;}

/* fields */
.f{margin-bottom:16px;}
.f label{display:block;font-size:12.5px;font-weight:800;margin-bottom:8px;}
.f label .req{color:var(--secondary-600);}
.control{display:flex;align-items:center;gap:10px;height:50px;border:1.5px solid var(--divider);border-radius:13px;background:var(--content1);padding:0 14px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.control:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--steel-100);}
.control svg{width:18px;height:18px;color:var(--foreground-500);stroke-width:1.8;flex-shrink:0;}
.control input{border:0;outline:none;background:none;font-family:inherit;font-size:15px;color:var(--foreground);width:100%;}
.control .ccode{font-size:14px;font-weight:800;color:var(--primary-700);direction:ltr;background:var(--content2);padding:5px 9px;border-radius:8px;}
.control .ccode-sel{font-size:14px;font-weight:800;color:var(--primary-700);direction:ltr;background:var(--content2);padding:0 8px;height:36px;border:0;border-radius:8px;font-family:inherit;cursor:pointer;outline:none;flex-shrink:0;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23022E4C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:left 6px center;padding-inline-start:22px;}
.control .ccode-sel:focus{box-shadow:0 0 0 2px var(--steel-200);}
.control.phone input{direction:ltr;text-align:start;}
.f-hint{font-size:11.5px;color:var(--foreground-500);margin-top:6px;display:flex;align-items:center;gap:5px;}
.f-hint svg{width:13px;height:13px;color:var(--steel-600);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{padding:10px 16px;border-radius:9999px;border:1.5px solid var(--divider);background:var(--content1);font-size:13.5px;font-weight:700;color:var(--foreground);transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:7px;}
.chip svg{width:15px;height:15px;}
.chip:hover{border-color:var(--primary-300);}
.chip.on{background:var(--primary-700);border-color:var(--primary-700);color:#F6F2EA;}

/* delivery option cards */
.opts{display:flex;flex-direction:column;gap:11px;}
.opt{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--divider);border-radius:14px;background:var(--content1);transition:all var(--transition-fast);text-align:start;width:100%;}
.opt:hover{border-color:var(--primary-300);}
.opt.on{border-color:var(--primary-700);background:var(--primary-50);}
.opt .oic{width:42px;height:42px;border-radius:11px;background:var(--content2);color:var(--primary-700);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.opt.on .oic{background:var(--primary-700);color:#fff;}
.opt .oic svg{width:20px;height:20px;}
.opt .ot{flex:1;}
.opt .ot b{font-size:15px;font-weight:800;display:block;}
.opt .ot span{font-size:12.5px;color:var(--foreground-500);}
.opt .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--sand-300);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);}
.opt.on .radio{border-color:var(--primary-700);background:var(--primary-700);}
.opt .radio svg{width:12px;height:12px;color:#fff;stroke-width:3.5;opacity:0;}
.opt.on .radio svg{opacity:1;}

/* review */
.rev-offer{background:var(--secondary-600);color:#F6E9DE;border-radius:16px;padding:18px 20px;margin-bottom:18px;display:flex;align-items:center;gap:14px;}
.rev-offer .ri{width:44px;height:44px;border-radius:12px;background:rgba(246,233,222,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rev-offer .ri svg{width:22px;height:22px;}
.rev-offer b{font-size:16px;font-weight:800;color:#F6F2EA;display:block;}
.rev-offer span{font-size:12.5px;color:#E7C9CF;}
.rev-list{border:1px solid var(--divider);border-radius:14px;overflow:hidden;margin-bottom:18px;}
.rev-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--divider);font-size:13.5px;gap:12px;}
.rev-row:last-child{border-bottom:0;}
.rev-row .k{color:var(--foreground-500);}
.rev-row .v{font-weight:800;text-align:end;}
.rev-row .v small{display:block;font-weight:600;color:var(--foreground-500);font-size:11.5px;direction:ltr;text-align:start;}
.pay-box{background:var(--content2);border-radius:14px;padding:16px 18px;}
.pay-box .pr{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13.5px;color:var(--foreground-500);}
.pay-box .pr.free{color:var(--success-600);font-weight:800;}
.pay-box .pr .pv{font-weight:800;color:var(--foreground);direction:ltr;}
.pay-box .pt{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:8px;border-top:1px solid var(--divider);}
.pay-box .pt .l{font-size:14px;font-weight:800;}
.pay-box .pt .v{font-size:24px;font-weight:800;direction:ltr;}
.pay-box .pt .v .cur{color:var(--secondary-600);font-size:16px;}

/* footer nav of form */
.pfoot{display:flex;align-items:center;gap:12px;padding:20px 30px 26px;border-top:1px solid var(--divider);margin-top:18px;}
.pfoot .grow{flex:1;}
.fbtn{height:48px;padding:0 22px;border:0;border-radius:12px;font-weight:800;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast);}
.fbtn svg{width:17px;height:17px;}
.fbtn:active{transform:scale(.98);}
.fbtn.next{background:var(--primary-700);color:#F6F2EA;}
.fbtn.next:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--primary-700);}
.fbtn.pay{background:var(--secondary-600);color:#F6E9DE;}
.fbtn.pay:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--secondary-600);}
.fbtn.back{background:transparent;color:var(--foreground-500);}
.fbtn.back:hover{color:var(--foreground);}
.fbtn:disabled{opacity:.45;pointer-events:none;}

/* confirmation */
.done{text-align:center;padding:40px 20px 16px;}
.done .check{width:78px;height:78px;border-radius:50%;background:var(--success-100);color:var(--success-600);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;animation:pop .4s var(--ease-out) both;}
.done .check svg{width:38px;height:38px;stroke-width:3;}
@keyframes pop{from{transform:scale(.6);}to{transform:scale(1);}}
.done h2{font-size:25px;font-weight:800;margin:0 0 10px;letter-spacing:-0.01em;}
.done p{font-size:14.5px;line-height:1.7;color:var(--foreground-500);max-width:380px;margin:0 auto 24px;}
.done .wa-note{display:inline-flex;align-items:center;gap:9px;background:#E7F7EC;color:var(--success-700);font-size:13px;font-weight:700;padding:11px 18px;border-radius:12px;}
.done .wa-note svg{width:17px;height:17px;}
.done .ref{margin-top:20px;font-size:12.5px;color:var(--foreground-500);}
.done .ref b{color:var(--foreground);direction:ltr;}

/* ---------- emotional closer ---------- */
.closer{background:var(--primary-700);color:#E9EEF2;padding:92px 0;position:relative;overflow:hidden;text-align:center;}
.closer .glow{position:absolute;width:460px;height:460px;border-radius:50%;background:var(--secondary-600);filter:blur(95px);opacity:.38;left:50%;top:46%;transform:translate(-50%,-50%);}
.closer .wrap{position:relative;}
.cl-lede{font-size:31px;line-height:1.5;font-weight:300;color:#F1E4DA;max-width:740px;margin:0 auto 16px;text-wrap:balance;}
.cl-lede b{font-weight:800;color:#FFFFFF;}
.cl-tag{font-size:23px;font-weight:800;color:#F6F2EA;margin:0;letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:10px;}
.cl-tag .heart{font-size:25px;line-height:1;}

/* ---------- footer ---------- */
.foot{background:var(--primary-700);color:#9FB6C7;padding:34px 0;border-top:1px solid rgba(246,242,234,.1);}
.foot .in{max-width:1120px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.foot .wm{font-size:18px;font-weight:800;color:#F6F2EA;}
.foot .wm .dot{color:var(--secondary-300);}
.foot .grow{flex:1;}
.foot a{color:#C3D3DF;text-decoration:none;font-size:13px;font-weight:600;}
.foot .cp{font-size:12.5px;}

.fade{animation:fd .3s var(--ease-out) both;}
@keyframes fd{from{transform:translateY(6px);}to{transform:none;}}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero .grid{grid-template-columns:1fr;gap:34px;}
  .hero{padding:40px 0 32px;}
  .hero h1{font-size:38px;}
  .offer{order:-1;}
  .steps3{grid-template-columns:1fr;}
  .sec-h{font-size:26px;}
}
@media (max-width:560px){
  .wrap,.nav .in{padding-left:18px;padding-right:18px;}
  .hero h1{font-size:31px;}
  .nav .ops{display:none;}
  .cl-lede{font-size:23px;}
  .cl-tag{font-size:18px;}
  .closer{padding:64px 0;}
  .book .phead,.pbody,.pfoot{padding-left:20px;padding-right:20px;}
  .row2{grid-template-columns:1fr;}
  .fbtn{padding:0 16px;font-size:13.5px;}
}