/* GhostInk v4 — "Midnight Signal": sharper type, navy + mint palette, bilingual (EN/AR) + RTL */
:root{
  --font:'Space Grotesk','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Space Grotesk',system-ui,'Segoe UI',Tahoma,sans-serif;
  --serif:var(--font);--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#060a12;--panel:#0e1626;--deep:#080d17;
  --line:rgba(130,175,205,.17);--text:#eaf1f8;--muted:#98a8ba;
  --violet:#3df0c5;--violet-2:#18c9a3;--uv:#3df0c5;--gold:#ffc857;--ink:#ffc857;--cyan:#6cc8ff;
  --r:18px;
}
html{scroll-padding-top:90px}
body{font-family:var(--font);font-size:16px;line-height:1.7;
  background:
    radial-gradient(900px 520px at 80% -10%,rgba(61,240,197,.15),transparent 62%),
    radial-gradient(720px 480px at 4% 16%,rgba(108,200,255,.10),transparent 62%),
    radial-gradient(820px 600px at 50% 112%,rgba(255,200,87,.07),transparent 62%),
    var(--bg);background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(150,190,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,220,.05) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 18%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 18%,#000 15%,transparent 72%)}
.hero-lg::after{display:none}
.brand-copy strong,.footer-brand{font-family:'Space Grotesk',sans-serif}
.mono,.tool-card .mono,.result-tag,.eyebrow .mono{font-family:var(--mono)}

/* header */
.topbar{background:rgba(6,10,18,.72);border-bottom-color:var(--line)}
.site-nav a{font-size:14px;font-weight:500;color:var(--muted)}
.site-nav .nav-cta{color:#1a1300;background:var(--gold);box-shadow:0 6px 22px rgba(255,200,87,.2)}
.site-nav .nav-cta:hover{background:#ffd679;color:#1a1300}
.lang-toggle{font:600 13px var(--font);color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:99px;padding:6px 15px;min-height:36px;margin-inline-start:10px;transition:.2s;cursor:pointer;white-space:nowrap}
.lang-toggle:hover{border-color:var(--uv);background:rgba(61,240,197,.1)}
.lang-toggle[lang=ar]{font:600 14px var(--font-ar)}
.lang-toggle.floating{position:fixed;top:14px;inset-inline-end:14px;z-index:40;margin:0}

/* type */
.hero h1,.hero-lg h1,.page-hero h1{font-weight:600;letter-spacing:-.035em}
.hero h1>span,.page-hero h1>span,.hero-lg h1 em{background:linear-gradient(100deg,#3df0c5,#6cc8ff 62%,#ffc857);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.section-head h2,.cta-band h2,.prose h2,.feature-text h3,.steps h3,.form-title{font-weight:600;letter-spacing:-.03em}
.hero-lg .lead,.hero p{color:#b4c1d0}
.feature-text p,.steps p,.facts p,.section-head p,.faq details p,.cta-band p,.prose p,.prose li,.panel-card p{color:#b4c1d0}
.statement{font-weight:500}
.btn{font-weight:600;letter-spacing:-.005em}
.btn-primary{color:#1a1300;background:linear-gradient(180deg,#ffd679,#ffc23f);box-shadow:0 10px 36px rgba(255,200,87,.26),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-primary:hover{background:linear-gradient(180deg,#ffe19a,#ffcb55)}
.btn-ghost{border-color:rgba(160,200,225,.32)}
.btn-ghost:hover{border-color:var(--uv);background:rgba(61,240,197,.1)}
.legal-strip{color:#f2dfa8}

/* surfaces */
.studio-card{border-radius:24px;border-color:rgba(130,185,215,.22);background:linear-gradient(160deg,rgba(18,28,46,.96),rgba(9,14,25,.98) 75%);box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(61,240,197,.04),0 0 60px rgba(61,240,197,.07)}
.mode-tabs{border-radius:18px;background:rgba(5,9,16,.8)}
.mode-tab{border-radius:13px}
.tool-card{border-radius:18px;background:linear-gradient(155deg,rgba(18,28,46,.9),rgba(9,14,25,.92))}
.tool-card:hover{border-color:rgba(61,240,197,.5)}
.tool-card.active,.mode-tab[aria-selected=true]{background:linear-gradient(135deg,#4af4cc,#1cc5a2);color:#03130f;border-color:rgba(255,255,255,.3);box-shadow:0 14px 38px rgba(61,240,197,.26)}
.tool-card.active small,.tool-card.active .mono,.mode-tab[aria-selected=true] small{color:rgba(3,19,15,.74)}
.tool-card.active .tool-icon,.mode-tab[aria-selected=true] .tab-icon{background:rgba(3,19,15,.14);color:#03130f}
.control{border-radius:12px;background:rgba(5,9,16,.85)}
.control:focus{border-color:var(--uv);box-shadow:0 0 0 3px rgba(61,240,197,.16)}
.control::placeholder{color:#62758a}
.primary-button{border-radius:13px;color:#03130f;border-color:rgba(255,255,255,.28);background:linear-gradient(100deg,#4af4cc,#22cfa9);box-shadow:0 12px 34px rgba(61,240,197,.24),inset 0 1px rgba(255,255,255,.45)}
.primary-button:disabled{background:#14223a;color:#6c8097;box-shadow:none}
.decode-button{background:linear-gradient(100deg,#93dbff,#5dbaf6);color:#04121d;box-shadow:0 12px 32px rgba(93,186,246,.2)}
.terms li{color:#b4c1d0}
.footer{border-top-color:var(--line)}
.faq summary{font-weight:600}

/* password strength */
.pw-meter{display:flex;align-items:center;gap:10px;margin:8px 2px 0;font-size:12.5px}
.pw-bars{display:flex;gap:4px;flex:1;max-width:170px}
.pw-bars i{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.1);transition:background .2s}
.pw-label{font-weight:600}

/* ---------- Arabic / RTL ---------- */
html[lang=ar] body{font-family:var(--font-ar);line-height:1.95;font-size:16.5px}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{font-family:var(--font-ar);font-weight:700;line-height:1.4}
html[lang=ar] .hero-lg h1,html[lang=ar] .page-hero h1,html[lang=ar] .hero h1{line-height:1.3}
html[lang=ar] .brand-copy strong,html[lang=ar] .footer-brand{font-family:'Space Grotesk',sans-serif}
html[lang=ar] .site-nav a,html[lang=ar] .btn,html[lang=ar] .label,html[lang=ar] .primary-button{font-family:var(--font-ar)}
html[lang=ar] .mono{letter-spacing:0}
html[lang=ar] .eyebrow,html[lang=ar] .assure{letter-spacing:0}
[dir=rtl] .hero-lg::before{inset:-60px auto auto -120px}
[dir=rtl] .terms li{padding:12px 46px 12px 14px}
[dir=rtl] .terms li::before{left:auto;right:12px}
[dir=rtl] .side-list .panel-card{padding:0 18px 0 0;border-left:0;border-right:2px solid var(--uv)}
[dir=rtl] .side-list .panel-card:nth-child(2){border-right-color:var(--gold)}
[dir=rtl] .side-list .panel-card:nth-child(3){border-right-color:var(--cyan)}
[dir=rtl] .switch-track::after{left:auto;right:3px}
[dir=rtl] .switch input:checked+.switch-track::after{transform:translateX(-18px)}
[dir=rtl] .cursor::after{margin-left:0}
.compare-frame,.compare-slider-label,.specimen .spec-text,.pix{direction:ltr}
[dir=rtl] .specimen small{direction:rtl;display:block;text-align:center}
[dir=rtl] .compare-slider-label{direction:rtl}
[dir=rtl] .tab-icon,[dir=rtl] .button-arrow{display:inline-grid}
[dir=rtl] .terminal,[dir=rtl] .result{text-align:start}
.xray,#tt-encoded-output,#ti-term .is-muted{unicode-bidi:plaintext}

@media(max-width:760px){
  .topbar .lang-toggle{order:1;margin-inline-start:auto}
  .site-nav{order:2}
}
@media(prefers-reduced-motion:reduce){.lang-toggle,.tool-card,.btn{transition:none}}

/* off-screen helpers must not create scrollable overflow in RTL */
.skip-link{left:12px;transform:translateY(-300%);transition:transform .2s}
.skip-link:focus{left:12px;transform:none}
[dir=rtl] .skip-link,[dir=rtl] .skip-link:focus{left:auto;right:12px}
.hp{left:0!important;top:0;opacity:0;pointer-events:none}
[dir=rtl] .hp{left:auto!important;right:0}

/* password eye: keep padding on the same physical side as the button, whatever the input's auto direction */
.pw-wrap .control{padding-inline-end:14px;padding-left:14px;padding-right:46px}
[dir=rtl] .pw-wrap .control{padding-right:14px;padding-left:46px}
html[lang=ar] .hero-lg h1{font-size:clamp(32px,4.2vw,54px)}
.legal-strip{margin-top:24px}

/* floating rounded header */
.topbar{top:12px;margin-top:12px;height:68px;padding:0 14px 0 18px;border:1px solid rgba(140,190,220,.2);border-bottom-color:rgba(140,190,220,.2);border-radius:26px;
  background:linear-gradient(135deg,rgba(18,30,48,.78),rgba(8,14,24,.72));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(61,240,197,.04)}
[dir=rtl] .topbar{padding:0 18px 0 14px}
.site-nav a{border-radius:99px}
.lang-toggle{background:rgba(255,255,255,.06)}
@media(max-width:760px){.topbar{border-radius:22px;height:auto;padding:10px 12px;top:8px;margin-top:8px}}