/* Sahar Creative Studio landing page.
   Design language shared with Oako: Fredoka display + Nunito text, pill buttons,
   eyebrow labels, soft cards, reveal-on-scroll.

   Palette "Iris & Porcelain": a warm porcelain ground and an iris accent. The
   studio frame stays cool and neutral so each app can keep its own warm colour
   (TaxSuisse gold, Oako terracotta) inside its own card.
   Load css/fonts.css before this file. */

:root {
  --ground: #F5F2EF;
  --surface: #FDFBF9;
  --ink: #241F35;
  --muted: #6E687C;
  --hairline: rgba(36, 31, 53, 0.13);
  --accent: #5B4CA8;
  --accent-deep: #46388C;
  --on-accent: #FFFFFF;
  --ember: #C8763F;
  --band: #1E1930;
  --band-surface: #29223F;
  --band-ink: #EDE8F4;
  --band-muted: #A79FBC;
  --band-hairline: rgba(237, 232, 244, 0.16);
  --band-accent: #B3A2EE;
  --shadow: 0 24px 48px -24px rgba(36, 31, 53, 0.42);
  --aura-a: rgba(122, 99, 220, 0.34);
  --aura-b: rgba(200, 118, 63, 0.20);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #191527;
    --surface: #221C33;
    --ink: #EDE8F4;
    --muted: #A79FBC;
    --hairline: rgba(237, 232, 244, 0.16);
    --accent: #A392EE;
    --accent-deep: #BCADF6;
    --on-accent: #1C1730;
    --band: #141021;
    --band-surface: #1F1932;
    --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
    --aura-a: rgba(140, 118, 240, 0.30);
    --aura-b: rgba(200, 118, 63, 0.16);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 17px;
  background: var(--accent); color: var(--on-accent);
  border-radius: 999px; padding: 14px 28px;
  text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(70, 56, 140, 0.75);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(70, 56, 140, 0.85); }
.btn.small { font-size: 15px; padding: 9px 20px; }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-deep); box-shadow: none; }
.btn svg { flex: none; }

/* Official Apple badge: black on light backgrounds, white on dark ones. */
.appstore { display: inline-block; transition: transform 0.2s ease; }
.appstore:hover { transform: translateY(-2px); }
.appstore img { display: block; height: 52px; width: auto; }
.appstore .badge-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .appstore .badge-light { display: none; }
  .appstore .badge-dark { display: block; }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap {
  display: flex; align-items: center; gap: 28px;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 19px;
  color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.brand .light { font-weight: 400; color: var(--muted); }
.nav a.link {
  color: var(--muted); text-decoration: none; font-size: 15.5px; font-weight: 600;
}
.nav a.link:hover { color: var(--ink); }
@media (max-width: 720px) { .nav a.link { display: none; } }
@media (max-width: 420px) { .brand .light { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; text-align: center; }
.hero .wrap { position: relative; padding-top: 96px; padding-bottom: 88px; }
.hero .aura {
  position: absolute; inset: -30% 0 auto; height: 620px;
  background:
    radial-gradient(46% 52% at 32% 40%, var(--aura-a), transparent 68%),
    radial-gradient(40% 48% at 70% 52%, var(--aura-b), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.hero h1 { font-size: clamp(38px, 5.8vw, 62px); margin-top: 18px; max-width: 15ch; margin-inline: auto; }
.hero .dek {
  margin: 20px auto 0; font-size: 19px; color: var(--muted); max-width: 56ch;
}
.hero .cta-row {
  margin-top: 32px; display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap;
}

/* app chips under the hero headline */
.chips {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  list-style: none; margin: 56px 0 0; padding: 0;
}
.chips a {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 14px 22px 14px 16px;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 18px 32px -26px rgba(36, 31, 53, 0.55);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.chips a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--app) 55%, transparent); }
.chips img { width: 48px; height: 48px; border-radius: 13px; flex: none; }
.chips .name {
  display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px;
  line-height: 1.25;
}
.chips .what { display: block; font-size: 13.5px; color: var(--muted); }
.chips .txt { text-align: left; }

@media (max-width: 640px) {
  .hero .wrap { padding-top: 64px; padding-bottom: 56px; }
  .chips { margin-top: 40px; }
}

/* ---------- sections ---------- */
section { padding: 88px 0; }
@media (max-width: 640px) { section { padding: 64px 0; } }
.section-head { max-width: 620px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 38px); margin-top: 10px; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 17.5px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- app cards ---------- */
.apps { display: flex; flex-direction: column; gap: 28px; }

.app {
  --app: var(--accent);
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 32px;
  padding: 52px 56px;
  display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: center;
}
.app::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 92% 8%, color-mix(in srgb, var(--app) 16%, transparent), transparent 62%);
  pointer-events: none;
}
.app > * { position: relative; }
.app.flip .shot { order: -1; }

.app .status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  color: color-mix(in srgb, var(--app) 78%, var(--ink));
  background: color-mix(in srgb, var(--app) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--app) 30%, transparent);
  border-radius: 999px; padding: 5px 13px;
}
.app .status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--app);
}
.app .head { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.app .head img { width: 60px; height: 60px; border-radius: 15px; flex: none; box-shadow: var(--shadow); }
.app h3 { font-size: clamp(27px, 3.2vw, 34px); }
.app .tagline { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 17px; color: color-mix(in srgb, var(--app) 72%, var(--ink)); }
.app .body { margin-top: 16px; color: var(--muted); font-size: 17px; max-width: 46ch; }
.app ul { list-style: none; margin: 22px 0 0; padding: 0; }
.app ul li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--hairline);
  font-size: 15.5px; color: var(--muted);
}
.app ul li svg { color: var(--app); flex: none; margin-top: 4px; }
.app .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* The deeper shade of each app's colour keeps white button labels readable. */
.app .btn {
  background: var(--app-deep, var(--app)); color: #FFFFFF;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--app-deep, var(--app)) 80%, transparent);
}
.app .btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--hairline); }
.app .btn.ghost:hover { border-color: var(--app); color: color-mix(in srgb, var(--app) 80%, var(--ink)); }

.app .shot { display: flex; justify-content: center; }
/* Oako screenshots are bare screens and take the rounding here.
   TaxSuisse screenshots already carry a device frame: no radius, no shadow. */
.app .shot img { width: min(300px, 66vw); }
.app .shot img.screen { border-radius: 38px; box-shadow: var(--shadow); }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; gap: 34px; padding: 40px 28px; border-radius: 28px; }
  .app.flip .shot { order: 0; }
}

/* ---------- studio band ---------- */
.band {
  background: var(--band); color: var(--band-ink);
  padding: 96px 0;
}
.band .eyebrow { color: var(--band-accent); }
.band h2 { font-size: clamp(28px, 3.6vw, 38px); margin-top: 10px; }
.band .lead { margin-top: 16px; color: var(--band-muted); font-size: 17.5px; max-width: 60ch; }
.band-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 44px;
}
.band-grid article {
  background: var(--band-surface); border: 1px solid var(--band-hairline);
  border-radius: 20px; padding: 24px;
}
.band-grid svg { color: var(--band-accent); }
.band-grid h3 { font-size: 17.5px; margin-top: 12px; }
.band-grid p { color: var(--band-muted); font-size: 14.5px; margin-top: 6px; }
@media (max-width: 800px) { .band-grid { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact { text-align: center; }
.contact .mark {
  width: 76px; height: 76px; border-radius: 20px;
  box-shadow: var(--shadow); margin-bottom: 26px;
}
.contact h2 { font-size: clamp(30px, 4vw, 42px); }
.contact p { margin: 16px auto 0; color: var(--muted); max-width: 48ch; }
.contact .btn { margin-top: 30px; }
.contact .note { display: block; margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--hairline);
  padding: 44px 0 52px;
  font-size: 14px; color: var(--muted);
}
footer .cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  padding-bottom: 32px;
}
footer h4 {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); margin: 0 0 12px;
}
footer .cols a { display: block; padding: 3px 0; }
footer a { color: var(--muted); text-decoration: none; text-underline-offset: 3px; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .base {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); padding-top: 24px;
  font-size: 13.5px;
}
@media (max-width: 640px) { footer .cols { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- reveal animations ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .chips a, .appstore { transition: none; }
}