/* Cardle homepage (all languages); generated pages live in /, /tr/, /de/ … */
:root{--bg:#07080B;--surface:#111318;--surface2:#1A1D24;--fg:#F4F5F7;--fg2:#A3A9B5;--fg3:#8C929E;--accent:#D4FF3A;--on-accent:#0A0B0E;
  --mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:100%;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

.top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 0}
.mark{font-weight:900;font-stretch:125%;font-style:italic;font-size:26px;letter-spacing:.04em;line-height:1}
.mark span{color:var(--accent)}
.top nav{display:flex;gap:28px;align-items:center;font-size:15px}
.top nav a,.foot nav a{color:var(--fg2)}
.top nav a:hover,.foot nav a:hover{color:var(--accent)}

.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(48px,6vw,96px);align-items:center;padding:clamp(48px,7vw,96px) 0 clamp(72px,9vw,128px)}
.hero-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.eyebrow{font-weight:700;font-stretch:108%;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
h1{margin:0;font-weight:800;font-stretch:120%;font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.lead{margin:0;max-width:44ch;color:var(--fg2);text-wrap:pretty}
.ctas{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pill{height:52px;padding:0 24px;border-radius:26px;display:inline-flex;align-items:center;font-size:15px;background:var(--surface2)}
.pill.primary{padding:0 28px;background:var(--accent);color:var(--on-accent);font-weight:800;font-stretch:112%;font-size:16px}

/* Hero card: Epic tier */
.card-stage{display:flex;justify-content:center}
.card{--tier:#B86BFF;width:min(340px,86%);aspect-ratio:63/88;border-radius:20px;background:#26104A;border:1.5px solid #B86BFF66;box-shadow:0 0 80px -10px #B86BFF73;padding:16px;display:flex;flex-direction:column;gap:14px;transform:rotate(-3deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:rotate(0deg) translateY(-6px)}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-weight:700;font-size:12px;color:var(--fg2)}
.card-meta .tier,.card-foot .stars{color:var(--tier)}
.card-photo{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;background:var(--surface)}
.card-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:57% 50%}
.corners{position:absolute;inset:12px;pointer-events:none}
.corners span{position:absolute;width:22px;height:22px;border:0 solid var(--accent)}
.corners span:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px;border-top-left-radius:6px}
.corners span:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px;border-top-right-radius:6px}
.corners span:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:6px}
.corners span:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:6px}
.card-name{display:flex;flex-direction:column;gap:4px}
.card-name .make{font-weight:700;font-stretch:108%;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.card-name .model{font-weight:800;font-stretch:112%;font-size:26px;line-height:1.1}
.card-foot{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-weight:700;font-size:13px}
.card-foot .stars{letter-spacing:.1em}

section.block{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--surface2);display:flex;flex-direction:column;gap:40px}
h2{margin:0;font-weight:800;font-stretch:112%;font-size:30px;line-height:1.07}
h3{margin:0;font-weight:700;font-stretch:112%;font-size:22px}
.grid{display:grid;gap:16px}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.features{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.tile{background:var(--surface);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}
.tile p{margin:0;color:var(--fg2);font-size:16px}
.tile .num{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--fg3)}

.tiers-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:40px}
.tiers-intro{display:flex;flex-direction:column;gap:16px}
.tiers-intro p{margin:0;color:var(--fg2);max-width:40ch;text-wrap:pretty}
.tiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tiers li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--t) 12%,transparent)}
.tiers .shape{font-size:20px;line-height:1;color:var(--t);text-align:center}
.tiers .name{font-weight:700;font-stretch:112%;font-size:18px}
.tiers .stars{font-family:var(--mono);font-size:13px;color:var(--t);letter-spacing:.1em}

.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:28px 0 40px;border-top:1px solid var(--surface2);font-size:14px;color:var(--fg3)}
.foot .brand{display:flex;gap:16px;align-items:center}
.foot .mark{font-size:inherit}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot nav a{color:var(--fg3)}

@media (prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:rotate(-3deg)}}

/* Language picker */
.top .end{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.lang{position:relative;font-size:15px}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:18px;background:var(--surface2);color:var(--fg)}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:var(--accent)}
.lang summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lang summary svg{width:16px;height:16px;flex:none}
.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:10;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--surface2);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.lang li a{display:block;padding:9px 12px;border-radius:9px;color:var(--fg2)}
.lang li a:hover{background:var(--surface2);color:var(--fg)}
.lang li a[aria-current]{color:var(--accent)}

/* Arabic: letter-spacing breaks joined script; use a font with Arabic glyphs */
[dir=rtl] body,[dir=rtl] .tile p{font-family:Archivo,"Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif}
[dir=rtl] .eyebrow,[dir=rtl] .card-name .make{letter-spacing:0}
[dir=rtl] h1{letter-spacing:0;line-height:1.2}
@media (max-width:520px){.top .end,.top nav{gap:16px}.lang summary{padding:0 12px}}