/* Nube Blur site. One stylesheet, no fonts, no JS. Palette: Teal #3B6B75, Aqua #9AC9CE, Ice #DCF0EE, Coral #EF8A73, Dark #12181A. */
:root{color-scheme:light dark;
--teal:#3B6B75;--aqua:#9AC9CE;--ice:#DCF0EE;--coral:#EF8A73;--dark:#12181A;
--bg:#F7FBFA;--alt:var(--ice);--card:#fff;--text:var(--dark);--muted:#43585D;--link:var(--teal);--line:#BBDAD8;
--btn-bg:var(--teal);--btn-fg:#fff;--head:rgba(247,251,250,.84);--frame:#1B2427;--glow:rgba(154,201,206,.55);
--badge:var(--ice);--badge-hi:#FCE5DF;--focus-badge:var(--teal);
--w:68rem;--gut:16px;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{
--bg:var(--dark);--alt:#172124;--card:#1D292D;--text:#E8F2F1;--muted:#A9BEC1;--link:var(--aqua);--line:#304449;
--btn-bg:var(--aqua);--btn-fg:var(--dark);--head:rgba(18,24,26,.82);--frame:#33474C;--glow:rgba(59,107,117,.5);
--badge:rgba(154,201,206,.14);--badge-hi:rgba(239,138,115,.2);--focus-badge:var(--coral)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--font);padding-bottom:calc(84px + env(safe-area-inset-bottom));overflow-x:hidden}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--link);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px;text-decoration-color:var(--coral)}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.2;margin:0;letter-spacing:-.01em}
p{margin:.6em 0}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:50;background:var(--btn-bg);color:var(--btn-fg);padding:.7rem 1rem;border-radius:10px;font-weight:600}
.skip:focus{top:8px}

/* Header */
.site-header{background:var(--head);border-bottom:1px solid var(--line);z-index:30}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px;padding-block:6px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text);font-weight:700;font-size:1.1rem;text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px;display:block}
.site-nav{order:3;flex:1 0 100%;display:flex;gap:4px;margin-inline:-10px}
.site-nav a,.lang{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:10px;color:var(--text);text-decoration:none;font-weight:500;border-radius:10px}
.site-nav a:hover,.lang:hover{color:var(--link);background:rgba(154,201,206,.22)}
.site-nav a:hover{text-decoration:underline 2px var(--coral);text-underline-offset:.4em}
.lang:hover{border-color:var(--coral)}
.site-nav a[aria-current]{color:var(--link);font-weight:700}
.lang{min-width:44px;gap:.35em;white-space:nowrap;border:1.5px solid var(--line);font-size:.85rem;font-weight:700;letter-spacing:.04em}
.hd-badges{display:none}

/* Store badges: official artwork, only scaled proportionally (--bh = badge height). Clear space of at least 1/4 of the height is kept by gaps and padding; no hover effect on the artwork. */
.badge{display:inline-block;flex:none;line-height:0;border-radius:8px}
.badge img{display:block;height:var(--bh,48px);width:auto}
.badge:focus-visible{outline:3px solid var(--focus-badge);outline-offset:calc(var(--bh,48px) / 4)}
.store-row{--bh:52px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:1.6rem}
.soon{margin:0;color:var(--muted);font-size:.92rem;font-weight:600;line-height:1.3}

/* Bottom bar (phones) */
.dl-bar{--bh:44px;position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:11px 20px;padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));background:var(--head);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line)}
.dl-bar .soon{font-size:.85rem}

/* Hero */
.hero{position:relative;padding:28px 0 56px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-5%;width:min(130vw,56rem);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.hero .wrap{position:relative}
.cloud{display:block;width:180px;margin:0 auto 18px;animation:breathe 5s ease-in-out infinite;will-change:transform}
.cloud img{display:block;width:100%;height:auto}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.025)}}
.hero h1{font-size:clamp(2.1rem,8vw,3.5rem);max-width:16ch;margin-inline:auto;text-wrap:balance}
.lead{font-size:1.12rem;color:var(--muted);max-width:36rem;margin:1rem auto 0}
.hero .store-row{justify-content:center}
.fine{margin:1.4rem 0 0;color:var(--muted);font-size:.92rem}

/* Sections */
.sec{padding:56px 0}
.sec.alt{background:var(--alt)}
.sec h2{font-size:clamp(1.55rem,4.5vw,2.2rem)}
.sec h2::after{content:"";display:block;width:36px;height:4px;margin-top:14px;border-radius:4px;background:var(--coral)}
.sec .sub{color:var(--muted);max-width:40rem;margin:.7rem 0 0}
.grid{list-style:none;padding:0;margin-bottom:0;display:grid;gap:16px;margin-top:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 22px 20px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);border-color:var(--aqua);box-shadow:inset 0 3px 0 var(--coral),0 14px 28px -18px rgba(18,24,26,.5)}
.card h3{font-size:1.08rem;margin-top:.9rem}
.card p{margin:.45rem 0 0;color:var(--muted);font-size:.97rem}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--badge);font-size:1.45rem;line-height:1;transition:background-color .25s ease,transform .25s ease}
.card:hover .ico{background:var(--badge-hi);transform:rotate(-6deg)}
.steps .ico{position:absolute;top:20px;right:20px;width:40px;height:40px;font-size:1.2rem}
.steps{counter-reset:s}
.steps .card::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);font-weight:700;transition:background-color .25s ease,color .25s ease}
.steps .card:hover::before{background:var(--coral);color:var(--dark)}
.steps h3{margin-top:1rem}
.note{margin-top:1.6rem;color:var(--muted);font-size:.95rem;max-width:40rem}

/* Screens strip */
.shots{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:2rem calc(var(--gut) * -1) 0;padding:6px var(--gut) 18px;scroll-padding-inline:var(--gut);justify-content:flex-start;-webkit-overflow-scrolling:touch}
.shot{flex:0 0 auto;width:min(62vw,15rem);margin:0;scroll-snap-align:center}
.phone{border:7px solid var(--frame);border-radius:34px;overflow:hidden;background:var(--frame);box-shadow:0 18px 34px -22px rgba(18,24,26,.7)}
.phone img{display:block;width:100%;height:auto;aspect-ratio:1320/2868}
.shot figcaption{margin-top:.8rem;text-align:center;font-size:.92rem;color:var(--muted)}

/* Privacy teaser */
.ticks{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:10px}
.ticks li{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.95rem}
.ticks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);margin-right:10px}
.more{display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-top:1rem;font-weight:600}
.more span{transition:transform .2s ease}
.more:hover span{transform:translateX(3px)}

/* Closing call to action */
.cta{padding:56px 0;background:var(--teal);color:#fff;text-align:center}
.cta h2{font-size:clamp(1.6rem,5vw,2.3rem);max-width:18ch;margin-inline:auto}
.cta p{color:#fff;margin:.8rem auto 0;max-width:30rem}
.cta .store-row{justify-content:center}
.cta .soon{color:#fff;margin:0}
.cta :focus-visible,.cta .badge:focus-visible{outline-color:#fff}

/* Footer */
.site-footer{padding:36px 0 28px;border-top:1px solid var(--line);background:var(--alt);font-size:.95rem}
.foot-links{display:flex;flex-wrap:wrap;gap:0 6px;margin:0 -10px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px}
.made{font-weight:600;margin:.4rem 0 .2rem}
.legal{color:var(--muted);margin:.4rem 0;font-size:.88rem}

/* Legal / support articles */
.article{max-width:68ch;margin:0 auto;padding:40px var(--gut) 56px}
.article h1{font-size:clamp(1.8rem,5vw,2.4rem)}
.article .meta{color:var(--muted);margin:.5rem 0 0}
.article h2{font-size:1.3rem;margin:2.2rem 0 .3rem;color:var(--link)}
.article h3{font-size:1.06rem;margin:1.6rem 0 .1rem}
.article ul{padding-left:1.3rem;margin:.6rem 0}
.article li{margin:.45rem 0}
.article h2::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px .2em 0;border-radius:50%;background:var(--coral);vertical-align:middle}
.callout{margin:1.6rem 0 0;padding:14px 18px;border-radius:14px;background:var(--alt);border:1px solid var(--line);border-left:5px solid var(--aqua);font-size:.97rem}
.callout p{margin:0}
.article-lang{font-size:.9rem}

/* 404 */
.nf{text-align:center;padding:72px var(--gut)}
.nf .cloud{width:150px}

/* Wider screens */
@media (min-width:720px){
:root{--gut:24px}
body{padding-bottom:0}
.dl-bar{display:none}
.site-header{position:sticky;top:0;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.site-header .wrap{flex-wrap:nowrap;padding-block:10px;gap:12px}
.site-nav{display:none;order:0;flex:1;margin-left:18px}
.lang{order:2}
.hd-badges{--bh:40px;display:flex;order:1}
.hero{padding:56px 0 80px}
.sec{padding:80px 0}
.cta{padding:80px 0}
.shots{margin-inline:0;padding-inline:0;justify-content:safe center}
.site-header .brand{margin-right:auto}
}
@media (min-width:800px){
.site-nav{display:flex}
.site-header .brand{margin-right:0}
}
@media (min-width:900px){
.hero{text-align:left}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px}
.hero .cloud{order:2;width:320px;margin:0 auto}
.hero h1{margin-inline:0}
.lead{margin-inline:0}
.hero .store-row{justify-content:flex-start}
}

/* Motion: gentle scroll reveal where supported, never required */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.reveal{animation:rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 40%}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Phones: the bottom download bar slides in once the hero's own buttons have scrolled away (scroll-linked, no JS). Browsers without scroll timelines simply show it. */
@supports (animation-timeline:scroll()){.dl-bar{animation:dl-in linear both;animation-timeline:scroll(root);animation-range:0 420px}}
@keyframes dl-in{0%,55%{transform:translateY(110%);opacity:0;visibility:hidden}100%{transform:none;opacity:1;visibility:visible}}
/* Wide screens, home pages: the header badge appears (no fade, no motion) once the hero badge has scrolled away, so only one App Store badge is in view at the top. */
@supports (animation-timeline:scroll()){.home .hd-badges{animation:hd-in linear both;animation-timeline:scroll(root);animation-range:0 420px}}
@keyframes hd-in{0%,99%{visibility:hidden}100%{visibility:visible}}