@font-face {
  font-family:Nexora;
  src:url('../assets/fonts/nexora-arabic.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

@font-face {
  font-family:Nexora;
  src:url('../assets/fonts/nexora-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme:dark;
  --bg:#0b0c10;
  --panel:#111218;
  --line:#292832;
  --text:#f8f6fc;
  --muted:#b3aebe;
  --purple:#9d4edd;
  --cyan:#00f0ff;
  --radius:20px;
  --ease:cubic-bezier(.16,1,.3,1);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Nexora,Tahoma,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  border:0;
}

img {
  display:block;
  max-width:100%;
}

svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  text-wrap:balance;
}

::selection {
  background:#7b2cbf;
  color:#fff;
}

:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px;
}

* {
  scrollbar-width:thin;
  scrollbar-color:#635175 var(--bg);
}

[hidden] {
  display:none!important;
}

.container {
  width:min(1200px,calc(100% - 40px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  inset-block-start:-100px;
  inset-inline-start:20px;
  background:var(--text);
  color:var(--bg);
  padding:12px 20px;
  z-index:100;
}

.skip-link:focus {
  inset-block-start:12px;
}

.header {
  position:sticky;
  top:0;
  z-index:20;
  background:#0b0c10e8;
  backdrop-filter:blur(16px);
  border-bottom:1px solid #ffffff0d;
}

.nav-shell {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-size:19px;
  font-weight:800;
  letter-spacing:.02em;
  direction:ltr;
}

.brand-ai {
  font-weight:500;
}

.pro {
  display:inline-block;
  vertical-align:middle;
  font-size:10px;
  line-height:1.7;
  letter-spacing:.1em;
  margin-inline-start:8px;
  padding:1px 6px;
  border:1px solid #74548b;
  border-radius:4px;
  color:#d9b2fa;
}

.navigation {
  display:none;
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:16px;
}

.language-switch {
  display:flex;
  align-items:center;
  gap:2px;
  font-size:12px;
  color:#746d80;
}

.language-switch button {
  background:none;
  min-width:32px;
  min-height:44px;
  padding:6px;
  color:var(--muted);
  font-weight:600;
}

.language-switch button[aria-pressed=true] {
  color:#fff;
}

.menu-toggle {
  background:none;
  width:40px;
  height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:8px;
}

.menu-toggle span {
  height:2px;
  width:24px;
  background:var(--text);
  transition:transform .2s;
}

.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-4px) rotate(-45deg);
}

.navigation.is-open {
  display:flex;
  position:absolute;
  inset-inline:0;
  top:calc(100% + 1px);
  flex-direction:column;
  padding:16px;
  background:#14121b;
  border:1px solid var(--line);
  border-radius:0 0 16px 16px;
  box-shadow:0 20px 40px #0008;
}

.navigation a,.nav-pending {
  font-size:13px;
  padding:10px;
  transition:color .2s;
}

.navigation a:hover {
  color:#d6a0ff;
}

.nav-pending {
  color:#99929f;
  cursor:not-allowed;
}

.hero {
  position:relative;
  display:grid;
  gap:20px;
  padding-block:58px 24px;
  overflow:hidden;
}

.hero-copy {
  position:relative;
  z-index:2;
}

.hero h1 {
  font-size:14px;
  letter-spacing:.17em;
  text-align:start;
  font-weight:700;
  margin-bottom:18px;
}

.hero-pro {
  color:#c98bff;
  letter-spacing:.1em;
}

.hero h2 {
  font-size:clamp(35px,5vw,60px);
  line-height:1.35;
  letter-spacing:-.035em;
  max-width:620px;
  font-weight:750;
}

.hero-description {
  color:var(--muted);
  font-size:15px;
  max-width:470px;
  margin-top:22px;
  line-height:1.95;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:48px;
  padding:12px 22px;
  border-radius:10px;
  font-size:14px;
  font-weight:650;
  transition:background .2s,transform .2s,box-shadow .2s;
  border:1px solid transparent;
  text-align:center;
}

.button:hover {
  transform:translateY(-2px);
}

.primary {
  background:linear-gradient(115deg,#7130c0,#9239d5);
  border-color:#ac65e0;
  box-shadow:0 6px 22px #7026b926;
  color:#fff;
}

.primary:hover {
  background:linear-gradient(115deg,#8342d2,#a04ce0);
  box-shadow:0 8px 28px #7026b944;
}

.secondary {
  background:#16141d;
  border-color:#36303f;
}

.secondary:hover {
  background:#211c2b;
}

.hero-footnote {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:25px;
  font-size:11px;
  color:var(--muted);
  flex-wrap:wrap;
}

.status-dot {
  width:5px;
  height:5px;
  background:var(--cyan);
  border-radius:50%;
}

.hero-domain {
  color:#91849e;
  border-inline-start:1px solid #39313f;
  padding-inline-start:12px;
  margin-inline-start:3px;
}

.hero-art {
  height:285px;
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  direction:ltr;
}

.hero-art:before {
  content:'';
  position:absolute;
  inset:5%;
  background:radial-gradient(ellipse,#822cbd2e,transparent 68%);
  z-index:-1;
}

.art-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#895bc00a 1px,transparent 1px),linear-gradient(90deg,#895bc00a 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse,#000,transparent 65%);
}

.orbit {
  position:absolute;
  width:90%;
  height:42%;
  border:1px solid #964ad85c;
  border-radius:50%;
  transform:rotate(-32deg);
  box-shadow:0 8px 30px #6424970b;
}

.orbit-two {
  transform:rotate(34deg);
  width:83%;
  height:48%;
  border-color:#7544a043;
}

.orbit-three {
  transform:rotate(-32deg);
  width:100%;
  height:53%;
  border-color:#72468920;
}

.nucleus {
  height:145px;
  width:145px;
  display:grid;
  place-items:center;
  border-radius:36px;
  background:linear-gradient(145deg,#352444b3,#100e1bf2);
  border:1px solid #9863bf7a;
  box-shadow:12px 25px 55px #0008,inset 1px 1px 22px #b368ed19;
  transform:rotate(-13deg);
  animation:arrive 1.3s var(--ease) both;
  backdrop-filter:blur(6px);
}

.nucleus svg {
  width:97px;
  height:97px;
  fill:#d6b2f2;
  stroke:none;
  filter:drop-shadow(0 4px 18px #a855f740);
}

.art-spark {
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 14px #00f0ff88;
}

.spark-one {
  left:14%;
  top:66%;
}

.spark-two {
  right:17%;
  top:29%;
  background:#d68eff;
  box-shadow:0 0 14px #b653ff88;
}

.art-caption {
  position:absolute;
  bottom:4px;
  right:15px;
  color:#887695;
  font-size:8px;
  letter-spacing:.19em;
  line-height:1.9;
}

.art-caption strong {
  font-size:10px;
  color:#ccbdd6;
  letter-spacing:.4em;
}

.products-section {
  padding-block:40px 70px;
  border-top:1px solid #ffffff0a;
  background:linear-gradient(180deg,#11101955,transparent 200px);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  margin-bottom:27px;
}

.section-heading h2 {
  font-size:27px;
  letter-spacing:-.025em;
}

.section-heading p {
  font-size:14px;
  color:var(--muted);
  margin-top:7px;
}

.section-label {
  display:none;
  font-size:12px;
  color:#bfa4d0;
}

.product-grid {
  display:grid;
  gap:22px;
}

.product-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .2s,transform .2s;
}

.product-card:hover {
  border-color:#6b487f;
  transform:translateY(-3px);
}

.product-card.featured {
  border-color:#8143ac;
  box-shadow:0 12px 35px #5e25700b;
}

.product-art {
  position:relative;
  background:#14111e;
  aspect-ratio:1.9;
  overflow:hidden;
  border-bottom:1px solid #ffffff09;
}

.product-art img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.image-caption {
  position:absolute;
  bottom:12px;
  inset-inline-end:14px;
  font-size:10px;
  color:#c1b6cc;
  background:#100d17bb;
  padding:2px 8px;
  border-radius:4px;
}

.offer-badge {
  position:absolute;
  top:16px;
  inset-inline-start:16px;
  background:#291b39;
  color:#e8c4ff;
  border:1px solid #795099;
  padding:3px 10px;
  border-radius:5px;
  font-size:11px;
  font-weight:600;
}

.card-body {
  padding:23px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.product-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.product-title-row h3 {
  font-size:23px;
  font-weight:700;
  letter-spacing:-.02em;
}

.product-mark {
  color:#887298;
  font-size:20px;
}

.duration {
  font-size:13px;
  color:#cbb8da;
  margin-top:6px;
}

.features {
  list-style:none;
  padding:0;
  margin:17px 0 23px;
  font-size:13px;
  color:#d0c9d6;
  min-height:24px;
}

.features li:before {
  content:'';
  display:inline-block;
  width:4px;
  height:4px;
  background:#8b7b97;
  border-radius:50%;
  margin-inline-end:9px;
  vertical-align:middle;
}

.pending {
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
}

.price-block {
  margin-top:auto;
  min-height:81px;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding-bottom:13px;
}

.price-before {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:4px;
}

.price-before del {
  color:#b0a4b7;
  font-size:13px;
  text-decoration-thickness:1px;
}

.discount {
  font-size:11px;
  padding:2px 7px;
  border-radius:5px;
  background:#193031;
  color:#85f0e7;
}

.price-current {
  font-size:32px;
  font-weight:750;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  line-height:1.5;
}

.price-pending {
  color:#bdb0c7;
  font-size:17px;
  font-weight:500;
  padding-bottom:7px;
}

.card-actions {
  border-top:1px solid #ffffff0c;
  padding-top:18px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.card-subscribe {
  background:#201b29;
  border-color:#413149;
}

.card-subscribe:hover {
  background:#30203d;
}

.details-button {
  background:transparent;
  min-height:44px;
  padding:8px;
  font-size:12px;
  color:#c7b8d2;
}

.details-button:hover {
  color:#fff;
}

.contact-section {
  padding-block:40px 52px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:23px;
}

.contact-section h2 {
  font-size:26px;
  letter-spacing:-.025em;
}

.contact-section p {
  font-size:14px;
  color:var(--muted);
  margin-top:10px;
}

.contact-section .button {
  align-self:start;
}

.footer {
  border-top:1px solid #ffffff0b;
  padding-block:27px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  font-size:11px;
  color:var(--muted);
}

.footer-brand {
  font-size:15px;
  color:var(--text);
}

.footer p {
  width:100%;
}

.footer a:not(.brand):hover {
  color:var(--cyan);
}

.modal-open {
  overflow:hidden;
}

dialog {
  position:fixed;
  border:1px solid #654077;
  border-radius:20px;
  background:var(--panel);
  color:var(--text);
  padding:0;
  width:min(560px,calc(100% - 28px));
  max-height:88dvh;
  overscroll-behavior:contain;
  box-shadow:0 30px 90px #000b;
}

dialog::backdrop {
  background:#030107c9;
  backdrop-filter:blur(5px);
}

.dialog-close {
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  z-index:2;
  border:1px solid #776486;
  background:#17101fed;
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
}

.dialog-body {
  padding:26px;
}

.dialog-body h2 {
  font-size:29px;
  text-align:start;
}

.dialog-body h3 {
  font-size:15px;
  margin:22px 0 7px;
}

.dialog-body .button {
  display:flex;
  margin-top:28px;
}

.dialog-body dl {
  margin:20px 0;
}

.detail-row {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}

.detail-row dt {
  color:var(--muted);
}

.detail-row dd {
  margin:0;
  text-align:end;
}

.dialog-body .features {
  margin-block:10px;
}

.dialog-body .price-block {
  min-height:0;
}

details {
  border-bottom:1px solid var(--line);
  padding:12px 0;
}

summary {
  cursor:pointer;
}

html[dir=ltr] .direction-arrow {
  transform:rotate(180deg);
}

html[dir=ltr] .hero h2 {
  line-height:1.15;
}

html[dir=ltr] .hero h1 {
  text-align:left;
}

@keyframes arrive {
  from {
    transform:translateY(15px) rotate(-17deg);
    filter:blur(3px);
  }
  to {
    transform:translateY(0) rotate(-13deg);
    filter:blur(0);
  }
}

@media(min-width:600px) {
  .container {
    width:min(1200px,calc(100% - 64px));
  }
  .hero-art {
    height:360px;
    max-width:520px;
    width:100%;
    justify-self:center;
  }
  .nucleus {
    width:185px;
    height:185px;
    border-radius:42px;
  }
  .nucleus svg {
    width:120px;
    height:120px;
  }
  .hero {
    padding-top:70px;
  }
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .section-label {
    display:block;
  }
  .footer p {
    width:auto;
  }
  .contact-section {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .contact-section .button {
    align-self:center;
    flex-shrink:0;
  }
}

@media(min-width:1024px) {
  .navigation {
    display:flex;
    gap:3px;
    align-items:center;
  }
  .menu-toggle {
    display:none;
  }
  .nav-shell {
    gap:16px;
  }
  .hero {
    grid-template-columns:1.05fr 1fr;
    align-items:center;
    min-height:620px;
    padding-block:75px 80px;
    gap:24px;
  }
  .hero-art {
    height:455px;
    max-width:none;
  }
  .nucleus {
    width:210px;
    height:210px;
    border-radius:49px;
  }
  .nucleus svg {
    width:139px;
    height:139px;
  }
  .art-caption {
    bottom:28px;
    right:36px;
  }
  .hero h1 {
    font-size:16px;
  }
  .hero-description {
    font-size:16px;
  }
  .hero-footnote {
    margin-top:35px;
  }
  .products-section {
    padding-block:56px 85px;
  }
  .section-heading {
    margin-bottom:32px;
  }
  .section-heading h2 {
    font-size:34px;
  }
  .product-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .contact-section {
    padding-block:53px 65px;
  }
  .footer p {
    flex:1;
  }
  .contact-section h2 {
    font-size:30px;
  }
}

@media(max-width:389px) {
  .container {
    width:calc(100% - 32px);
  }
  .brand {
    font-size:15px;
    gap:6px;
  }
  .brand img {
    width:29px;
    height:29px;
  }
  .nav-shell {
    gap:8px;
    min-height:72px;
  }
  .nav-actions {
    gap:5px;
  }
  .hero h2 {
    font-size:34px;
  }
  .hero-actions {
    gap:9px;
  }
  .hero-actions .button {
    padding-inline:16px;
    font-size:13px;
  }
  .hero-domain {
    display:none;
  }
}

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