:root {
  --bg: #0a0a0a;
  --bg-soft: #111111;
  --bg-elevated: #151515;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #ffffff;
  --text-soft: #a7a7ad;
  --text-muted: #6f6f76;

  --accent: #7c5cff;
  --accent-2: #3d8bff;
  --accent-3: #20d6b5;

  --success: #44d27b;
  --danger: #ff4d67;

  --page-width: 1240px;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 44px;

  --shadow-soft:
    0 30px 80px rgba(0, 0, 0, 0.38);

  --shadow-phone:
    0 60px 130px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(124, 92, 255, 0.13),
      transparent 32%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::selection {
  background: rgba(124, 92, 255, 0.45);
  color: #ffffff;
}

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

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

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

.site-shell {
  overflow: hidden;
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.05);

  background:
    rgba(10, 10, 10, 0.78);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}

.header-inner {
  width:
    min(
      calc(100% - 48px),
      var(--page-width)
    );

  height: 76px;

  margin:
    0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  flex-shrink: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #d8d3ff 42%,
      #8065ff 100%
    );

  color: #080808;

  font-size: 17px;
  font-weight: 900;

  box-shadow:
    0 8px 30px rgba(124, 92, 255, 0.2);
}

.brand-name {
  font-size: 16px;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 34px;

  margin-left: auto;
  margin-right: auto;
}

.desktop-nav a,
.header-link {
  color: var(--text-soft);

  font-size: 14px;
  font-weight: 600;

  transition:
    color 0.2s ease;
}

.desktop-nav a:hover,
.header-link:hover {
  color: var(--text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* =========================================================
   BUTTONS
========================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding:
    0 23px;

  border:
    1px solid transparent;

  border-radius:
    16px;

  font-size:
    14px;

  font-weight:
    750;

  letter-spacing:
    -0.01em;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

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

.button-small {
  min-height:
    42px;

  padding:
    0 17px;

  border-color:
    var(--border-strong);

  background:
    rgba(255, 255, 255, 0.06);
}

.button-small:hover {
  background:
    rgba(255, 255, 255, 0.1);
}

.button-primary {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #e9e7ff 100%
    );

  color:
    #090909;

  box-shadow:
    0 14px 45px rgba(255, 255, 255, 0.08);
}

.button-primary:hover {
  box-shadow:
    0 20px 60px rgba(124, 92, 255, 0.18);
}

.button-secondary {
  border-color:
    var(--border-strong);

  background:
    rgba(255, 255, 255, 0.03);
}

.button-secondary:hover {
  background:
    rgba(255, 255, 255, 0.075);
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  padding:
    172px 0 118px;

  min-height:
    900px;

  display:
    flex;

  align-items:
    center;
}

.hero-inner {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      calc(100% - 48px),
      var(--page-width)
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(410px, 0.75fr);

  gap:
    90px;

  align-items:
    center;
}

.hero-copy {
  max-width:
    690px;
}

.eyebrow {
  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    8px 13px;

  border:
    1px solid var(--border);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    #c9c9cf;

  font-size:
    12px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.11em;
}

.eyebrow-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--accent-3);

  box-shadow:
    0 0 18px var(--accent-3);
}

.hero h1 {
  margin:
    24px 0 24px;

  max-width:
    760px;

  font-size:
    clamp(58px, 6.4vw, 94px);

  line-height:
    0.95;

  letter-spacing:
    -0.065em;

  font-weight:
    760;
}

.gradient-text {
  display:
    block;

  background:
    linear-gradient(
      100deg,
      #ffffff 4%,
      #beb4ff 43%,
      #6aa3ff 76%,
      #72eed8 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;
}

.hero-description {
  max-width:
    590px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    20px;

  line-height:
    1.6;

  letter-spacing:
    -0.018em;
}

.hero-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    38px;
}

.hero-note {
  margin:
    16px 0 0;

  color:
    var(--text-muted);

  font-size:
    12px;
}

.hero-glow {
  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(25px);

  pointer-events:
    none;
}

.hero-glow-one {
  width:
    520px;

  height:
    520px;

  top:
    80px;

  right:
    -120px;

  background:
    radial-gradient(
      circle,
      rgba(124, 92, 255, 0.23),
      rgba(124, 92, 255, 0)
      68%
    );
}

.hero-glow-two {
  width:
    420px;

  height:
    420px;

  bottom:
    -100px;

  left:
    -160px;

  background:
    radial-gradient(
      circle,
      rgba(61, 139, 255, 0.1),
      transparent
      70%
    );
}

/* =========================================================
   PHONE MOCKUP
========================================================= */

.hero-visual {
  position:
    relative;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  min-height:
    650px;
}

.phone-shadow {
  position:
    absolute;

  width:
    340px;

  height:
    540px;

  border-radius:
    80px;

  background:
    rgba(124, 92, 255, 0.19);

  filter:
    blur(80px);

  transform:
    translate(
      20px,
      20px
    );
}

.phone {
  position:
    relative;

  width:
    338px;

  height:
    690px;

  padding:
    9px;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  border-radius:
    48px;

  background:
    linear-gradient(
      145deg,
      #36363a,
      #151517 45%,
      #2a2a2e
    );

  box-shadow:
    var(--shadow-phone);

  transform:
    rotate(3deg);

  transition:
    transform 0.4s ease;
}

.phone:hover {
  transform:
    rotate(0deg)
    translateY(-8px);
}

.phone-top {
  position:
    absolute;

  top:
    19px;

  left:
    50%;

  z-index:
    20;

  transform:
    translateX(-50%);
}

.phone-island {
  width:
    100px;

  height:
    28px;

  border-radius:
    999px;

  background:
    #050505;
}

.phone-screen {
  position:
    relative;

  height:
    100%;

  overflow:
    hidden;

  border-radius:
    40px;

  background:
    #080808;

  padding:
    24px 14px 62px;
}

.app-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  height:
    48px;

  padding:
    0 4px;
}

.app-logo {
  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.1em;
}

.app-header-icons {
  display:
    flex;

  gap:
    7px;
}

.app-header-icons span {
  width:
    20px;

  height:
    20px;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  border-radius:
    7px;
}

.story-row {
  display:
    flex;

  gap:
    12px;

  margin:
    4px 0 16px;

  overflow:
    hidden;
}

.story {
  min-width:
    50px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    5px;
}

.story small {
  max-width:
    48px;

  overflow:
    hidden;

  color:
    #a4a4a8;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    8px;
}

.story-avatar {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255, 255, 255, 0.2);

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #25252a,
      #121214
    );

  font-size:
    11px;

  font-weight:
    800;
}

.story-avatar-main {
  border-color:
    rgba(124, 92, 255, 0.8);

  box-shadow:
    0 0 0 2px
    rgba(124, 92, 255, 0.18);
}

.world-now-card {
  padding:
    15px;

  border:
    1px solid rgba(124, 92, 255, 0.24);

  border-radius:
    19px;

  background:
    linear-gradient(
      145deg,
      rgba(124, 92, 255, 0.12),
      rgba(61, 139, 255, 0.035)
    );

  margin-bottom:
    13px;
}

.world-now-top {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    8px;

  color:
    #d5d0ff;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.12em;
}

.live-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--danger);

  box-shadow:
    0 0 10px
    var(--danger);
}

.world-now-card strong {
  display:
    block;

  margin-bottom:
    5px;

  font-size:
    12px;

  line-height:
    1.35;
}

.world-now-card p {
  margin:
    0;

  color:
    #88888f;

  font-size:
    8.5px;

  line-height:
    1.5;
}

.pulse-tags {
  display:
    flex;

  gap:
    5px;

  margin-top:
    11px;
}

.pulse-tags span {
  padding:
    4px 6px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.04);

  color:
    #bdbdc2;

  font-size:
    6px;

  font-weight:
    700;
}

.mock-post {
  overflow:
    hidden;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    19px;

  background:
    #0c0c0d;
}

.mock-post-header {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px;
}

.mock-avatar {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #7c5cff,
      #4b8dff
    );

  font-size:
    8px;

  font-weight:
    900;
}

.mock-post-header div:last-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}

.mock-post-header strong {
  font-size:
    8px;
}

.mock-post-header small {
  color:
    #6f6f75;

  font-size:
    6.5px;
}

.mock-post-media {
  position:
    relative;

  height:
    245px;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  background:
    radial-gradient(
      circle at center,
      #19152b 0%,
      #090a10 40%,
      #050505 100%
    );
}

.mock-world {
  position:
    relative;

  z-index:
    4;

  width:
    110px;

  height:
    110px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #a89cff 0%,
      #5c70ff 24%,
      #26458a 55%,
      #0c1837 100%
    );

  box-shadow:
    0 0 60px
    rgba(94, 96, 255, 0.45);
}

.mock-world::after {
  content:
    "";

  position:
    absolute;

  inset:
    10px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    50%;
}

.mock-world-core {
  width:
    34px;

  height:
    34px;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.15);

  filter:
    blur(4px);
}

.mock-orbit {
  position:
    absolute;

  border:
    1px solid rgba(129, 110, 255, 0.18);

  border-radius:
    50%;
}

.orbit-one {
  width:
    190px;

  height:
    80px;

  transform:
    rotate(-15deg);
}

.orbit-two {
  width:
    230px;

  height:
    115px;

  transform:
    rotate(30deg);
}

.mock-post-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    10px 11px 3px;

  font-size:
    13px;
}

.mock-post-actions .save-icon {
  margin-left:
    auto;
}

.mock-caption {
  padding:
    0 11px 11px;

  margin:
    4px 0 0;

  color:
    #99999f;

  font-size:
    7.5px;
}

.mock-tabs {
  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    57px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-around;

  border-top:
    1px solid rgba(255, 255, 255, 0.06);

  background:
    rgba(8, 8, 8, 0.96);

  color:
    #67676e;

  font-size:
    5.8px;

  font-weight:
    700;
}

.mock-tabs .active {
  color:
    #ffffff;
}

/* =========================================================
   GENERIC SECTIONS
========================================================= */

.section {
  width:
    min(
      calc(100% - 48px),
      var(--page-width)
    );

  margin:
    0 auto;

  padding:
    130px 0;
}

.section-heading {
  max-width:
    720px;

  margin-bottom:
    56px;
}

.section-heading.centered {
  margin-left:
    auto;

  margin-right:
    auto;

  text-align:
    center;
}

.section-kicker {
  display:
    inline-block;

  margin-bottom:
    17px;

  color:
    #9280ff;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.15em;
}

.section-heading h2,
.principles-copy h2,
.download-inner h2 {
  margin:
    0;

  font-size:
    clamp(42px, 5vw, 70px);

  line-height:
    1.02;

  letter-spacing:
    -0.055em;

  font-weight:
    730;
}

.section-heading p {
  max-width:
    610px;

  margin:
    21px 0 0;

  color:
    var(--text-soft);

  font-size:
    17px;

  line-height:
    1.7;
}

/* =========================================================
   FEATURES
========================================================= */

.feature-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    18px;
}

.feature-card {
  position:
    relative;

  min-height:
    470px;

  overflow:
    hidden;

  padding:
    34px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    var(--shadow-soft);
}

.feature-card-large {
  grid-column:
    span 2;

  min-height:
    560px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  align-items:
    center;
}

.feature-number {
  position:
    absolute;

  top:
    29px;

  right:
    29px;

  color:
    rgba(255, 255, 255, 0.28);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.14em;
}

.feature-content {
  position:
    relative;

  z-index:
    3;

  max-width:
    500px;
}

.feature-label {
  display:
    inline-block;

  margin-bottom:
    16px;

  color:
    #9e90ff;

  font-size:
    11px;

  font-weight:
    850;

  letter-spacing:
    0.15em;
}

.feature-content h3 {
  margin:
    0;

  font-size:
    clamp(32px, 3.3vw, 50px);

  line-height:
    1.04;

  letter-spacing:
    -0.045em;
}

.feature-content p {
  max-width:
    470px;

  margin:
    20px 0 0;

  color:
    var(--text-soft);

  font-size:
    15px;

  line-height:
    1.7;
}

/* WORLD visual */

.world-visual {
  position:
    relative;

  width:
    400px;

  height:
    400px;

  margin:
    0 auto;

  display:
    grid;

  place-items:
    center;
}

.world-ring {
  position:
    absolute;

  border:
    1px solid rgba(124, 92, 255, 0.17);

  border-radius:
    50%;
}

.ring-one {
  width:
    360px;

  height:
    360px;
}

.ring-two {
  width:
    270px;

  height:
    270px;
}

.ring-three {
  width:
    180px;

  height:
    180px;
}

.world-center {
  position:
    relative;

  z-index:
    2;

  width:
    104px;

  height:
    104px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 30% 25%,
      #ffffff,
      #b5adff 20%,
      #6957e8 58%,
      #322477 100%
    );

  color:
    #090909;

  font-size:
    30px;

  font-weight:
    950;

  box-shadow:
    0 0 75px
    rgba(124, 92, 255, 0.42);
}

.world-node {
  position:
    absolute;

  width:
    14px;

  height:
    14px;

  border:
    2px solid rgba(255, 255, 255, 0.36);

  border-radius:
    50%;

  background:
    #141414;

  box-shadow:
    0 0 20px rgba(124, 92, 255, 0.45);
}

.node-one {
  top:
    38px;

  left:
    145px;
}

.node-two {
  right:
    31px;

  top:
    195px;
}

.node-three {
  bottom:
    57px;

  left:
    85px;
}

.node-four {
  top:
    110px;

  right:
    100px;
}

/* PEOPLE */

.people-stack {
  position:
    absolute;

  left:
    34px;

  right:
    34px;

  bottom:
    30px;

  height:
    160px;
}

.person-card {
  position:
    absolute;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  width:
    72%;

  padding:
    13px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius:
    17px;

  background:
    rgba(20, 20, 22, 0.93);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.3);
}

.person-card-one {
  left:
    0;

  top:
    0;

  z-index:
    3;
}

.person-card-two {
  left:
    15%;

  top:
    49px;

  z-index:
    2;

  opacity:
    0.78;
}

.person-card-three {
  left:
    29%;

  top:
    98px;

  z-index:
    1;

  opacity:
    0.52;
}

.person-avatar {
  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #7c5cff,
      #2f7aff
    );

  font-size:
    11px;

  font-weight:
    850;
}

.person-card div:last-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.person-card strong {
  font-size:
    11px;
}

.person-card span {
  color:
    var(--text-muted);

  font-size:
    8px;
}

/* PULSE */

.pulse-card {
  background:
    radial-gradient(
      circle at 90% 80%,
      rgba(124, 92, 255, 0.11),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );
}

.pulse-preview {
  position:
    absolute;

  left:
    34px;

  right:
    34px;

  bottom:
    28px;

  padding-left:
    20px;
}

.pulse-line {
  position:
    absolute;

  left:
    6px;

  top:
    13px;

  bottom:
    17px;

  width:
    1px;

  background:
    linear-gradient(
      to bottom,
      var(--accent),
      rgba(124, 92, 255, 0.04)
    );
}

.pulse-item {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    10px 0;
}

.pulse-icon {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(124, 92, 255, 0.35);

  border-radius:
    50%;

  background:
    #111014;

  color:
    #9b88ff;

  font-size:
    8px;
}

.pulse-item div:last-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.pulse-item span {
  color:
    #8d7cff;

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    0.12em;
}

.pulse-item strong {
  font-size:
    11px;

  font-weight:
    650;
}

/* =========================================================
   DARK SECTION / PILLARS
========================================================= */

.section-dark {
  position:
    relative;

  width:
    100%;

  max-width:
    none;

  padding:
    135px max(
      24px,
      calc((100vw - var(--page-width)) / 2)
    );

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  background:
    #070707;
}

.pillars {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    14px;
}

.pillar {
  min-height:
    260px;

  padding:
    27px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    24px;

  background:
    rgba(255, 255, 255, 0.02);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.pillar:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(124, 92, 255, 0.28);

  background:
    rgba(124, 92, 255, 0.04);
}

.pillar-icon {
  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    45px;

  border:
    1px solid rgba(255, 255, 255, 0.11);

  border-radius:
    14px;

  color:
    #a99bff;

  font-size:
    19px;
}

.pillar h3 {
  margin:
    0 0 10px;

  font-size:
    19px;

  letter-spacing:
    -0.025em;
}

.pillar p {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.65;
}

/* =========================================================
   PRINCIPLES
========================================================= */

.principles-section {
  padding-top:
    150px;

  padding-bottom:
    150px;
}

.principles-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1fr);

  gap:
    110px;

  align-items:
    start;
}

.principles-copy p {
  max-width:
    530px;

  margin:
    25px 0 30px;

  color:
    var(--text-soft);

  font-size:
    16px;

  line-height:
    1.72;
}

.text-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  font-size:
    14px;

  font-weight:
    700;
}

.text-link span {
  color:
    #9d8cff;

  font-size:
    18px;

  transition:
    transform 0.2s ease;
}

.text-link:hover span {
  transform:
    translateX(4px);
}

.principles-list {
  border-top:
    1px solid var(--border);
}

.principle {
  display:
    grid;

  grid-template-columns:
    55px 1fr;

  gap:
    20px;

  padding:
    27px 0;

  border-bottom:
    1px solid var(--border);
}

.principle > span {
  padding-top:
    3px;

  color:
    #7f6cf7;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.13em;
}

.principle strong {
  display:
    block;

  margin-bottom:
    7px;

  font-size:
    17px;

  letter-spacing:
    -0.02em;
}

.principle p {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.6;
}

/* =========================================================
   DOWNLOAD CTA
========================================================= */

.download-section {
  position:
    relative;

  overflow:
    hidden;

  width:
    min(
      calc(100% - 48px),
      var(--page-width)
    );

  margin:
    0 auto 80px;

  border:
    1px solid rgba(124, 92, 255, 0.2);

  border-radius:
    40px;

  background:
    linear-gradient(
      145deg,
      rgba(124, 92, 255, 0.09),
      rgba(61, 139, 255, 0.025)
    );
}

.download-glow {
  position:
    absolute;

  width:
    600px;

  height:
    600px;

  top:
    -390px;

  left:
    50%;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(124, 92, 255, 0.28),
      transparent
      68%
    );

  pointer-events:
    none;
}

.download-inner {
  position:
    relative;

  z-index:
    2;

  padding:
    100px 28px;

  text-align:
    center;
}

.download-inner h2 {
  max-width:
    780px;

  margin:
    0 auto;
}

.download-inner p {
  margin:
    22px auto 30px;

  color:
    var(--text-soft);

  font-size:
    16px;
}

.store-button {
  width:
    fit-content;

  min-width:
    185px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    10px 18px;

  border:
    1px solid rgba(255, 255, 255, 0.17);

  border-radius:
    14px;

  background:
    #050505;

  text-align:
    left;
}

.store-button-disabled {
  opacity:
    0.8;
}

.apple-symbol {
  width:
    24px;

  font-size:
    19px;
}

.store-button div:last-child {
  display:
    flex;

  flex-direction:
    column;
}

.store-button small {
  color:
    #b5b5ba;

  font-size:
    8px;
}

.store-button strong {
  font-size:
    17px;

  line-height:
    1;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  width:
    min(
      calc(100% - 48px),
      var(--page-width)
    );

  margin:
    0 auto;

  padding:
    40px 0 30px;

  border-top:
    1px solid var(--border);
}

.footer-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;

  padding-bottom:
    45px;
}

.footer-description {
  max-width:
    390px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.6;

  text-align:
    right;
}

.footer-links {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    35px;

  padding:
    42px 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.footer-links > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}

.footer-links strong {
  margin-bottom:
    4px;

  color:
    #ffffff;

  font-size:
    11px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.footer-links a {
  width:
    fit-content;

  color:
    var(--text-soft);

  font-size:
    13px;

  transition:
    color 0.2s ease;
}

.footer-links a:hover {
  color:
    #ffffff;
}

.footer-bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  padding-top:
    24px;

  color:
    var(--text-muted);

  font-size:
    11px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes softFloat {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-8px);
  }
}

.world-center {
  animation:
    softFloat 5s ease-in-out infinite;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 1050px
) {
  .desktop-nav {
    display:
      none;
  }

  .header-actions {
    margin-left:
      auto;
  }

  .hero {
    padding-top:
      145px;

    min-height:
      auto;
  }

  .hero-inner {
    grid-template-columns:
      1fr;

    gap:
      55px;

    text-align:
      center;
  }

  .hero-copy {
    max-width:
      790px;

    margin:
      0 auto;
  }

  .eyebrow {
    margin:
      0 auto;
  }

  .hero-description {
    margin-left:
      auto;

    margin-right:
      auto;
  }

  .hero-actions {
    justify-content:
      center;
  }

  .hero-visual {
    min-height:
      720px;
  }

  .feature-card-large {
    grid-template-columns:
      1fr;

    padding-bottom:
      0;
  }

  .feature-card-large .feature-content {
    max-width:
      620px;
  }

  .world-visual {
    margin-top:
      40px;
  }

  .pillars {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .principles-grid {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }
}

@media (
  max-width: 720px
) {
  .header-inner {
    width:
      min(
        calc(100% - 28px),
        var(--page-width)
      );

    height:
      68px;
  }

  .header-link {
    display:
      none;
  }

  .brand-name {
    font-size:
      14px;
  }

  .brand-mark {
    width:
      31px;

    height:
      31px;
  }

  .button-small {
    min-height:
      38px;

    padding:
      0 13px;

    font-size:
      12px;
  }

  .hero {
    padding:
      126px 0 76px;
  }

  .hero-inner,
  .section,
  .download-section,
  .site-footer {
    width:
      min(
        calc(100% - 28px),
        var(--page-width)
      );
  }

  .hero h1 {
    font-size:
      clamp(
        49px,
        15vw,
        72px
      );
  }

  .hero-description {
    font-size:
      17px;
  }

  .hero-actions {
    flex-direction:
      column;

    align-items:
      stretch;

    max-width:
      360px;

    margin-left:
      auto;

    margin-right:
      auto;
  }

  .hero-visual {
    min-height:
      620px;
  }

  .phone {
    width:
      300px;

    height:
      615px;
  }

  .phone-screen {
    border-radius:
      36px;
  }

  .mock-post-media {
    height:
      205px;
  }

  .section {
    padding:
      90px 0;
  }

  .section-heading {
    margin-bottom:
      36px;
  }

  .feature-grid {
    grid-template-columns:
      1fr;
  }

  .feature-card,
  .feature-card-large {
    grid-column:
      span 1;

    min-height:
      430px;

    padding:
      27px;
  }

  .feature-card-large {
    min-height:
      690px;
  }

  .world-visual {
    width:
      300px;

    height:
      300px;
  }

  .ring-one {
    width:
      280px;

    height:
      280px;
  }

  .ring-two {
    width:
      210px;

    height:
      210px;
  }

  .ring-three {
    width:
      140px;

    height:
      140px;
  }

  .world-center {
    width:
      82px;

    height:
      82px;
  }

  .node-one {
    top:
      25px;

    left:
      112px;
  }

  .node-two {
    right:
      19px;

    top:
      145px;
  }

  .node-three {
    bottom:
      40px;

    left:
      64px;
  }

  .node-four {
    top:
      78px;

    right:
      72px;
  }

  .section-dark {
    padding:
      95px 14px;
  }

  .pillars {
    grid-template-columns:
      1fr;
  }

  .pillar {
    min-height:
      220px;
  }

  .pillar-icon {
    margin-bottom:
      34px;
  }

  .principles-section {
    padding-top:
      100px;

    padding-bottom:
      100px;
  }

  .principle {
    grid-template-columns:
      42px 1fr;
  }

  .download-section {
    margin-bottom:
      50px;

    border-radius:
      28px;
  }

  .download-inner {
    padding:
      75px 22px;
  }

  .footer-top {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      24px;
  }

  .footer-description {
    text-align:
      left;
  }

  .footer-links {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }

  .footer-bottom {
    flex-direction:
      column;

    align-items:
      flex-start;
  }
}

@media (
  max-width: 400px
) {
  .phone {
    width:
      276px;

    height:
      570px;
  }

  .phone-screen {
    padding-left:
      11px;

    padding-right:
      11px;
  }

  .mock-post-media {
    height:
      180px;
  }

  .story-row {
    gap:
      8px;
  }

  .story-avatar {
    width:
      42px;

    height:
      42px;
  }

  .hero h1 {
    font-size:
      47px;
  }
}