:root {
  --hodiau-ink: #13233d;
  --hodiau-muted: #647088;
  --hodiau-violet: #6657e8;
  --hodiau-paper: #f7f8fc;
}

html[data-theme="dark"] { --hodiau-ink: #eef3ff; --hodiau-muted: #b4bfd2; --hodiau-paper: #0d1424; --app-soft: #17233b; }

* { box-sizing: border-box; }

body {
  display: block !important;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  color: var(--hodiau-ink) !important;
  background: var(--hodiau-paper) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-align: left !important;
}

.app-nav,
.app-main,
.app-footer { width: min(1120px, calc(100% - 40px)); margin: auto; }

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}

.app-nav-right, .policy-nav-right { display: flex; align-items: center; gap: 17px; }
.theme-label { display: inline-flex; align-items: center; gap: 6px; color: var(--hodiau-muted); font-size: .75rem; font-weight: 750; }
.theme-select { padding: 5px 7px; border: 1px solid #d8deeb; border-radius: 7px; color: inherit; background: transparent; font: inherit; font-size: .75rem; cursor: pointer; }

.app-brand { color: var(--hodiau-ink); font-size: 1.2rem; font-weight: 850; letter-spacing: -.06em; text-decoration: none; }
.app-brand span { color: var(--hodiau-violet); }
.app-back { color: var(--hodiau-muted); font-size: .92rem; font-weight: 750; text-decoration: none; }
.app-back:hover { color: var(--hodiau-violet); }

.app-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(35px, 8vw, 110px); align-items: center; min-height: calc(100vh - 145px); padding: 45px 0 80px; }

.app-copy { order: 1; }
.app-type { display: inline-block; margin-bottom: 14px; color: var(--hodiau-violet); font-size: .76rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

.card {
  position: relative;
  order: 2;
  max-width: none !important;
  width: 100% !important;
  min-height: 425px;
  margin: 0 !important;
  padding: 42px !important;
  overflow: hidden;
  border: 1px solid #e8eaf4 !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, var(--app-soft, #e9e6ff), var(--app-card, #fff) 70%) !important;
  box-shadow: 0 25px 55px #1e305018 !important;
  text-align: left !important;
}

.card::after { content: ""; position: absolute; right: -62px; bottom: -62px; width: 210px; height: 210px; border-radius: 50%; background: var(--app-accent, #6657e8); opacity: .13; }

.app-icon-link { display: block; width: fit-content; text-decoration: none; }
.card img { position: relative; z-index: 1; display: block !important; width: 148px !important; height: 148px !important; margin: 0 !important; object-fit: cover; border: 8px solid #fff; border-radius: 34px !important; box-shadow: 0 17px 30px #182b4a2b; }
.card h1 { position: absolute; left: -9999px; }
.card > p { position: absolute; left: -9999px; }
.card > .link { position: absolute; left: -9999px; }

.app-copy h1 { max-width: 670px; margin: 0 0 18px; color: var(--hodiau-ink); font-size: clamp(2.75rem, 5.5vw, 5rem); line-height: .97; letter-spacing: -.07em; }
.app-copy h1 a { color: inherit; text-decoration: none; }
.app-copy h1 a:hover { color: var(--hodiau-violet); }
.app-description { max-width: 550px; margin: 0; color: var(--hodiau-muted); font-size: clamp(1.05rem, 2vw, 1.18rem); line-height: 1.65; }

.app-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.app-button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 17px; border: 1px solid transparent; border-radius: 12px; color: #fff; background: var(--app-accent, var(--hodiau-violet)); box-shadow: 0 10px 20px color-mix(in srgb, var(--app-accent, var(--hodiau-violet)) 25%, transparent); font-size: .92rem; font-weight: 800; text-decoration: none; transition: transform .2s, filter .2s; }
.app-button:hover { transform: translateY(-2px); filter: brightness(.93); }
.app-button.secondary { color: var(--hodiau-ink); border-color: #dce1ed; background: var(--app-card, #fff); box-shadow: none; }

.app-footer { padding: 24px 0 30px; border-top: 1px solid #e3e7f0; color: var(--hodiau-muted); font-size: .82rem; }

html[data-theme="dark"] .card { --app-card: #162238; border-color: #2b3852 !important; background: linear-gradient(145deg, #1c2a45, #162238 70%) !important; box-shadow: 0 25px 55px #0000002e !important; }
html[data-theme="dark"] .card img { border-color: #eef3ff; } html[data-theme="dark"] .app-button.secondary { color: #f4f7ff !important; border-color: #667a9f; background: #263753; } html[data-theme="dark"] .theme-select { border-color: #3a4a68; background: #18243b; } html[data-theme="dark"] .app-footer { border-color: #293650; }

@media (max-width: 720px) {
  .app-nav, .app-main, .app-footer { width: min(100% - 32px, 1120px); }
  .app-main { grid-template-columns: 1fr; gap: 30px; min-height: auto; padding: 30px 0 55px; }
  .app-copy { order: 2; } .card { order: 1; min-height: 260px; padding: 30px !important; border-radius: 25px !important; }
  .card img { width: 116px !important; height: 116px !important; border-radius: 27px !important; }
  .app-copy h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
}