/* Bookeley — cheerful Scandinavian-minimal brand system */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --cream:#FBF7EF;
  --paper:#FFFFFF;
  --ink:#26313A;
  --ink-soft:#5C6B74;
  --coral:#FF6F59;
  --coral-deep:#E85A45;
  --mustard:#F6B93B;
  --teal:#2FA79A;
  --teal-deep:#22867B;
  --line:#EAE3D4;
  --radius-lg:28px;
  --radius-md:18px;
  --maxw:1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  line-height:1.65;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--teal-deep); text-decoration-thickness:2px; text-underline-offset:3px;}
a:focus-visible, button:focus-visible, select:focus-visible{outline:3px solid var(--coral); outline-offset:3px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* Nav */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 0; flex-wrap:wrap; gap:14px;
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.4rem;
  color:var(--ink); text-decoration:none;
}
.brand .mark{
  width:34px; height:34px; border-radius:50%; background:var(--coral);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.nav-right{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.navlinks{display:flex; gap:24px; font-size:0.95rem;}
.navlinks a{color:var(--ink-soft); text-decoration:none; font-weight:500;}
.navlinks a:hover{color:var(--coral-deep);}

.lang-switch{
  appearance:none; -webkit-appearance:none;
  background:var(--paper); border:2px solid var(--line); border-radius:999px;
  padding:8px 34px 8px 16px; font-family:'Karla',sans-serif; font-weight:700; font-size:0.85rem;
  color:var(--ink); cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2326313A'><path d='M5 7l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
}
[dir="rtl"] .lang-switch{
  padding:8px 16px 8px 34px;
  background-position:left 10px center;
}
.lang-switch:hover{border-color:var(--teal);}

/* Hero */
.hero{padding:36px 0 30px; text-align:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:22px; font-weight:700;
  background:rgba(47,167,154,0.1); padding:7px 16px; border-radius:999px;
}
h1.title{
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:clamp(2.3rem, 5.4vw, 3.6rem); margin:0 0 20px; color:var(--ink);
  line-height:1.14;
}
h1.title .accent{color:var(--coral);}
.subtitle{
  max-width:560px; margin:0 auto 34px; color:var(--ink-soft); font-size:1.15rem;
}
.store-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.store-btn{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:0;
  background:var(--ink); border:none;
  padding:12px 24px; border-radius:16px; color:var(--paper); text-decoration:none;
  font-weight:700; font-size:0.98rem; transition:transform .15s ease;
}
.store-btn:hover{transform:translateY(-2px);}
.store-btn .soon{display:block; font-size:0.72rem; font-weight:500; color:#C7CFD4; margin-top:1px;}

/* Hero illustration */
.hero-art{margin:20px auto 0; max-width:520px;}
.hero-art svg{width:100%; height:auto; display:block;}

/* Features */
.features{padding:50px 0 60px;}
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
@media (max-width:800px){.grid3{grid-template-columns:1fr;}}
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px 26px;
}
.card .swatch{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:18px;
}
.card:nth-child(1) .swatch{background:rgba(255,111,89,0.14);}
.card:nth-child(2) .swatch{background:rgba(47,167,154,0.14);}
.card:nth-child(3) .swatch{background:rgba(246,185,59,0.18);}
.card h3{font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.2rem; margin:0 0 10px; color:var(--ink);}
.card p{margin:0; color:var(--ink-soft); font-size:0.97rem;}

/* Languages strip */
.languages{padding:6px 0 66px; text-align:center;}
.languages p{color:var(--ink-soft); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:18px; font-weight:700;}
.lang-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.lang-pill{
  border:2px solid var(--line); border-radius:999px; padding:8px 18px;
  font-size:0.9rem; color:var(--ink); background:var(--paper); font-weight:600;
}

/* Footer */
footer{border-top:2px solid var(--line); padding:34px 0; margin-top:10px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a{color:var(--ink-soft); text-decoration:none; font-size:0.9rem; font-weight:600;}
.footer-links a:hover{color:var(--coral-deep);}
.copyright{color:var(--ink-soft); font-size:0.85rem;}

/* Legal / content pages */
.page{padding:40px 0 80px;}
.page h1{
  font-family:'Fredoka', sans-serif; font-weight:600;
  font-size:2.3rem; margin:0 0 6px; color:var(--ink);
}
.page .updated{color:var(--ink-soft); font-size:0.9rem; margin-bottom:36px; display:block;}
.page h2{
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.28rem;
  color:var(--teal-deep); margin:34px 0 12px;
}
.page p, .page li{color:var(--ink-soft); font-size:1rem;}
.page ul{padding-left:22px;}
.page strong{color:var(--ink);}
.back-link{display:inline-flex; align-items:center; gap:6px; margin-bottom:26px; color:var(--ink-soft); text-decoration:none; font-size:0.9rem; font-weight:600;}
.back-link:hover{color:var(--coral-deep);}

.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-item h2{margin:0 0 8px; font-size:1.08rem;}
.contact-box{
  margin-top:40px; padding:26px; border:2px solid var(--line); border-radius:var(--radius-lg);
  background:var(--paper);
}

/* RTL (Arabic) */
[dir="rtl"] .page ul{padding-left:0; padding-right:22px;}
[dir="rtl"] .back-link svg{transform:scaleX(-1);}