/* HYPER CUT — landing sections added for the launch: four steps, after-subscription support, launch offer, reviews, footer. */

/* ---------- four steps: a rail with numbered stops ---------- */
.rail{list-style:none;margin:0 0 64px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.rail::before{content:"";position:absolute;top:21px;inset-inline:22px calc(25% - 40px);height:2px;background:rgba(157,146,255,.22)}
/* a light running along the line from step 1 to step 4, in time with the rings */
.rail::after{content:"";position:absolute;top:21px;inset-inline:22px calc(25% - 40px);height:2px;pointer-events:none;
  background:linear-gradient(to left,transparent,#C9C3FF 50%,transparent) no-repeat;background-size:22% 100%;animation:railRun 3.2s cubic-bezier(.45,.05,.35,1) infinite}
[dir=ltr] .rail::after{animation-name:railRunL}
.rail li{position:relative;display:grid;gap:6px;justify-items:start}
.rail li:nth-child(2){--i:1}.rail li:nth-child(3){--i:2}.rail li:nth-child(4){--i:3}
/* every stop the same dark circle; two rings go out of it like a radar ping, one stop after the other */
.rail-n{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  background:#120A3A;border:1px solid rgba(157,146,255,.6);color:#fff;font:700 16px var(--f-mono);box-shadow:0 0 0 6px rgba(10,6,40,.9),0 0 18px -4px rgba(var(--accent-rgb),.7)}
.rail-n::before,.rail-n::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(157,146,255,.85);pointer-events:none;opacity:0;
  animation:railPing 3.2s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--i,0) * .55s)}
.rail-n::after{animation-delay:calc(var(--i,0) * .55s + .7s)}
@keyframes railPing{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(2.2);opacity:0}}
@keyframes railRun{0%{background-position:115% 0}75%,100%{background-position:-15% 0}}
@keyframes railRunL{0%{background-position:-15% 0}75%,100%{background-position:115% 0}}
.rail b{font-size:17px;color:#fff}
.rail span:not(.rail-n){color:var(--muted);font-size:14.5px;line-height:1.85}
.install-text h3{font-size:22px;color:#fff;margin-bottom:10px}
.install-text p{color:var(--text-2);font-size:16px;line-height:1.95;max-width:520px}
@media (max-width:900px){.rail{grid-template-columns:1fr 1fr;gap:28px 18px}.rail::before,.rail::after{display:none}}
@media (max-width:520px){.rail{grid-template-columns:1fr}}

/* ---------- after you subscribe ---------- */
.care{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.care-item{padding:28px 26px;border-radius:18px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(18,14,44,.92),rgba(14,12,28,.92));display:grid;gap:12px;align-content:start;position:relative;overflow:hidden}
.care-item::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(to left,var(--accent),transparent 70%)}
.care-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#0F0059;border:1px solid rgba(var(--accent-rgb),.6);color:var(--accent-hi)}
.care-ic svg{width:22px;height:22px}
.care-item h3{font-size:19px;color:#fff}
.care-item p{color:var(--text-2);font-size:15px;line-height:1.9}
.care-item ul{list-style:none;padding:12px 0 0;margin:4px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.care-item li{position:relative;padding-inline-start:20px;color:var(--muted);font-size:14px}
.care-item li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:10px;height:6px;border-inline-start:2px solid var(--accent-hi);border-bottom:2px solid var(--accent-hi);transform:rotate(-45deg)}
@media (max-width:900px){.care{grid-template-columns:1fr}}

/* ---------- launch offer ---------- */
.offer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px;padding:20px 24px;border-radius:16px;
  border:1px solid rgba(var(--accent-rgb),.55);background:linear-gradient(110deg,rgba(15,0,89,.75),rgba(30,22,112,.45) 60%,rgba(14,12,28,.7));position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:sweep 5s ease-in-out infinite}
.offer-txt{display:grid;gap:4px;position:relative}
.offer-txt b{font-size:18px;color:#fff}
.offer-txt span{color:var(--text-2);font-size:14.5px}
.offer-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;justify-self:start;margin-bottom:4px}
.tc{display:flex;align-items:flex-start;gap:6px;direction:ltr;position:relative}
.tc div{display:grid;justify-items:center;gap:4px}
.tc b{min-width:56px;height:52px;border-radius:10px;display:grid;place-items:center;background:#0B0820;border:1px solid var(--line-2);font:600 26px var(--f-mono);color:#fff}
.tc small{color:var(--muted);font-size:11.5px}
.tc i{font:600 24px var(--f-mono);color:var(--accent-hi);font-style:normal;line-height:52px}
.plan .was{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;min-height:22px}
.plan .was s{font:600 16px var(--f-mono);color:var(--faint);text-decoration-color:#E0716C;text-decoration-thickness:2px}
.plan .off{height:22px;padding:0 8px;border-radius:6px;background:rgba(69,212,131,.14);color:#8BE8B2;font-size:12px;font-weight:600;display:inline-flex;align-items:center}
@media (max-width:640px){.tc b{min-width:44px;height:44px;font-size:20px}.tc i{line-height:44px}}

/* ---------- reviews: voice notes look like audio clips on the timeline, quotes scroll sideways ---------- */
.voices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.voices:empty,.quotes:empty{display:none}
.voice{border-radius:14px;border:1px solid var(--line-2);background:rgba(14,12,28,.9);padding:14px;display:grid;gap:12px}
.voice-who{display:flex;align-items:center;gap:10px}
.avatar-img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#1B1832;border:1px solid var(--line-2);flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:700}
.voice-who b{display:block;font-size:15px;color:#fff}
.voice-who small{color:var(--muted);font-size:12.5px}
.clip-a{position:relative;display:flex;align-items:center;gap:10px;height:54px;padding:0 8px;border-radius:10px;background:#123B33;border:1px solid #2C8A72;direction:ltr;overflow:hidden}
.clip-a button{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:#fff;color:#0A0913;z-index:1}
.clip-a button svg{width:14px;height:14px}
.clip-a .wv{flex:1;display:flex;align-items:center;gap:2px;height:34px;z-index:1}
.clip-a .wv i{flex:1;border-radius:1px;background:rgba(59,191,151,.55)}
.clip-a .wv i.lit{background:#7CF0C8}
.clip-a time{font:500 11.5px var(--f-mono);color:#BFF5E2;z-index:1}
/* quotes: rows that keep sliding to the left and come round again; hover stops a row */
.quotes{display:grid;gap:16px;margin-inline:calc(var(--gutter) * -1);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.q-row{overflow:hidden;direction:ltr}
.q-track{display:flex;gap:16px;width:max-content;animation:qSlide var(--dur,40s) linear infinite}
.q-row:hover .q-track,.q-row:focus-within .q-track{animation-play-state:paused}
.q-track .quote{width:380px;flex:0 0 auto;direction:rtl}
[dir=ltr] .q-track .quote{direction:ltr}
@keyframes qSlide{to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.q-row{overflow-x:auto}.q-track{animation:none}.q-track .dup{display:none}}
.quote{border-radius:16px;border:1px solid var(--line-2);background:rgba(14,12,28,.9);padding:24px;transition:border-color .2s,background .2s;display:grid;gap:14px;align-content:start}
.quote p{color:var(--text-2);font-size:15.5px;line-height:1.95;position:relative;padding-top:18px}
.quote p::before{content:"\201D";position:absolute;top:-18px;inset-inline-start:-4px;font:700 54px/1 Georgia,serif;color:rgba(157,146,255,.35)}
.quote .stars{color:#F6C453;letter-spacing:2px;font-size:14px}
.quote:hover{border-color:rgba(var(--accent-rgb),.55);background:rgba(20,16,44,.95)}
@media (max-width:980px){.voices{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.q-track .quote{width:300px}}
@media (max-width:560px){.voices{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{margin-top:120px;padding:0 0 30px;border-top:0}
.foot-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 30px;margin-bottom:56px;border-radius:18px;
  border:1px solid rgba(var(--accent-rgb),.5);background:linear-gradient(110deg,rgba(15,0,89,.8),rgba(14,12,28,.85))}
.foot-cta b{display:block;font-size:20px;color:#fff}
.foot-cta span{color:var(--text-2);font-size:14.5px}
.foot .foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;padding-top:40px;border-top:1px solid var(--line)}
.foot-brand p{color:var(--muted);font-size:14.5px;line-height:1.9;margin-top:14px;max-width:330px}
.foot-col{display:grid;gap:10px;align-content:start}
.foot-col h4{font:600 15px var(--f-body);color:#fff;margin-bottom:4px}
.foot-col a{color:var(--muted);font-size:14.5px;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-contact a{display:grid;gap:2px}
.foot-contact a span{font-size:12.5px;color:var(--faint)}
.foot-contact a b{color:var(--text-2);font-weight:500;font-size:14.5px}
.foot-contact p{color:var(--muted);font-size:14px;line-height:1.8}
.socials{display:flex;gap:8px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--text-2);transition:all .2s}
.socials a:hover{border-color:var(--accent);color:#fff;background:rgba(var(--accent-rgb),.15)}
.socials svg{width:18px;height:18px}
@media (max-width:980px){.foot .foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- currency picker above the plans ---------- */
.cur-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}
.cur-bar label{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.cur-bar select.input{width:auto;min-width:200px;height:40px;font-size:14px}
.cur-note{color:var(--faint);font-size:13px}
.plan .egp{color:var(--faint);font-size:13px;margin-top:-8px}

/* ---------- reviews before the first one is published ---------- */
.voice.ghost{opacity:.35;border-style:dashed}
.voice.ghost .avatar-img{background:#24213A}
.voice.ghost .clip-a{background:#16232A;border-color:#2A4040}
.voice.ghost .wv i{background:rgba(120,140,140,.45)}
.play-ghost{width:36px;height:36px;border-radius:50%;background:#3A3F4A;flex:0 0 auto}
.invite{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:-6px;padding:22px 26px;border-radius:16px;
  border:1px solid rgba(var(--accent-rgb),.5);background:linear-gradient(110deg,rgba(15,0,89,.8),rgba(14,12,28,.85))}
.invite b{display:block;font-size:18px;color:#fff;margin-bottom:4px}
.invite span{color:var(--text-2);font-size:14.5px;line-height:1.8}

/* ---------- footer contact rows: one-color icons + the number ---------- */
.foot-contact .ct{display:flex;align-items:center;gap:10px;color:var(--text-2)}
.foot-contact .ct svg{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.foot-contact .ct b{font-weight:500;font-size:14.5px;color:var(--text-2)}
.foot-contact .ct:hover svg,.foot-contact .ct:hover b{color:#fff}

/* ---------- refund guarantee under the plans ---------- */
.guarantee{display:flex;align-items:center;gap:16px;margin-top:22px;padding:18px 22px;border-radius:16px;border:1px solid rgba(69,212,131,.35);background:linear-gradient(110deg,rgba(18,60,40,.45),rgba(14,12,28,.85))}
.guarantee .g-ic{width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;background:rgba(69,212,131,.12);border:1px solid rgba(69,212,131,.45);color:#8BE8B2}
.guarantee .g-ic svg{width:24px;height:24px}
.guarantee div{flex:1;display:grid;gap:4px}
.guarantee b{color:#fff;font-size:17px}
.guarantee span{color:var(--text-2);font-size:14.5px;line-height:1.8}
@media (max-width:640px){.guarantee{flex-wrap:wrap}}

/* pill tabs (carousel modes, /tools filter) */
.ptabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:rgba(14,12,28,.85);border:1px solid var(--line-2)}
.ptabs button{height:36px;padding:0 15px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.ptabs button:hover{color:#fff}
.ptabs button.on{background:rgba(15,0,89,.9);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.65)}