/* Umbrella landing page: fluid layouts and local system fonts. */
:root { --bg:#070b17; --bg-footer:#050812; --surface:#101726; --surface-deep:#0b1120; --surface-alt:#101726; --text-mut:#abb6cc; --text-faint:#97a5be; --section-y:clamp(60px,8vw,110px); }
body { background:var(--bg); }
.hero { background:radial-gradient(ellipse at 85% 25%,#20203966,transparent 65%); }
.hero__layout { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,4vw,60px); padding-block:clamp(40px,6vw,80px); }
.hero__inner { flex:1.1 1 430px; min-width:0; align-items:flex-start; text-align:left; padding:0; gap:24px; }
.hero__title { font-family:var(--font-sans); font-size:clamp(34px,4.8vw,62px); line-height:1.2; letter-spacing:-.055em; color:#f4f6ff; -webkit-text-fill-color:currentColor; background:none; }
/* Gradient headline — the რიტმი site's technique (ritmi/css/landing.css), the umbrella's
   colours. Each line is painted on its own, so the gradient runs across the
   TEXT, not across the column; the sliver of bottom padding keeps descenders from being
   clipped by background-clip. Teal -> cyan -> violet is რითმოსი into რიტმი. Every stop is
   a token from main.css and clears 3:1 on the page colour (large text). The solid colour
   on .hero__title above stays as the fallback wherever background-clip:text is missing. */
/* Inline + box-decoration-break:clone, where the რიტმი site uses display:block. Its lines
   are short and never wrap; „გაიარე შენი რიტმით." wraps on desktop, and a block gradient
   is stretched over the whole block — so the wrapped word sat at the far left and only
   ever got the green end. With clone, EVERY ROW is painted its own full sweep, and it
   adapts unaided: one sweep on a phone where the line fits, two where it wraps. */
.hero__line { display:inline; padding-bottom:.06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero__line { background:linear-gradient(105deg,var(--teal-pale) 0%,var(--cyan-soft) 50%,var(--violet-soft) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
  .hero__line--accent { background-image:linear-gradient(100deg,var(--teal) 0%,var(--cyan) 48%,var(--violet-lit) 100%); }
}
@media (forced-colors:active) { .hero__line { background:none; color:CanvasText; -webkit-text-fill-color:CanvasText; } }
.hero__lede { font-size:clamp(15px,1.6vw,17px); line-height:1.85; max-width:490px; }
.pill { background:rgba(255,255,255,.035); color:#becad9; border-color:#ffffff1c; padding:8px 13px; font-size:12px; font-weight:500; }
.status-dot { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#72d6b7; box-shadow:0 0 12px #72d6b766; }
.hero__actions { justify-content:flex-start; gap:16px; }
.btn { border-radius:12px; box-shadow:none; font-size:14px; }
/* The primary button wears the infinity mark's gradient (assets/logo/logo-umbrella), sampled
   from the art: #35c79f left ring -> #2daae2 centre gem -> #7f4cd6 right ring. The hue order
   is the mark's; the violet END is lifted to a lighter tint of the same hue, because no one
   text colour survives the true values (white is 1.9:1 on the green, dark is 3.3:1 on the
   deep violet). As built, dark text holds >= 7:1 at every point of the gradient, rest and hover. */
.btn--primary { background:linear-gradient(100deg,#35c79f 0%,#2db4e4 50%,#a78bfa 100%); color:#04101c; box-shadow:0 8px 26px #2db4e41f; }
.btn--primary:hover { color:#04101c; background:linear-gradient(100deg,#4fd9b3 0%,#4cc6ee 50%,#b9a2fc 100%); box-shadow:0 10px 32px #35c79f33,0 10px 32px #a78bfa2e; }
.hero__more { min-height:48px; display:inline-flex; align-items:center; gap:14px; color:#c6cfe0; font-size:13px; }
.hero__caption { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; color:var(--text-faint); font-size:11px; }
.hero__caption span+span::before { content:'·'; margin-right:14px; }
.hero__visual { flex:1 1 360px; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; padding:24px 0; }
.hero__visual::before { content:''; position:absolute; inset:10%; border:1px solid #8bdccd14; border-radius:50%; pointer-events:none; }
.hero__orbit-label { color:#9ca9be; font-size:11px; letter-spacing:.08em; }
.hero__art { display:block; width:100%; max-width:460px; height:auto; aspect-ratio:1; object-fit:contain; margin-block:-10px -30px; }
.hero__destinations { width:100%; max-width:460px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; z-index:1; }
.hero__destinations a { min-height:80px; padding:14px clamp(12px,2vw,22px); border:1px solid #84d9c92a; background:#0b1220e8; border-radius:14px; display:flex; flex-direction:column; gap:8px; }
.hero__destinations a:last-child { border-color:#b4a1fb3d; }
/* App icon beside the label: the card becomes a row, the two text lines keep their column. */
/* Hero app tiles. Step chip + round arrow along the top, the app icon centred on a glow in
   ITS OWN product's colour, the name beneath. Why this shape: the first version pinned a small
   icon top-left and left ~60% of the card empty, and both cards were the same grey box — only
   the text colour told the apps apart. Centring fills the card; the tint and glow give each
   app its identity before a word is read. 22.5% is the iOS icon corner, so they read as apps. */
.hero__destinations .dest { --c:45,212,191; --soft:#9ee6d9; position:relative; isolation:isolate; overflow:hidden; min-height:0; padding:12px 12px 18px; gap:0; align-items:center; text-align:center; border-radius:20px; border-color:rgba(var(--c),.26); background:linear-gradient(165deg,rgba(var(--c),.13),rgba(var(--bg-rgb),.9) 62%); transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .35s ease; }
.hero__destinations .dest--ritmi { --c:139,120,255; --soft:#c9bdfc; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .hero__destinations .dest { background:linear-gradient(165deg,rgba(var(--c),.15),rgba(var(--bg-rgb),.62) 62%); } }
.dest__top { align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dest__step { padding:5px 10px; border-radius:999px; background:rgba(var(--c),.12); border:1px solid rgba(var(--c),.22); color:var(--soft); font-size:11px; line-height:1.2; white-space:nowrap; }
.dest__go { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(var(--c),.3); color:var(--soft); font-size:14px; line-height:1; transition:background-color .35s ease,color .35s ease,transform .35s cubic-bezier(.2,.7,.2,1); }
.dest__tile { position:relative; display:grid; place-items:center; margin:clamp(12px,1.6vw,20px) 0 clamp(12px,1.4vw,16px); }
/* the glow: a blurred disc of the product colour behind the icon, not a box-shadow — a shadow
   follows the square; this blooms round, like light coming off the screen */
.dest__tile::before { content:''; position:absolute; z-index:-1; width:190%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(var(--c),.62) 0%,rgba(var(--c),.2) 40%,transparent 68%); opacity:.85; transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1); }
.dest__icon { display:block; width:clamp(64px,5.8vw,88px); height:clamp(64px,5.8vw,88px); object-fit:cover; border-radius:22.5%; box-shadow:0 0 0 1px #ffffff2b,0 14px 30px #000b; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.hero__destinations .dest__name { display:block; color:var(--soft); font-size:clamp(17px,1.5vw,20px); font-weight:700; line-height:1.25; letter-spacing:-.01em; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .hero__destinations .dest:hover { transform:translateY(-4px); border-color:rgba(var(--c),.6); box-shadow:0 18px 40px rgba(var(--c),.14); }
  .dest:hover .dest__tile::before { opacity:1; transform:scale(1.12); }
  .dest:hover .dest__icon { transform:scale(1.05); }
  .dest:hover .dest__go { background:rgba(var(--c),.9); color:#04101c; transform:translate(2px,-2px); }
}
.hero__destinations .dest:focus-visible { border-color:rgba(var(--c),.8); }
/* two tiles side by side get ~137px each at 320px: the chip needs the arrow's room */
@media (max-width:380px) { .dest__go { display:none; } .dest__top { justify-content:center; } }
/* The orbit ring used to run through these cards and show as a stray line between them. */
.hero__visual::before { -webkit-mask-image:linear-gradient(#000 52%,transparent 74%); mask-image:linear-gradient(#000 52%,transparent 74%); }
/* Over the hero art these are the one place frosted glass earns its keep. Opaque fallback first. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .hero__destinations a { background:#0b1220a8; -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); } }
.hero__destinations a { transition:border-color .3s ease,transform .3s ease; }
.hero__destinations a:hover { transform:translateY(-3px); border-color:#84d9c970; }
.hero__destinations a:last-child:hover { border-color:#b4a1fb80; }
.hero__destination-step { color:#96a9be; font-size:11px; }
.hero__destinations strong { color:#9ee6d9; display:flex; justify-content:space-between; font-size:17px; }
.hero__destinations a:last-child strong { color:#c3b4f5; }
.marquee { background:#0d1320; padding-block:16px; }
/* 350s, not 70s: each run is now five times as long, so this keeps the same ~11.6px/s.
   will-change keeps the strip on its own compositor layer, so it cannot stutter when the
   page repaints under it. min-width is a guard for screens wider than the run. */
.marquee__track { animation-duration:350s; will-change:transform; }
.marquee__run { flex:none; min-width:100vw; justify-content:space-around; }
.marquee__item { font-size:12px; color:#96a7bd; }
.marquee__dot { color:#446064; font-size:7px; }
.h2,.contact__title { font-family:var(--font-sans); font-size:clamp(26px,3.5vw,40px); line-height:1.3; letter-spacing:-.035em; }
.eyebrow { font-family:var(--font-sans); font-size:11px; letter-spacing:.08em; }
.section-head { gap:16px; }
.apps__head { margin-bottom:32px; }
.product { border-radius:24px; box-shadow:none; }
.product--rythmos { background:linear-gradient(145deg,#142a2c,#101726 65%); border-color:#8ae4cd26; }
.product--ritmi { background:linear-gradient(145deg,#25233d,#101726 65%); border-color:#c9b4fa30; }
.product__body { padding:clamp(22px,3.3vw,40px); gap:22px; }
.product__stage { font-size:11px; letter-spacing:.05em; color:#a8bbcc; padding-bottom:16px; border-bottom:1px solid #c6d9ff16; }
.product__name { font-family:var(--font-sans); font-size:30px; }
.product__copy { line-height:1.85; font-size:14px; }
.product__icon { width:64px; height:64px; }
.product__glow { opacity:.35; }
.product__when { border-top:1px solid #c6d9ff16; padding-top:20px; font-size:13px; }
.product__actions { margin-top:auto; }
.product .btn { flex:1 1 190px; }
.tag { border-radius:8px; font-size:11px; }
.dims li { background:#070b1726; border-color:#bce5d914; }
.band { background:#0b111c; border-block:1px solid #c6d9ff0d; }
.project__lede { line-height:1.9; }
.step { background:transparent; border-color:#c6d9ff1c; gap:16px; padding:28px; }
.step__title,.link-note__title,.price__name,.stream__title,.post__title { font-family:var(--font-sans); line-height:1.5; }
.step__copy { font-size:14px; line-height:1.8; }
.link-note { background:linear-gradient(115deg,#112428,#16172b); border-color:#bce5d91a; }
.price { border-radius:20px; }
.price__value { font-family:var(--font-sans); font-size:13px; }
.price__copy { line-height:1.8; }
.post__cover { height:190px; }
.post__art { width:110px!important; height:110px!important; }
.post__body { padding:24px; gap:12px; }
.post__date { font-family:var(--font-sans); font-size:11px; }
.post__excerpt { line-height:1.8; }
.contact__form { box-shadow:0 20px 70px #0002; border-color:#c6d9ff20; }
.contact__copy { line-height:1.9; }
.footer-col__link { font-size:13px; }
@media(prefers-reduced-motion:reduce) { .marquee__track { animation:none; } }
/* WCAG 2.2.2: motion that runs longer than 5s needs a way to stop it. Reduced-motion
   visitors never see it move; for everyone else, resting the pointer on it holds it still. */
.marquee:hover .marquee__track { animation-play-state:paused; }
.post__excerpt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Native details keeps the compact menu usable even without JavaScript. */
.mobile-menu { display:none; margin-left:auto; position:relative; color:#e2e6fa; }
.mobile-menu summary { min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 14px; border:1px solid #8ca0ff40; border-radius:12px; background:#101632; font:600 13px var(--font-sans); cursor:pointer; list-style:none; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.menu-icon { width:17px; display:flex; flex-direction:column; gap:4px; }
.menu-icon i { display:block; height:1.5px; border-radius:2px; background:currentColor; transition:transform .2s,opacity .2s; }
.mobile-menu[open] .menu-icon i:first-child { transform:translateY(5.5px) rotate(45deg); }
.mobile-menu[open] .menu-icon i:nth-child(2) { opacity:0; }
.mobile-menu[open] .menu-icon i:last-child { transform:translateY(-5.5px) rotate(-45deg); }
.mobile-menu__panel { position:absolute; right:0; top:calc(100% + 10px); width:min(360px,calc(100vw - 32px)); padding:8px; border:1px solid #8ca0ff40; border-radius:16px; background:#0c112b; box-shadow:0 20px 50px #0008; max-height:calc(100dvh - 90px); overflow-y:auto; }
.mobile-menu__panel a { display:flex; align-items:center; min-height:48px; padding:12px 16px; border-radius:10px; color:#d7def5; font-size:14px; line-height:1.5; }
.mobile-menu__panel a:hover { background:#26305a; color:#fff; }
.mobile-menu__panel .mobile-menu__primary { background:linear-gradient(90deg,#2563eb,#7c3aed); color:#fff; margin-top:4px; }
@media (max-width:700px) {
  .mobile-menu { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  .menu-icon i { transition:none; }
}

@media (max-width:700px) { .site-nav { display:none; } }
/* Desktop: brand left, navigation right. An auto margin on the first link, not
   justify-content:flex-end — the rail can scroll sideways (main.css), and flex-end would
   push overflowing links off the LEFT edge where a scroll container cannot reach them. */
.site-nav__link:first-child { margin-left:auto; }

/* Delivered art — ASSET-MANIFEST.md §3 components, §4 images (2026-09-21).
   Everything here is decoration under or beside existing content: no rule below
   moves text, and every image has a dark surface behind it if it fails to load. */
/* One source of truth for the three surfaces the artwork is blended into. These are
   --bg, --surface and the band colour as RGB triplets, because a scrim needs the same
   colour at many alphas. Triplets, not color-mix(): a browser that drops a color-mix()
   declaration would drop the scrim, and the hero's contrast with it. KEEP IN STEP with
   the hex tokens on line 2 — retune one without the other and every scrim shows a seam. */
:root { --bg-rgb:7,11,23; --surface-rgb:16,23,38; --band-rgb:11,17,28; }
.hero { isolation:isolate; }
.hero__bg { height:100%; opacity:.88; object-position:50% 0; z-index:-2; }
/* Left-weighted: the copy sits on the left, the streams stay lit on the right. */
.hero__scrim { height:100%; z-index:-1; background:linear-gradient(90deg,rgba(var(--bg-rgb),0.72) 0%,rgba(var(--bg-rgb),0.5) 42%,rgba(var(--bg-rgb),0.2) 100%),linear-gradient(180deg,rgba(var(--bg-rgb),0.2) 0%,transparent 30%,rgb(var(--bg-rgb)) 98%); }
.marquee { z-index:1; }
/* Contrast, measured not guessed: with the backdrop at .88 the worst pixel under the
   lede was 4.45:1, the caption 4.36:1, the orbit label 2.87:1 (AA needs 4.5:1).
   Lighthouse cannot see this — it skips text over images. The fix is local, so the
   streams keep their light: a pool of page colour behind the copy column only, a
   backing on the one label that sits out in the open art, and two lifted greys. */
.hero__inner { position:relative; }
/* `closest-side` is the point: the fade reaches zero exactly at the box's own edges on all
   four sides, so the box can never show as a line. (It did once — a gradient sized in %
   was still ~40% opaque where the box ended, and the left edge read as a frame.) */
.hero__inner::before { content:''; position:absolute; z-index:-1; inset:-20% -18% -20% -42%; pointer-events:none; background:radial-gradient(ellipse closest-side at 50% 50%,rgba(var(--bg-rgb),.92) 0%,rgba(var(--bg-rgb),.84) 40%,rgba(var(--bg-rgb),.55) 68%,rgba(var(--bg-rgb),.2) 88%,transparent 100%); }
.hero__caption { color:#b4bfd3; }
.hero__orbit-label { color:#d6deec; padding:5px 12px; border-radius:999px; background:rgba(var(--bg-rgb),0.88); }

.apps__top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(12px,3vw,40px); margin-bottom:32px; }
.apps__top .apps__head { flex:1 1 340px; min-width:0; margin-bottom:0; }
.apps__lockup { flex:0 1 330px; min-width:0; width:100%; max-width:330px; height:auto; margin:-24px auto -18px; }
.product__media { position:relative; flex:none; height:clamp(150px,19vw,215px); }
.product__media-img { display:block; width:100%; height:100%; object-fit:cover; opacity:.9; -webkit-mask-image:linear-gradient(#000 52%,transparent); mask-image:linear-gradient(#000 52%,transparent); }
/* The desk is rendered in Rythmos cyan; on RITMI's card it turns to RITMI's violet. */
.product--ritmi .product__media-img { filter:hue-rotate(48deg) saturate(.9); object-position:50% 38%; }
.product__float { position:absolute; z-index:1; right:clamp(18px,3.2vw,38px); bottom:-30px; --w:clamp(62px,7.6vw,86px); width:var(--w); height:calc(var(--w) * 4 / 3); transform:rotate(7deg); filter:drop-shadow(0 14px 22px #000a); }
.product__float--badge { --w:clamp(72px,8.6vw,98px); height:var(--w); transform:rotate(-6deg); bottom:-36px; }
.product__stage { padding-right:clamp(84px,10vw,112px); }
/* Four chips: two rows of two, never three and an orphan. */
.dims { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dims__icon { width:30px; height:30px; }
.dims--violet li { border-color:#c9b4fa1f; }

/* Store buttons. Tinted glass in the card's own colour, NOT a second filled gradient:
   each card already has one filled primary button, and two more would leave three
   things shouting for the same tap. They read as a pair, under the actions, one step
   quieter. State is the markup's: an <a> with an href is live, without one it is „მალე". */
.stores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:6px; padding-top:20px; border-top:1px solid #c6d9ff16; }
.store { min-height:58px; min-width:0; padding:9px clamp(10px,1.5vw,16px); display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid; border-radius:14px; color:#fff; text-align:left; transition:transform .3s ease,border-color .3s ease,background-color .3s ease; }
.store:hover { color:#fff; }
.store__glyph { flex:none; }
.store__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.store small { font-size:11px; font-weight:500; line-height:1.2; }
.store strong { font-size:clamp(13.5px,1.5vw,15.5px); font-weight:700; line-height:1.2; white-space:nowrap; }
.product--rythmos .store { background:linear-gradient(135deg,rgba(20,184,166,.17),rgba(139,92,246,.13)); border-color:rgba(45,212,191,.34); }
.product--rythmos .store small { color:#7fe3d4; }
.product--ritmi .store { background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(124,58,237,.18)); border-color:rgba(168,85,247,.38); }
.product--ritmi .store small { color:#cdbffb; }
.store[href]:hover { transform:translateY(-2px); }
.product--rythmos .store[href]:hover { border-color:rgba(45,212,191,.75); }
.product--ritmi .store[href]:hover { border-color:rgba(192,132,252,.8); }
.store:not([href]) { cursor:default; }
.stores__note { margin:0; color:var(--text-faint); font-size:12.5px; line-height:1.5; }
/* Below ~360px two buttons side by side leave 116px each and „Google Play“ overruns:
   stack them rather than shrink the type. */
@media (max-width:360px) { .stores { grid-template-columns:1fr; } }
/* „ღირებულებები“ is one unbreakable 12-letter word: at phone width the chip gives it the room instead of the icon. */
@media (max-width:480px) { .dims li { padding:8px; gap:6px; font-size:12.5px; } .dims__icon { width:22px; height:22px; } }

.ribbon { display:block; width:min(86%,600px); height:auto; margin:clamp(30px,5vw,58px) auto calc(var(--section-y) * -.55); opacity:.85; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent),linear-gradient(transparent,#000 26%,#000 74%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent),linear-gradient(transparent,#000 26%,#000 74%,transparent); mask-composite:intersect; }

.band--nebula { background-color:rgb(var(--band-rgb)); background-image:linear-gradient(rgba(var(--band-rgb),0.72),rgba(var(--band-rgb),0.72)),url(../assets/images/bg-nebula-neutral.jpg); background-image:linear-gradient(rgba(var(--band-rgb),0.72),rgba(var(--band-rgb),0.72)),image-set(url(../assets/images/bg-nebula-neutral.webp) type("image/webp"),url(../assets/images/bg-nebula-neutral.jpg) type("image/jpeg")); background-size:cover; background-position:center; }
.band--nebula-flip { background-position:center bottom; }

/* Step numbers ride the lit orb cut from §3 #7 `comp-step-indicator`. One render,
   turned to each step's own colour. */
.step .step__n { width:54px; height:54px; margin:-6px 0 -2px -8px; border-radius:50%; background:url(../assets/components/comp-step-orb.png) center/contain no-repeat; background-image:image-set(url(../assets/components/comp-step-orb.webp) type("image/webp"),url(../assets/components/comp-step-orb.png) type("image/png")); color:#fff; font-size:16px; text-shadow:0 0 8px #001a2ecc,0 1px 2px #000; }
.step .step__n--teal { filter:hue-rotate(-32deg); }
.step .step__n--violet { filter:hue-rotate(72deg); }

/* h3/p default margins were stacking on top of the cards' own flex gap. */
.step__title,.step__copy,.link-note__title,.link-note__copy,.price__name,.price__copy { margin:0; }
.link-note__pull { position:relative; margin:4px 0 2px; padding-left:46px; color:#e8edfb; font-size:clamp(16px,2vw,19px); line-height:1.65; text-wrap:pretty; }
.link-note__pull::before { content:''; position:absolute; left:0; top:0; width:34px; height:38px; background:url(../assets/components/comp-quote-open.png) center/contain no-repeat; background-image:image-set(url(../assets/components/comp-quote-open.webp) type("image/webp"),url(../assets/components/comp-quote-open.png) type("image/png")); }
.link-note__pull::after { content:''; display:inline-block; width:17px; height:20px; margin-left:8px; vertical-align:-2px; opacity:.85; background:url(../assets/components/comp-quote-close.png) center/contain no-repeat; background-image:image-set(url(../assets/components/comp-quote-close.webp) type("image/webp"),url(../assets/components/comp-quote-close.png) type("image/png")); }
.link-note__art { flex:1 1 300px; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:16px; border:1px solid #c6d9ff1c; }

.price { position:relative; overflow:hidden; }
.price > :not(.price__art) { position:relative; z-index:1; }
.price__art { position:absolute; z-index:0; top:-38px; right:-38px; --w:clamp(120px,15vw,168px); width:var(--w); height:var(--w); opacity:.5; pointer-events:none; -webkit-mask-image:radial-gradient(circle at 58% 42%,#000 38%,transparent 72%); mask-image:radial-gradient(circle at 58% 42%,#000 38%,transparent 72%); }
.price__art--scene { top:-44px; right:-44px; --w:clamp(140px,17vw,190px); opacity:.75; -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 66%); mask-image:radial-gradient(circle,#000 30%,transparent 66%); }
.price__id { padding-right:clamp(70px,9vw,110px); }
.price__mark { width:48px; height:48px; }

/* Blog stream states — §3 #8 loading, #3 empty, #9 error, #10 offline. */
.stream__state { grid-column:1/-1; display:flex; align-items:center; gap:clamp(12px,2.4vw,20px); }
.stream__state-art { width:clamp(56px,8vw,76px); height:auto; flex:none; object-fit:contain; }
.stream__state-art--spin { width:34px; animation:ringTurn 1.8s linear infinite; }
@keyframes ringTurn { to { transform:rotate(360deg); } }

.contact__form { background-color:rgb(var(--surface-rgb)); background-image:linear-gradient(rgba(var(--surface-rgb),0.9),rgba(var(--surface-rgb),0.96)),url(../assets/images/bg-orbits-portrait.jpg); background-image:linear-gradient(rgba(var(--surface-rgb),0.9),rgba(var(--surface-rgb),0.96)),image-set(url(../assets/images/bg-orbits-portrait.webp) type("image/webp"),url(../assets/images/bg-orbits-portrait.jpg) type("image/jpeg")); background-size:cover; background-position:center; }

/* §4 #13 `bg-email-banner` — an email banner, so it opens the section where you
   write to us. Black taken out as alpha so it sits on the page colour. */
.contact { position:relative; }
.contact::before { content:''; position:absolute; left:50%; top:0; width:min(100vw,1100px); height:84px; transform:translate(-50%,-50%); pointer-events:none; background:url(../assets/images/bg-email-banner-line.png) center/100% auto no-repeat; background-image:image-set(url(../assets/images/bg-email-banner-line.webp) type("image/webp"),url(../assets/images/bg-email-banner-line.png) type("image/png")); }
.footer-brand__mark--seal { width:52px; height:52px; }
@media print { .hero__bg,.hero__scrim,.ribbon,.price__art,.product__media,.apps__lockup,.contact::before { display:none; } }

/* Motion. Two rules: content is fully visible without any of this, and nothing
   here runs for a visitor who asked for reduced motion. transform/opacity only. */
.product__media-img { transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.product__float { transition:transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .product:hover .product__media-img { transform:scale(1.045); }
  .product:hover .product__float { transform:rotate(3deg) translateY(-6px); }
  .product:hover .product__float--badge { transform:rotate(-2deg) translateY(-6px); }
}
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    /* `translate`, not `transform`: a held transform would cancel the cards' own hover lift. */
    @keyframes riseIn { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
    @keyframes heroDrift { to { transform:translateY(7%) scale(1.06); } }
    .product,.step,.link-note,.price,.buy__note,.ribbon,.contact__form { animation:riseIn linear both; animation-timeline:view(); animation-range:entry 10px entry 190px; } /* px, not %: a card taller than a phone screen would otherwise stay half-faded for most of a swipe */
    .hero__bg { animation:heroDrift linear both; animation-timeline:scroll(root); animation-range:0 100vh; transform-origin:50% 0; }
  }
}

/* ── „რა არის Rythmos", rebuilt around the delivered art (2026-09-21) ─────────
   The section moved above the apps and went from three text cards with 30px
   glyphs to: a seal with four glass icons in orbit, three cards that each open
   on a scene, and the two-paths panel with both apps pinned to their road.
   Still no width breakpoints — every size below is a clamp() or a percentage of
   its own box, so the orbit scales as one figure from 320px up. */
.project { position:relative; overflow:hidden; }
/* wrap-reverse: side by side the heading stays left of the art; once the row breaks, the art lands ABOVE the heading instead of a screen of text below it. */
.project__top { display:flex; flex-wrap:wrap-reverse; align-items:center; gap:clamp(20px,5vw,72px); }
.project__head { flex:1 1 360px; min-width:0; }
.project .project__lede { max-width:620px; }
.facts { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.facts__item { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:999px; border:1px solid #c6d9ff1c; background:#ffffff08; color:#d5def0; font-size:13px; line-height:1.4; }
.facts__item::before { content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c); }
.facts__item--teal { --c:var(--teal); } .facts__item--violet { --c:var(--violet-lit); } .facts__item--cyan { --c:var(--cyan); }

.orbit { --w:clamp(236px,34vw,430px); position:relative; flex:0 1 var(--w); min-width:0; width:100%; max-width:var(--w); aspect-ratio:1; margin-inline:auto; }
.orbit__halo { position:absolute; inset:-10%; border-radius:50%; background:radial-gradient(circle at 34% 44%,rgba(52,211,153,.26),transparent 52%),radial-gradient(circle at 68% 58%,rgba(168,85,247,.3),transparent 56%); filter:blur(22px); pointer-events:none; }
.orbit__ring { position:absolute; inset:3%; border-radius:50%; border:1px dashed #c6d9ff30; }
.orbit__ring--inner { inset:19%; border:1px solid #c6d9ff1c; }
.orbit__ring i { position:absolute; top:-5px; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--teal-soft); box-shadow:0 0 14px 3px #34d39988; }
.orbit__ring--inner i { top:auto; bottom:-4px; width:7px; height:7px; margin-left:-3.5px; background:var(--violet-soft); box-shadow:0 0 14px 3px #a855f788; }
.orbit__core { position:absolute; inset:24%; width:52%; height:52%; object-fit:contain; filter:drop-shadow(0 0 36px #22d3ee59); }
.orbit__sat { position:absolute; width:23%; aspect-ratio:1; display:grid; place-items:center; border-radius:28%; border:1px solid #c6d9ff26; background:linear-gradient(160deg,#ffffff14,#ffffff05); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 16px 36px #000a,inset 0 1px 0 #ffffff24; }
.orbit__sat img { width:74%; height:74%; object-fit:contain; }
.orbit__sat--1 { top:2%; left:7%; } .orbit__sat--2 { top:9%; right:0; } .orbit__sat--3 { bottom:7%; left:0; } .orbit__sat--4 { bottom:1%; right:9%; }

/* flex, not the auto-fit grid: in the 2+1 zone a grid leaves card 3 alone in half a row; a flex item grows to fill it. */
.project .grid--steps { display:flex; flex-wrap:wrap; }
.project .grid--steps > .step { flex:1 1 230px; min-width:0; }
.project .step { --c:var(--teal); padding:0; gap:0; overflow:hidden; background:linear-gradient(180deg,#0e1524,#0a0f1c); border-color:#c6d9ff1c; transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s; }
.project .step--violet { --c:var(--violet-lit); } .project .step--cyan { --c:var(--cyan); }
.step__media { position:relative; aspect-ratio:16/10; max-height:280px; width:100%; }
.step__media::after { content:''; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--c),transparent); opacity:.75; }
.step__scene { display:block; width:100%; height:100%; object-fit:cover; -webkit-mask-image:linear-gradient(#000 58%,transparent); mask-image:linear-gradient(#000 58%,transparent); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.step__float { position:absolute; z-index:2; right:clamp(14px,3vw,24px); bottom:-24px; width:clamp(86px,27%,122px); height:auto; filter:drop-shadow(0 12px 22px #000b); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.step__body { position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; padding:0 clamp(20px,3vw,28px) clamp(24px,3vw,32px); }
.project .step__body .step__n { width:64px; height:64px; margin:-36px 0 2px -8px; font-size:19px; }
.project .step__title { font-size:clamp(17px,2vw,19px); }

/* Card 3 has no scene of its own: two app icons joined through the key. The
   backdrop sits on ::before so its fade-out does not also fade the icons. */
.step__media--account { display:grid; place-items:center; }
.step__media--account::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 46%,rgba(20,184,166,.34),transparent 44%),radial-gradient(circle at 80% 46%,rgba(168,85,247,.36),transparent 44%),url(../assets/images/bg-nebula-neutral.jpg) center/cover; background:radial-gradient(circle at 20% 46%,rgba(20,184,166,.34),transparent 44%),radial-gradient(circle at 80% 46%,rgba(168,85,247,.36),transparent 44%),image-set(url(../assets/images/bg-nebula-neutral.webp) type("image/webp"),url(../assets/images/bg-nebula-neutral.jpg) type("image/jpeg")) center/cover; -webkit-mask-image:linear-gradient(#000 58%,transparent); mask-image:linear-gradient(#000 58%,transparent); }
.acct { position:relative; display:flex; align-items:center; justify-content:center; width:84%; max-width:340px; margin-top:-6%; }
.acct__app { flex:none; width:23%; height:auto; border-radius:23%; box-shadow:0 12px 28px #000b,0 0 0 1px #ffffff24; }
.acct__beam { flex:1 1 0; min-width:6px; height:2px; border-radius:2px; }
.acct__beam--teal { background:linear-gradient(90deg,#2dd4bf,#67e8f9); box-shadow:0 0 12px #2dd4bfaa; }
.acct__beam--violet { background:linear-gradient(90deg,#67e8f9,#a855f7); box-shadow:0 0 12px #a855f7aa; }
.acct__key { flex:none; width:31%; height:auto; margin-inline:-2%; filter:drop-shadow(0 0 22px #22d3ee73); }

.project .link-note { align-items:stretch; padding:clamp(16px,2.6vw,24px); gap:clamp(18px,3.4vw,36px); }
.project .link-note__text { flex:1 1 320px; justify-content:center; gap:14px; padding:clamp(6px,1.6vw,20px); }
.link-note__figure { position:relative; flex:1.4 1 380px; min-width:0; overflow:hidden; border-radius:18px; border:1px solid #c6d9ff1c; }
.link-note__figure::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 40%,#060a16d9); pointer-events:none; }
.link-note__figure .link-note__art { display:block; width:100%; height:100%; min-height:236px; border:0; border-radius:0; }
.path-chips { position:absolute; z-index:1; inset:auto clamp(10px,2vw,16px) clamp(10px,2vw,16px); display:flex; flex-wrap:wrap-reverse; justify-content:space-between; gap:8px; } /* when the pair no longer fits one line, რიტმი rises to its own line and stays right (margin-left:auto) — a diagonal, each chip still over its own road */
.path-chip { --c:#2dd4bf; display:inline-flex; align-items:center; gap:9px; padding:6px 13px 6px 6px; border-radius:14px; border:1px solid color-mix(in srgb,var(--c) 45%,transparent); background:#080d1acc; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 8px 22px #0008; }
.path-chip--ritmi { --c:#a855f7; margin-left:auto; }
.path-chip__icon { flex:none; width:32px; height:32px; border-radius:9px; }
.path-chip small { display:block; color:#a9b7cf; font-size:10.5px; letter-spacing:.04em; line-height:1.35; }
.path-chip strong { display:block; color:#fff; font-size:13.5px; line-height:1.35; }
@media print { .orbit,.step__media,.path-chips { display:none; } }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .project .step:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--c) 42%,transparent); }
  .project .step:hover .step__scene { transform:scale(1.06); }
  .project .step:hover .step__float { transform:translateY(-7px) rotate(-4deg); }
}
@media (prefers-reduced-motion:no-preference) {
  @keyframes orbitTurn { to { rotate:360deg; } }
  @keyframes satFloat { 50% { translate:0 -9px; } }
  @keyframes beamPulse { 50% { opacity:.45; } }
  .orbit__ring--outer { animation:orbitTurn 48s linear infinite; }
  .orbit__ring--inner { animation:orbitTurn 34s linear infinite reverse; }
  .orbit__sat { animation:satFloat 7s ease-in-out infinite; }
  .orbit__sat--2 { animation-delay:-1.8s; } .orbit__sat--3 { animation-delay:-3.4s; } .orbit__sat--4 { animation-delay:-5.1s; }
  .acct__beam { animation:beamPulse 3.2s ease-in-out infinite; } .acct__beam--violet { animation-delay:-1.6s; }
}