/* Sunni — warm amber & orange theme.
 * Loaded after shared/style.css. Overrides the shared blue palette so the site
 * echoes the app: a deep, warm dusk surface, the icon's yellow-to-orange
 * gradient, the app's orange accent (system orange, #FF9500), and a serif face
 * matching Sunni's serif UI. Glyphs on the gradient are dark brown for contrast. Touches only this site — shared/ is untouched. */

:root {
  --navy-0: #1a0d02;
  --navy-1: #2a1504;
  --navy-2: #432307;
  --blue-1: #8f4a00;
  --blue-2: #a35200;
  --blue-3: #ffb340;
  --ink:    #1f1408;
  --ink-2:  #3d2c18;
  --mute:   #85745f;
  --line:   #efe6d9;
  --line-2: #f6efe4;

  /* Orange accent — the app's AccentColor, used consistently across the site. */
  --accent: #ff9500;

  /* Serif everywhere, matching the app's system-serif UI (New York on Apple). */
  --sans: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
}

::selection { background: var(--accent); color: #1a0d02; }

/* Body — warm dusk radial that glows toward the icon's orange */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #7a3c06 0%, #2e1604 55%, #1a0d02 100%);
  background-attachment: fixed;
}

/* Topbar — dark warm glass */
.topbar {
  background: linear-gradient(180deg, rgba(42,21,4,0.7), rgba(42,21,4,0.3));
}

/* Hero glow — a low sun */
.hero::before {
  background: radial-gradient(circle, rgba(255,204,0,0.20) 0%, transparent 60%);
}

/* Hero headline — warm cream */
h1.title {
  color: #fff1d6;
}

/* CTA hover — go dark, keep white text legible */
.nav .cta:hover  { background: #2a1504; color: #fff; }
.btn-primary:hover { background: #2a1504; color: #fff; }

/* App icon shadow — warm black drop */
.app-icon { box-shadow: 0 8px 28px rgba(40,16,0,0.6); }

/* Phone underside — sunlight hint replaces blue glow */
.phone {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 30px 60px -10px rgba(0,0,0,0.55),
    0 80px 100px -40px rgba(255,149,0,0.20);
}

/* Feature card icons — the app icon's yellow-to-orange gradient, brown glyphs */
.feat .ico,
.feat .ico.g,
.feat .ico.o,
.feat .ico.r,
.feat .ico.p,
.feat .ico.t {
  background: linear-gradient(180deg, #ffcc00, #ff8d28);
  color: #4a2400;
  box-shadow: 0 6px 16px rgba(255,149,0,0.30), inset 0 1px 0 rgba(255,255,255,0.35);
}

.feat:hover {
  border-color: var(--accent);
  box-shadow: 0 24px 48px -16px rgba(255,149,0,0.22);
}

/* Download band — warm radial with a sunrise glow */
.download {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255,149,0,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #2a1504, #1a0d02);
}
.download .h2 {
  color: #fff1d6;
}
/* Stack the download heading as three lines: prefix / accent / suffix. */
.download .h2 span { color: var(--accent); display: block; }
.download .h2 br { display: none; }

/* Platform tile glyph + hover — orange tile, brown glyph */
.platform .gl {
  background: linear-gradient(180deg, #ffcc00, #ff8d28);
  color: #4a2400;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.platform:hover {
  background: rgba(255,149,0,0.12);
  border-color: var(--accent);
}

/* ============ Orange accent moments ============ */
.phone-cell .caption span { color: var(--accent); }
.alt .eyebrow          { color: var(--blue-2); }
.alt .eyebrow::before  { background: var(--blue-2); }
.alt .h2 span          { color: var(--blue-2); }
.hero-icon.app-icon {
  box-shadow: 0 8px 28px rgba(40,16,0,0.6), 0 24px 80px rgba(255,149,0,0.20);
}
footer ul a:hover { color: var(--accent); }