:root{
  --teal:#1d3b3a; --teal-2:#2a5250; --sand:#f6efe2; --sand-2:#ece1cc;
  --terra:#c4553a; --saffron:#e9a23b; --ink:#1b1a17; --wa:#1fa855;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:clip;font-family:'Manrope',system-ui,sans-serif;background:var(--sand);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:#fff;padding:8px 12px;z-index:99;transition:top .15s}.skip:focus{top:12px}
h1,h2,h3,.logo span,.footer-logo,.price-num{font-family:'Fraunces',Georgia,serif}
em{font-style:italic;color:var(--terra)}

/* NAV */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 5vw;background:rgba(246,239,226,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--sand-2)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.35rem;font-weight:800;color:var(--teal)}
.logo i{font-style:normal;color:var(--terra)}
.nav nav{display:flex;align-items:center;gap:22px;font-weight:600;font-size:.95rem}
.nav nav a{text-decoration:none}
.nav nav a:not(.btn):hover{color:var(--terra)}

/* BUTTONS */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 26px;border-radius:999px;border:2px solid transparent;font:800 1rem 'Manrope',sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn span{font-size:.72rem;font-weight:600;opacity:.85}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 22px rgba(31,168,85,.35)}
.btn-wa:hover{box-shadow:0 12px 28px rgba(31,168,85,.45)}
.btn-ghost{border-color:var(--teal);color:var(--teal)}
.btn-ghost:hover{background:var(--teal);color:var(--sand)}
.btn-ghost-light{border-color:var(--sand);color:var(--sand)}
.btn-ghost-light:hover{background:var(--sand);color:var(--teal)}
.btn-small{padding:9px 18px;font-size:.9rem;background:var(--teal);color:var(--sand)}

/* HERO */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:clamp(40px,8vw,100px) 5vw clamp(50px,8vw,90px)}
.zellige{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
   radial-gradient(circle at 100% 0,rgba(196,85,58,.18),transparent 45%),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 4l8 14 16-3-3 16 14 9-14 9 3 16-16-3-8 14-8-14-16 3 3-16-14-9 14-9-3-16 16 3z' fill='none' stroke='%231d3b3a' stroke-opacity='.09' stroke-width='1.2'/%3E%3C/svg%3E")}
.hero-inner,.ticket{position:relative}
.eyebrow{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--terra);margin-bottom:18px}
h1{font-size:clamp(2.4rem,6.5vw,5rem);line-height:1.02;font-weight:800;color:var(--teal);letter-spacing:-.02em}
.problem-line{display:block;min-height:2.1em;font-weight:500;font-size:.55em;color:#7a6f5c}
.problem-line s{text-decoration-color:var(--terra);text-decoration-thickness:3px}
.problem-line s::after{content:'|';margin-inline-start:2px;animation:blink 1s steps(1) infinite;color:var(--terra)}
@keyframes blink{50%{opacity:0}}
.solved-line{display:block}
.solved-line em{color:var(--wa)}
.lead{margin:22px 0 28px;font-size:1.15rem;max-width:36em;color:#3b3a34}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-weight:600;font-size:.9rem;color:var(--teal-2)}
.trust li::before{content:'✓';margin-inline-end:7px;color:var(--wa);font-weight:800}

/* TICKET */
.ticket{background:#fffaf0;border:2px dashed var(--teal);border-radius:var(--radius);padding:22px;transform:rotate(2.5deg);box-shadow:0 22px 40px rgba(29,59,58,.18);animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:rotate(1deg) translateY(-8px)}}
.ticket-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.75rem;letter-spacing:.12em;color:#8a7f69}
.stamp{color:var(--wa);border:2px solid var(--wa);padding:2px 10px;border-radius:6px;transform:rotate(-6deg);font-size:.85rem}
.ticket-h{font:800 1.25rem 'Fraunces',serif;margin:14px 0 6px;color:var(--teal)}
.ticket-p{font-size:.92rem;color:#4a483f}
.ticket-bar{height:8px;border-radius:99px;background:var(--sand-2);margin:16px 0 8px;overflow:hidden}
.ticket-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--saffron),var(--wa));transform-origin:left;animation:fill 3.2s ease-out infinite}
@keyframes fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.ticket-foot{font-size:.75rem;color:#8a7f69}

/* TICKER */
.ticker{background:var(--teal);color:var(--sand);overflow:hidden;white-space:nowrap;padding:14px 0;transform:rotate(-1deg);margin:0 -2vw}
.ticker-track{display:inline-flex;gap:0;animation:scroll 32s linear infinite}
.ticker span{font:500 1.3rem 'Fraunces',serif;padding:0 26px}
.ticker span::after{content:'✦';margin-left:52px;color:var(--saffron)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:clamp(60px,9vw,110px) 5vw}
.section h2{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:800;line-height:1.1;color:var(--teal);margin-bottom:34px;letter-spacing:-.01em;max-width:18em}
.section .sub{margin:-18px 0 28px;color:#5a574b}
.dark{background:var(--teal);color:var(--sand)}
.dark h2{color:var(--sand)}
.dark em{color:var(--saffron)}

/* STEPS */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps li{background:#fffaf0;border-radius:var(--radius);padding:28px;position:relative;border:1px solid var(--sand-2)}
.steps b{font:800 3.4rem 'Fraunces',serif;color:var(--saffron);line-height:1;display:block;margin-bottom:6px}
.steps h3{font-size:1.25rem;margin-bottom:8px;color:var(--teal)}
.steps p{font-size:.97rem;color:#4a483f}

/* CARDS */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--teal-2);border-radius:var(--radius);padding:34px;border:1px solid rgba(246,239,226,.12);display:flex;flex-direction:column;gap:14px}
.card h3{font-size:1.7rem}
.card ul{list-style:none;display:grid;gap:8px;margin:6px 0 14px}
.card li::before{content:'→';color:var(--saffron);margin-inline-end:10px;font-weight:800}
.card .btn{align-self:flex-start;margin-top:auto}
.tag{align-self:flex-start;font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:99px;background:rgba(246,239,226,.12)}
.tag-live{background:var(--terra);color:#fff}
.tag-live::before{content:'●';margin-inline-end:6px;animation:blink 1.2s infinite}

/* BUILDER */
.builder{background:#fffaf0;border:2px solid var(--teal);border-radius:var(--radius);padding:clamp(22px,4vw,40px);box-shadow:8px 8px 0 var(--teal)}
.b-label{font-weight:800;margin:0 0 10px;color:var(--teal)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.chips button{font:600 .95rem 'Manrope',sans-serif;padding:10px 18px;border-radius:99px;border:2px solid var(--teal);background:transparent;color:var(--teal);cursor:pointer;transition:.15s}
.chips button:hover{background:var(--sand-2)}
.chips button.on{background:var(--teal);color:var(--sand);transform:scale(1.04)}
.b-out{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:20px;border-top:2px dashed var(--sand-2)}
#b-preview{flex:1;min-width:240px;font-style:italic;color:#4a483f}

/* PRICE */
.price{padding-top:0}
.price-box{display:flex;flex-wrap:wrap;align-items:center;gap:36px;background:var(--saffron);border-radius:28px;padding:clamp(28px,5vw,56px)}
.price-num{font-size:clamp(5rem,16vw,10rem);font-weight:800;line-height:.9;color:var(--teal)}
.price-box h2{margin-bottom:12px;font-size:clamp(1.7rem,3.5vw,2.5rem)}
.price-box p{max-width:34em}
.price-box .small{font-size:.85rem;margin-top:10px;opacity:.8}

/* CITIES */
.cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.city{background:#fffaf0;border-radius:var(--radius);padding:22px;border:1px solid var(--sand-2);border-bottom:5px solid var(--terra)}
.city h3{font-size:1.35rem;color:var(--teal)}
.city p{font-size:.9rem;color:#5a574b}

/* LIMITS */
.limits{padding-top:0}
.limits-box{background:#fffaf0;border-inline-start:8px solid var(--terra);border-radius:var(--radius);padding:clamp(24px,4vw,44px)}
.limits-box h2{font-size:1.8rem;margin-bottom:12px}

/* FAQ */
.faq{max-width:820px;display:grid;gap:12px}
.faq details{background:#fffaf0;border-radius:14px;border:1px solid var(--sand-2);padding:18px 22px}
.faq summary{cursor:pointer;font-weight:800;color:var(--teal);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:'+';font-size:1.4rem;line-height:1;color:var(--terra)}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:12px;color:#4a483f}

/* FORM */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px}
.form label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.form .wide{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;padding:13px 15px;border-radius:12px;border:2px solid transparent;background:var(--sand);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--saffron)}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.form .check input{margin-top:5px;width:auto}
.form .check a{color:var(--saffron)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.form button{border:0}
.notice{max-width:860px;padding:16px 20px;border-radius:14px;margin-bottom:22px;font-weight:600}
.notice.ok{background:#d9f2e2;color:#14552d}.notice.err{background:#fbdcd5;color:#7a2514}

/* FOOTER */
.footer{background:#12292a;color:#cfc6b2;padding:56px 5vw 40px;font-size:.93rem}
.footer a{color:var(--sand)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr;gap:30px;margin-bottom:34px}
.footer-logo{font-size:1.6rem;font-weight:800;color:var(--sand)}.footer-logo i{font-style:normal;color:var(--terra)}
.footer-h{font-weight:800;color:var(--saffron);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;margin-bottom:8px}
.footer-legal{border-top:1px solid rgba(246,239,226,.15);padding-top:22px;font-size:.8rem;opacity:.75}

/* WA FLOAT */
.wa-float{position:fixed;inset-inline-end:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.28);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,168,85,.55),0 10px 26px rgba(0,0,0,.28)}70%{box-shadow:0 0 0 18px rgba(31,168,85,0),0 10px 26px rgba(0,0,0,.28)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0),0 10px 26px rgba(0,0,0,.28)}}

/* LEGAL PAGES */
.legal{max-width:760px;margin:0 auto;padding:60px 5vw 90px}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:8px}
.legal h2{font-size:1.4rem;margin:30px 0 8px;color:var(--teal);font-family:'Fraunces',serif}
.legal p,.legal li{margin-bottom:10px;color:#3b3a34}
.legal ul{padding-inline-start:22px}
.legal .upd{color:#8a7f69;font-size:.9rem;margin-bottom:24px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .ticket{max-width:380px;transform:rotate(1.5deg)}
  .steps,.cards,.footer-grid{grid-template-columns:1fr}
  .nav nav a:not(.btn){display:none}
}
@media(max-width:600px){
  .form{grid-template-columns:1fr}
  body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* LANGUAGE SWITCHER */
.lang{display:flex;gap:2px;background:var(--sand-2);border-radius:99px;padding:3px;font-weight:800;font-size:.8rem}
.lang a{text-decoration:none;padding:5px 11px;border-radius:99px;color:var(--teal);transition:.15s}
.lang a:hover{background:rgba(29,59,58,.1)}
.lang a.on{background:var(--teal);color:var(--sand)}
.price-num small{font-size:.28em;margin-inline-start:.15em;vertical-align:top;line-height:1.6;display:inline-block}
.nav{flex-wrap:wrap}

/* ARABIC / RTL */
html[lang=ar] body,html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .price-num,html[lang=ar] .ticker span,html[lang=ar] .ticket-h,html[lang=ar] .steps b,html[lang=ar] .footer-logo,html[lang=ar] .logo span{font-family:'Cairo','Manrope',system-ui,sans-serif}
html[lang=ar] body{line-height:1.85}
html[lang=ar] h1{letter-spacing:0;line-height:1.25}
html[lang=ar] .section h2{letter-spacing:0;line-height:1.35;max-width:22em}
html[lang=ar] .eyebrow,html[lang=ar] .footer-h,html[lang=ar] .tag,html[lang=ar] .ticket-top{letter-spacing:0}
html[lang=ar] em{font-style:normal}
html[dir=rtl] .card li::before{content:'←'}
html[dir=rtl] .builder{box-shadow:-8px 8px 0 var(--teal)}
html[dir=rtl] .ticker-track{animation-name:scroll-rtl}
@keyframes scroll-rtl{to{transform:translateX(50%)}}
html[dir=rtl] .ticker span::after{margin-left:0;margin-right:52px}
html[dir=rtl] .ticket{transform:rotate(-2.5deg);animation-name:float-rtl}
@keyframes float-rtl{50%{transform:rotate(-1deg) translateY(-8px)}}
html[dir=rtl] .ticket-bar i{transform-origin:right}
html[dir=rtl] .stamp{transform:rotate(6deg)}
html[dir=rtl] #b-preview{font-style:normal}

@media(max-width:900px){
  .nav{justify-content:space-between}
  html[dir=rtl] .ticket{transform:rotate(-1.5deg)}
}

/* MOBILE FIXES (checked on a 390px screen) */
html{overflow-x:clip}
@media(max-width:900px){
  .nav nav{display:none}
  .nav{flex-wrap:nowrap;padding:10px 5vw}
  .hero{padding-top:34px}
  .ticker{margin:0}
}
@media(max-width:600px){
  .btn{width:100%;max-width:420px}
  .cta-row{flex-direction:column}
  .price-box{gap:12px}
  .ticker span{font-size:1.1rem;padding:0 18px}
}