@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');
/* ── TOKENS ── */
:root {
  --green-hero: #0a2e1e;
  --green: #16a97a;
  --green-light: #f0fdf7;
  --gold: #f59e0b;
  --black: #0d0d0d;
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --white: #ffffff;
  --r: 10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  background:var(--green-hero);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.5)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-logo svg{width:34px;height:34px;border-radius:8px}
.nav-logo-name{font-size:18px;font-weight:800;color:var(--white);letter-spacing:-.5px}
.nav-center{display:flex;align-items:center;gap:2px;list-style:none}
.nav-center a{color:rgba(255,255,255,.6);text-decoration:none;font-size:14px;font-weight:500;padding:7px 14px;border-radius:6px;transition:color .15s,background .15s}
.nav-center a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-btn{display:inline-flex;align-items:center;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;font-family:'Inter',sans-serif;cursor:pointer;border:none;transition:all .15s}
.nav-btn-ghost{color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.2)}
.nav-btn-ghost:hover{color:var(--white);background:rgba(255,255,255,.1)}
.nav-btn-solid{color:var(--white);background:var(--green)}
.nav-btn-solid:hover{opacity:.88}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);border-radius:2px;transition:all .25s}
.mobile-nav{display:none;flex-direction:column;position:fixed;top:64px;left:0;right:0;background:var(--green-hero);border-top:1px solid rgba(255,255,255,.08);padding:16px;gap:4px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:199}
.mobile-nav.open{display:flex}
.mobile-nav a{color:rgba(255,255,255,.7);text-decoration:none;font-size:15px;font-weight:500;padding:10px 14px;border-radius:6px}
.mobile-nav a:hover{color:var(--white);background:rgba(255,255,255,.08)}
/* ── HERO ── */
.hero{
  background:var(--green-hero);
  padding:124px 48px 0;
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;
}
.hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:flex-end;position:relative}
.hero-left{padding-bottom:80px}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(22,169,122,.2);border:1px solid rgba(22,169,122,.35);color:var(--green);padding:5px 14px;border-radius:50px;font-size:12px;font-weight:600;margin-bottom:24px;letter-spacing:.2px}
.hero-badge-dot{width:6px;height:6px;background:var(--green);border-radius:50%}
.hero h1{font-size:clamp(40px,4.5vw,62px);font-weight:900;line-height:1.05;letter-spacing:-2.5px;color:var(--white);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-sub{font-size:17px;color:rgba(255,255,255,.55);line-height:1.65;max-width:420px;margin-bottom:36px;font-weight:400}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-btn-main{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--white);padding:14px 28px;border-radius:8px;font-size:15px;font-weight:700;text-decoration:none;transition:all .2s;font-family:'Inter',sans-serif;cursor:pointer;border:none}
.hero-btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(22,169,122,.4);opacity:.95}
.hero-btn-sec{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);padding:14px 28px;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none;transition:all .2s;border:1px solid rgba(255,255,255,.12)}
.hero-btn-sec:hover{background:rgba(255,255,255,.12);color:var(--white);transform:translateY(-2px)}
.hero-right{position:relative;display:flex;justify-content:center;align-items:center;padding-bottom:60px}
/* ── HERO MOCKUP WRAPPER (GROUPED IMAGE) ── */
.hero-mockup-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: mockupFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes mockupFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.hero-mockup-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  background: radial-gradient(circle, rgba(22, 169, 122, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
}
.hero-mockup-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero-mockup-wrapper:hover .hero-mockup-img {
  transform: scale(1.03);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}
/* ── RESTAURANT STRIP ── */
.strip{background:var(--white);border-bottom:1px solid var(--gray-100);overflow:hidden;position:relative}
.strip-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip-inner::-webkit-scrollbar{display:none}
.strip-card{display:flex;align-items:center;gap:12px;padding:16px 28px;border-right:1px solid var(--gray-100);flex-shrink:0;cursor:pointer;transition:background .15s}
.strip-card:hover{background:var(--gray-50)}
.strip-card-icon{width:40px;height:40px;border-radius:8px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.strip-card-name{font-size:13px;font-weight:600;color:var(--gray-900)}
.strip-card-sub{font-size:12px;color:var(--gray-500)}
.strip-stars{font-size:11px;color:var(--gold);margin-top:2px}
/* ── STATS ── */
.stats{padding:80px 48px;border-bottom:1px solid var(--gray-100)}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{text-align:center;padding:0 24px;border-right:1px solid var(--gray-100)}
.stat:last-child{border-right:none}
.stat-n{font-size:52px;font-weight:900;letter-spacing:-3px;color:var(--black);line-height:1}
.stat-n span{color:var(--green)}
.stat-l{font-size:14px;color:var(--gray-500);margin-top:6px;font-weight:500}
/* ── FEATURES ── */
.features{padding:96px 48px;background:var(--gray-50)}
.sec-inner{max-width:1100px;margin:0 auto}
.sec-tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--green);margin-bottom:10px}
.sec-h{font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-1.5px;color:var(--black);margin-bottom:12px;line-height:1.1}
.sec-sub{font-size:16px;color:var(--gray-500);max-width:440px;line-height:1.65;margin-bottom:52px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--gray-200)}
.feat-card{background:var(--white);padding:36px 32px;transition:background .2s}
.feat-card:hover{background:var(--green-light)}
.feat-icon{font-size:28px;margin-bottom:16px;display:block}
.feat-h{font-size:16px;font-weight:700;color:var(--black);margin-bottom:8px}
.feat-p{font-size:14px;color:var(--gray-500);line-height:1.65}
/* ── HOW ── */
.how{padding:96px 48px;background:var(--white)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;border:1px solid var(--gray-100);border-radius:var(--r);overflow:hidden}
.step-card{padding:36px 28px;border-right:1px solid var(--gray-100);position:relative}
.step-card:last-child{border-right:none}
.step-num{font-size:48px;font-weight:900;color:var(--gray-100);letter-spacing:-2px;line-height:1;margin-bottom:16px}
.step-icon{font-size:22px;margin-bottom:12px;display:block}
.step-h{font-size:15px;font-weight:700;color:var(--black);margin-bottom:6px}
.step-p{font-size:13px;color:var(--gray-500);line-height:1.65}
/* ── DOWNLOAD ── */
.download{padding:0 48px 96px;background:var(--white)}
.dl-box{max-width:1100px;margin:0 auto;background:var(--green-hero);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:380px}
.dl-left{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.dl-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:rgba(22,169,122,.7);margin-bottom:14px}
.dl-h{font-size:38px;font-weight:900;letter-spacing:-1.5px;color:var(--white);line-height:1.08;margin-bottom:14px}
.dl-h em{font-style:normal;color:var(--green)}
.dl-sub{font-size:15px;color:rgba(255,255,255,.5);line-height:1.65;margin-bottom:32px}
.dl-form{display:flex;gap:8px}
.dl-input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:12px 16px;font-size:14px;color:var(--white);font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;min-width:0}
.dl-input::placeholder{color:rgba(255,255,255,.3)}
.dl-input:focus{border-color:var(--green)}
.dl-btn{background:var(--green);color:var(--white);padding:12px 22px;border-radius:8px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;border:none;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.dl-btn:hover{opacity:.9}
.dl-store-row{display:flex;gap:10px;margin-top:20px}
.dl-store{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:9px 16px;text-decoration:none;transition:background .15s}
.dl-store:hover{background:rgba(255,255,255,.12)}
.dl-store-icon{font-size:20px}
.dl-store-t small{display:block;font-size:9px;color:rgba(255,255,255,.4);letter-spacing:.5px;text-transform:uppercase;padding-bottom: 3px;}
.dl-store-t strong{display:block;font-size:13px;font-weight:700;color:var(--white)}
.dl-right {
  background: rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 40px;
  position: relative;
  overflow: hidden;
}
.dl-phone-wrapper {
  position: relative;
  width: 260px;
  height: 440px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateY(130px);
}
.dl-phone-glow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(22, 169, 122, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(25px);
}
.dl-phone-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}
/* ── FAQ ── */
.faq{padding:96px 48px;background:var(--gray-50)}
.faq-wrap{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start;max-width:1100px;margin:0 auto}
.faq-left .sec-sub{margin-bottom:20px}
.faq-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--green);text-decoration:none}
.faq-cta:hover{text-decoration:underline}
.faqs{display:flex;flex-direction:column;gap:1px}
.faq-item{background:var(--white)}
.faq-q{width:100%;background:none;border:none;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--black);text-align:left;gap:16px;transition:background .15s}
.faq-q:hover{background:var(--gray-50)}
.faq-q-icon{color:var(--gray-300);font-size:20px;flex-shrink:0;transition:transform .25s,color .25s;font-style:normal}
.faq-item.open .faq-q-icon{transform:rotate(45deg);color:var(--green)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 20px;font-size:13px;color:var(--gray-500);line-height:1.75}
.faq-a a{color:var(--green);text-decoration:none}
.faq-a a:hover{text-decoration:underline}
.faq-item.open .faq-a{max-height:240px}
/* ── CONTACT ── */
.contact{padding:96px 48px;background:var(--white)}
.contact-wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.contact-left .sec-sub{margin-bottom:32px}
.c-items{display:flex;flex-direction:column;gap:18px}
.c-item{display:flex;align-items:center;gap:14px}
.c-icon{width:38px;height:38px;background:var(--green-light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.c-label{font-size:11px;color:var(--gray-500);font-weight:500;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
.c-val{font-size:14px;font-weight:600;color:var(--black)}
.c-form{display:flex;flex-direction:column;gap:16px}
.c-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-input{width:100%;border:1.5px solid var(--gray-200);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--black);font-family:'Inter',sans-serif;outline:none;background:var(--gray-50);transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.02)}
.c-input:hover{border-color:var(--gray-300);background:var(--white)}
.c-input:focus{background:var(--white);border-color:var(--green);box-shadow:0 0 0 4px rgba(22,169,122,.15),inset 0 1px 2px rgba(0,0,0,0.02)}
.c-input::placeholder{color:var(--gray-400)}
textarea.c-input{height:120px;resize:vertical}
.c-submit{align-self:flex-start;background:var(--green);color:var(--white);padding:14px 28px;border-radius:12px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(22,169,122,0.3);transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.c-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,169,122,0.4);opacity:0.95}
/* ── FOOTER ── */
footer{background:var(--gray-900);padding:64px 48px 32px}
.foot-inner{max-width:1100px;margin:0 auto}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:28px}
.foot-brand-row{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.foot-brand-row svg{width:28px;height:28px;border-radius:6px}
.foot-brand-name{font-size:17px;font-weight:800;color:var(--white)}
.foot-brand-p{font-size:13px;color:rgba(255,255,255,.35);line-height:1.7;max-width:220px}
.foot-col h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.3);margin-bottom:16px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col ul a{font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s}
.foot-col ul a:hover{color:var(--white)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-copy{font-size:12px;color:rgba(255,255,255,.25)}
.socials{display:flex;gap:8px}
.soc{width:32px;height:32px;border:1px solid rgba(255,255,255,.1);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;transition:all .15s;color:var(--white)}
.soc:hover{border-color:var(--green);background:rgba(22,169,122,.15)}
/* ── POLICY PAGES ── */
.pol-hero{padding:110px 48px 52px;border-bottom:1px solid var(--gray-100);background:var(--gray-50)}
.pol-hero-in{max-width:720px}
.pol-hero h1{font-size:40px;font-weight:800;letter-spacing:-1.5px;margin-bottom:6px}
.pol-hero p{font-size:13px;color:var(--gray-500)}
.pol-body{max-width:720px;padding:60px 48px}
.pol-body h2{font-size:18px;font-weight:700;color:var(--black);margin:36px 0 10px;padding-top:10px;border-top:1px solid var(--gray-100)}
.pol-body h3{font-size:14px;font-weight:700;color:var(--gray-700);margin:16px 0 6px}
.pol-body p{font-size:14px;color:var(--gray-500);line-height:1.8;margin-bottom:10px}
.pol-body ul{padding-left:18px;margin-bottom:10px}
.pol-body li{font-size:14px;color:var(--gray-500);line-height:1.8;margin-bottom:3px}
.pol-body a{color:var(--green);text-decoration:none}
.pol-body a:hover{text-decoration:underline}
/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--gray-900);color:var(--white);padding:12px 22px;border-radius:8px;font-size:14px;font-weight:500;z-index:999;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 8px 32px rgba(0,0,0,.2);white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}
/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr 1fr;gap:40px}
  .hero-left{padding-bottom:48px}
  .hero-mockup-wrapper {
    max-width: 440px;
  }
  .dl-box{grid-template-columns:1fr}
  .dl-right{display:none}
  .faq-wrap{grid-template-columns:1fr;gap:40px}
  .contact-wrap{grid-template-columns:1fr;gap:48px}
}
@media(max-width:800px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-sub{margin:0 auto 36px}
  .hero-btns{justify-content:center}
  .hero-right{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-top:40px;
    padding-bottom:20px;
  }
  .hero-mockup-wrapper {
    max-width: 460px;
  }
}
@media(max-width:900px){
  .nav{padding:0 20px}
  .nav-center,.nav-right{display:none}
  .hamburger{display:flex}
  .hero{padding:90px 24px 0}
  .stats{padding:56px 24px}
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:32px}
  .stat{border-right:none;padding:0}
  .features,.how,.download,.faq,.contact{padding:64px 24px}
  /* Features Grid on Mobile */
  .feat-grid{
    grid-template-columns:1fr;
    background:transparent;
    gap:16px;
  }
  .feat-card{
    border-radius:16px;
    border:1px solid var(--gray-100);
    box-shadow:0 4px 12px rgba(0,0,0,0.02);
  }
  /* How It Works Steps Grid on Mobile */
  .steps{
    grid-template-columns:1fr 1fr;
    border:none;
    background:transparent;
    gap:16px;
    overflow:visible;
  }
  .step-card{
    border:1px solid var(--gray-100) !important;
    border-radius:16px;
    box-shadow:0 4px 12px rgba(0,0,0,0.02);
    background:var(--white);
    padding:32px 24px;
  }
  .step-card:last-child{border-right:none}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px}
  footer{padding:48px 24px 28px}
  /* Download Section Form & Padding on Mobile */
  .dl-left{padding:40px 24px}
  .dl-form{
    flex-direction:column;
    gap:12px;
    width:100%;
  }
  .dl-input, .dl-btn {
    width: 100%;
  }
  /* Store row stack */
  .dl-store-row{
    flex-direction:column;
    gap:10px;
    width:100%;
  }
  .dl-store{
    width:100%;
    justify-content:center;
  }
  .c-row{grid-template-columns:1fr}
  .pol-hero,.pol-body{padding-left:24px;padding-right:24px}
}
@media(max-width:600px){
  .steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column}
}
/* ── RESPONSIVE TEXT BREAKS ── */
.desktop-only {
  display: inline;
}
@media (max-width: 800px) {
  .desktop-only {
    display: none;
  }
}
/* ── HAMBURGER TO 'X' ANIMATION ── */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* ── PREMIUM VECTOR ICON STYLING ── */
.lucide {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}
/* Hero Button Icon */
.btn-icon {
  margin-right: 8px;
  stroke-width: 2.2px;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.hero-btn-main:hover .btn-icon {
  transform: rotate(15deg) scale(1.1);
}
/* Feature Grid Icon Enhancements */
.feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green-light);
  color: var(--green);
  margin-bottom: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.feat-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2px;
}
.feat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(22, 169, 122, 0.08);
  border-color: rgba(22, 169, 122, 0.15);
}
.feat-card:hover .feat-icon {
  background: var(--green);
  color: var(--white);
  transform: scale(1.05) rotate(5deg);
}
/* How It Works Steps */
.step-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-card:hover {
  background: var(--gray-50);
  transform: translateY(-4px);
}
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gray-50);
  color: var(--green);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}
.step-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2px;
}
.step-card:hover .step-icon {
  background: var(--green);
  color: var(--white);
  transform: scale(1.08);
}
/* Store Row Buttons */
.dl-store-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.dl-store {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.dl-store:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 169, 122, 0.2);
}
.dl-store svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
/* FAQ Icon rotation */
.faq-q-icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease, color 0.25s ease;
}
.faq-item.open .faq-q-icon svg {
  transform: rotate(45deg);
  color: var(--green);
}
/* Contact Details Icon */
.c-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--green);
  stroke-width: 2px;
  fill: none;
}
/* Social Media SVG icons */
.soc svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2px;
  fill: none;
  transition: transform 0.2s ease;
}
.soc:hover svg {
  transform: scale(1.1);
}
/* ── RESPONSIVE MOBILE TYPOGRAPHY ── */
@media(max-width: 600px) {
  .hero h1 {
    font-size: 34px !important;
    line-height: 1.22 !important;
    letter-spacing: 1px !important;
  }
  .dl-h {
    font-size: 29px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.8px !important;
  }
}
/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
  position: relative;
  display: inline-block;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.lang-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.lang-btn svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}
.lang-btn .chevron {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}
.lang-switcher.active .lang-btn .chevron {
  transform: rotate(180deg);
}
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0f1c16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px;
  min-width: 120px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 300;
  backdrop-filter: blur(12px);
}
.lang-switcher.active .lang-dropdown {
  display: flex;
  animation: dropdownFade 0.2s ease forwards;
}
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lang-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.lang-option:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
.lang-option.active {
  color: var(--white);
  background: var(--green);
  font-weight: 600;
}
/* Mobile Language Switcher */
.mobile-lang-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-lang-btn {
  flex: 1;
  text-align: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.mobile-lang-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
/* ── RTL OVERRIDES FOR ARABIC ── */
[dir="rtl"] {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
}
[dir="rtl"] .hero-inner {
  direction: rtl;
}
[dir="rtl"] .hero-left {
  text-align: right;
}
[dir="rtl"] .hero-sub {
  margin-left: auto;
  margin-right: 0;
}
[dir="rtl"] .hero-badge-dot {
  margin-left: 7px;
  margin-right: 0;
}
[dir="rtl"] .hero-btn-main svg,
[dir="rtl"] .hero-btn-sec svg {
  margin-left: 0;
  margin-right: 6px;
}
[dir="rtl"] .feat-grid {
  direction: rtl;
}
[dir="rtl"] .feat-card {
  text-align: right;
}
[dir="rtl"] .feat-icon {
  margin-left: auto;
  margin-right: 0;
}
[dir="rtl"] .steps {
  direction: rtl;
}
[dir="rtl"] .step-card {
  text-align: right;
  border-right: none !important;
  border-left: 1px solid var(--gray-100) !important;
}
[dir="rtl"] .step-card:last-child {
  border-left: none !important;
}
[dir="rtl"] .dl-box {
  direction: rtl;
}
[dir="rtl"] .dl-left {
  text-align: right;
}
[dir="rtl"] .faq-wrap {
  direction: rtl;
}
[dir="rtl"] .faq-left {
  text-align: right;
}
[dir="rtl"] .faq-q {
  text-align: right;
}
[dir="rtl"] .faq-a p {
  text-align: right;
}
[dir="rtl"] .contact-wrap {
  direction: rtl;
}
[dir="rtl"] .contact-left {
  text-align: right;
}
[dir="rtl"] .c-items {
  align-items: flex-start;
}
[dir="rtl"] .c-submit {
  align-self: flex-start;
}
[dir="rtl"] footer {
  direction: rtl;
}
[dir="rtl"] .foot-top {
  grid-template-columns: 2fr 1fr 1fr 1fr;
  text-align: right;
}
[dir="rtl"] .foot-brand-p {
  margin-left: auto;
  margin-right: 0;
}
@media(max-width: 900px) {
  [dir="rtl"] .nav-right {
    display: none;
  }
  [dir="rtl"] .mobile-nav.open {
    display: flex;
    text-align: right;
  }
  [dir="rtl"] .mobile-nav a {
    text-align: right;
  }
  [dir="rtl"] .steps {
    grid-template-columns: 1fr 1fr;
  }
  [dir="rtl"] .step-card {
    border-left: 1px solid var(--gray-100) !important;
  }
  [dir="rtl"] .step-card:nth-child(2n) {
    border-left: none !important;
  }
}
@media(max-width: 600px) {
  [dir="rtl"] .steps {
    grid-template-columns: 1fr;
  }
  [dir="rtl"] .step-card {
    border-left: none !important;
  }
  [dir="rtl"] .foot-top {
    grid-template-columns: 1fr;
  }
}
/* ── FRENCH SPECIFIC OVERRIDES ── */
html[lang="fr"] .hero h1 {
  font-size: clamp(36px, 4.2vw, 54px);
}

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  border: none;
  box-shadow: 0 4px 16px rgba(22, 169, 122, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background: var(--green-hero);
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(10, 46, 30, 0.4);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5px;
}

/* RTL Overrides for Back to Top */
[dir="rtl"] .back-to-top {
  right: auto;
  left: 32px;
}

/* ── PREMIUM LEGAL UI/UX DESIGN ── */
.legal-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 48px;
}
.legal-sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 16px;
}
.legal-sidebar h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gray-500);
  margin-bottom: 16px;
  font-weight: 700;
}
.legal-sidebar ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-sidebar a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  padding: 8px 16px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
  border-radius: 0 6px 6px 0;
}
.legal-sidebar a:hover {
  color: var(--green);
  background: var(--gray-50);
}
.legal-sidebar a.active {
  color: var(--green);
  border-left-color: var(--green);
  background: var(--green-light);
  font-weight: 600;
}

/* Metadata Cards */
.legal-meta-card {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--gray-50);
  box-shadow: 0 4px 20px rgba(0,0,0,0.01);
}
.legal-meta-card h3 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  font-size: 16px !important;
  color: var(--black) !important;
  font-weight: 700 !important;
  border-top: none !important;
  padding-top: 0 !important;
}
.legal-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 14px;
  gap: 16px;
}
.legal-meta-row:last-of-type {
  border-bottom: none;
}
.legal-meta-label {
  font-weight: 600;
  color: var(--gray-900);
}
.legal-meta-value {
  color: var(--gray-700);
  text-align: right;
}
.legal-meta-value a {
  color: var(--green);
  text-decoration: none;
}
.legal-meta-value a:hover {
  text-decoration: underline;
}

/* Pol Hero Enhancement */
.pol-hero {
  padding: 120px 48px 64px;
  background: linear-gradient(135deg, var(--green-hero) 0%, #03140d 100%);
  color: var(--white);
  border-bottom: none;
}
.pol-hero-in {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.pol-hero h1 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--white);
  margin-bottom: 8px;
}
.pol-hero p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.pol-hero .sec-tag {
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  display: inline-block;
}

/* Typographic upgrades */
.pol-body {
  padding: 0;
  max-width: 100%;
}
.pol-body h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin: 40px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  letter-spacing: -0.5px;
}
.pol-body h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.pol-body h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 24px 0 10px;
}
.pol-body p {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 16px;
}
.pol-body ul {
  padding-left: 20px;
  margin-bottom: 20px;
}
.pol-body li {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 8px;
}
.pol-body strong {
  color: var(--black);
}

/* Responsive grid */
@media (max-width: 900px) {
  .legal-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 24px;
  }
  .legal-sidebar {
    display: none;
  }
  .pol-hero {
    padding: 100px 24px 48px;
  }
  .pol-hero h1 {
    font-size: 28px;
  }
  .pol-body h2 {
    font-size: 18px;
    margin-top: 32px;
    padding-top: 16px;
  }
}

/* RTL overrides for Policy & Doc Layouts */
[dir="rtl"] .legal-sidebar {
  padding-right: 0;
  padding-left: 16px;
}
[dir="rtl"] .legal-sidebar a {
  border-left: none;
  border-right: 2px solid transparent;
  border-radius: 6px 0 0 6px;
}
[dir="rtl"] .legal-sidebar a.active {
  border-right-color: var(--green);
}
[dir="rtl"] .legal-meta-value {
  text-align: left;
}
[dir="rtl"] .pol-hero {
  text-align: right;
}
[dir="rtl"] .pol-body {
  text-align: right;
  direction: rtl;
}
[dir="rtl"] .pol-body h2 {
  text-align: right;
  border-top: 1px solid var(--gray-200);
}
[dir="rtl"] .pol-body h3 {
  text-align: right;
}
[dir="rtl"] .pol-body ul {
  padding-left: 0;
  padding-right: 20px;
}