/* ============================================================
   Морковка — one-pager
   1. tokens   2. base   3. atoms   4. header   5. sections
   6. marquee  7. stack  8. plans   9. wall     10. faq/footer
   ============================================================ */

/* 1 · TOKENS ------------------------------------------------ */
:root{
  /* layout */
  --w: 880px;
  --gutter: 24px;

  /* space scale */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;
  --sec: 88px;                  /* vertical rhythm of a section */

  /* radii */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
  --r-pill: 250px;
  --r-squircle: 28%;

  /* type */
  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;   --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 16.5px;
  --fs-xl: 23px;   --fs-2xl: 30px;  --fs-3xl: 42px;
  --lh-tight: 1.14; --lh: 1.62;
  --tr-tight: -0.022em;

  /* motion */
  --e: cubic-bezier(.22,.7,.2,1);
  --t: .3s; --t-slow: .6s;

  /* color · dark (default) */
  --bg:        #0a0c0b;
  --surface:   #111513;
  --surface-2: #161b18;
  --surface-3: #1c2220;
  --text:      #e9efeb;
  --text-2:    #a9b4ae;
  --text-3:    #6f7b76;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);
  --accent:    #3ddc84;
  --accent-ink:#04140b;
  --accent-2:  #ff8a3d;
  --accent-soft: rgba(61,220,132,.10);
  --shadow-2: 0 18px 40px -18px rgba(0,0,0,.65);
  --glass:    rgba(16,20,18,.62);
  --grain-op: .035;
  --art-base: #0e1211;
}

:root[data-theme="light"]{
  --bg:        #f6f7f6;
  --surface:   #ffffff;
  --surface-2: #fafbfa;
  --surface-3: #f0f2f0;
  --text:      #0d1210;
  --text-2:    #56605b;
  --text-3:    #8a948f;
  --line:      rgba(10,20,15,.08);
  --line-2:    rgba(10,20,15,.14);
  --accent:    #12a95c;
  --accent-ink:#ffffff;
  --accent-2:  #e8681c;
  --accent-soft: rgba(18,169,92,.09);
  --shadow-2: 0 20px 44px -22px rgba(20,40,30,.22);
  --glass:    rgba(255,255,255,.68);
  --grain-op: .02;
  --art-base: #dfe4e1;
}

/* 2 · BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.js) {scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--fs-base)/var(--lh) var(--ff);
  font-feature-settings:"cv05" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color var(--t-slow) var(--e), color var(--t-slow) var(--e);
}
h1,h2,h3,p,figure,figcaption{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ambient background */
.page-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% -6%, var(--accent-soft), transparent 70%),
    radial-gradient(46% 30% at 88% 18%, rgba(255,138,61,.05), transparent 70%),
    radial-gradient(70% 50% at 12% 62%, rgba(61,220,132,.045), transparent 72%);
}
.page-grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
main,.footer{position:relative;z-index:2}

.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--center{text-align:center;display:flex;flex-direction:column;align-items:center}

/* 3 · ATOMS ------------------------------------------------- */
.h1{font-size:var(--fs-3xl);font-weight:600;line-height:var(--lh-tight);letter-spacing:var(--tr-tight)}
.h2{font-size:var(--fs-2xl);font-weight:600;line-height:1.2;letter-spacing:var(--tr-tight)}
.h3{font-size:var(--fs-xl);font-weight:550;line-height:1.25;letter-spacing:var(--tr-tight)}
.lede{max-width:60ch;margin-top:var(--sp-5);color:var(--text-2);font-size:var(--fs-md)}
.p{margin-top:var(--sp-3);color:var(--text-2)}
.sub{margin-top:var(--sp-3);color:var(--text-2);font-size:var(--fs-base);max-width:56ch}
.fineprint{margin-top:var(--sp-3);color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.002em}

.btn{
  --btn-h:44px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:var(--btn-h);padding:0 var(--sp-6);border-radius:var(--r-pill);
  font-size:var(--fs-base);font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--t) var(--e), background-color var(--t) var(--e),
             border-color var(--t) var(--e), box-shadow var(--t) var(--e), color var(--t) var(--e);
  will-change:transform;
}
.btn--lg{--btn-h:50px;padding:0 var(--sp-8);font-size:var(--fs-md)}
.btn--sm{--btn-h:34px;padding:0 var(--sp-4);font-size:var(--fs-sm)}
.btn:hover{transform:scale(1.018)}
.btn:active{transform:scale(.988)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.btn--primary{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 26px -12px rgba(61,220,132,.55);
  overflow:hidden;
}
.btn--primary::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--t) var(--e);
  background:radial-gradient(120px 70px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4), transparent 70%);
}
.btn--primary:hover::after{opacity:1}

.btn--ghost{
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
}
.btn--ghost:hover{background:var(--surface-3);border-color:var(--line-2)}

.icon-btn{
  display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-pill);
  color:var(--text-2);transition:color var(--t) var(--e),background-color var(--t) var(--e),transform var(--t) var(--e);
}
.icon-btn:hover{color:var(--text);background:var(--surface-2);transform:scale(1.05)}
.icon-btn svg{width:17px;height:17px}
.icon-btn__moon{display:none}
:root[data-theme="light"] .icon-btn__sun{display:none}
:root[data-theme="light"] .icon-btn__moon{display:block}

/* 4 · HEADER ------------------------------------------------ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:center;
  padding:var(--sp-4) var(--gutter);pointer-events:none;
}
.hdr__inner{
  pointer-events:auto;
  display:flex;align-items:center;gap:var(--sp-4);
  width:100%;max-width:var(--w);
  padding:var(--sp-2) var(--sp-3);
  border:1px solid transparent;border-radius:var(--r-pill);
  transition:max-width var(--t-slow) var(--e), padding var(--t-slow) var(--e),
             background-color var(--t-slow) var(--e), border-color var(--t-slow) var(--e),
             box-shadow var(--t-slow) var(--e), backdrop-filter var(--t-slow) var(--e);
}
.hdr.is-stuck .hdr__inner{
  max-width:calc(var(--w) - 96px);
  padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  background:var(--glass);
  border-color:var(--line);
  box-shadow:var(--shadow-2), 0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
}
.logo{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:550;letter-spacing:-.015em}
.logo__mark{display:grid;place-items:center;width:24px;height:24px;color:var(--accent-2)}
.logo__mark svg{width:22px;height:22px}
.logo__leaf{color:var(--accent)}
.logo__mark--sm{width:18px;height:18px}
.logo__mark--sm svg{width:17px;height:17px}
.logo__text{font-size:var(--fs-base)}
.logo:hover .logo__mark{transform:rotate(-8deg) scale(1.06)}
.logo__mark{transition:transform var(--t) var(--e)}

.nav{display:flex;align-items:center;gap:var(--sp-1);margin-inline:auto}
.nav__link{
  position:relative;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--text-2);
  transition:color var(--t) var(--e), background-color var(--t) var(--e);
}
.nav__link:hover{color:var(--text);background:var(--surface-2)}
.nav__link.is-active{color:var(--text)}
.nav__link.is-active::after{
  content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.hdr__side{display:flex;align-items:center;gap:var(--sp-2)}

/* 5 · SECTIONS ---------------------------------------------- */
.section{padding-block:var(--sec)}
.section--icon{padding-top:calc(var(--sec) + var(--sp-10));padding-bottom:0}
.section--hero{padding-top:var(--sp-10);padding-bottom:var(--sp-12)}
.section--start{padding-bottom:var(--sec)}
.section--start .btn{margin-top:var(--sp-6)}

.shead{max-width:var(--w)}
.shead .sub{margin-top:var(--sp-2)}
.shead--cta{display:flex;flex-direction:column;align-items:center;text-align:center}
.shead--cta .btn{margin-top:var(--sp-6)}
.shead + *{margin-top:var(--sp-10)}

/* app icon (squircle) */
.appicon{position:relative;width:112px;height:112px}
.appicon__glow{
  position:absolute;inset:-40%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(61,220,132,.22), transparent 70%);
  filter:blur(6px);
}
.appicon__body{
  position:relative;width:100%;height:100%;border-radius:var(--r-squircle);
  background:
    radial-gradient(120% 90% at 30% 0%, #223129, #101614 60%),
    linear-gradient(180deg,#16201b,#0c1110);
  border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 26px 50px -22px rgba(0,0,0,.8);
  display:grid;place-items:center;
  transition:box-shadow var(--t-slow) var(--e);
}
:root[data-theme="light"] .appicon__body{
  background:radial-gradient(120% 90% at 30% 0%, #ffffff, #eef1ee 60%);
  box-shadow:0 1px 0 #fff inset, var(--shadow-2);
}
.appicon__art{width:58%;height:58%}

/* hero social proof */
.hero__cta{margin-top:var(--sp-10);display:flex;flex-direction:column;align-items:center}
.social{
  margin-top:var(--sp-12);display:flex;align-items:center;justify-content:center;
  gap:var(--sp-5);flex-wrap:wrap;
}
.avatars{display:flex}
.avatar{
  width:30px;height:30px;border-radius:50%;margin-left:-9px;
  border:2px solid var(--bg);
  background:linear-gradient(140deg, hsl(var(--h1) 34% 48%), hsl(var(--h2) 40% 30%));
  display:grid;place-items:center;
  font-size:11px;font-weight:550;color:rgba(255,255,255,.9);
  transition:transform var(--t) var(--e);
}
.avatar:first-child{margin-left:0}
.avatars:hover .avatar{transform:translateY(-2px)}
.rating{display:flex;align-items:center;gap:var(--sp-2)}
.stars{display:flex;gap:2px;color:var(--accent-2)}
.stars svg{width:13px;height:13px}
.rating__num{font-weight:550;font-size:var(--fs-sm)}
.rating__meta{color:var(--text-3);font-size:var(--fs-xs)}

.ph{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
  color:var(--text-2);
  transition:transform var(--t) var(--e),border-color var(--t) var(--e),background-color var(--t) var(--e);
}
.ph:hover{transform:scale(1.02);border-color:var(--line-2);background:var(--surface-2)}
.ph__mark{color:var(--accent-2)}
.ph__mark svg{width:18px;height:18px}
.ph__text{display:flex;flex-direction:column;line-height:1.25;text-align:left;font-size:var(--fs-xs)}
.ph__text b{color:var(--text);font-weight:550;font-size:var(--fs-sm)}

/* 6 · MARQUEE ----------------------------------------------- */
.marquee{
  display:flex;flex-direction:column;gap:var(--sp-3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__row{overflow:hidden}
.marquee__track{display:flex;gap:var(--sp-3);width:max-content;will-change:transform}
.marquee__row[data-row="a"] .marquee__track{animation:slide-x 64s linear infinite}
.marquee__row[data-row="b"] .marquee__track{animation:slide-x 78s linear infinite reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.shot{
  position:relative;width:156px;flex:0 0 auto;aspect-ratio:3/4;
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);
  transition:transform var(--t) var(--e);
}
.shot:hover{transform:scale(1.025)}
.shot__cap{
  position:absolute;inset:auto var(--sp-2) var(--sp-2);
  padding:var(--sp-2);border-radius:var(--r-xs);
  background:rgba(8,10,9,.55);backdrop-filter:blur(8px);
  color:rgba(255,255,255,.92);font-size:11px;line-height:1.3;
  opacity:0;translate:0 6px;transition:opacity var(--t) var(--e),translate var(--t) var(--e);
}
.shot:hover .shot__cap{opacity:1;translate:0 0}

/* procedural "photo" */
.art{
  position:relative;overflow:hidden;background-color:var(--art-base);
  background-clip:padding-box;
  background-image:
    radial-gradient(115% 85% at 24% 10%, hsl(var(--h1) 44% 50% / .78), transparent 64%),
    radial-gradient(95% 72% at 84% 88%, hsl(var(--h2) 40% 32% / .8), transparent 68%),
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(0,0,0,.42));
}
.art::before{
  content:"";position:absolute;left:50%;top:58%;width:76%;aspect-ratio:1;
  translate:-50% -50%;border-radius:48% 52% 44% 56%;
  background:radial-gradient(50% 50% at 44% 34%, hsl(var(--h1) 26% 78% / .34), hsl(var(--h2) 42% 20% / .5) 72%);
  filter:blur(16px);
}
.art::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(115% 95% at 46% 32%, transparent 34%, rgba(0,0,0,.55));
  opacity:.55;mix-blend-mode:soft-light;
}
/* light theme keeps the frames saturated instead of washing them out */
:root[data-theme="light"] .art{
  background-image:
    radial-gradient(115% 85% at 24% 10%, hsl(var(--h1) 52% 56% / .92), transparent 66%),
    radial-gradient(95% 72% at 84% 88%, hsl(var(--h2) 46% 38% / .88), transparent 70%),
    linear-gradient(165deg, rgba(255,255,255,.12), rgba(0,0,0,.28));
}
:root[data-theme="light"] .art::before{
  background:radial-gradient(50% 50% at 44% 34%, hsl(var(--h1) 30% 60% / .3), hsl(var(--h2) 46% 26% / .5) 72%);
}
:root[data-theme="light"] .art::after{mix-blend-mode:multiply;opacity:.3}

.art[data-variant="2"]::before{border-radius:50% 50% 38% 62%;top:52%;width:86%}
.art[data-variant="3"]::before{border-radius:42% 58% 56% 44%;top:62%;width:70%}

/* features */
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.feat{
  position:relative;aspect-ratio:1;padding:var(--sp-5);
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  transition:transform var(--t) var(--e),border-color var(--t) var(--e),background-color var(--t) var(--e);
}
.feat:hover{transform:translateY(-3px) scale(1.012);border-color:var(--line-2)}
.feat__ic{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--accent);background:var(--accent-soft);
  transition:transform var(--t) var(--e);
}
.feat:hover .feat__ic{transform:scale(1.06) rotate(-3deg)}
.feat__ic svg{width:18px;height:18px}
.feat__t{font-size:var(--fs-md);font-weight:550;letter-spacing:-.015em}
.feat__d{margin-top:var(--sp-2);color:var(--text-2);font-size:var(--fs-sm);line-height:1.45}

/* 7 · STACK ------------------------------------------------- */
.stack{display:flex;flex-direction:column;gap:var(--sp-6)}
.scard{
  position:sticky;top:104px;
  display:grid;grid-template-columns:1fr 258px;gap:var(--sp-8);align-items:center;
  padding:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow-2);
  transform-origin:50% 0%;
  will-change:transform,opacity;
}
.scard__body .btn{margin-top:var(--sp-6)}
.scard__art{aspect-ratio:4/5;border-radius:var(--r-lg);border:1px solid var(--line)}

/* 8 · PLANS ------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.plan{
  position:relative;padding:var(--sp-6) var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  transition:transform var(--t) var(--e),border-color var(--t) var(--e);
}
.plan:hover{transform:translateY(-3px);border-color:var(--line-2)}
.plan.is-best{border-color:rgba(255,138,61,.28);background:linear-gradient(180deg,rgba(255,138,61,.06),var(--surface))}
.plan__badge{
  position:absolute;top:calc(var(--sp-4) * -0.7);left:var(--sp-5);
  padding:3px var(--sp-3);border-radius:var(--r-pill);
  background:var(--accent-2);color:#1b0c03;font-size:11px;font-weight:600;letter-spacing:.01em;
}
.plan__amount{display:flex;align-items:center;gap:var(--sp-2);color:var(--accent-2)}
.plan__amount svg{width:16px;height:16px}
.plan__amount span{color:var(--text);font-size:var(--fs-md);font-weight:550;letter-spacing:-.015em}
.plan__price{margin-top:var(--sp-4);font-size:var(--fs-xl);font-weight:600;letter-spacing:var(--tr-tight)}
.plan__price i{font-style:normal;font-size:var(--fs-sm);font-weight:450;color:var(--text-3)}
.plan__meta{margin-top:var(--sp-2);color:var(--text-3);font-size:var(--fs-sm)}
.plan__btn{margin-top:var(--sp-5);width:100%}
.plans__note{margin-top:var(--sp-5);color:var(--text-3);font-size:var(--fs-xs);text-align:center}

/* 9 · REVIEW WALL ------------------------------------------- */
.wall{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);
  max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter);
  height:520px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.wall__col{overflow:hidden}
.wall__track{display:flex;flex-direction:column;gap:var(--sp-3);will-change:transform}
.wall__col[data-col="0"] .wall__track{animation:slide-y 46s linear infinite}
.wall__col[data-col="1"] .wall__track{animation:slide-y 54s linear infinite reverse}
.wall__col[data-col="2"] .wall__track{animation:slide-y 50s linear infinite}
.wall__col[data-col="3"] .wall__track{animation:slide-y 60s linear infinite reverse}
.wall:hover .wall__track{animation-play-state:paused}
@keyframes slide-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}

.rev{
  padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
  transition:transform var(--t) var(--e),border-color var(--t) var(--e);
}
.rev:hover{transform:scale(1.02);border-color:var(--line-2)}
.rev__top{display:flex;align-items:center;gap:var(--sp-2)}
.rev__ava{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(140deg,hsl(var(--h1) 32% 46%),hsl(var(--h2) 38% 30%));
  display:grid;place-items:center;font-size:11px;font-weight:550;color:rgba(255,255,255,.92);
}
.rev__name{font-size:var(--fs-sm);font-weight:500;letter-spacing:-.01em}
.rev__stars{display:flex;gap:1.5px;margin-top:2px;color:var(--accent-2)}
.rev__stars svg{width:10px;height:10px}
.rev__text{margin-top:var(--sp-3);color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}

/* 10 · FAQ + FOOTER ---------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:center;gap:var(--sp-4);width:100%;
  padding:var(--sp-5) 0;text-align:left;
  font-size:var(--fs-md);font-weight:450;letter-spacing:-.012em;
  transition:color var(--t) var(--e);
}
.faq__q:hover{color:var(--accent)}
.faq__ic{
  position:relative;flex:0 0 auto;width:16px;height:16px;margin-left:auto;color:var(--text-3);
  transition:color var(--t) var(--e),transform var(--t-slow) var(--e);
}
.faq__ic::before,.faq__ic::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
}
.faq__ic::before{width:14px;height:1.5px;translate:-50% -50%}
.faq__ic::after{width:1.5px;height:14px;translate:-50% -50%;transition:opacity var(--t) var(--e)}
.faq__item.is-open .faq__ic{transform:rotate(180deg);color:var(--accent)}
.faq__item.is-open .faq__ic::after{opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--e)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden;min-height:0}
.faq__a p{padding-bottom:var(--sp-5);max-width:62ch;color:var(--text-2);font-size:var(--fs-base)}

.footer{border-top:1px solid var(--line);padding-block:var(--sp-8)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-3);font-size:var(--fs-sm)}
.footer__brand .logo__mark{color:var(--accent-2)}
.footer__nav{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.footer__nav a{color:var(--text-3);font-size:var(--fs-sm);transition:color var(--t) var(--e)}
.footer__nav a:hover{color:var(--text)}

/* reveal (JS-driven; visible by default) */
html.js [data-reveal]{opacity:0}

/* RESPONSIVE ------------------------------------------------ */
@media (max-width:760px){
  :root{--sec:76px;--fs-3xl:32px;--fs-2xl:25px;--fs-xl:20px;--gutter:18px}
  .nav{display:none}
  .hdr.is-stuck .hdr__inner{max-width:100%}
  .grid-6{grid-template-columns:repeat(2,1fr)}
  .scard{grid-template-columns:1fr;padding:var(--sp-6);top:84px}
  .scard__art{aspect-ratio:16/10;order:-1}
  .plans{grid-template-columns:1fr}
  .plan__badge{top:var(--sp-4);left:auto;right:var(--sp-5)}
  .wall{grid-template-columns:repeat(2,1fr);height:440px}
  .social{gap:var(--sp-4)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html.js [data-reveal]{opacity:1}
}