@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #173c55;
  --ink-deep: #10243f;
  --gold: #f6bd55;
  --aqua: #65d6c5;
  --violet: #8b7cff;
  --coral: #f29a91;
  --paper: #f1f3ff;
  --cream: #fffdfc;
  --muted: #667a8d;
  --line: rgba(23, 60, 85, .16);
  --shadow: 0 24px 70px rgba(37, 48, 101, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(120deg, #e2e5ff, #d8fbf2, #ffe4df, #e8ddff, #d9f5ff);
  background-size: 420% 420%;
  animation: gradientFlow 20s ease-in-out infinite;
  color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after { content: ''; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(45px); opacity: .62; mix-blend-mode: multiply; }
body::before { width: 46vw; height: 46vw; top: -18vw; right: -10vw; background: radial-gradient(circle at 35% 35%, rgba(46, 205, 183, .9), rgba(117, 96, 255, .42) 55%, transparent 72%); animation: blobDrift 16s ease-in-out infinite alternate; }
body::after { width: 52vw; height: 38vw; bottom: -20vw; left: -16vw; background: radial-gradient(circle at 55% 45%, rgba(247, 111, 121, .72), rgba(246, 189, 85, .38) 52%, transparent 74%); animation: blobDrift 22s ease-in-out -6s infinite alternate-reverse; }
@keyframes gradientFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes blobDrift { from { transform: translate3d(-2%, -3%, 0) scale(.94) rotate(-7deg); } to { transform: translate3d(5%, 5%, 0) scale(1.1) rotate(9deg); } }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(244, 196, 82, .9); outline-offset: 3px; }

.page-shell { width: min(1180px, calc(100% - 64px)); position: relative; z-index: 1; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 30px 0 22px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; direction: ltr; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 9px); gap: 3px; width: 27px; height: 27px; padding: 3px; border: 2px solid var(--ink); border-radius: 6px; transform: rotate(-7deg); }
.brand-mark span { display: block; background: var(--ink); border-radius: 1px; }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { background: var(--gold); }
.brand-name { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.6px; }
.brand-name em { color: #8c9c94; font-style: normal; font-weight: 500; }
.topbar-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.live-dot { width: 7px; height: 7px; background: #74b78b; border-radius: 50%; box-shadow: 0 0 0 5px rgba(116, 183, 139, .15); }

.hero { min-height: 395px; display: flex; align-items: center; justify-content: space-between; gap: 50px; position: relative; padding: 55px 33px 45px 0; overflow: hidden; isolation: isolate; }
.hero::before, .hero::after { content: ''; position: absolute; z-index: -1; left: -15%; width: 130%; height: 145px; border-radius: 48% 52% 44% 56%; filter: blur(2px); opacity: .52; transform: rotate(-5deg); }
.hero::before { top: 28px; background: linear-gradient(90deg, transparent, rgba(101, 214, 197, .35), rgba(139, 124, 255, .24), transparent); animation: waveSlide 13s ease-in-out infinite alternate; }
.hero::after { bottom: 0; background: linear-gradient(90deg, transparent, rgba(242, 154, 145, .25), rgba(246, 189, 85, .27), transparent); animation: waveSlide 17s ease-in-out -5s infinite alternate-reverse; }
@keyframes waveSlide { from { transform: translateX(-7%) rotate(-5deg) scaleY(.85); } to { transform: translateX(7%) rotate(4deg) scaleY(1.15); } }
.hero-copy { position: relative; z-index: 1; max-width: 640px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #69817a; font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.eyebrow-line { display: inline-block; width: 30px; height: 3px; background: linear-gradient(90deg, var(--aqua), var(--violet), var(--coral)); border-radius: 99px; }
h1 { margin: 0; color: var(--ink-deep); font-size: clamp(48px, 7vw, 88px); font-weight: 700; line-height: 1.06; letter-spacing: -3px; }
h1 span { color: #75938b; }
.hero-lede { max-width: 475px; margin: 24px 0 0; color: #667873; font-size: 16px; line-height: 1.9; }
.hero-orbit { width: 270px; height: 270px; position: relative; flex: 0 0 auto; margin-left: 30px; }
.orbit-ring { position: absolute; inset: 5px; border: 1px solid rgba(18, 62, 59, .2); border-radius: 50%; transform: rotate(-30deg) scaleX(.72); }
.orbit-ring-one { border-right-color: transparent; border-left-color: transparent; }
.orbit-ring-two { inset: 27px; transform: rotate(53deg) scaleX(.72); border-top-color: var(--gold); border-bottom-color: transparent; }
.orbit-card { width: 130px; height: 130px; position: absolute; inset: 0; margin: auto; display: grid; grid-template-columns: repeat(5, 15px); grid-auto-rows: 15px; align-content: center; justify-content: center; gap: 4px; padding: 15px; background: var(--cream); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--gold); transform: rotate(-9deg); }
.mini-square { background: var(--ink); }
.mini-square:nth-child(2), .mini-square:nth-child(5), .mini-square:nth-child(7) { background: var(--gold); }
.orbit-label { position: absolute; padding: 4px 9px; border: 1px solid var(--line); border-radius: 30px; color: #6e817c; background: rgba(246, 240, 229, .8); font-family: 'Space Grotesk', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.orbit-label-top { top: 22px; right: 5px; transform: rotate(10deg); }
.orbit-label-side { bottom: 30px; left: 5px; transform: rotate(-14deg); }

.workspace { padding: 29px; background: rgba(255, 255, 255, .59); border: 1px solid rgba(255, 255, 255, .75); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.workspace-heading, .result-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.workspace-heading > div, .result-topline > div { display: flex; align-items: baseline; gap: 15px; }
.step-number { color: #aab8ae; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
h2 { margin: 0; color: var(--ink-deep); font-size: 20px; font-weight: 700; }
.hint { color: #83918b; font-size: 12px; }
.url-form { margin-top: 27px; }
.url-form label { display: block; margin-bottom: 10px; color: #60736c; font-size: 13px; font-weight: 600; }
.input-row { display: flex; gap: 12px; }
.input-wrap { display: flex; align-items: center; flex: 1; min-width: 0; border: 1px solid rgba(18, 62, 59, .22); background: var(--cream); transition: border .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: #5f8980; box-shadow: 0 0 0 4px rgba(95, 137, 128, .11); }
.input-icon { display: grid; place-items: center; width: 50px; color: #80a099; font-family: 'Space Grotesk', sans-serif; font-size: 23px; direction: ltr; }
input { width: 100%; min-width: 0; height: 57px; padding: 0 3px 0 18px; border: 0; outline: 0; color: var(--ink); background: transparent; direction: ltr; text-align: left; font-family: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; }
input::placeholder { color: #a8b4ac; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-width: 151px; padding: 0 21px; border: 0; background: linear-gradient(110deg, var(--ink), #4d4aa0, #167d7c); background-size: 220% 220%; color: var(--cream); font-size: 14px; font-weight: 700; transition: transform .2s, background-position .5s; animation: buttonFlow 8s ease infinite; }
.primary-button:hover { background-position: 100% 0; transform: translateY(-2px); }
@keyframes buttonFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.button-arrow { color: var(--gold); font-size: 21px; line-height: 0; }
.error-message { margin: 11px 0 0; color: #a74f43; font-size: 13px; }

.result-panel { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--line); animation: reveal .5s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.text-button { padding: 0; border: 0; background: transparent; color: #71877f; font-size: 12px; }
.text-button span { color: var(--gold); font-size: 18px; vertical-align: -2px; }
.result-content { display: flex; align-items: center; gap: 48px; margin-top: 26px; padding: 26px; background: linear-gradient(115deg, #102e4b, #3e3a86, #087a78, #102e4b); background-size: 300% 300%; animation: resultFlow 14s ease infinite; }
@keyframes resultFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.qr-frame { position: relative; flex: 0 0 250px; padding: 16px; background: #fffdf8; }
#qr-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.qr-corner { position: absolute; width: 16px; height: 16px; border-color: var(--gold); border-style: solid; }
.corner-tl { top: 7px; right: 7px; border-width: 3px 3px 0 0; }.corner-tr { top: 7px; left: 7px; border-width: 3px 0 0 3px; }.corner-bl { bottom: 7px; right: 7px; border-width: 0 3px 3px 0; }.corner-br { bottom: 7px; left: 7px; border-width: 0 0 3px 3px; }
.result-details { direction: rtl; min-width: 0; flex: 1; }
.result-kicker { margin: 0 0 10px; color: var(--gold); font-size: 12px; font-weight: 600; }
.result-url { display: block; max-width: 100%; overflow: hidden; color: var(--cream); direction: ltr; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-family: 'Space Grotesk', sans-serif; font-size: 19px; text-decoration: none; }
.result-url:hover { color: var(--gold); }
.result-description { max-width: 430px; margin: 16px 0 25px; color: #a9bbb3; font-size: 13px; line-height: 1.8; }
.action-list { display: flex; flex-wrap: wrap; gap: 9px; }
.action-button { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 13px; border: 1px solid rgba(255, 253, 248, .22); background: transparent; color: var(--cream); font-size: 12px; transition: background .2s, border .2s, transform .2s; }
.action-button:hover { border-color: var(--gold); background: rgba(244, 196, 82, .11); transform: translateY(-2px); }
.action-button.action-primary { border-color: var(--gold); color: var(--gold); }.action-icon { color: var(--gold); font-family: 'Space Grotesk', sans-serif; font-size: 18px; line-height: 1; }

.trust-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 38px 12px 46px; }
.trust-item { display: flex; align-items: center; gap: 12px; }.trust-icon { display: grid; place-items: center; width: 31px; height: 31px; color: var(--ink); border: 1px solid rgba(18, 62, 59, .25); border-radius: 50%; font-size: 15px; }.trust-item div { display: flex; flex-direction: column; gap: 1px; }.trust-item strong { color: var(--ink); font-size: 12px; }.trust-item div span { color: #85938d; font-size: 11px; }
.footer { display: flex; justify-content: space-between; padding: 17px 0 25px; border-top: 1px solid var(--line); color: #91a098; font-size: 11px; }.footer span:first-child { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-weight: 700; direction: ltr; }
.status-message { position: fixed; right: 24px; bottom: 22px; z-index: 5; padding: 11px 16px; border: 1px solid rgba(244, 196, 82, .6); background: var(--ink-deep); color: var(--cream); box-shadow: 0 10px 26px rgba(8, 46, 45, .22); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }.status-message.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 34px, 560px); }
  .topbar { padding-top: 21px; }.topbar-note { font-size: 11px; }
  .hero { min-height: 0; display: block; padding: 47px 0 35px; }.hero-orbit { width: 190px; height: 190px; margin: 41px auto 5px; }.orbit-card { width: 102px; height: 102px; grid-template-columns: repeat(5, 11px); grid-auto-rows: 11px; gap: 3px; padding: 11px; box-shadow: 7px 7px 0 var(--gold); }.orbit-label-top { top: 0; }.orbit-label-side { bottom: 10px; }.hero-lede { font-size: 14px; line-height: 1.8; } h1 { font-size: clamp(48px, 15vw, 72px); letter-spacing: -2px; }
  .workspace { padding: 22px 17px; }.workspace-heading, .result-topline { display: block; }.workspace-heading .hint { display: block; margin-top: 11px; }.input-row { display: block; }.input-wrap { margin-bottom: 10px; }.primary-button { width: 100%; height: 53px; }.result-content { display: block; padding: 18px; }.qr-frame { width: min(100%, 275px); margin: 0 auto 25px; }.result-url { font-size: 15px; }.result-description { margin-bottom: 19px; }.action-list { display: grid; grid-template-columns: 1fr 1fr; }.action-button { justify-content: center; }.action-button:first-child { grid-column: 1 / -1; }.text-button { display: block; margin-top: 15px; }.trust-strip { display: grid; grid-template-columns: 1fr; gap: 17px; padding: 30px 4px; }.footer { font-size: 10px; }.status-message { right: 17px; bottom: 17px; left: 17px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }