/* Unterseiten: gleiche Tokens wie die Startseite, ruhige redaktionelle Struktur */
:root{
  --paper:#FFFFFF; --mist:#F4F4F6; --ink:#111113; --stone:#66666D; --line:#E2E2E7;
  --stage:#0B0B0C; --stage-2:#151517; --stage-ink:#F2F2F0; --stage-stone:#9C9CA3; --stage-line:#2A2A2F;
  --signal:#FF5A1F; --on-signal:#111113;
  --display:"Inter Display","Inter Tight","Inter","Helvetica Neue",Arial,sans-serif;
  --text:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --arabic:"IBM Plex Sans Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
  --wrap:1240px; --ease:cubic-bezier(.22,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{--paper:#0F0F11;--mist:#151518;--ink:#F2F2F0;--stone:#A0A0A7;--line:#26262B;--on-signal:#0F0F11;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{font-family:var(--arabic)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-0.035em;line-height:1.05;text-wrap:balance}
html[lang="ar"] :is(h1,h2,h3){font-family:var(--arabic);letter-spacing:0;line-height:1.3}
p{margin:0}
.tc{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--stone);text-transform:uppercase}
.dark{background:var(--stage);color:var(--stage-ink)}
.dark .tc{color:var(--stage-stone)}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 24px;border-radius:999px;font:500 16px/1 var(--text);text-decoration:none;border:1px solid transparent;transition:background .4s var(--ease)}
html[lang="ar"] .btn{font-family:var(--arabic)}
.btn-primary{background:var(--signal);color:var(--on-signal);font-weight:600}
.btn-quiet{border-color:currentColor;opacity:.9}

.top{position:sticky;top:0;z-index:9;color:var(--stage-ink);background:color-mix(in srgb,var(--stage) 86%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--stage-line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brandmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--stage-ink);flex:none}
.brandmark .w{font-family:var(--display);font-size:18px;letter-spacing:-0.035em}
.brandmark .w b{font-weight:700}.brandmark .w span{font-weight:400;color:var(--stage-stone)}
.nav{display:flex;gap:30px;margin-inline-start:auto;font-size:14px}
.nav a{text-decoration:none;color:var(--stage-stone)}.nav a:hover{color:var(--stage-ink)}
.lang{display:flex;gap:2px;font:500 12px/1 var(--mono)}
.lang a{color:var(--stage-stone);text-decoration:none;padding:8px 7px;letter-spacing:.06em}
.lang a[aria-current="true"]{color:var(--stage-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--signal)}
.lang a[lang="ar"]{font-family:var(--arabic);letter-spacing:0;font-size:13px}
.top .btn{min-height:40px;padding:0 18px;font-size:14px}
@media (max-width:1040px){.nav{display:none}.lang{margin-inline-start:auto}}
@media (max-width:600px){.top .btn{display:none}.brandmark .w span{display:none}}

.phero{position:relative;overflow:hidden}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,8,9,.94),rgba(8,8,9,.7) 45%,rgba(8,8,9,.35)),linear-gradient(0deg,rgba(8,8,9,.9),rgba(8,8,9,0) 50%)}
html[dir="rtl"] .phero::before{background:linear-gradient(270deg,rgba(8,8,9,.94),rgba(8,8,9,.7) 45%,rgba(8,8,9,.35)),linear-gradient(0deg,rgba(8,8,9,.9),rgba(8,8,9,0) 50%)}
.phero .wrap{position:relative;z-index:4;padding-block:clamp(96px,12vw,150px) clamp(56px,6vw,80px);display:flex;flex-direction:column;gap:26px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:500 12px/1.4 var(--mono);color:var(--stage-stone);list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.6}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--stage-ink)}
.phero h1{font-size:clamp(40px,6vw,80px);max-width:16ch}
.phero .lead{font-size:clamp(18px,1.6vw,21px);color:#C9C9CE;max-width:56ch}
.phero .acts{display:flex;flex-wrap:wrap;gap:12px}
.phero .by{font:500 12px/1 var(--mono);color:var(--stage-stone);letter-spacing:.06em}

.sec{padding-block:clamp(80px,10vw,136px)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(40px,6vw,96px);align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.h2{font-size:clamp(30px,3.6vw,46px);margin-block:14px 0}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{position:relative;display:grid;transition:transform .6s var(--ease);grid-template-columns:44px 1fr;padding:20px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:500}
.list li span:first-child{font:500 12px/1.9 var(--mono);color:var(--stone)}
.para{font-size:19px;color:var(--stone);max-width:52ch;margin-top:20px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;margin:48px 0 0;padding:0}
.steps li{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.steps h3{font-size:22px}.steps p{color:var(--stone);font-size:15.5px}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.mist{background:var(--mist)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 0;font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-0.02em;display:flex;justify-content:space-between;gap:20px}
html[lang="ar"] .faq summary{font-family:var(--arabic)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--stone)}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:24px;color:var(--stone);max-width:62ch}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px;margin-top:40px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.cards{grid-template-columns:1fr}}
.card{text-decoration:none;display:flex;flex-direction:column;gap:12px;min-width:0}
.card .f{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:4px;background:var(--stage-2)}
.card .f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .f img{transform:scale(1.03)}
.card b{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-0.02em}
.card span{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.dark .card span{color:var(--stage-stone)}
.ctaband .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px;padding-block:clamp(72px,9vw,120px)}
.ctaband h2{font-size:clamp(32px,4.4vw,56px);max-width:18ch}
.ctaband p{color:var(--stage-stone);max-width:46ch;margin-top:16px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:40px;padding-block:72px 36px}
.foot h4{margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stage-stone)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px}
.foot a{text-decoration:none;color:#D8D8DC}.foot a:hover{color:#fff}
.foot .claim{font-family:var(--display);font-size:clamp(26px,2.8vw,36px);letter-spacing:-0.035em;margin-top:22px;max-width:16ch;font-weight:500}
.foot .base{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--stage-line);padding-top:24px;font:500 12px/1.6 var(--mono);color:var(--stage-stone)}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr 1fr}.foot .wrap>div:first-child{grid-column:1/-1}}
.scrub{position:fixed;top:84px;bottom:24px;inset-inline-end:10px;width:9px;z-index:7;pointer-events:none;mix-blend-mode:difference}
.scrub::before{content:"";position:absolute;inset-block:0;inset-inline-start:4px;width:1px;background:rgba(255,255,255,.22)}
.scrub i{position:absolute;top:0;inset-inline-start:4px;width:1px;height:0;background:var(--signal)}
.scrub b{position:absolute;inset-inline-start:0;width:9px;height:2px;background:var(--signal);top:0}
@media (max-width:640px){.scrub{display:none}}
.legal{max-width:760px}.legal h2{font-size:26px;margin:40px 0 12px}.legal p{color:var(--stone);margin-bottom:12px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
.list li::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.list li:hover{transform:translateX(6px)}.list li:hover::after{transform:scaleX(1)}
.steps li{position:relative;transition:transform .6s var(--ease)}
.steps li::before{content:"";position:absolute;inset-inline:0;top:-1px;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.steps li:hover{transform:translateY(-4px)}.steps li:hover::before{transform:scaleX(1)}
/* tower on every orange line */
@keyframes wave{0%{opacity:0;transform:scale(.4)}15%{opacity:.9}100%{opacity:0;transform:scale(1.9)}}
@keyframes orb{0%,100%{filter:drop-shadow(0 0 0 rgba(255,90,31,0))}50%{filter:drop-shadow(0 0 4px rgba(255,90,31,.9))}}
.list li::after,.steps li::before{transition:transform .9s linear}
html[dir="rtl"] .list li::after,html[dir="rtl"] .steps li::before{transform-origin:right}
.list li,.steps li{position:relative}
.list li>.tw-end,.steps li>.tw-end{position:absolute;inset-inline-end:calc(10% - 5px);bottom:-1px;width:11px;height:22px;opacity:0;transform:scaleY(0);transform-origin:50% 100%;transition:opacity .15s ease,transform .45s cubic-bezier(.2,.9,.3,1.15);pointer-events:none;color:var(--ink)}
.steps li>.tw-end{bottom:auto;top:-22px}
.dark .list li>.tw-end,.dark .steps li>.tw-end{color:var(--stage-ink)}
.tw-end svg{display:block;width:100%;height:100%;overflow:visible}
.list li:hover>.tw-end,.steps li:hover>.tw-end{opacity:1;transform:scaleY(1);transition-delay:.81s}
.tw-end .wave{fill:none;stroke:var(--signal);stroke-width:3.5;transform-box:fill-box;transform-origin:center;opacity:0}
li:hover>.tw-end .wave{animation:wave 3.6s cubic-bezier(.2,.6,.3,1) .7s infinite}
li:hover>.tw-end .wave.w2{animation-delay:1.9s}
li:hover>.tw-end .wave.w3{animation-delay:3.1s}
li:hover>.tw-end .orb{animation:orb 3.6s ease-in-out .7s infinite;transform-box:fill-box;transform-origin:center}