/* base.css */
/* Amal landing — shared tokens and primitives. Sections style themselves in sections/NN-name.css (prefix .sec-name). */

@font-face { font-family: "Onest"; src: url("fonts/Onest-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Doto"; src: url("fonts/Doto-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #08090A;
  --card: #141516;
  --card-2: #1C1D1F;
  --text: #F2F4F1;
  --text-2: rgba(242, 244, 241, .64);
  --text-3: rgba(242, 244, 241, .42);
  --accent: #1BEB41;        /* app accent */
  --on-accent: #021A07;
  --brand: #43FF59;         /* logo green */
  --warn: #FF7A3D;          /* blocked / overdue */
  --warn-text: #FF9A66;
  --radius-l: 32px;
  --radius-m: 22px;
  --radius-s: 14px;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --sec-pad: clamp(96px, 14vw, 180px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "Onest", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-dot: "Doto", "Onest", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body.lp { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sec { position: relative; padding: var(--sec-pad) 0; }

/* Type scale */
.t-display { font-size: clamp(44px, 7.4vw, 104px); line-height: .98; font-weight: 700; letter-spacing: -.045em; }
.t-h2 { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; }
.t-h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.t-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--text-2); }
.t-small { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.t-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text); }
.t-dot { font-family: var(--font-dot); font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.warn { color: var(--warn); }

/* Liquid glass — use over color (glow, imagery), never over bare black. */
.glass {
  position: relative; isolation: isolate;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 1.5px 1.5px 0 -.5px rgba(255, 255, 255, .5), inset -1.5px -1.5px 0 -.5px rgba(255, 255, 255, .18), inset 0 0 16px rgba(255, 255, 255, .06);
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; font-size: 17px; font-weight: 600; transition: transform .25s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { color: var(--text); }

/* Eyebrow tile (same as the App Store shots) */
.tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--accent); }

/* The signature glow: top-left, saturated green. Position/size per section. */
.glow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 240, 70, .9), rgba(38, 175, 34, .5) 50%, rgba(18, 110, 20, .16) 78%, rgba(10, 70, 12, 0)); }

/* Entrance helper: [data-reveal] elements start hidden only when JS is on (html.js) and motion is allowed. */
html.js:not(.reduce-motion) [data-reveal] { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* 10-hero.css */
/* 10-hero — fixed nav + first screen (Main.dc.html). Prefix: amh-.
   Both roots (<header.amh-nav>, <section.amh-hero>) carry .amh for the shared resets.
   Motion lives in 10-hero.js (GSAP); the CSS only holds the final, static state. */

/* ---------- roots ---------- */
.amh{color:#F2F4F1;font-family:'Onest',-apple-system,'Helvetica Neue',sans-serif;font-size:16px;line-height:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.amh a{text-decoration:none}
.amh button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.amh a:focus-visible,.amh button:focus-visible{outline:2px solid #1BEB41;outline-offset:3px}
.amh [hidden]{display:none!important}
.amh-doto{font-family:'Doto',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.amh-wrap{position:relative;box-sizing:content-box;max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------- liquid glass ---------- */
.amh-glass{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.5),inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.18)}

/* ---------- nav (fixed at page level) ---------- */
.amh-nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:12px 0;pointer-events:none}
.amh-nav .amh-pill,.amh-nav .amh-sheet,.amh-nav .amh-scrim{pointer-events:auto}
.amh-pill{display:flex;align-items:center;gap:6px;height:56px;padding:0 6px 0 20px;border-radius:999px;transition:background-color .35s ease}
.amh .amh-pill.is-scrolled{background-color:rgba(20,21,22,.74)}
.amh .amh-brand{flex:none;display:flex;align-items:center;height:44px;color:#F2F4F1}
.amh-brand svg{display:block;width:114px;height:22px;max-width:none}
.amh-links{display:none;flex:1;justify-content:center;align-items:center;gap:2px}
.amh .amh-link{display:flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.005em;color:rgba(242,244,241,.8);white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.amh .amh-link:hover{background:rgba(255,255,255,.1);color:#F2F4F1}
.amh .amh-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:56px;padding:0 26px 0 22px;border-radius:999px;background:#1BEB41;color:#021A07;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.amh .amh-cta:hover{background:#4AF268}
.amh .amh-cta:active{transform:scale(.97)}
.amh-cta svg{flex:none;display:block}
.amh .amh-cta-nav{display:none;height:44px;padding:0 18px 0 14px;font-size:15px}
.amh .amh-menu-btn{margin-left:auto;flex:none;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#F2F4F1;transition:background-color .2s ease}
.amh .amh-menu-btn:hover{background:rgba(255,255,255,.16)}
.amh-menu-btn svg{grid-area:1/1}
.amh-menu-btn .amh-ico-close,.amh-menu-btn.is-open .amh-ico-menu{display:none}
.amh-menu-btn.is-open .amh-ico-close{display:block}
.amh-scrim{position:fixed;inset:0;z-index:-1;background:rgba(8,9,10,.45);animation:amhFade .25s ease both}
.amh-sheet{position:absolute;left:16px;right:16px;top:calc(100% + 8px);padding:8px;border-radius:28px;display:flex;flex-direction:column;gap:2px;background-color:rgba(18,19,20,.62);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.5),inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.18),0 30px 60px -24px rgba(0,0,0,.8);transform-origin:50% 0;animation:amhSheet .38s cubic-bezier(.2,.9,.25,1) both}
.amh-scrim.is-leaving{animation:amhFadeOut .2s ease both}
.amh-sheet.is-leaving{animation:amhSheetOut .2s cubic-bezier(.4,0,.6,1) both}
.amh .amh-sheet-link{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px 0 20px;border-radius:20px;font-size:19px;font-weight:600;letter-spacing:-.015em;color:#F2F4F1;transition:background-color .2s ease}
.amh .amh-sheet-link:hover{background:rgba(255,255,255,.08)}
.amh-sheet-link svg{color:rgba(242,244,241,.5)}
.amh .amh-sheet .amh-cta{margin-top:8px;width:100%}

/* ---------- hero copy ---------- */
/* padding-top = fixed nav height (12+56+12) + the artboard's 24px */
.amh-hero{position:relative;overflow-x:clip;background:#08090A;padding-top:104px}
.amh-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:40px}
.amh-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.amh-eyebrow{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 11px;border-radius:999px;font-size:14px;line-height:20px;font-weight:500;color:#F2F4F1}
.amh-eyebrow svg{color:#1BEB41}
.amh-h1{margin:24px 0 0;font-size:clamp(44px,11vw,92px);line-height:.98;font-weight:700;letter-spacing:-.045em}
.amh-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .1em .16em;margin:-.06em -.1em -.16em}
.amh-wi{display:inline-block}
.amh-accent{color:#1BEB41}
.amh-lead{margin:24px 0 0;max-width:540px;font-size:clamp(18px,2.4vw,20px);line-height:1.5;font-weight:400;color:rgba(242,244,241,.64)}
.amh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}
.amh .amh-more{display:inline-flex;align-items:center;gap:12px;height:56px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#F2F4F1}
.amh-more-ico{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:#1C1D1F;transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .2s ease}
.amh .amh-more:hover .amh-more-ico{transform:translateY(3px);background:#26272A}
.amh-meta{margin:20px 0 0;font-size:14px;line-height:20px;color:rgba(242,244,241,.64)}

/* ---------- hero visual: stage > scroll > phone / chips ---------- */
.amh-visual{position:relative;height:640px;min-width:0}
.amh-visual-scroll{position:absolute;inset:0}
.amh-phone-pos{position:absolute;left:50%;top:16px;width:336px;height:708px;margin-left:-168px;transform:scale(.84);transform-origin:50% 0;z-index:1}
.amh-phone-in,.amh-float,.amh-tilt{width:100%;height:100%}

.amh-chip{position:absolute;z-index:2}
.amh-chip-la{left:0;top:36px;transform:scale(.84);transform-origin:0 0}
.amh-chip-mg{right:0;top:300px;transform:scale(.84);transform-origin:100% 0}
.amh-chip-bl{left:0;top:476px;transform:scale(.84);transform-origin:0 0}

.amh-la{display:flex;align-items:center;gap:12px;height:64px;padding:0 22px 0 12px;border-radius:999px;white-space:nowrap}
.amh-la svg{display:block;flex:none}
.amh-la-txt{display:flex;flex-direction:column;gap:2px}
.amh-la-t{font-size:14px;line-height:18px;font-weight:600;color:#F2F4F1}
.amh-la-s{font-size:12px;line-height:16px;font-weight:500;color:rgba(242,244,241,.64)}
.amh-la-clock{width:96px;margin-left:4px;text-align:right;font-size:30px;line-height:30px;font-weight:900;color:#F2F4F1}

.amh-mg{display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 8px;border-radius:999px;white-space:nowrap;font-size:15px;line-height:20px;font-weight:600;color:#F2F4F1}
.amh-mg-ico{flex:none;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:#1BEB41;color:#021A07}
.amh-mg-dim{font-weight:500;color:rgba(242,244,241,.72)}

.amh-bl{display:flex;align-items:center;gap:12px;height:64px;padding:0 24px 0 10px;border-radius:999px;background:#1C1D1F;box-shadow:0 26px 50px -18px rgba(0,0,0,.75);white-space:nowrap}
.amh-bl-app{position:relative;flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#2A2B2E;color:rgba(242,244,241,.82)}
.amh-bl-lock{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:#FF7A3D;color:#1A0700;box-shadow:0 0 0 3px #1C1D1F}
.amh-bl-t{display:block;font-size:15px;line-height:20px;font-weight:600;color:#F2F4F1}
.amh-bl-s{display:block;font-size:13px;line-height:17px;font-weight:500;color:#FF9A66}

/* ---------- facts row ---------- */
.amh-proof{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:48px 0 0;padding:0 0 96px;list-style:none}
.amh-pi{display:flex;align-items:center;gap:14px;min-width:0}
.amh-pi-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#141516;color:#1BEB41}
.amh-pi-t{display:block;font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.01em;color:#F2F4F1}
.amh-pi-s{display:block;margin-top:2px;font-size:14px;line-height:20px;color:rgba(242,244,241,.64)}

/* ---------- copied app screen (App Store Main) ---------- */
.amh-scr,.amh-scr *{animation:none!important}
.amh-scr svg{max-width:none}
.amh-scr-card{background:#141516}
.amh-beam{position:absolute;top:-120px;height:760px;border-radius:50%;transform-origin:50% 0;background:linear-gradient(180deg,rgba(150,255,105,.55),rgba(60,210,50,.12) 55%,rgba(40,170,35,0) 85%);filter:blur(16px);opacity:.8}
.amh-hatch{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 7px)}
.amh-lg{position:relative;isolation:isolate;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55),inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.22),inset 0 0 14px rgba(255,255,255,.07),0 14px 34px -10px rgba(0,0,0,.6)}
.amh-lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.05) 80%,rgba(255,255,255,.14))}

/* ---------- entrance: hidden until 10-hero.js builds the load timeline ----------
   JS removes .amh-pre in the same task that applies the GSAP from-states, so nothing flashes.
   If the script never runs, the fail-safe animation reveals everything after 3 s. */
@media (prefers-reduced-motion:no-preference){
  .amh-pre .amh-pill,.amh-pre .amh-eyebrow,.amh-pre .amh-wi,.amh-pre .amh-phone-in,.amh-pre .amh-lead,.amh-pre .amh-actions,.amh-pre .amh-meta,.amh-pre .amh-pop,.amh-pre .amh-pi{visibility:hidden;animation:amhFailsafe 0s linear 3s forwards}
}

/* Layers only for what moves continuously */
.amh-bob{will-change:transform}
@media (hover:hover) and (pointer:fine){ .amh-tilt,.amh-par{will-change:transform} }
@media (hover:none),(pointer:coarse){ .amh-float{will-change:transform} }

/* ---------- keyframes (menu only; the rest is GSAP) ---------- */
@keyframes amhFade{from{opacity:0}to{opacity:1}}
@keyframes amhFadeOut{from{opacity:1}to{opacity:0}}
@keyframes amhSheet{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes amhSheetOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes amhFailsafe{to{visibility:visible}}

/* ---------- breakpoints ---------- */
@media (min-width:720px){
  .amh-wrap{padding:0 32px}
  .amh-visual{height:776px}
  .amh-phone-pos{top:34px;transform:none}
  .amh-chip-la{left:calc(50% - 280px);top:44px;transform:none}
  .amh-chip-mg{right:calc(50% - 268px);top:352px;transform:none}
  .amh-chip-bl{left:calc(50% - 300px);top:556px;transform:none}
  .amh-proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .amh-sheet{left:32px;right:32px}
}
@media (min-width:960px){
  .amh-nav{padding:16px 0}
  .amh-hero{padding-top:120px}
  .amh-pill{height:64px;padding:0 10px 0 26px}
  .amh-brand svg{width:135px;height:26px}
  .amh-links{display:flex}
  .amh .amh-cta-nav{display:inline-flex}
  .amh .amh-menu-btn,.amh-sheet,.amh-scrim{display:none}
}
@media (min-width:1120px){
  .amh-hero{padding-top:136px}
  .amh-grid{grid-template-columns:minmax(0,1fr) 520px;column-gap:40px;align-items:center}
  .amh-h1{font-size:clamp(64px,6.2vw,92px);white-space:nowrap}
  .amh-proof{margin-top:64px;padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){
  .amh *,.amh *::before{animation:none!important;transition:none!important}
  .amh-bob,.amh-tilt,.amh-par,.amh-float{will-change:auto}
}

/* 20-how.css */
/* 20-how — «Как это работает». Pinned scroll story: .how-track is 5 stages tall, .how-stage is sticky,
   ScrollTrigger only reads progress (rail fills are scrubbed, step changes are time-based tweens). */

/* ---------- Section shell ---------- */
.how{--vh:100vh;--sw:.86;--sh:.86;--s:min(var(--sw),var(--sh));--stage-h:clamp(640px,var(--vh),960px);position:relative;width:100%;box-sizing:border-box;padding:160px 0 96px;background:#08090A;color:#F2F4F1;font-family:var(--font);font-size:16px;line-height:normal;overflow-x:clip;-webkit-font-smoothing:antialiased}
@supports (height:100svh){.how{--vh:100svh}}
.how-g{color:#1BEB41}
.how-o{color:#FF7A3D}
.how-doto{font-family:var(--font-dot);font-variant-numeric:tabular-nums}

/* ---------- Intro ---------- */
.how-intro{position:relative;z-index:1;max-width:1248px;margin:0 auto 64px;padding:0 24px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,96px);align-items:end}
.how-eyebrow{margin:0 0 20px;font-size:15px;line-height:20px;font-weight:600;letter-spacing:.01em;color:#1BEB41}
.how-h2{margin:0;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.how-lead{margin:0;max-width:560px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;font-weight:400;color:rgba(242,244,241,.64);text-wrap:pretty}

/* ---------- Pinned scene: 5 x stage tall track, sticky stage ---------- */
.how-track{position:relative;height:calc(var(--stage-h) * 5)}
.how-stage{position:sticky;top:0;z-index:0;height:var(--stage-h);display:flex;align-items:center}
.how-grid{position:relative;width:100%;max-width:1248px;margin:0 auto;padding:0 24px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,96px);align-items:center}

/* Phone */
.how-phonecol{min-width:0;display:flex;justify-content:center;align-items:center}
.how-anchor{position:relative;flex:none;width:calc(390px * var(--s) + 16px);height:calc(844px * var(--s) + 16px)}
/* The only glow here: a small faint halo behind the phone (green, orange on the block step). */
.how-glow{position:absolute;inset:-70px -90px;border-radius:50%;pointer-events:none;transition:opacity .7s ease}
.how-glow-g{background:radial-gradient(closest-side,rgba(27,235,65,.2),rgba(27,235,65,.07) 55%,transparent)}
.how-glow-o{background:radial-gradient(closest-side,rgba(255,122,61,.22),rgba(255,122,61,.08) 55%,transparent);opacity:0}
.how.is-block .how-glow-g{opacity:0}
.how.is-block .how-glow-o{opacity:1}
.how-device{position:absolute;inset:0;border-radius:calc(56px * var(--s) + 8px);background:#000;box-shadow:0 0 0 1.5px #232527,0 40px 90px -20px rgba(0,0,0,.85)}
.how-screen{position:absolute;inset:8px;overflow:hidden;isolation:isolate;border-radius:calc(56px * var(--s));background:#08090A}
.how-layer{position:absolute;inset:0;will-change:opacity,transform}
.how-scrbox{position:absolute;inset:0;overflow:hidden;border-radius:calc(56px * var(--s));background:#08090A}
.how-scr{position:absolute;left:0;top:0;width:390px;height:844px;overflow:hidden;background:#08090A;transform:scale(var(--s));transform-origin:0 0}
.how svg{max-width:none}

/* Copy column */
.how-copy{min-width:0;width:100%;max-width:580px}
.how-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0 0 48px}
.how-seg{display:flex;flex-direction:column;gap:12px;width:100%;min-height:44px;margin:0;padding:14px 0 10px;border:0;background:none;color:#F2F4F1;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.how-seg:focus-visible{outline:2px solid #1BEB41;outline-offset:2px;border-radius:6px}
.how-bar{position:relative;display:block;height:10px;border-radius:5px;overflow:hidden;background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 7px)}
.how-fill{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:5px;background-color:#1BEB41;transform:translateX(-100%)}
.how-fo{position:absolute;inset:0;border-radius:inherit;background:#FF7A3D;opacity:0;transition:opacity .4s ease}
.how.is-block .how-fo{opacity:1}
/* Label states: future .4, past .62, current 1 (same as the artboard's rgba text colours). */
.how-lbl{display:flex;align-items:baseline;gap:8px;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;opacity:.4;transition:opacity .3s ease}
.how-seg.is-past .how-lbl{opacity:.62}
.how-seg.is-cur .how-lbl{opacity:1}
@media (hover:hover){.how-seg:hover .how-lbl{opacity:1}}
.how-lnum{font-size:15px;font-weight:900;letter-spacing:.02em;transition:color .3s ease}
.how-seg.is-cur .how-lnum{color:#1BEB41}
.how.is-block .how-seg.is-cur .how-lnum{color:#FF7A3D}

.how-panels{position:relative;height:320px}
.how-panel{position:absolute;left:0;right:0;top:0}
.how-title{margin:0;font-size:clamp(32px,3.1vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.how-body{margin:18px 0 0;max-width:520px;font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:rgba(242,244,241,.64);text-wrap:pretty}
.how-detail{margin-top:28px}

/* Before the script runs: step 1 is the visible one. */
.how-layer:not(.l1),.how-panel:not(.p1){opacity:0;visibility:hidden}

/* Details: flat rows, timeline, tiles */
.how-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:540px}
.how-rule{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:24px;background:#141516;font-size:15px;line-height:20px;color:rgba(242,244,241,.64)}
.how-rule.wide{display:inline-flex;max-width:460px}
.how-rule b{font-weight:600;color:#F2F4F1}
.how-ric{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#1E1F21;color:#F2F4F1}
.how-ric.on{background:#1BEB41;color:#021A07}

.how-time{display:flex;align-items:flex-start;gap:18px;max-width:520px}
.how-tp{flex:none;display:flex;flex-direction:column;gap:8px}
.how-tn{font-size:44px;line-height:44px;font-weight:900;letter-spacing:.01em;color:#F2F4F1}
.how-tn.how-o{color:#FF7A3D}
.how-tl{font-size:14px;line-height:18px;font-weight:500;color:rgba(242,244,241,.64)}
.how-tl.how-o{color:#FF9A66}
.how-tmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:2px}
.how-tmid-lbl{font-size:13px;line-height:16px;font-weight:500;color:rgba(242,244,241,.64);text-align:center}
.how-tcap{position:relative;display:block;height:12px;border-radius:6px;overflow:hidden;background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 7px)}
.how-tfill{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:6px;background:#FF7A3D;transform:translateX(-100%)}

.how-tiles{display:flex;flex-wrap:wrap;gap:10px}
.how-tile{position:relative;flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:rgba(255,255,255,.9)}
.how-tile.lk{background:#1C1D1F;color:rgba(242,244,241,.34)}
.how-lock{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#FF7A3D;color:#08090A;box-shadow:0 0 0 3px #08090A}
.how-cap{margin:14px 0 0;font-size:14px;line-height:20px;font-weight:500;color:rgba(242,244,241,.64)}
.how-cap b{font-weight:600;color:#FF9A66}
.how-streak{display:inline-flex;align-items:center;gap:8px;height:36px;margin-top:16px;padding:0 14px 0 12px;border-radius:999px;background:rgba(27,235,65,.14);color:#1BEB41;font-size:15px;font-weight:600}

/* ---------- App screens (copied from the app / App Store artboards) ---------- */
.how-card{background:#141516}
.how-lg{position:relative;isolation:isolate;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55),inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.22),inset 0 0 14px rgba(255,255,255,.07),0 14px 34px -10px rgba(0,0,0,.6)}
.how-lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.05) 80%,rgba(255,255,255,.14))}
.how-hatch{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 7px)}
.how-hatchx{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 1.5px,transparent 1.5px 6px)}
.how-beam{position:absolute;top:-120px;height:760px;border-radius:50%;transform-origin:50% 0;background:linear-gradient(180deg,rgba(150,255,105,.55),rgba(60,210,50,.12) 55%,rgba(40,170,35,0) 85%);filter:blur(16px);opacity:.8}
.how-app{width:100%;aspect-ratio:1;border-radius:16px;display:grid;place-items:center;color:rgba(255,255,255,.9)}
.how-cat{height:34px;padding:0 14px;border-radius:999px;display:flex;align-items:center;background:#26272A;font-size:14px;font-weight:500}
.how-sb{position:absolute;left:0;right:0;top:0;height:54px;z-index:5}
.how-sbt{position:absolute;left:0;top:17px;width:132px;text-align:center;font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.01em;color:#F2F4F1}
.how-sbi{position:absolute;left:132px;top:11px;width:126px;height:37px;border-radius:999px;background:#000}
.how-sbr{position:absolute;left:258px;top:19px;width:132px;display:flex;justify-content:center;align-items:center;gap:6px;color:#F2F4F1}
.how-hi{position:absolute;left:128px;bottom:8px;width:134px;height:5px;border-radius:999px;background:#F2F4F1}

/* Step 2: the home screen dims, the Магриб card comes forward (reset .45s after the screen leaves). */
.how-dim{transition:opacity 0s .45s}
.how.is-dim .how-dim{opacity:.3;transition:opacity .6s ease .55s}
.how-mcard{transition:transform 0s .45s}
.how.is-dim .how-mcard{transform:scale(1.045);transition:transform .7s cubic-bezier(.34,1.56,.64,1) .55s}

/* Step 4: execution timer */
.how-ring{position:absolute;inset:0}
.how-rdot{position:absolute;width:3px;height:18px;margin:-9px 0 0 -1.5px;border-radius:2px;background-color:#2A2B2E;transition:background-color .12s}
.how-rdot.on{background-color:#1BEB41}
.how-rdot.cur{background-color:#F2F4F1}
.how-xbadge{position:relative;background:#1E1F21;color:rgba(242,244,241,.7);transition:color .4s}
.how-xbadge::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#1BEB41;opacity:0;transition:opacity .4s}
.how-xbadge svg{position:relative}
.how-xbadge.is-on{color:#021A07}
.how-xbadge.is-on::before{opacity:1}
.how-xfill{transform:translateX(-100%)}
.how-xfin,.how-xchk,.how-xfinl,.how-xnext{opacity:0}

/* ---------- Phone scale by viewport (width and height) ---------- */
@media (max-width:1199px){.how{--sw:.8}}
@media (min-width:761px) and (max-height:999px){.how{--sh:.8}}
@media (min-width:761px) and (max-height:840px){.how{--sh:.7}.how-rail{margin-bottom:32px}.how-panels{height:300px}}
@media (min-width:761px) and (max-height:740px){.how{--sh:.62}.how-title{font-size:34px}.how-body{margin-top:12px;font-size:17px}.how-detail{margin-top:20px}}
@media (min-width:761px) and (max-height:660px){.how{--sh:.56}}
@media (min-width:761px) and (max-width:1023px){.how{--sw:.62}.how-title{font-size:32px}.how-body{font-size:17px}.how-rules{grid-template-columns:minmax(0,1fr)}.how-lnum{display:none}.how-panels{height:360px}.how-tn{font-size:34px;line-height:34px}}

/* ---------- Mobile: phone on top, then the rail, then the active step's text ---------- */
@media (max-width:760px){
  .how{padding:96px 0 64px;--sw:.6;--sh:.5;--stage-h:clamp(560px,var(--vh),960px)}
  .how-intro{grid-template-columns:minmax(0,1fr);margin-bottom:40px;padding:0 20px}
  .how-lead{margin-top:16px}
  .how-grid{grid-template-columns:minmax(0,1fr);row-gap:18px;justify-items:center;padding:0 20px}
  .how-glow{inset:-40px -50px}
  .how-copy{max-width:440px}
  .how-rail{gap:4px;margin-bottom:12px}
  .how-seg{gap:8px;padding:8px 0 6px}
  .how-bar{height:8px;border-radius:4px}
  .how-lbl{justify-content:center;font-size:12px;line-height:16px}
  .how-lnum{display:none}
  .how-panels{height:206px}
  .how-title{font-size:26px;line-height:30px;letter-spacing:-.025em}
  .how-body{margin-top:8px;font-size:15px;line-height:21px}
  .how-detail{display:none}
  .how-detail.m{display:block;margin-top:14px}
  .how-rules{grid-template-columns:minmax(0,1fr);gap:6px}
  .how-rule{gap:10px;padding:8px 12px 8px 8px;border-radius:16px;font-size:13px;line-height:18px}
  .how-ric{width:28px;height:28px;border-radius:9px}
  .how-time{gap:12px}
  .how-tn{font-size:30px;line-height:30px}
  .how-tl{font-size:12px;line-height:16px}
}
@media (max-width:760px) and (min-height:820px){.how{--sh:.54}}
@media (max-width:760px) and (max-height:700px){.how{--sh:.44}}
@media (max-width:760px) and (max-height:620px){.how{--sh:.38}}

/* ---------- Reduced motion: no pin, every step stacked next to its own screen ---------- */
@media (prefers-reduced-motion:reduce){
  .how *,.how *::before{animation:none!important;transition:none!important}
  .how-track{height:auto}
  .how-stage{position:relative;height:auto;display:block}
  .how-grid{row-gap:120px}
  .how-phonecol,.how-anchor,.how-device,.how-screen,.how-copy,.how-panels{display:contents}
  .how-rail,.how-glow{display:none}
  .how-layer{position:relative;inset:auto;justify-self:center;align-self:center;box-sizing:border-box;width:calc(390px * var(--s) + 16px);height:calc(844px * var(--s) + 16px);padding:8px;border-radius:calc(56px * var(--s) + 8px);background:#000;box-shadow:0 0 0 1.5px #232527,0 40px 90px -20px rgba(0,0,0,.85);will-change:auto;opacity:1!important;transform:none!important;visibility:visible!important}
  .how-scrbox{position:relative;inset:auto;width:100%;height:100%}
  .how-panel{position:relative;align-self:center;opacity:1!important;transform:none!important;visibility:visible!important}
  .how-layer.l1{grid-area:1/1}.how-panel.p1{grid-area:1/2}
  .how-layer.l2{grid-area:2/1}.how-panel.p2{grid-area:2/2}
  .how-layer.l3{grid-area:3/1}.how-panel.p3{grid-area:3/2}
  .how-layer.l4{grid-area:4/1}.how-panel.p4{grid-area:4/2}
  .how-layer.l5{grid-area:5/1}.how-panel.p5{grid-area:5/2}
  .how-tfill{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .how{--sh:.6}
  .how-grid{row-gap:28px}
  .how-layer.l1{grid-area:1/1}.how-panel.p1{grid-area:2/1}
  .how-layer.l2{grid-area:3/1}.how-panel.p2{grid-area:4/1}
  .how-layer.l3{grid-area:5/1}.how-panel.p3{grid-area:6/1}
  .how-layer.l4{grid-area:7/1}.how-panel.p4{grid-area:8/1}
  .how-layer.l5{grid-area:9/1}.how-panel.p5{grid-area:10/1}
  .how-panel{margin-bottom:56px}
  .how-detail{display:block}
}
@supports not (overflow:clip){.how-stage{overflow:hidden}}

/* 30-prayer.css */
/* 30-prayer — Намаз (#prayer) + задачи (#tasks). Classes: pr-*, tk-*.
   Static CSS = the final state. GSAP (30-prayer.js) owns every entrance/scrub transform and opacity,
   so no CSS transitions sit on those properties. Hover/tap states stay in CSS. */

.pr-pg{position:relative;width:100%;overflow:hidden;overflow:clip;background:#08090A;color:#F2F4F1;font-family:var(--font);font-size:16px;line-height:normal;-webkit-font-smoothing:antialiased}
.pr-pg button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
.pr-pg button:focus-visible{outline:2px solid #1BEB41;outline-offset:3px}
.pr-wrap{position:relative;width:min(1200px,calc(100% - 32px));margin:0 auto}
.pr-ac{color:#1BEB41}
.pr-doto{font-family:var(--font-dot);font-weight:900;font-variant-numeric:tabular-nums}
.pr-hatch{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 7px)}
.pr-hatch-s{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 1.5px,transparent 1.5px 4.5px)}

.pr-chip{display:flex;width:max-content;align-items:center;gap:8px;height:36px;padding:0 15px 0 11px;border-radius:999px;background:#141516;font-size:15px;font-weight:600;letter-spacing:-.01em}
.pr-chip svg{color:#1BEB41}
.pr-h2{margin:0;font-size:clamp(40px,4.45vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.pr-lead{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:rgba(242,244,241,.64);text-wrap:pretty}
.pr-lead b{font-weight:500;color:#F2F4F1}

/* ── Part 1 · prayer ─────────────────────────── */
.pr-sec{padding:clamp(96px,11.2vw,160px) 0 clamp(48px,5vw,72px)}
.pr-hd{display:grid;grid-template-columns:7fr 5fr;column-gap:24px;align-items:end}
.pr-hd .pr-chip{margin-bottom:24px}
.pr-st-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:clamp(40px,4.5vw,64px)}
.pr-loc{display:flex;align-items:center;gap:8px;height:36px;padding:0 15px 0 11px;border-radius:999px;background:#141516;font-size:14px;font-weight:500;color:rgba(242,244,241,.8)}
.pr-loc svg{color:#1BEB41}
.pr-date{font-size:14px;font-weight:500;color:rgba(242,244,241,.5)}

.pr-stage{position:relative;margin:20px 0 0;width:100%;aspect-ratio:2/1}
/* the only glow in the section: small and faint, behind the «сейчас» sun */
.pr-sun-glow{position:absolute;left:86.293%;top:62.884%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,rgba(110,240,70,.24),rgba(38,175,34,.12) 50%,rgba(18,110,20,.04) 78%,transparent);pointer-events:none}
.pr-arc{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible}
.pr-arc-m{display:none}
.pr-hz{stroke:rgba(242,244,241,.18);stroke-width:1.5}
.pr-trk{fill:none;stroke:rgba(242,244,241,.14);stroke-width:2}
.pr-ngt{fill:none;stroke:rgba(242,244,241,.32);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 9}
.pr-tck{fill:none;stroke:rgba(242,244,241,.3);stroke-width:1.5;stroke-linecap:round}
.pr-trv{fill:none;stroke:#F2F4F1;stroke-width:3;stroke-linecap:round;stroke-dasharray:1306.4 2000}
.pr-arc-m .pr-ngt{stroke-width:2.4;stroke-dasharray:0 6}
.pr-arc-m .pr-tck{stroke-width:1.2}
.pr-arc-m .pr-trv{stroke-width:2.5;stroke-dasharray:472.3 1000}

.pr-cd{position:absolute;left:0;right:0;top:25%;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.pr-cd-n{font-family:var(--font-dot);font-weight:900;font-size:clamp(48px,11.2vw,160px);line-height:.92;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-cd-c{animation:prColon 1s steps(1,end) infinite}
.pr-stage.pr-off .pr-cd-c{animation-play-state:paused}
@keyframes prColon{50%{opacity:.3}}
.pr-cd-s{margin-top:14px;font-size:clamp(14px,1.25vw,18px);line-height:1.3;font-weight:600}
.pr-cd-s .pr-o{font-weight:500;color:#FF9A66}

.pr-now{position:absolute;left:86.293%;top:0;width:0;height:62.884%;z-index:3;pointer-events:none}
.pr-now-ln{position:absolute;left:-1px;top:36px;bottom:0;width:2px;border-radius:1px;background:#F2F4F1;transform-origin:50% 100%}
.pr-now-pw{position:absolute;top:0;left:-70px;width:140px;display:flex;justify-content:center}
.pr-now-pill{display:flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:#F2F4F1;color:#08090A;font-size:14px;font-weight:600;white-space:nowrap;transform-origin:50% 100%}
.pr-sun{position:absolute;left:-8px;bottom:-8px;width:16px;height:16px;border-radius:50%;background:#F2F4F1;box-shadow:0 0 0 5px #08090A}

.pr-pt{position:absolute;width:0;height:0;z-index:2}
.pr-pt:focus-within,.pr-pt[data-sel="y"]{z-index:6}
.pr-pt-fajr{left:15.588%;top:87.264%}
.pr-pt-zuhr{left:50%;top:20%}
.pr-pt-asr{left:81.782%;top:45.064%}
.pr-pt-maghrib{left:86.667%;top:70%}
.pr-pt-isha{left:84.242%;top:87.883%}
.pr-pb{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.pr-pg .pr-pb:focus-visible{border-radius:50%}
.pr-pdw{position:relative;width:22px;height:22px;display:grid;place-items:center}
.pr-dot{position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.pr-pt[data-sel="y"] .pr-dot{transform:scale(1.18)}
.pr-d-done{background:#1BEB41;color:#021A07}
.pr-d-next{background:#F2F4F1}
/* Магриб halo: static here; 30-prayer.js runs the breathing loop while the stage is on screen */
.pr-halo{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#F2F4F1;opacity:.2;transform:scale(1.45)}
html.js:not(.reduce-motion) .pr-halo{will-change:transform,opacity}

.pr-lbl{position:absolute;display:flex;flex-direction:column;gap:2px;white-space:nowrap;pointer-events:none}
.pr-lbl .pr-nm{font-size:13px;line-height:16px;font-weight:600;color:rgba(242,244,241,.64)}
.pr-lbl .pr-tm{font-family:var(--font-dot);font-weight:900;font-size:28px;line-height:28px;font-variant-numeric:tabular-nums;color:#F2F4F1}
.pr-lbl.pr-nx .pr-nm{color:#F2F4F1}
.pr-lbl.pr-dim .pr-tm{color:rgba(242,244,241,.5)}
.pr-l-l{right:46px;top:-1px;align-items:flex-end;text-align:right}
.pr-l-r{left:46px;top:-1px;align-items:flex-start}
.pr-l-ru{left:46px;bottom:28px;align-items:flex-start}
.pr-l-u{left:-38px;width:120px;bottom:52px;align-items:center;text-align:center}

.pr-tt{position:absolute;z-index:2;width:228px;padding:12px 14px 13px;border-radius:16px;background:#1C1D1F;font-size:14px;line-height:1.4;text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 20px 44px -14px rgba(0,0,0,.75);transition:opacity .18s ease,visibility 0s linear .18s}
.pr-pb:focus-visible .pr-tt,.pr-pt[data-sel="y"] .pr-tt{opacity:1;visibility:visible;transition:opacity .18s ease}
.pr-tt b{display:block;font-weight:600;color:#F2F4F1}
.pr-tt span{display:block;margin-top:2px;color:rgba(242,244,241,.64)}
.pr-tt .pr-ok{color:#1BEB41}
.pr-tt .pr-o{color:#FF9A66}
.pr-tt-r{left:40px;bottom:34px}
.pr-tt-d{left:-92px;top:46px}
.pr-tt-l{right:46px;top:-14px}

.pr-ptimes{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:18px 0 0;padding:0;list-style:none}
.pr-ptimes li{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0 11px;border-radius:16px;background:#141516;font-size:11px;line-height:14px;font-weight:600;color:rgba(242,244,241,.6)}
.pr-ptimes b{font-size:15px;line-height:18px;font-weight:600;color:#F2F4F1;font-variant-numeric:tabular-nums}
.pr-ptimes .pr-nx{background:#F2F4F1;color:rgba(8,9,10,.6)}
.pr-ptimes .pr-nx b{color:#08090A}
.pr-ptimes .pr-fu b{color:rgba(242,244,241,.5)}
.pr-pm{width:8px;height:8px;border-radius:50%}
.pr-pm-ok{background:#1BEB41}
.pr-pm-nx{background:#08090A}

.pr-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.pr-fc{display:flex;flex-direction:column;gap:18px;padding:26px 24px 28px;border-radius:28px;background:#141516}
.pr-fc-k{font-size:13px;line-height:16px;font-weight:600;color:rgba(242,244,241,.5)}
/* 5×7 bitmap dot-matrix words (Doto has no Cyrillic) */
.pr-dm{display:block;width:100%;max-width:236px;height:auto;overflow:visible}
.pr-dm-off{fill:none;stroke:rgba(242,244,241,.09);stroke-width:.7;stroke-linecap:round;stroke-dasharray:0 1}
.pr-gl{fill:none;stroke:#F2F4F1;stroke-width:.76;stroke-linecap:round}
.pr-fc p{margin:0;font-size:16px;line-height:1.45;color:rgba(242,244,241,.64)}
.pr-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:32px 0 0;padding:0;list-style:none}
.pr-notes li{display:flex;align-items:flex-start;gap:14px;font-size:16px;line-height:1.45;color:rgba(242,244,241,.64)}
.pr-notes li > span:last-child{padding-top:8px}
.pr-ni{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#141516;color:#F2F4F1}

/* ── Part 2 · tasks ──────────────────────────── */
.tk-sec{padding:clamp(56px,6.1vw,88px) 0 clamp(96px,11.2vw,160px)}
.tk-grid{display:grid;grid-template-columns:5fr 7fr;grid-template-areas:"head list" "prog list";column-gap:24px;row-gap:40px}
.tk-head{grid-area:head}
.tk-head .pr-chip{margin-bottom:24px}
.tk-head .pr-lead{margin-top:24px;max-width:520px}
.tk-prog{grid-area:prog;align-self:end;padding:28px;border-radius:32px;background:#141516}
.tk-tl{grid-area:list;align-self:end;padding:12px;border-radius:32px;background:#141516}

.tk-pg-top{display:flex;align-items:flex-end;gap:12px}
.tk-pg-n{font-size:72px;line-height:.9}
.tk-pg-of{display:flex;flex-direction:column;padding-bottom:5px;font-size:20px;line-height:24px;font-weight:600}
.tk-pg-of span{font-size:14px;line-height:18px;font-weight:500;color:rgba(242,244,241,.5)}
.tk-caps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;height:44px;margin-top:20px}
.tk-cap{border-radius:14px;transform-origin:0 50%;transition:opacity .25s ease}
.tk-cap-on{background:#1BEB41}

.tk-ro-box{position:relative;height:72px;margin-top:20px}
.tk-ro{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.tk-ro[data-sel="y"]{opacity:1;transform:none}
.tk-ro-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#1E1F21;color:#F2F4F1}
.tk-ro-ic.pr-ok{background:rgba(27,235,65,.14);color:#1BEB41}
.tk-ro-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tk-ro-n{font-size:17px;line-height:22px;font-weight:600}
.tk-ro-s{font-size:14px;line-height:18px;color:rgba(242,244,241,.6)}
.tk-ro-s.pr-ok{color:#1BEB41}
.tk-ro-s.pr-o{color:#FF9A66}
.tk-ro-t{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tk-ro-t .pr-doto{font-size:40px;line-height:36px}
.tk-ro-t .tk-lb{font-size:13px;line-height:16px;font-weight:600;color:#F2F4F1}

.tk-tl-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:56px;padding:18px 16px 0}
.tk-tl-hd b{font-size:18px;line-height:22px;font-weight:600}
.tk-tl-hd span{font-size:14px;color:rgba(242,244,241,.5)}
.tk-rows{position:relative}
.tk-rail{position:absolute;left:91px;width:6px;border-radius:3px}
.tk-rail-p{top:32px;height:248px;background:#1BEB41;transform-origin:50% 0}
.tk-rail-f{top:280px;height:150px}
.tk-tr{position:relative;display:grid;grid-template-columns:52px 28px 40px minmax(0,1fr) auto;column-gap:12px;align-items:center;width:100%;height:64px;padding:0 12px 0 16px}
.tk-tr-r{height:84px}
.tk-tr::before{content:"";position:absolute;left:120px;right:0;top:4px;bottom:4px;border-radius:16px;background:#1C1D1F;opacity:0;transition:opacity .2s ease}
.tk-tr[data-sel="y"]::before{opacity:1}
.tk-tr > span{position:relative}
.tk-tr-tm{font-size:15px;line-height:20px;font-weight:500;color:rgba(242,244,241,.55);font-variant-numeric:tabular-nums}
.tk-tr-tm.pr-o{color:#FF9A66;font-weight:600}
.tk-nd{justify-self:center;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 4px #141516}
.tk-nd-ok{background:#1BEB41;color:#021A07}
.tk-nd-o{background:#FF7A3D}
.tk-tr-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#1E1F21;color:#F2F4F1}
.tk-tr-ic.pr-ok{background:rgba(27,235,65,.14);color:#1BEB41}
.tk-tr-mn{display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-tr-n{font-size:16px;line-height:20px;font-weight:500}
.tk-tr-n.tk-dn{color:rgba(242,244,241,.78)}
.tk-tr-sw{position:relative;display:block;height:16px}
.tk-tr-s,.tk-tr-x{position:absolute;left:0;top:0;white-space:nowrap;font-size:13px;line-height:16px;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.tk-tr-s{color:rgba(242,244,241,.55)}
.tk-tr-s.pr-ok{color:#1BEB41}
.tk-tr-s.pr-o{color:#FF9A66}
.tk-tr-x{display:flex;align-items:center;gap:5px;font-weight:600;color:#F2F4F1;opacity:0;transform:translateY(8px)}
.tk-tr:focus-visible .tk-tr-s{opacity:0;transform:translateY(-8px)}
.tk-tr:focus-visible .tk-tr-x{opacity:1;transform:none}
.tk-tr-end{display:flex;align-items:center}
.tk-play{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#26272A;color:#F2F4F1}
.tk-play.tk-on{background:#1BEB41;color:#021A07}
.tk-tr-now{position:relative;display:grid;grid-template-columns:52px 28px auto minmax(0,1fr);column-gap:12px;align-items:center;height:48px;padding:0 12px 0 16px}
.tk-nw-t{font-size:15px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums}
.tk-nw-d{justify-self:center;width:16px;height:16px;border-radius:50%;background:#F2F4F1;box-shadow:0 0 0 4px #141516}
.tk-nw-p{display:flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#F2F4F1;color:#08090A;font-size:13px;font-weight:700}
.tk-nw-l{height:2px;border-radius:1px;background:#F2F4F1;transform-origin:0 50%}

/* Pointer hover (not on touch, where :hover sticks after a tap; taps pin via data-sel instead) */
@media (hover:hover){
  .pr-pt:hover{z-index:6}
  .pr-pb:hover .pr-dot{transform:scale(1.18)}
  .pr-pb:hover .pr-tt{opacity:1;visibility:visible;transition:opacity .18s ease}

  .tk-tr:hover::before{opacity:1}
  .tk-tr:hover .tk-tr-s{opacity:0;transform:translateY(-8px)}
  .tk-tr:hover .tk-tr-x{opacity:1;transform:none}
  .tk-sec:has(.tk-tr:hover) .tk-cap{opacity:.28}
  .tk-sec:has(.tk-tr[data-k="zikr"]:hover) .tk-cap[data-k="zikr"],
  .tk-sec:has(.tk-tr[data-k="zar"]:hover) .tk-cap[data-k="zar"],
  .tk-sec:has(.tk-tr[data-k="eng"]:hover) .tk-cap[data-k="eng"],
  .tk-sec:has(.tk-tr[data-k="sal"]:hover) .tk-cap[data-k="sal"],
  .tk-sec:has(.tk-tr[data-k="kniga"]:hover) .tk-cap[data-k="kniga"],
  .tk-sec:has(.tk-tr[data-k="tren"]:hover) .tk-cap[data-k="tren"]{opacity:1}
  .tk-sec:has(.tk-tr:hover) .tk-ro[data-sel="y"]{opacity:0;transform:translateY(8px)}
  .tk-sec:has(.tk-tr[data-k="zikr"]:hover) .tk-ro[data-k="zikr"],
  .tk-sec:has(.tk-tr[data-k="zar"]:hover) .tk-ro[data-k="zar"],
  .tk-sec:has(.tk-tr[data-k="eng"]:hover) .tk-ro[data-k="eng"],
  .tk-sec:has(.tk-tr[data-k="sal"]:hover) .tk-ro[data-k="sal"],
  .tk-sec:has(.tk-tr[data-k="kniga"]:hover) .tk-ro[data-k="kniga"],
  .tk-sec:has(.tk-tr[data-k="tren"]:hover) .tk-ro[data-k="tren"]{opacity:1;transform:none}
}

@media (max-width:1100px){.pr-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .pr-hd{grid-template-columns:1fr;row-gap:20px}
  .pr-stage{aspect-ratio:358/300;max-width:560px;margin-left:auto;margin-right:auto}
  .pr-arc-d{display:none}
  .pr-arc-m{display:block}
  .pr-sun-glow{left:87.598%;top:59.167%;width:170px;height:170px;margin:-85px 0 0 -85px}
  .pr-now{left:87.598%;height:59.167%}
  .pr-now-ln{top:30px}
  .pr-now-pw{left:-110px;width:130px;justify-content:flex-end}
  .pr-now-pill{height:28px;padding:0 10px;font-size:12px;transform-origin:100% 100%}
  .pr-sun{left:-6px;bottom:-6px;width:12px;height:12px;box-shadow:0 0 0 4px #08090A}
  .pr-pt-fajr{left:14.358%;top:80.3%}
  .pr-pt-zuhr{left:50%;top:22%}
  .pr-pt-asr{left:82.933%;top:43.733%}
  .pr-pt-maghrib{left:87.989%;top:65.333%}
  .pr-pt-isha{left:85.475%;top:80.833%}
  .pr-pdw,.pr-dot,.pr-halo{width:16px;height:16px}
  .pr-dot svg{width:9px;height:9px}
  .pr-lbl .pr-tm{display:none}
  .pr-lbl .pr-nm{font-size:11px;line-height:14px}
  .pr-m-b{left:-28px;right:auto;top:34px;bottom:auto;width:100px;align-items:center;text-align:center}
  .pr-m-u{left:-28px;right:auto;top:auto;bottom:36px;width:100px;align-items:center;text-align:center}
  .pr-m-l{left:auto;right:36px;top:15px;bottom:auto;width:auto;align-items:flex-end;text-align:right}
  .pr-m-lb{left:auto;right:36px;top:26px;bottom:auto;width:auto;align-items:flex-end;text-align:right}
  .pr-cd{top:29%}
  .pr-cd-s{margin-top:8px;font-size:13px}
  .pr-cd-s .pr-o{display:block}
  .pr-cd-s .pr-sep{display:none}
  .pr-tt{width:196px}
  .pr-tt-r{left:30px;bottom:30px}
  .pr-tt-d{left:-76px;top:36px}
  .pr-tt-l{right:36px;top:-14px}
  .pr-ptimes{display:grid}
  .pr-notes{grid-template-columns:1fr}
  .tk-grid{grid-template-columns:1fr;grid-template-areas:"head" "list" "prog";row-gap:24px}
  .tk-head{margin-bottom:8px}
}
@media (max-width:560px){
  .pr-facts{grid-template-columns:1fr}
  .pr-fc{padding:22px 22px 24px}
  .tk-tr{grid-template-columns:44px 24px minmax(0,1fr) auto;column-gap:10px;padding:0 12px}
  .tk-tr-ic{display:none}
  .tk-tr::before{left:100px}
  .tk-tr-now{grid-template-columns:44px 24px auto minmax(0,1fr);column-gap:10px;padding:0 12px}
  .tk-rail{left:75px}
  .tk-tr-n{font-size:15px}
  .tk-tr-s,.tk-tr-x{font-size:12px}
  .tk-play{width:36px;height:36px}
  .tk-prog{padding:22px}
  .tk-pg-n{font-size:60px}
  .tk-ro-box{height:80px}
  .tk-ro{gap:12px}
  .tk-ro-ic{width:40px;height:40px;border-radius:12px}
  .tk-ro-n{font-size:15px;line-height:20px}
  .tk-ro-s{font-size:13px;line-height:16px}
  .tk-ro-t .pr-doto{font-size:30px;line-height:28px}
  .tk-ro-t .tk-lb{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .pr-pg *,.pr-pg *::before,.pr-pg *::after{transition:none!important;animation:none!important}
}

/* 40-everywhere.css */
/* 40 · Всегда под рукой (#everywhere) — bento: widgets, lock screen, Dynamic Island, Control Center, Apple Watch, tasbih, focus session.
   1:1 with Everywhere.dc.html. Motion and live state live in 40-everywhere.js (GSAP); CSS holds the rest states. */

/* ---------- section ---------- */
.ev{position:relative;width:100%;overflow:hidden;background:#08090A;color:#F2F4F1;font-size:16px;line-height:normal;font-family:'Onest',-apple-system,'Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--s:.95;--ps:1;--ws:.95;--cw:752px;--ch:382px}
.ev *,.ev *::before,.ev *::after{box-sizing:border-box}
/* :where() keeps this reset at element specificity so the per-button classes below (pill, chip, switch, CC tile, confirm buttons) keep their own
   background/padding/font — in the artboard `.ev button` outranked them by accident (trackless switch, bare pills). */
:where(.ev) button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.ev button:focus-visible{outline:2px solid #1BEB41;outline-offset:3px}
.ev-doto{font-family:'Doto',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ev-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ev-wrap{position:relative;max-width:1264px;margin:0 auto;padding:160px 32px}

/* ---------- head ---------- */
.ev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:64px}
.ev-chip{display:flex;width:max-content;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;border-radius:999px;background:#141516;font-size:14px;line-height:20px;font-weight:600;color:#F2F4F1}
.ev-chip svg{color:#1BEB41}
.ev-h2{margin:28px 0 0;font-size:clamp(42px,5vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.ev-lead{margin:0;max-width:440px;font-size:20px;line-height:29px;color:rgba(242,244,241,.64)}

/* ---------- bento ---------- */
.ev-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:540px 380px 568px;gap:20px}
.ev-t-wid{grid-column:1 / 3;grid-row:1}
.ev-t-lock{grid-column:3;grid-row:1 / 3}
.ev-t-di{grid-column:1;grid-row:2}
.ev-t-cc{grid-column:2;grid-row:2}
.ev-t-watch{grid-column:1;grid-row:3}
.ev-t-tas{grid-column:2;grid-row:3}
.ev-t-focus{grid-column:3;grid-row:3}
.ev-tile{position:relative;overflow:hidden;isolation:isolate;min-width:0;border-radius:30px;background:#141516;padding:32px;display:flex;flex-direction:column}
.ev-th{position:relative}
.ev-k{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:600;color:rgba(242,244,241,.64)}
.ev-k svg{flex:none;color:#1BEB41}
.ev-h3{margin:12px 0 0;font-size:24px;line-height:28px;font-weight:700;letter-spacing:-.025em}
.ev-p{margin:8px 0 0;max-width:440px;font-size:15px;line-height:22px;color:rgba(242,244,241,.64)}
.ev-p-wide{max-width:none}

/* ---------- parallax layers (GSAP: scroll y on .ev-par-* / .ev-wa-glow, pointer x/y on the fit box / .ev-ptr / .ev-wa-glow-i) ---------- */
.ev-par-w,.ev-par-l,.ev-par-a,.ev-ptr{position:absolute;inset:0}
.ev-px .ev-par,.ev-px .ev-wa-glow{will-change:transform}

/* ---------- copied app styles: widgets ---------- */
.ev-wd{position:relative;overflow:hidden;background:#0E0F10;color:#F2F4F1}
.ev-wglow{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(110,240,70,.62),rgba(38,175,34,.3) 50%,rgba(10,70,12,0));animation:ev-breathe 7s ease-in-out infinite}
.ev:not(.ev-live) .ev-wglow{animation-play-state:paused}
.ev-gl{position:relative;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:inset 1.2px 1.2px 0 -.4px rgba(255,255,255,.5),inset -1px -1px 0 -.4px rgba(255,255,255,.2),0 10px 26px -12px rgba(0,0,0,.6)}
.ev-hw{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.15) 0 1.5px,transparent 1.5px 6px)}
.ev-hatch{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 7px)}
.ev-hl{background-color:#3A3B3E;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 1.5px,transparent 1.5px 6px)}
.ev-lg{position:relative;isolation:isolate;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55),inset -1.5px -1.5px 0 -.5px rgba(255,255,255,.22),inset 0 0 14px rgba(255,255,255,.07),0 14px 34px -10px rgba(0,0,0,.6)}
.ev-lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.05) 80%,rgba(255,255,255,.14))}
@keyframes ev-breathe{0%,100%{opacity:.8}50%{opacity:1}}

/* ---------- 1 · widgets ---------- */
.ev-wg-fit{position:relative;flex:none;align-self:center;width:calc(var(--cw) * var(--s));height:calc(var(--ch) * var(--s));margin-top:auto}
.ev-wg{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);transform:scale(var(--s));transform-origin:0 0;display:grid;grid-template-columns:170px 170px 364px;grid-template-rows:170px 170px;column-gap:24px;row-gap:42px;grid-template-areas:"med med lg" "s1 s2 lg"}
.ev-wg-med{grid-area:med}.ev-wg-s1{grid-area:s1}.ev-wg-s2{grid-area:s2}.ev-wg-lg{grid-area:lg}

/* ---------- 2 · lock screen ---------- */
.ev-ph-fit{display:flex;justify-content:center;margin:auto -8px 0}
.ev-ph-box{position:relative;flex:none;width:calc(336px * var(--ps));height:calc(708px * var(--ps))}
.ev-ph{position:absolute;left:0;top:0;width:336px;height:708px;transform:scale(var(--ps));transform-origin:0 0}
.ev-scr{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(.8205);transform-origin:0 0;overflow:hidden}
.ev-wall{background:radial-gradient(90% 60% at 0% 0%,rgba(110,240,70,.75),rgba(38,175,34,.35) 40%,rgba(10,40,14,0) 70%),radial-gradient(80% 50% at 100% 100%,rgba(27,200,120,.45),rgba(10,60,40,0) 70%),#0a0d0b}
.ev-ldot{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.22)}
.ev-ldot.on{background:rgba(255,255,255,.92)}
.ev-la-bar{transition:transform 1s linear}

/* ---------- 3 · dynamic island (morph = GSAP timeline; these are the collapsed rest states) ---------- */
.ev-t-di{padding-bottom:0}
.ev-di-stage{position:relative;flex:none;width:min(100%,340px);height:172px;margin:auto auto 0;padding:9px 9px 0;border-radius:48px 48px 0 0;background:#000}
.ev-di-scr{position:relative;height:100%;overflow:hidden;border-radius:39px 39px 0 0;background:#1A1B1D}
.ev-di-apps{position:absolute;left:20px;right:20px;top:58px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:22px}
.ev-di-app{display:block;width:100%;height:auto;aspect-ratio:1 / 1;border-radius:22.4%;background:#2A2B2E}
.ev-di-sbt{position:absolute;left:24px;top:14px;font-size:14px;line-height:18px;font-weight:600;letter-spacing:-.01em}
.ev-di-sbi{position:absolute;right:18px;top:17px;display:flex;align-items:center;gap:5px;color:#F2F4F1}
.ev-di{position:absolute;left:8px;top:9px;width:calc(100% - 16px);height:132px;display:block;pointer-events:none}
.ev .ev-di:focus-visible{outline:none}
.ev-di-card{position:absolute;inset:0;border-radius:40px;background:#000;transform-origin:50% 0;transform:scale(.6,.2424);opacity:0;pointer-events:auto;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.ev-di-pill{position:absolute;left:20%;right:20%;top:0;height:32px;border-radius:16px;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 7px;pointer-events:auto;transform-origin:50% 0}
.ev-di-pt{font-size:15px;line-height:15px;font-weight:900;color:rgba(242,244,241,.6)}
.ev-di-pz{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:#FF7A3D;color:#1A0700}
.ev-di-full{position:absolute;inset:0;padding:18px 22px 16px;display:flex;flex-direction:column;justify-content:space-between;color:#F2F4F1;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:50% 0;pointer-events:none}
.ev-di:focus-visible .ev-di-card{outline:2px solid #1BEB41;outline-offset:3px}
.ev-di-r1{display:flex;align-items:center;gap:12px;min-width:0}
.ev-di-ring{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;color:#FF7A3D}
.ev-di-ring svg{position:absolute;inset:0}
.ev-di-c{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev-di-sub{font-size:12px;line-height:15px;font-weight:600;color:#FF9A66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-di-ttl{font-size:14px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-di-r2{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ev-di-time{flex:none;font-size:30px;line-height:30px;font-weight:900;color:rgba(242,244,241,.6)}
.ev-di-next{font-size:11.5px;line-height:15px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 4 · control center ---------- */
.ev-t-cc{padding-bottom:24px}
.ev-cc{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:10px;row-gap:14px;align-items:start;margin:auto -8px 0}
.ev-cc-w{grid-column:span 2;height:68px;border-radius:34px;display:flex;align-items:center;gap:8px;padding:0 10px 0 8px;background:#2A2B2E;color:#F2F4F1;min-width:0;transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.ev-cc-w.act{background:#F2F4F1;color:#08090A}
.ev-cc-i{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#3A3B3E;color:#F2F4F1}
.ev-cc-w.act .ev-cc-i{background:#1BEB41;color:#021A07}
.ev-cc-tx{display:flex;flex-direction:column;min-width:0}
.ev-cc-t{font-size:14px;line-height:18px;font-weight:700}
.ev-cc-s{font-size:12px;line-height:16px;font-weight:600;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-cc-b{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.ev-cc-r{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#2A2B2E;color:#F2F4F1}
.ev-cc-go{background:#1BEB41;color:#021A07}
.ev-cc-sys .ev-cc-r{background:#1F2022;color:rgba(242,244,241,.55)}
.ev-cc-l{font-size:11px;line-height:14px;font-weight:600;color:rgba(242,244,241,.92);text-align:center;white-space:nowrap}
.ev-cc-w:active,button.ev-cc-b:active .ev-cc-r{transform:scale(.94)}

/* ---------- 5 · watch ---------- */
.ev-seg2{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ev-chipb{position:relative;isolation:isolate;height:36px;padding:0 14px;border-radius:999px;display:flex;align-items:center;gap:7px;background:#242528;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.ev-chipb::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#F2F4F1;opacity:0;z-index:-1;transition:opacity .25s ease}
.ev-chipb.sel{color:#08090A}
.ev-chipb.sel::before{opacity:1}
.ev-chipb:active{transform:scale(.96)}
.ev-wa-fit{position:relative;flex:none;align-self:center;width:calc(226px * var(--ws));height:calc(290px * var(--ws));margin-top:auto}
.ev-wa-glow{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-160px 0 0 -158px;pointer-events:none}
.ev-wa-glow-i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(110,240,70,.3),rgba(38,175,34,.14) 50%,rgba(18,110,20,.05) 78%,transparent)}
.ev-wa{position:absolute;left:0;top:0;width:226px;height:320px;transform:scale(var(--ws));transform-origin:0 0}
.ev-wscr{position:absolute;left:0;top:0;width:416px;height:496px;transform:scale(.452);transform-origin:0 0}
.ev-wl{position:absolute;inset:0}
.ev-wl.off{opacity:0;transform:scale(.94)}
.ev-wt{-webkit-font-smoothing:antialiased;font-synthesis:none}
.ev-wt-t{position:absolute;margin:0;white-space:nowrap;line-height:1}
.ev-wt .ev-doto{font-weight:900}
.ev-wt-clk{position:absolute;right:32px;top:35px;margin:0;white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;font-size:32px;line-height:1;font-weight:600;color:#FFFFFF}
.ev-wt-glow{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(110,240,70,.62),rgba(38,175,34,.3) 50%,rgba(10,70,12,0))}
.ev-wt-pdot{position:absolute;left:400px;width:12px;height:12px;border-radius:50%;background:#5C5C5C}
.ev-wt-chip{position:absolute;top:400px;height:56px;border-radius:28px;background:#131313;box-shadow:inset 0 0 0 1px #2F2F2F,inset 0 0 0 2px #282828,inset 0 0 0 3px #202020}

/* ---------- 6 · tasbih ---------- */
.ev-tas{position:relative;flex:none;align-self:center;width:min(300px,100%);aspect-ratio:1 / 1;margin-top:auto}
.ev-tas-btn{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:50%}
.ev .ev-tas-btn:focus-visible{outline-offset:6px}
.ev-tas-press{position:absolute;inset:0}
.ev-tas-ring{position:absolute;inset:0}
.ev-bead{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,255,255,.16)}
.ev-bead::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 12px 3px rgba(27,235,65,.55);opacity:0;transition:opacity .5s ease}
.ev-bead.on{background:#1BEB41}
.ev-bead.cur{box-shadow:0 0 0 4px rgba(27,235,65,.25)}
.ev-tas.full .ev-bead::after{opacity:1}
.ev-tas-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none}
.ev-tas-k{display:flex;align-items:center;gap:6px;font-size:14px;line-height:18px;font-weight:600;color:rgba(242,244,241,.64)}
.ev-tas-n{font-size:84px;line-height:80px;font-weight:900}
.ev-tas-of{font-size:14px;line-height:18px;font-weight:600;color:rgba(242,244,241,.55)}
.ev-tas.full .ev-tas-of{color:#1BEB41}
.ev-tas-note{margin:14px 0 0;text-align:center;font-size:14px;line-height:18px;color:rgba(242,244,241,.55)}

/* ---------- 7 · focus session ---------- */
.ev-pills,.ev-fx-row,.ev-fx-cap,.ev-fx-meta,.ev-fx-foot{max-width:520px}
.ev-pills{position:relative;display:flex;gap:8px;margin-top:24px}
.ev-pill{position:relative;isolation:isolate;flex:1;min-width:0;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#242528;font-size:15px;font-weight:600;white-space:nowrap;transition:transform .15s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.ev-pill-f{position:absolute;inset:0;border-radius:inherit;background:#1BEB41;opacity:0;transform:scale(.8);z-index:-1;pointer-events:none}
.ev-pill.sel{color:#021A07}
.ev-pill.sel .ev-pill-f{opacity:1;transform:none}
.ev-pill:active{transform:scale(.95)}
.ev-pills.lock .ev-pill{cursor:not-allowed}
.ev-pills.lock .ev-pill:active{transform:none}
.ev-pills.lock .ev-pill:not(.sel){opacity:.4}
.ev-fx-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:22px}
.ev-fx-lab{display:block;font-size:14px;line-height:20px;font-weight:600;color:rgba(242,244,241,.64)}
.ev-fx-end{display:block;margin-top:4px;font-size:56px;line-height:56px;font-weight:900}
.ev-sw{position:relative;isolation:isolate;flex:none;width:56px;height:34px;margin-bottom:10px;border-radius:999px;background:#2A2B2E}
.ev-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#1BEB41;opacity:0;z-index:-1;transition:opacity .25s ease}
.ev-sw.on::before{opacity:1}
.ev-sw-k{position:absolute;left:3px;top:3px;width:28px;height:28px;border-radius:50%;background:#F2F4F1;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.ev-sw.on .ev-sw-k{transform:translateX(22px)}
.ev-fx-cap{display:flex;gap:4px;margin-top:16px}
.ev-fx-seg{position:relative;flex:1;height:12px;border-radius:6px;overflow:hidden}
.ev-fx-f{position:absolute;inset:0;border-radius:6px;background:#F2F4F1;opacity:0;transform:scaleX(.4);transform-origin:0 50%}
.ev-fx-f.g{background:#1BEB41}
.ev-fx-f.on{opacity:1;transform:none}
.ev-fx-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;line-height:18px;color:rgba(242,244,241,.55)}
.ev-fx-foot{display:grid;margin-top:auto;padding-top:16px}
.ev-fx-note,.ev-fx-ask{grid-area:1 / 1}
.ev-fx-note{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14px;line-height:20px;color:rgba(242,244,241,.64)}
.ev-fx-note svg{flex:none;margin-top:1px;color:#F2F4F1}
.ev-fx-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;opacity:0;visibility:hidden;transform:translateY(8px)}
.ev-fx-q{flex:1 1 100%;font-size:14px;line-height:20px;font-weight:600}
.ev-fx-b{height:36px;padding:0 16px;border-radius:999px;display:flex;align-items:center;background:#2A2B2E;font-size:14px;font-weight:600;transition:transform .15s}
.ev-fx-b.warn{background:#FF7A3D;color:#1A0700}
.ev-fx-b:active{transform:scale(.95)}

/* ---------- tablet: two columns ---------- */
@media (max-width:1263px){
  .ev{--s:1;--ws:1}
  .ev-head{flex-direction:column;align-items:flex-start;gap:20px}
  .ev-lead{max-width:640px}
  .ev-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .ev-t-wid{grid-column:1 / -1;grid-row:1}
  .ev-t-lock{grid-column:1;grid-row:2 / span 2}
  .ev-t-di{grid-column:2;grid-row:2;min-height:380px}
  .ev-t-cc{grid-column:2;grid-row:3;min-height:380px}
  .ev-t-watch{grid-column:1;grid-row:4;min-height:568px}
  .ev-t-tas{grid-column:2;grid-row:4;min-height:568px}
  .ev-t-focus{grid-column:1 / -1;grid-row:5}
}
@media (max-width:899px){.ev{--s:.84;--ps:.8}}

/* ---------- phone: one column ---------- */
@media (max-width:760px){
  .ev{--cw:364px;--ch:770px;--s:1;--ps:1;--ws:1}
  .ev-wrap{padding:96px 16px}
  .ev-head{gap:16px;margin-bottom:40px}
  .ev-h2{margin-top:20px}
  .ev-lead{font-size:18px;line-height:26px}
  .ev-bento{grid-template-columns:minmax(0,1fr);gap:16px}
  .ev-t-wid,.ev-t-lock,.ev-t-di,.ev-t-cc,.ev-t-watch,.ev-t-tas,.ev-t-focus{grid-column:1;grid-row:auto;min-height:0}
  .ev-tile{padding:24px 20px;border-radius:28px}
  .ev-t-di{padding-bottom:0}
  .ev-t-cc{padding-bottom:20px}
  .ev-h3{font-size:22px;line-height:26px}
  .ev-wg{grid-template-columns:170px 170px;grid-template-rows:170px 170px 382px;row-gap:24px;grid-template-areas:"s1 s2" "med med" "lg lg"}
  .ev-wg-fit,.ev-wa-fit,.ev-di-stage,.ev-tas{margin-top:24px}
  .ev-ph-fit{margin:24px 0 0}
  .ev-cc{margin:24px -8px 0}
  .ev-fx-foot{margin-top:8px}
}
@media (max-width:435px){.ev{--s:.865}}
@media (max-width:407px){.ev{--ps:.9}}
@media (max-width:387px){
  .ev{--s:.76;--ps:.82}
  .ev-cc-r{width:60px;height:60px}
  .ev-cc-w{height:60px}
  .ev-cc-i{width:44px;height:44px}
  .ev-di-full{padding:16px 16px 14px}
  .ev-di-time{font-size:26px;line-height:26px}
}
@media (max-width:349px){.ev{--s:.64;--ps:.7}}

/* ---------- reduced motion: final states, instant changes ---------- */
@media (prefers-reduced-motion:reduce){
  .ev *,.ev *::before,.ev *::after{animation:none!important;transition:none!important}
}

/* 50-trust.css */
/* 50-trust — streak & stats (#stats), privacy (#privacy), FAQ (#faq), final CTA (#get), footer.
   Every rule is scoped to .tr: base.css also defines .t-h2 / .t-lead / .t-eyebrow / .t-h3 / .t-dot for the whole page. */

.tr{position:relative;width:100%;overflow-x:clip;background:#08090A;color:#F2F4F1;font-family:var(--font);font-size:16px;line-height:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.tr *{box-sizing:border-box}
:where(.tr) a{color:inherit;text-decoration:none}
:where(.tr) button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.tr) ul{list-style:none;margin:0;padding:0}
:where(.tr) h2,:where(.tr) h3,:where(.tr) p{margin:0}
:where(.tr) svg{display:block;flex:none}
.tr .t-wrap{position:relative;z-index:1;width:100%;max-width:1248px;margin:0 auto;padding:0 24px}
.tr .t-sec{position:relative;padding-top:160px}
.tr .t-doto{font-family:var(--font-dot);font-variant-numeric:tabular-nums;font-weight:900}
.tr .t-hatch{background-color:#1A1B1D;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,transparent 1.5px 7px)}
.tr .t-ok{background:#1BEB41}
.tr .t-miss{background:#FF7A3D}
.tr .t-eyebrow{display:flex;align-items:center;gap:10px;height:24px;font-size:16px;line-height:24px;font-weight:600;color:rgba(242,244,241,.64)}
.tr .t-eyebrow svg{color:#1BEB41}
.tr .t-h2{font-size:clamp(40px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.tr .t-lead{font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:rgba(242,244,241,.64);text-wrap:pretty}
.tr .t-card{background:#141516;border-radius:30px}
.tr .t-h3{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.tr .t-sub{margin-top:2px;font-size:15px;line-height:20px;color:rgba(242,244,241,.56)}
.tr .t-tile{flex:none;width:52px;height:52px;border-radius:16px;background:#1C1D1F;display:grid;place-items:center;color:#1BEB41}

/* 1 · streak and stats */
.tr .t-s1-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:470px 380px;gap:24px}
.tr .t-s1-text{padding-top:4px}
.tr .t-s1-num{display:flex;align-items:flex-end;gap:22px;margin-top:28px}
.tr .t-s1-digits{display:block;min-width:2ch;text-align:right;font-size:clamp(150px,18vw,248px);line-height:.86;letter-spacing:-.02em;color:#F2F4F1}
.tr .t-s1-unit{display:flex;flex-direction:column;gap:14px;padding-bottom:26px}
.tr .t-s1-unit svg{width:52px;height:52px;color:#1BEB41}
.tr .t-s1-unit b{display:block;font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.035em;font-weight:700}
.tr .t-s1-lead{margin-top:32px;max-width:520px}
.tr .t-s1-note{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:15px;line-height:22px;font-weight:500;color:rgba(242,244,241,.64)}
.tr .t-s1-note i{display:block;flex:none;width:22px;height:22px;border-radius:50%}

.tr .t-s1-share{position:relative;overflow:hidden;background:#141516;border-radius:32px}
.tr .t-share-seg{position:absolute;left:28px;top:28px;display:flex;gap:4px;padding:4px;border-radius:999px;background:#1C1D1F;font-size:14px;line-height:20px;font-weight:600}
.tr .t-share-seg span{padding:6px 14px;border-radius:999px;color:rgba(242,244,241,.64)}
.tr .t-share-seg .t-seg-on{background:#F2F4F1;color:#08090A}
.tr .t-share-anim{position:absolute;right:28px;top:39px;width:313px;height:392px}
.tr .t-share-tilt{width:100%;height:100%;transform:rotate(-5deg)}
.tr .t-sc{width:540px;max-width:none;height:675px;padding:44px;display:flex;flex-direction:column;justify-content:space-between;background:#08090A;border-radius:36px;transform:scale(.58);transform-origin:0 0;box-shadow:0 48px 90px -36px rgba(0,0,0,.9);color:#F2F4F1}
.tr .t-sc-top{display:flex;flex-direction:column;gap:26px}
.tr .t-sc-head{display:flex;align-items:center;justify-content:space-between}
.tr .t-sc-date{font-size:20px;font-weight:600;color:rgba(242,244,241,.7)}
.tr .t-sc-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.tr .t-sc-brand img{display:block;width:30px;height:30px;border-radius:22.4%}
.tr .t-sc-h{font-size:56px;line-height:58px;font-weight:300;letter-spacing:-.04em}
.tr .t-sc-list{display:flex;flex-direction:column;gap:12px}
.tr .t-sc-it{display:flex;align-items:center;gap:16px;font-size:24px;line-height:30px;font-weight:500}
.tr .t-sc-dim{color:rgba(242,244,241,.6)}
.tr .t-sc-ok,.tr .t-sc-no{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.tr .t-sc-ok{background:#1BEB41;color:#021A07}
.tr .t-sc-no{background:#FF7A3D;color:#1A0700}
.tr .t-sc-bot{display:flex;flex-direction:column;gap:14px}
.tr .t-sc-big{display:flex;align-items:baseline;gap:14px}
.tr .t-sc-frac{font-size:104px;line-height:96px;font-weight:200;letter-spacing:-.06em}
.tr .t-sc-done{font-size:22px;font-weight:500;color:rgba(242,244,241,.7)}
.tr .t-sc-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tr .t-sc-bars span{display:block;height:10px;border-radius:5px;background:#1BEB41}
.tr .t-sc-bars .t-sc-miss{background:#FF7A3D}
.tr .t-share-cap{position:absolute;left:28px;bottom:28px;width:186px}
.tr .t-share-cap .t-tile{width:48px;height:48px;border-radius:15px}
.tr .t-share-cap h3{margin-top:18px;font-size:19px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.tr .t-share-cap p{margin-top:6px;font-size:14px;line-height:20px;color:rgba(242,244,241,.56)}

.tr .t-wk,.tr .t-wf{display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.tr .t-chead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tr .t-cstat{display:flex;align-items:center;gap:10px}
.tr .t-cstat .t-doto{font-size:44px;line-height:48px;color:#1BEB41}
.tr .t-cstat span:last-child{font-size:13px;line-height:16px;color:rgba(242,244,241,.6)}
.tr .t-wk-grid{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;row-gap:10px;align-items:center}
.tr .t-wk-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center;align-items:center}
.tr .t-wk-day{font-size:12px;line-height:16px;font-weight:600;color:rgba(242,244,241,.5)}
.tr .t-wk-k{font-size:12px;line-height:16px;font-weight:700;color:rgba(242,244,241,.5)}
.tr .t-dot{display:block;width:30px;height:30px;border-radius:50%}
.tr .t-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;line-height:18px;color:rgba(242,244,241,.6)}
.tr .t-legend span{display:flex;align-items:center;gap:8px}
.tr .t-legend i{display:block;width:12px;height:12px;border-radius:50%}
.tr .t-wf-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.tr .t-cell{position:relative;display:block;aspect-ratio:1;border-radius:12px;background:#1C1D1F}
.tr .t-fill{position:absolute;inset:0;display:block;border-radius:inherit}
.tr .t-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tr .t-trio .t-doto{display:block;font-size:32px;line-height:34px}
.tr .t-trio p{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;line-height:18px;color:rgba(242,244,241,.6)}
.tr .t-trio i{display:block;flex:none;width:10px;height:10px;border-radius:3px}

/* 2 · privacy */
.tr .t-pv-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.tr .t-pv-head .t-h2{margin-top:20px}
.tr .t-pv-head .t-lead{margin-top:24px;max-width:600px}
.tr .t-pv-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);gap:48px;height:620px;margin-top:72px}
.tr .t-pv-col{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-evenly}
.tr .t-pt{display:flex;align-items:flex-start;gap:20px}
.tr .t-pv-left .t-pt{flex-direction:row-reverse;text-align:right}
.tr .t-pt h3{font-size:21px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.tr .t-pt p{margin-top:8px;font-size:16px;line-height:24px;color:rgba(242,244,241,.64)}
.tr .t-pv-center{position:relative;display:flex;align-items:center;justify-content:center}
.tr .t-pv-box{position:relative;z-index:1;width:296px;height:612px}
.tr .t-pv-phone{position:absolute;left:0;top:0;width:296px;height:612px;padding:9px;border-radius:58px;background:#1C1D1F;transform-origin:0 0}
.tr .t-pv-btn{position:absolute;width:4px;border-radius:2px;background:#1C1D1F}
.tr .t-pv-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:49px;background:#0B0C0D}
.tr .t-pv-island{position:absolute;left:50%;top:13px;width:92px;height:28px;margin-left:-46px;border-radius:999px;background:#000}
.tr .t-pv-date{position:absolute;left:0;right:0;top:72px;text-align:center;font-size:15px;line-height:20px;font-weight:600;color:rgba(242,244,241,.64)}
.tr .t-pv-time{position:absolute;left:0;right:0;top:96px;text-align:center;font-size:68px;line-height:72px;color:#F2F4F1}
.tr .t-pv-ring{position:absolute;left:50%;top:224px;width:200px;height:200px;margin-left:-100px}
.tr .t-tk{position:absolute;left:50%;top:50%;display:block;width:3px;height:12px;margin:-6px 0 0 -1.5px;border-radius:2px;background:rgba(255,255,255,.14)}
.tr .t-tk.t-lit{background:#1BEB41}
.tr .t-pv-lock{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-34px 0 0 -32px;color:#1BEB41}
.tr .t-pv-chip{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 12px;border-radius:999px;background:#1C1D1F;font-size:13px;line-height:18px;font-weight:600;white-space:nowrap}
.tr .t-pv-chip svg{color:#1BEB41}
.tr .t-pv-no{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:64px}
.tr .t-pill{display:flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 18px;border-radius:999px;background:#141516;font-size:16px;line-height:20px;font-weight:600}
.tr .t-pill svg{color:#1BEB41}

/* 3 · FAQ — the panel height, the answer and the icon are driven by GSAP (50-trust.js);
   the class rules below are the no-JS / first-paint state. */
.tr .t-faq-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:80px;align-items:start}
.tr .t-faq-side{position:sticky;top:120px}
.tr .t-faq-side .t-lead{margin-top:24px}
.tr .t-faq-mail{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:20px;line-height:28px;font-weight:600;color:#1BEB41;transition:opacity .2s}
.tr .t-faq-mail:hover{opacity:.8}
.tr .t-faq-list{display:flex;flex-direction:column;gap:8px;min-height:740px}
.tr .t-faq-item{background:#141516;border-radius:24px;transition:background-color .3s}
.tr .t-faq-item:hover{background:#18191B}
.tr .t-faq-item.t-open{background:#1C1D1F}
.tr .t-faq-h{font-size:inherit;font-weight:inherit}
.tr .t-faq-btn{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:80px;padding:20px 20px 20px 28px;border-radius:24px;text-align:left;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.tr .t-faq-btn:focus-visible{outline:2px solid #1BEB41;outline-offset:2px}
.tr .t-faq-ic{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:#1C1D1F;transition:background-color .3s}
.tr .t-faq-item.t-open .t-faq-ic{background:#141516}
.tr .t-faq-ic i{position:absolute;inset:0;border-radius:50%;background:#1BEB41;opacity:0;transform:scale(.6)}
.tr .t-faq-ic svg{position:absolute;left:10px;top:10px}
.tr .t-faq-ic .t-p2{opacity:0;color:#021A07}
.tr .t-open .t-faq-ic i{opacity:1;transform:none}
.tr .t-open .t-faq-ic svg{transform:rotate(45deg)}
.tr .t-open .t-faq-ic .t-p1{opacity:0}
.tr .t-open .t-faq-ic .t-p2{opacity:1}
.tr .t-faq-panel{height:0;overflow:hidden}
.tr .t-open .t-faq-panel{height:auto}
.tr .t-faq-a{padding:0 88px 28px 28px;font-size:17px;line-height:26px;color:rgba(242,244,241,.7)}

/* 4 · final CTA */
.tr .t-cta{position:relative;padding-top:160px}
.tr .t-cta-panel{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:120px 40px;border-radius:40px;background:#141516;text-align:center}
.tr .t-cta-mark{position:relative;width:120px;height:120px}
.tr .t-cta-glow{position:absolute;z-index:0;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(110,240,70,.9),rgba(38,175,34,.5) 50%,rgba(18,110,20,.16) 78%,transparent);opacity:.32}
.tr .t-cta-icon{position:relative;z-index:1;display:block;width:120px;height:120px;border-radius:22.4%;box-shadow:0 24px 48px -20px rgba(0,0,0,.8)}
.tr .t-cta-h{position:relative;z-index:1;margin-top:44px;font-size:clamp(44px,6.8vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.tr .t-cta-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;height:64px;margin-top:44px;padding:0 32px 0 26px;border-radius:999px;background:#1BEB41;color:#021A07;font-size:19px;line-height:24px;font-weight:700;white-space:nowrap;cursor:default}
.tr .t-cta-btn svg{margin-top:-3px}
.tr .t-cta-sub{position:relative;z-index:1;margin-top:18px;font-size:17px;line-height:24px;font-weight:500;color:rgba(242,244,241,.72)}

/* 5 · footer */
.tr .t-ft{position:relative;padding:96px 0 48px}
.tr .t-ft-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.tr .t-ft-brand svg{width:156px;height:30px}
.tr .t-ft-slogan{margin-top:10px;font-size:16px;line-height:20px;font-weight:500;color:rgba(242,244,241,.56)}
.tr .t-ft-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 28px;padding-top:4px}
.tr .t-ft-nav a{font-size:15px;line-height:22px;font-weight:500;color:rgba(242,244,241,.72);transition:color .2s}
.tr .t-ft-nav a:hover{color:#F2F4F1}
.tr .t-ft-nav .t-ft-mail{color:#1BEB41}
.tr .t-ft-nav .t-ft-mail:hover{color:#7CF593}
.tr .t-ft-bot{display:flex;justify-content:space-between;gap:16px;margin-top:64px;font-size:13px;line-height:18px;color:rgba(242,244,241,.44)}

@media (max-width:1079px){
  .tr .t-s1-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tr .t-s1-share{height:470px;margin-top:32px}
  .tr .t-wk,.tr .t-wf{min-height:360px}
  .tr .t-pv-stage{display:flex;flex-direction:column;height:auto;gap:48px;margin-top:56px}
  .tr .t-pv-center{order:-1;min-height:612px}
  .tr .t-pv-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .tr .t-pv-left .t-pt{flex-direction:row;text-align:left}
  .tr .t-faq-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .tr .t-faq-side{position:static}
  .tr .t-faq-list{min-height:0}
}
@media (max-width:639px){
  .tr .t-wrap{padding:0 20px}
  .tr .t-sec,.tr .t-cta{padding-top:96px}
  .tr .t-s1-num{gap:16px}
  .tr .t-s1-unit{gap:10px;padding-bottom:16px}
  .tr .t-s1-unit svg{width:36px;height:36px}
  .tr .t-s1-lead{margin-top:24px}
  .tr .t-s1-share{height:500px;border-radius:28px}
  .tr .t-share-seg{display:none}
  .tr .t-share-anim{left:0;right:0;top:24px;width:270px;height:338px;margin:0 auto}
  .tr .t-sc{transform:scale(.5)}
  .tr .t-share-cap{left:20px;right:20px;bottom:22px;width:auto;display:flex;align-items:center;gap:14px}
  .tr .t-share-cap h3{margin-top:0}
  .tr .t-wk,.tr .t-wf{min-height:0;gap:24px;padding:22px 20px}
  .tr .t-cstat .t-doto{font-size:34px;line-height:36px}
  .tr .t-wk-grid{grid-template-columns:16px minmax(0,1fr)}
  .tr .t-dot{width:22px;height:22px}
  .tr .t-wf-grid{gap:5px}
  .tr .t-cell{border-radius:7px}
  .tr .t-trio{gap:10px}
  .tr .t-trio .t-doto{font-size:26px;line-height:28px}
  .tr .t-trio p{align-items:flex-start}
  .tr .t-trio i{margin-top:4px}
  .tr .t-pv-stage{gap:32px}
  .tr .t-pv-center{min-height:504px}
  .tr .t-pv-box{width:244px;height:504px}
  .tr .t-pv-phone{transform:scale(.8243)}
  .tr .t-pv-col{grid-template-columns:minmax(0,1fr);gap:28px}
  .tr .t-pv-no{margin-top:40px}
  .tr .t-faq-btn{min-height:68px;padding:14px 14px 14px 20px;font-size:17px;line-height:24px}
  .tr .t-faq-a{padding:0 20px 22px 20px;font-size:16px;line-height:24px}
  .tr .t-cta-panel{padding:72px 20px 64px;border-radius:28px}
  .tr .t-cta-h{margin-top:36px}
  .tr .t-cta-btn{height:56px;margin-top:36px;padding:0 24px 0 20px;font-size:17px}
  .tr .t-ft{padding:72px 0 40px}
  .tr .t-ft-top{flex-direction:column;gap:32px}
  .tr .t-ft-nav{justify-content:flex-start;gap:12px 22px}
  .tr .t-ft-bot{flex-direction:column;gap:6px;margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .tr *{animation:none!important;transition:none!important}
}