/* Splitlife's website — dark glass, like the iPhone app on iOS 27. System fonts only and
   nothing loaded from anywhere else: no cookies, no trackers, no third-party requests. */
:root {
  --bg: #07100c; --bg2: #0b1612; --glass: rgba(255, 255, 255, .055); --glass-strong: rgba(255, 255, 255, .09);
  --edge: rgba(255, 255, 255, .11); --txt: #eef5f1; --txt2: #b3c2bb; --txt3: #7f9189;
  --acc: #3ddc97; --acc2: #16a974; --acc-soft: rgba(61, 220, 151, .13); --gold: #f4c25b;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  --glass-grad: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 60%);
  --top-bg: rgba(7, 16, 12, .62); --line: rgba(255,255,255,.07);
  --em: linear-gradient(100deg, #7ff0c0, #3ddc97 30%, #1fb87c 55%, #7ff0c0 80%);
  --stat: linear-gradient(180deg, #fff, #9be9c6);
  --frame: linear-gradient(145deg, #3a4440, #101513 40%, #262e2a);
  --phone-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 80px -20px rgba(61,220,151,.25);
  color-scheme: dark;
}
/* light: follows the system, or the toggle (data-theme is set before the page draws) */
:root[data-theme="light"] {
  --bg: #f3f7f5; --bg2: #fff; --glass: rgba(255,255,255,.62); --glass-strong: rgba(255,255,255,.8);
  --edge: rgba(12, 48, 32, .1); --txt: #0b1a13; --txt2: #45574e; --txt3: #6c7d75;
  --acc: #0f9e66; --acc2: #0c8a58; --acc-soft: rgba(15,158,102,.1);
  --shadow: 0 30px 70px -34px rgba(20, 60, 40, .28);
  --glass-grad: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.6) 60%);
  --top-bg: rgba(243, 247, 245, .7); --line: rgba(12,48,32,.08);
  --em: linear-gradient(100deg, #16c07f, #0a8f5c 30%, #06724a 55%, #16c07f 80%);
  --stat: linear-gradient(180deg, #0b1a13, #0f9e66);
  --frame: linear-gradient(145deg, #e4e7e5, #a9b0ac 45%, #d3d8d5);
  --phone-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 40px 80px -34px rgba(20,60,40,.45), 0 0 80px -24px rgba(15,158,102,.3);
  color-scheme: light;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--txt); font: 17px/1.6 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased }
a { color: var(--acc) }
img { max-width: 100%; height: auto; display: block }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px }
.narrow { max-width: 780px }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -.18em }
.i.big { width: 26px; height: 26px; color: var(--acc) }

/* glass */
.glass { background: var(--glass-grad); border: 1px solid var(--edge); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow) }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; background: var(--top-bg); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 16px; height: 64px }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--txt); text-decoration: none; letter-spacing: -.2px }
.brand img { width: 34px; height: 34px; border-radius: 9px }
.top nav { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 15px }
.top nav a { color: var(--txt2); text-decoration: none }
.top nav a:hover { color: var(--txt) }
.lang { border: 1px solid var(--edge); border-radius: 99px; padding: 4px 13px; font-weight: 600; background: var(--glass) }
@media (max-width: 720px) { .top nav .hide-s { display: none } }

/* hero */
.glow { position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none; z-index: -1;
  background: radial-gradient(600px 400px at 78% 22%, rgba(61,220,151,.22), transparent 70%), radial-gradient(500px 380px at 8% 0%, rgba(22,169,116,.18), transparent 70%), radial-gradient(400px 300px at 60% 70%, rgba(244,194,91,.07), transparent 70%) }
main { position: relative; isolation: isolate }
.hero { padding-top: 76px; padding-bottom: 60px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center }
.hero h1 { font-size: clamp(42px, 7vw, 76px); line-height: 1.0; letter-spacing: -2.4px; margin: 0 0 22px; font-weight: 800 }
.hero h1 em { font-style: normal; background: var(--em); background-size: 200% auto; animation: sheen 7s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent }
.hero p.lead { font-size: 20px; color: var(--txt2); margin: 0 0 30px; max-width: 32em }
.hero p.lead b { color: var(--txt) }
.pill { display: inline-flex; font-size: 13.5px; font-weight: 650; color: var(--acc); background: var(--acc-soft); border: 1px solid rgba(61,220,151,.25); border-radius: 99px; padding: 5px 13px; margin-bottom: 20px }
.cta { display: flex; flex-wrap: wrap; gap: 12px }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 99px; font-weight: 650; font-size: 16px; text-decoration: none; border: 1px solid transparent; transition: transform .15s, box-shadow .15s }
.btn:hover { transform: translateY(-1px) }
.btn-primary { background: linear-gradient(180deg, #5ce8ab, var(--acc2)); color: #03140b; box-shadow: 0 12px 34px -12px rgba(61,220,151,.7), inset 0 1px 0 rgba(255,255,255,.4) }
.btn-ghost { border-color: var(--edge); color: var(--txt); background: var(--glass) }
.chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 14px; color: var(--txt2) }
.chips span { display: inline-flex; align-items: center; gap: 6px }
.chips .i { color: var(--acc) }
@media (max-width: 880px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: 44px } }
.hero > *, .feature > * { min-width: 0 }

/* phones */
.phones { display: flex; justify-content: center; position: relative; min-height: 520px }
.phone { --w: 270px; --pad: 9px; --scr: calc(var(--w) - 2 * var(--pad)); position: relative; width: var(--w); border-radius: calc(var(--w) * .17); padding: var(--pad); flex-shrink: 0; background: var(--frame); box-shadow: var(--phone-shadow) }
.phone img { border-radius: calc(var(--w) * .14); width: 100% }
/* the Dynamic Island (screenshots don't include it) */
.phone::after { content: ''; position: absolute; left: 50%; top: calc(var(--pad) + var(--scr) * .027); width: calc(var(--scr) * .313); height: calc(var(--scr) * .092); transform: translateX(-50%); background: #000; border-radius: 99px }
.phone .lt, [data-theme="light"] .phone .dk { display: none }
[data-theme="light"] .phone .lt { display: block }
.phones .phone:nth-child(1) { transform: rotate(-6deg) translate(34px, 30px) }
.phones .phone:nth-child(2) { transform: rotate(5deg) translate(-34px, -10px); z-index: 1 }
@media (max-width: 560px) { .phone { --w: 190px; --pad: 7px } .phones { min-height: 0 } .phones .phone:nth-child(1) { transform: rotate(-6deg) translate(30px, 24px) } .phones .phone:nth-child(2) { transform: rotate(5deg) translate(-30px, -8px) } }
@media (max-width: 400px) { .phones .phone { --w: 160px; --pad: 6px } }

/* sections */
section { padding: 84px 0; position: relative }
.band { background: linear-gradient(180deg, transparent, rgba(61,220,151,.035) 30%, rgba(61,220,151,.035) 70%, transparent) }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--acc); margin-bottom: 14px }
h2 { font-size: clamp(32px, 4.6vw, 50px); letter-spacing: -1.4px; line-height: 1.07; margin: 0 0 16px; font-weight: 800 }
.sub { color: var(--txt2); font-size: 19px; margin: 0 0 30px; max-width: 36em }
.sub.strong { color: var(--txt) }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 580px) { .grid { grid-template-columns: 1fr } }
.card { border-radius: 26px; padding: 24px }
.card h3 { margin: 14px 0 6px; font-size: 19px; letter-spacing: -.2px }
.card p { margin: 0 0 16px; color: var(--txt2); font-size: 15.5px }
.card p:last-child { margin-bottom: 0 }
.note { color: var(--txt3); font-size: 15px; margin-top: 22px }
.note b { color: var(--txt2) }

/* a feature with its screen */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.feature + .feature { margin-top: 110px }
.feature.flip .text { order: 2 }
.feature .phone { margin: 0 auto }
@media (max-width: 880px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 34px } .feature.flip .text { order: 0 } .feature + .feature { margin-top: 80px } }
.ticks { list-style: none; padding: 0; margin: 0 }
.ticks li { display: flex; gap: 10px; margin: 10px 0; color: var(--txt2) }
.ticks .i { color: var(--acc); margin-top: 4px }
.fx { display: inline-flex; flex-direction: column; padding: 18px 24px; border-radius: 22px; margin: 0 0 22px; background: var(--glass); border: 1px solid var(--edge) }
.fx span { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; color: var(--acc); line-height: 1.1 }
.fx small { font-size: 17px; color: var(--txt2) }
.circles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px }
.circle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 99px; background: var(--glass); border: 1px solid var(--edge); font-weight: 600; font-size: 15px }
.circle .i { color: var(--acc) }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 10px }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr) } }
.stat { border-radius: 26px; padding: 26px 22px; background: var(--glass); border: 1px solid var(--edge) }
.stat b { display: block; font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -1.6px; background: var(--stat); -webkit-background-clip: text; background-clip: text; color: transparent }
.stat span { display: block; margin-top: 10px; color: var(--txt2); font-size: 15px }

details { background: var(--glass); border: 1px solid var(--edge); border-radius: 20px; padding: 18px 22px; margin-bottom: 10px }
summary { font-weight: 650; cursor: pointer; font-size: 17px }
details p { color: var(--txt2); margin: 10px 0 0 }

footer { border-top: 1px solid var(--line); padding: 36px 0 54px; color: var(--txt3); font-size: 14.5px }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto }
footer a { color: var(--txt2); text-decoration: none }

/* legal pages */
.doc { max-width: 780px; margin: 0 auto; padding: 48px 20px 76px }
.doc h1 { font-size: 38px; letter-spacing: -1px; margin: 0 0 4px }
.doc h2 { font-size: 22px; letter-spacing: -.3px; margin: 38px 0 8px }
.doc h3 { font-size: 17px; margin: 22px 0 6px }
.doc p, .doc li { color: var(--txt2); font-size: 16px }
.doc .date { color: var(--txt3); font-size: 14px; margin: 0 0 24px }
.doc address { font-style: normal; background: var(--glass); border: 1px solid var(--edge); border-radius: 18px; padding: 16px 20px; color: var(--txt) }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 }
.doc td, .doc th { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--edge); color: var(--txt2) }
.doc th { color: var(--txt); font-weight: 650 }
.toc { background: var(--glass); border: 1px solid var(--edge); border-radius: 18px; padding: 14px 22px; font-size: 15px }
.toc ol { margin: 6px 0; padding-left: 20px }


/* theme switch */
.tgl { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--edge); background: var(--glass); cursor: pointer; display: grid; place-items: center; padding: 0 }
.tgl::before { content: ''; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--txt); background: linear-gradient(90deg, var(--txt) 50%, transparent 50%); transition: transform .5s cubic-bezier(.2,.7,.2,1) }
[data-theme="light"] .tgl::before { transform: rotate(180deg) }

/* motion — calm, Apple-like: things rise in as you scroll, the phones turn towards you */
@keyframes up { from { opacity: 0; transform: translateY(34px); filter: blur(10px) } }
@keyframes sheen { to { background-position: -200% 0 } }
@keyframes drift { to { transform: translate3d(-5%, 4%, 0) scale(1.1) } }
@keyframes float { 50% { translate: 0 -12px } }
@keyframes par { to { translate: 0 -90px; opacity: .35 } }
@keyframes turn { from { opacity: .2; transform: perspective(1400px) rotateX(22deg) rotateY(var(--ry, -16deg)) translateY(90px) scale(.86) } }
.glow { animation: drift 18s ease-in-out infinite alternate }
.hero > div:first-child > * { animation: up .9s cubic-bezier(.2,.7,.2,1) both }
.hero > div:first-child > :nth-child(2) { animation-delay: .08s } .hero > div:first-child > :nth-child(3) { animation-delay: .16s }
.hero > div:first-child > :nth-child(4) { animation-delay: .24s } .hero > div:first-child > :nth-child(5) { animation-delay: .32s }
.hero .phones { animation: up 1.2s .3s cubic-bezier(.2,.7,.2,1) both }
.hero .phones .phone { animation: float 7s ease-in-out infinite } .hero .phones .phone:nth-child(2) { animation-delay: -3.5s }
.rv { opacity: 0; transform: translateY(44px) scale(.98); filter: blur(6px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s }
.rv.in { opacity: 1; transform: none; filter: none; transition-delay: var(--d, 0s) }
.card, .stat { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s, border-color .4s, box-shadow .4s }
.card.in:hover, .stat.in:hover { transform: translateY(-4px); border-color: rgba(61,220,151,.4); box-shadow: 0 24px 60px -30px rgba(61,220,151,.45) }
@supports (animation-timeline: view()) {
  .hero .phones { animation: up 1.2s .3s cubic-bezier(.2,.7,.2,1) both, par linear both; animation-timeline: auto, scroll(); animation-range: normal, 0 700px }
  .feature .phone { animation: turn linear both; animation-timeline: view(); animation-range: entry 0% cover 45% }
  .feature.flip .phone { --ry: 16deg }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } .rv { opacity: 1; transform: none; filter: none } }