:root{
  --bg:#f7f7f8; --card:#fff; --muted:#6b7280; --text:#0f172a;
  --green:#19c37d; --green-600:#0ea86b; --mint:#dff7ec; --stroke:#e5e7eb;
  --shadow:0 10px 30px rgba(16,24,40,.06); --radius:14px; --radius-pill:999px; --maxw:1140px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  color:var(--text);
  background: radial-gradient(1000px 500px at 50% -200px,#fff,var(--bg) 60%),var(--bg);
  line-height:1.5;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.header{position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
  background: color-mix(in oklab, #fff 70%, transparent); border-bottom:1px solid var(--stroke)}
.header-wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#19c37d 0%,#10b981 50%,#34d399 100%);
  display:grid; place-items:center; color:#fff; font-weight:800; box-shadow:var(--shadow)}
.brand h1{font-size:18px; margin:0; letter-spacing:.2px}
.lang{position:relative}
.lang-btn{
  display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--stroke);
  padding:8px 12px; border-radius:12px; cursor:pointer; min-width:130px; justify-content:space-between
}
.lang-list{
  position:absolute; right:0; top:110%; background:var(--card); border:1px solid var(--stroke);
  border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; width:240px; max-height:60vh; overflow:auto;
}
.lang.open .lang-list{display:block}
.lang-item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer}
.lang-item:hover{background:#f3f4f6}
.flag{
font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", system-ui, sans-serif;
font-size: 20px;          /* makes flags crisp */
line-height: 1;
display: inline-block;
width: 20px;
height: 20px;
}

/* Flag images for desktop */
.flag-img{
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  display: none; /* Hidden by default, shown on desktop */
}

/* Show flag images on desktop, hide emoji */
@media (min-width: 961px) {
  .flag-img{
    display: inline-block;
  }
  .flag-emoji{
    display: none;
  }
}

/* Show emoji on mobile, hide images */
@media (max-width: 960px) {
  .flag-img{
    display: none;
  }
  .flag-emoji{
    display: inline-block;
  }
}
.hero{padding:56px 0 20px}
.hero-layout{display:grid; grid-template-columns:1fr 380px; gap:60px; align-items:center; margin-bottom:40px}
.hero-content{max-width:none}
.hero h2{margin:0 0 8px; font-size:clamp(32px,5vw,48px); line-height:1.05; letter-spacing:-.02em; text-align:left}
.hero .kicker{text-align:left; color:var(--muted); font-weight:600; margin-bottom:6px}
.hero p.lead{text-align:left; color:#4b5563; max-width:none; margin:12px 0 28px; font-size:clamp(16px,2.2vw,18px)}
.chips{display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; margin:16px 0 8px}
.chip{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--card); border:1px solid var(--stroke);
  border-radius:14px; box-shadow:var(--shadow); min-width:140px; justify-content:center; position:relative}
.chip svg{width:18px; height:18px}
.chip span{font-weight:600}
.chip-new{border-color:var(--green); background:linear-gradient(135deg, var(--card) 0%, var(--mint) 100%)}
.chip-badge{
  position:absolute; top:-6px; right:-6px; background:var(--green); color:#fff;
  font-size:9px; font-weight:800; padding:2px 6px; border-radius:8px;
  box-shadow:0 2px 8px rgba(25,195,125,0.3); letter-spacing:0.5px;
}
.stats{display:flex; gap:32px; justify-content:flex-start; align-items:center; color:#111827; margin-top:24px; flex-wrap:wrap}
.stat{display:grid; place-items:center; min-width:140px}
.stat .label{color:var(--muted); font-weight:600; letter-spacing:.2px}
.stars{display:flex; gap:4px; margin-top:8px}
.trust{margin:22px 0 32px; width:max-content; background:var(--mint); color:#065f46; padding:10px 14px;
  border-radius:var(--radius-pill); font-weight:600; border:1px solid #b7ebd3}
.cta{display:flex; justify-content:flex-start; margin:8px 0 20px}

.hero-video{position:relative; overflow:hidden; border-radius:20px; background:#000; aspect-ratio:3/4; box-shadow:var(--shadow)}
.hero-video-element{width:100%; height:100%; object-fit:cover; display:block}
.hero-divider{height:1px; background:linear-gradient(90deg, transparent, var(--stroke), transparent); margin:40px auto; max-width:300px}
.cta a{display:inline-flex; align-items:center; gap:10px; background:var(--green); color:#fff; text-decoration:none;
  padding:16px 28px; font-weight:800; border-radius:18px; box-shadow:0 12px 20px rgba(25,195,125,.25); transition:.2s}
.cta a:hover{background:var(--green-600); transform:translateY(-1px)}
.cta a svg{width:18px; height:18px}
section{padding:64px 0}
.btn-appstore{
display:inline-flex; align-items:center; gap:10px;
background:var(--green); color:#fff; text-decoration:none;
padding:16px 24px; font-weight:800; border-radius:18px;
box-shadow:0 12px 20px rgba(25,195,125,.25); transition:.2s ease;
white-space:nowrap;
}
.btn-appstore:hover{ background:var(--green-600); transform:translateY(-1px) }

.apple-icon{
width:20px; height:20px; object-fit:contain; display:block;
filter: brightness(0) invert(1); /* keep it white on green */
}

.dash{ opacity:.8 }

.section-title{text-align:center; font-size:clamp(24px,4vw,36px); margin:0 0 12px}
.section-sub{color:var(--muted); text-align:center; max-width:780px; margin:8px auto 36px}
.grid{display:grid; gap:20px; grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 4; background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:perspective(1000px) rotateX(-5deg) translateY(-4px); box-shadow:0 20px 40px rgba(16,24,40,.15)}
.card h3{margin:6px 0 8px; font-size:20px}
.card p{color:#4b5563; margin:0}
.card .icon{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:8px; background:#eef7f2; color:#0f766e; transition:all .2s ease; position:relative; overflow:visible}
.card .icon::before{content:''; position:absolute; inset:0; border-radius:12px; background:#eef7f2; transition:all .15s ease; z-index:-1}
.card:hover .icon{transform:scale(1.15); color:#065f46}
.card:hover .icon::before{transform:scale(1.1); box-shadow:0 8px 25px rgba(15,118,110,.3), 0 3px 10px rgba(15,118,110,.2)}
.card .icon span{font-size:20px; transition:transform .15s ease}
.card:hover .icon span{transform:scale(1.2)}
.highlight{display:grid; gap:24px; align-items:center; grid-template-columns:1.1fr 1fr; background:linear-gradient(180deg,#fff,#f7fbf9);
  border:1px solid var(--stroke); border-radius:20px; padding:26px; box-shadow:var(--shadow)}
.highlight .pane{background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:16px}
.donation-card{
position: relative;
max-width: 760px;
margin: 24px auto 28px;
background: linear-gradient(180deg, #ffffff, #f7fbf9);
border: 1px solid var(--stroke);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 16px 16px 14px;
transform: rotate(-1.6deg);
transition: transform .2s ease, box-shadow .2s ease;
}
.donation-card:hover{
transform: rotate(0deg) translateY(-2px);
box-shadow: 0 16px 30px rgba(16,24,40,.10);
}
.donation-badge{
position: absolute; top: -12px; left: 14px;
background: var(--mint); color: #065f46;
border: 1px solid #b7ebd3;
font-weight: 700; padding: 6px 10px;
border-radius: 999px; font-size: 12px;
}
.donation-title{
margin: 6px 0 6px;
font-size: 16px; line-height: 1.35;
letter-spacing: .1px;
}
.donation-text{
margin: 0 0 6px; color: #4b5563; font-size: 14px;
}
.donation-links{
list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
}
.donation-links a{
font-weight: 700; text-decoration: none; color: #0f766e;
border-bottom: 1px dashed rgba(15,118,110,.35);
}
.donation-links a:hover{ color:#0ea86b; border-bottom-color: transparent; }
.donation-desc{
color:#6b7280; font-size: 13px; margin-left: 4px;
}
.contact-inner{
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}

.contact-inner h3{
margin: 0 0 12px;
}

form label{
display: block;
font-weight: 600;
margin: 8px 0 4px;
}

form input, form textarea{
width: 100%;
padding: 10px;
border: 1px solid var(--stroke);
border-radius: 8px;
font-size: 14px;
margin-bottom: 12px;
}

form button{
background: var(--green);
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: background .2s ease;
}

form button:hover{
background: var(--green-600);
}
/* Modal wrapper */
.modal{
position: fixed;
inset: 0;
display: none;
z-index: 999;
}

/* Backdrop */
.modal-backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
}

/* Content box */
.modal-content{
position: relative;
width: min(800px, 94%);
height: min(90vh, 800px);
margin: 40px auto;
background: var(--card);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
animation: popIn 0.25s ease;
}

@keyframes popIn{
from{transform: scale(0.96); opacity: 0;}
to{transform: scale(1); opacity: 1;}
}

/* Close button */
.modal-close{
position: absolute;
top: 8px; right: 12px;
background: transparent;
border: none;
font-size: 28px;
cursor: pointer;
color: #444;
z-index: 10;
}

.modal.show{
display: block;
}

/* Footer link style */
footer a,
a[href="#contact"]{
color: var(--muted);               /* soft grey tone */
font-weight: 600;
text-decoration: none;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: color .2s ease, border-color .2s ease;
}

footer a:hover,
a[href="#contact"]:hover{
color: var(--green);               /* brand green on hover */
border-color: var(--green);        /* underline highlight */
}


/* RTL tweak so the tilt feels natural */
[dir="rtl"] .donation-card{ transform: rotate(1.6deg); }
[dir="rtl"] .donation-card:hover{ transform: rotate(0deg) translateY(-2px); }

/* Small screens */
@media (max-width: 520px){
.donation-card{ padding: 14px; margin: 18px 12px; }
.donation-title{ font-size: 15px; }
.donation-desc{ display:block; margin-left:0; }
}

.tag{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:12px; background:var(--mint); color:#065f46; font-weight:600; border:1px solid #b7ebd3; margin-bottom:10px}

/* FAQ Styles */
.faq-container{max-width:800px; margin:0 auto}
.faq-item{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; box-shadow:var(--shadow)}
.faq-question{width:100%; padding:20px 24px; background:none; border:none; text-align:left; font-size:16px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background .2s}
.faq-question:hover{background:#f9fafb}
.faq-icon{transition:transform .2s; color:var(--muted)}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(180deg)}
.faq-answer{padding:0 24px; max-height:0; overflow:hidden; transition:all .3s ease; border-top:1px solid transparent}
.faq-item.active .faq-answer{max-height:200px; padding:0 24px 20px; border-color:var(--stroke)}
.faq-answer p{margin:0; color:#4b5563; line-height:1.6}

footer{padding:36px 0 60px; color:#6b7280; border-top:1px solid var(--stroke); text-align:center; font-size:14px}

/* Privacy Toast */
.privacy-toast{
  position:fixed; bottom:20px; left:20px; right:20px; max-width:480px; margin:0 auto;
  background:var(--card); border:1px solid var(--stroke); border-radius:12px; padding:16px 20px;
  box-shadow:var(--shadow); z-index:1000; transform:translateY(100px); opacity:0;
  transition:all .3s ease; font-size:14px; line-height:1.4;
}
.privacy-toast.show{transform:translateY(0); opacity:1}
.privacy-toast p{margin:0 0 12px; color:var(--text)}
.privacy-toast-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.privacy-toast button{background:var(--green); color:#fff; border:none; padding:8px 16px;
  border-radius:8px; font-weight:600; cursor:pointer; font-size:13px; transition:.2s}
.privacy-toast button:hover{background:var(--green-600)}
.privacy-toast .btn-link{background:none; color:var(--muted); text-decoration:underline; padding:8px 4px}
.privacy-toast .btn-link:hover{color:var(--text); background:none}

/* iOS Promo Bar */
.ios-promo-bar{
  display:none; /* Hidden by default, shown only on mobile */
  background:linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  color:#fff; padding:8px 16px; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:600; position:fixed; top:0; left:0; right:0; z-index:1001;
}
.ios-promo-close{
  background:none; border:none; color:#fff; padding:4px; cursor:pointer;
  opacity:0.8; transition:opacity .2s; border-radius:4px; display:flex; align-items:center;
}
.ios-promo-close:hover{opacity:1; background:rgba(255,255,255,0.1)}
.ios-promo-content{
  display:flex; align-items:center; gap:8px; flex:1; justify-content:center;
}
.ios-promo-text{
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.ios-promo-title{
  font-weight:700; font-size:13px; line-height:1.2;
}
.ios-promo-stars{
  display:flex; gap:1px; opacity:0.9;
}
.ios-promo-btn{
  background:rgba(255,255,255,0.2); color:#fff; text-decoration:none;
  padding:6px 12px; border-radius:16px; font-weight:700; font-size:12px;
  border:1px solid rgba(255,255,255,0.3); transition:all .2s;
}
.ios-promo-btn:hover{
  background:rgba(255,255,255,0.3); transform:translateY(-1px);
}

/* Responsive button text */
.btn-text-mobile { display: none; }
.btn-text-desktop { display: inline; }

/* Mobile badge for button */
.mobile-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width:960px){
  .card{grid-column:span 6} 
  .highlight{grid-template-columns:1fr; padding:20px}
  .hero-layout{grid-template-columns:1fr; gap:40px; text-align:center}
  .hero-video{max-width:300px; margin:0 auto}
  .hero h2{text-align:center}
  .hero .kicker{text-align:center}
  .hero p.lead{text-align:center; max-width:680px; margin:12px auto 28px}
  .chips{justify-content:center}
  .stats{justify-content:center}
  .trust{margin:22px auto 32px}
  .cta{justify-content:center}
  
  /* Show iOS promo bar only on mobile */
  .ios-promo-bar{display:flex}
  
  /* Adjust header position when promo bar is visible */
  .header{top:40px; z-index:1000; transition:top 0.3s ease}
  
  /* Adjust hero padding for fixed headers */
  .hero{padding-top:96px} /* 40px promo + 68px header - 12px overlap */
  
  /* Switch to mobile button text */
  .btn-text-desktop { display: none; }
  .btn-text-mobile { display: inline; }
  
  /* Add extra bottom padding to submit button on mobile */
  #betaSubmitBtn {
    margin-bottom: 60px !important;
  }
}
@media (max-width:640px){
  .chips .chip{min-width:120px} 
  .card{grid-column:span 12} 
  .stat{min-width:120px}
  .hero-layout{gap:30px}
  .hero-video{max-width:250px}
}
/* App Badge Styles */
.app-badge:hover {
  background: var(--mint) !important;
  border-color: var(--green) !important;
  transform: translateY(-1px);
}

.app-badge.selected {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: white !important;
}

/* Use Case Badge Styles */
.use-case-badge:hover {
  background: var(--mint) !important;
  border-color: var(--green) !important;
  transform: translateY(-1px);
}

.use-case-badge.selected {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: white !important;
}

/* Drag & Drop Feature Ranking Styles */
.feature-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.feature-card.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
  z-index: 1000;
}

.feature-card:active {
  cursor: grabbing !important;
}

.feature-ranking.drag-over {
  background: var(--mint);
  border-radius: 12px;
}

.drop-indicator {
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  margin: 4px 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.drop-indicator.show {
  opacity: 1;
}

/* RTL tweaks */
[dir="rtl"] .brand h1,[dir="rtl"] .hero h2,[dir="rtl"] .hero .kicker,[dir="rtl"] .hero p.lead,
[dir="rtl"] .section-title,[dir="rtl"] .section-sub{text-align:center}
[dir="rtl"] .lang-list{left:0; right:auto}