/* ==========================================================================
   Bestway Football — emerald on deep green. One committed dark world.
   ========================================================================== */
:root{
  --void:#050F0A;
  --bg:#07170E;
  --bg2:#0A2014;
  --panel:#0C2718;
  --panel2:#103020;
  --line:rgba(141,243,182,.14);
  --line2:rgba(141,243,182,.075);
  --white:#F1F7F3;
  --grey:#9CB6A7;
  --grey2:#688476;
  --mint:#8DF3B6;
  --emerald:#33C177;
  --emerald2:#25AE68;
  --deep:#0C7B45;
  --maxw:1300px;
  --gut:clamp(20px,4vw,52px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Safety net: nothing in the design should overflow sideways, but a
   sticky-header layout with several flex rows is one stray element away from
   a horizontal scrollbar nobody intended. */
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;color:var(--white);background:var(--bg);
  background-image:
    radial-gradient(70% 46% at 76% -6%,rgba(51,193,119,.16),transparent 66%),
    radial-gradient(56% 40% at 4% 96%,rgba(141,243,182,.07),transparent 70%);
  background-attachment:fixed;
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.68;font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--emerald);color:var(--void)}
:focus-visible{outline:1px solid var(--mint);outline-offset:4px}

h1,h2,h3,h4{margin:0;font-family:Montserrat,Manrope,system-ui,sans-serif;font-weight:800;
  line-height:1.05;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,76px);line-height:1.02;letter-spacing:-.028em}
h2{font-size:clamp(26px,3.2vw,46px)}
h3{font-size:clamp(18px,1.4vw,21px);font-weight:700;letter-spacing:-.012em;line-height:1.24}
h4{font-size:16px;font-weight:700}
p{margin:0}

.wrap{width:min(var(--maxw),100% - (var(--gut) * 2));margin-inline:auto;position:relative;z-index:1}
.eyebrow{display:block;font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--emerald)}
.dim{color:var(--grey)}
.measure{max-width:60ch}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.62;color:var(--grey)}
.grad{background:linear-gradient(135deg,var(--mint),var(--emerald2));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:rgba(7,23,14,.86);
  backdrop-filter:blur(16px) saturate(130%);border-bottom:1px solid var(--line2)}
.hdr-in{display:flex;align-items:center;gap:30px;height:78px}
.logo{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.mk{height:36px;width:auto;flex:0 0 auto;overflow:visible;transition:filter .28s}
.logo:hover .mk{filter:brightness(1.15) drop-shadow(0 0 12px rgba(51,193,119,.45))}
.logo .wm{display:grid;gap:2px;line-height:1}
.logo b{font-family:Montserrat,sans-serif;font-size:19px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--white)}
.logo i{font-style:normal;font-family:Montserrat,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--emerald)}
@media(max-width:430px){.logo b{font-size:16px}.logo i{font-size:8.5px;letter-spacing:.3em}.mk{height:30px}}

.nav{display:flex;gap:26px;margin-inline-start:auto;align-items:center}
.nav a{font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey);padding-block:6px;position:relative;transition:color .22s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--mint),var(--emerald2));transition:right .32s cubic-bezier(.2,.7,.2,1)}
.nav a:hover{color:var(--white)}
.nav a:hover::after,.nav a.on::after{right:0}
.nav a.on{color:var(--white)}
.nav .btn{display:none}
.nav a.btn{color:var(--void)}

/* Переключатель языков — компактная капсула справа, перед кнопкой контакта.
   Один общий бордер вместо голых ссылок вразрядку: раньше EN/PL/RU висели в
   шапке без рамки, ни к чему не привязанные — теперь это один узнаваемый
   элемент управления, а не три случайных слова. */
.langs{display:flex;align-items:center;gap:1px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:20px;padding:3px;background:rgba(10,32,20,.4)}
.langs a{font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--grey2);padding:6px 10px;border-radius:16px;line-height:1;
  transition:color .2s,background .3s,transform .2s}
.langs a:hover{color:var(--white)}
.langs a:active{transform:scale(.94)}
.langs a.on{color:var(--void);background:linear-gradient(135deg,var(--mint),var(--emerald2))}
@media(max-width:520px){.langs a{padding:6px 8px;font-size:9.5px;letter-spacing:.06em}}

/* Кнопка меню: только на узких экранах, сразу перед капсулой языков — одна
   общая точка разлёта flex-пространства (margin-inline-start:auto здесь и
   больше нигде), иначе бургер и языки растаскивает в разные стороны. Три
   полоски плавно складываются в крестик при открытом меню. */
.burger{display:none;appearance:none;background:var(--panel);border:1px solid var(--line);color:var(--mint);
  width:40px;height:40px;cursor:pointer;margin-inline-start:auto;border-radius:11px;flex:0 0 auto;
  transition:background .25s,border-color .25s}
.burger:hover{border-color:var(--emerald)}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;margin:3.5px auto;border-radius:2px;
  transition:transform .3s cubic-bezier(.3,.7,.3,1),opacity .2s}
.burger[aria-expanded="true"]{background:rgba(51,193,119,.14);border-color:var(--emerald)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:1080px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg2);border-bottom:1px solid var(--line);padding:6px 0;margin:0}
  .nav.open{display:flex}
  .nav a{padding:15px var(--gut);font-size:12.5px}
  .nav a::after{display:none}
  .burger{display:block}
  .hdr>.wrap>.btn{display:none}
  .nav .btn{display:inline-flex;justify-content:center;margin:12px var(--gut) 16px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:1px solid transparent;
  background:linear-gradient(135deg,var(--mint),var(--emerald2));color:#04150C;
  font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:14px 26px;border-radius:10px;
  transition:box-shadow .28s,transform .28s,filter .28s}
.btn:hover{box-shadow:0 8px 30px rgba(51,193,119,.32);filter:brightness(1.06)}
.btn.line{background:transparent;color:var(--white);border-color:var(--line)}
.btn.line:hover{border-color:var(--emerald);box-shadow:none;background:rgba(51,193,119,.07)}
.btn.sm{padding:10px 18px;font-size:10px}
.btn .ar{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover .ar{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-family:Montserrat,sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);
  border-bottom:1px solid var(--line);padding-bottom:6px;transition:gap .25s,border-color .25s}
.tlink:hover{gap:15px;border-color:var(--emerald)}

/* ---------- sections ---------- */
main{position:relative;z-index:1}
.sec{padding-block:clamp(58px,7.4vw,120px);border-top:1px solid var(--line2)}
.sec.flush{border-top:0}
.sec.tint{background:rgba(10,32,20,.6)}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px)}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:26px}}
.split .hd{position:sticky;top:112px;align-self:start}
@media(max-width:900px){.split .hd{position:static}}
.hd .eyebrow{margin-bottom:18px}
.stack{display:grid;gap:22px}
.sec-intro{margin-bottom:clamp(28px,4vw,54px)}
.sec-intro h2{margin-top:15px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;text-align:center;border-top:0;
  padding-block:clamp(56px,7.4vw,110px) clamp(48px,6vw,92px)}
.hero::before{content:"";position:absolute;left:50%;top:-32%;width:min(1100px,120vw);height:760px;
  translate:-50% 0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(51,193,119,.22),transparent 68%)}
.lock{display:grid;justify-items:center;gap:20px;margin-bottom:clamp(26px,3.2vw,42px)}
.lock .mk{height:clamp(76px,8.6vw,116px);filter:drop-shadow(0 10px 34px rgba(20,150,88,.45))}
.lock .wm{display:grid;justify-items:center;gap:7px}
.lock b{font-family:Montserrat,sans-serif;font-size:clamp(30px,4.4vw,58px);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--white)}
.lock i{font-style:normal;font-family:Montserrat,sans-serif;font-size:clamp(12px,1.5vw,19px);
  font-weight:600;letter-spacing:.52em;text-transform:uppercase;color:var(--emerald);
  line-height:1;padding-left:.52em}
.tagline{font-family:Montserrat,sans-serif;font-size:clamp(10px,1.1vw,13px);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--grey)}
.hero h1{max-width:17ch;margin:clamp(22px,2.6vw,34px) auto 0}
.hero-sub{max-width:60ch;margin:clamp(20px,2.2vw,28px) auto 0;color:var(--grey);
  font-size:clamp(16.5px,1.4vw,19px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.2vw,42px);justify-content:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  margin-top:clamp(26px,3vw,40px);font-family:Montserrat,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--grey2)}

/* ---------- twelve service tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line2);
  border:1px solid var(--line2);border-radius:14px;overflow:hidden}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--bg);padding:30px 18px 26px;display:grid;justify-items:center;gap:11px;
  text-align:center;align-content:start;transition:background .3s}
.tile:hover{background:var(--panel)}
.ic{width:34px;height:34px;display:block;transition:transform .3s}
.tile:hover .ic{transform:translateY(-3px)}
.tile .tt{font-family:Montserrat,sans-serif;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white)}
.tile .ts{font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey2);line-height:1.75}
.tile:hover .ts{color:var(--grey)}

/* ---------- contact rail ---------- */
.rail{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.rail span,.rail a{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:border-color .28s,background .28s}
.rail a:hover{border-color:var(--emerald);background:rgba(51,193,119,.08)}
.rail .ic{width:21px;height:21px}

/* ---------- audience router ---------- */
.router{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line2);
  border:1px solid var(--line2);border-radius:14px;overflow:hidden}
@media(max-width:1080px){.router{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.router{grid-template-columns:1fr}}
.router a{background:var(--bg);padding:26px 22px 30px;display:grid;gap:9px;align-content:start;
  transition:background .3s}
.router a:hover{background:var(--panel)}
.router .n{font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  color:var(--emerald)}
.router .t{font-family:Montserrat,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.01em;
  color:var(--white)}
.router .d{font-size:14px;color:var(--grey2);line-height:1.56}
.router a:hover .d{color:var(--grey)}

/* ---------- inner hero ---------- */
.phero{padding-block:clamp(44px,5.4vw,86px) clamp(28px,3.4vw,50px);position:relative;overflow:hidden}
.phero h1{max-width:16ch;font-size:clamp(32px,4.6vw,66px)}
.phero .lead{margin-top:clamp(18px,2.2vw,28px);max-width:62ch}
.phero .eyebrow{margin-bottom:16px}
.phero .hero-cta{justify-content:flex-start;margin-top:clamp(24px,2.8vw,36px)}
.crumbs{display:flex;gap:10px;align-items:center;margin-bottom:22px;font-family:Montserrat,sans-serif;
  font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grey2)}
.crumbs a:hover{color:var(--mint)}

/* ---------- index ---------- */
.idx{border-top:1px solid var(--line2)}
.idx a{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.1fr) 24px;
  gap:clamp(16px,3vw,40px);padding:24px 0;border-bottom:1px solid var(--line2);align-items:start;
  transition:padding .3s,background .3s}
.idx a:hover{padding-inline:16px;background:var(--panel)}
.idx .n{font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  color:var(--emerald);padding-top:7px}
.idx .t{font-family:Montserrat,sans-serif;font-size:clamp(17px,1.5vw,22px);font-weight:700;
  letter-spacing:-.015em;color:var(--white);line-height:1.2}
.idx .d{color:var(--grey);font-size:15px;line-height:1.6}
.idx .ar{color:var(--emerald);padding-top:8px;justify-self:end;transition:transform .3s}
.idx a:hover .ar{transform:translateX(5px)}
@media(max-width:860px){.idx a{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .idx .d{grid-column:2}.idx .ar{display:none}}

/* ---------- clusters ---------- */
.clusters{display:grid;gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:14px;
  overflow:hidden}
.cluster{background:var(--bg);padding:clamp(24px,3vw,38px);display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3.4vw,52px)}
@media(max-width:820px){.cluster{grid-template-columns:1fr;gap:20px}}
.cluster .cn{display:block;font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--emerald);margin-bottom:12px}
.cluster p{color:var(--grey);font-size:15px;margin-top:12px;max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.tags span{font-size:12.5px;color:var(--grey);border:1px solid var(--line2);background:rgba(10,32,20,.7);
  padding:8px 13px;border-radius:8px;line-height:1.35;transition:border-color .25s,color .25s}
.tags span:hover{border-color:var(--emerald);color:var(--white)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line2);
  border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:var(--bg);padding:clamp(24px,2.7vw,34px);display:grid;gap:12px;align-content:start;
  transition:background .3s}
.card:hover{background:var(--panel)}
.card .cn{font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  color:var(--emerald)}
.card p{color:var(--grey);font-size:15px;line-height:1.62}

/* ---------- duotone photography slot ---------- */
.plate{position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:linear-gradient(152deg,rgba(51,193,119,.20),rgba(7,23,14,.9) 52%,rgba(12,123,69,.16));
  aspect-ratio:4/5;display:grid;place-items:center}
.plate.wide{aspect-ratio:16/9}
.plate::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(141,243,182,.05) 0 2px,transparent 2px 9px);
  opacity:.5}
.plate .cap{position:relative;z-index:1;font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--grey2);text-align:center;padding:22px;
  line-height:2.1}

/* ---------- note ---------- */
.note{border:1px solid var(--line2);border-left:2px solid var(--emerald);border-radius:0 12px 12px 0;
  padding:22px 26px;display:grid;gap:9px;background:rgba(10,32,20,.55)}
.note .nl{font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--emerald)}
.note p{font-size:14.5px;line-height:1.68;color:var(--grey);max-width:80ch}

/* ---------- statement + stacked words ---------- */
.statement{font-family:Montserrat,sans-serif;font-size:clamp(24px,3vw,44px);font-weight:800;
  letter-spacing:-.025em;line-height:1.12;max-width:21ch;text-wrap:balance}
.words{display:grid;gap:4px;font-family:Montserrat,sans-serif;font-size:clamp(14px,1.7vw,22px);
  font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--white)}
.words span:nth-child(even){color:var(--emerald)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{cursor:pointer;list-style:none;padding:23px 0;display:grid;
  grid-template-columns:minmax(0,1fr) 24px;gap:20px;align-items:baseline;
  font-family:Montserrat,sans-serif;font-size:clamp(16px,1.35vw,20px);font-weight:700;
  letter-spacing:-.015em;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:Montserrat,sans-serif;font-size:17px;color:var(--emerald);
  justify-self:end}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--mint)}
.faq .ans{padding:0 0 25px;color:var(--grey);font-size:15.5px;max-width:76ch;line-height:1.72}

/* ---------- form ---------- */
.form{display:grid;gap:17px}
.form>button[type=submit]{justify-self:start}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media(max-width:620px){.f2{grid-template-columns:1fr}}
label{display:grid;gap:7px}
label>span{font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey2)}
input,select,textarea{font-family:Manrope,sans-serif;font-size:15.5px;color:var(--white);
  background:rgba(10,32,20,.6);border:1px solid var(--line2);border-radius:10px;padding:13px 15px;
  width:100%;transition:border-color .25s}
select option{background:var(--panel);color:var(--white)}
textarea{resize:vertical;min-height:100px}
input:focus,select:focus,textarea:focus{border-color:var(--emerald);outline:none}
#formnote{display:none;border:1px solid var(--emerald);border-radius:10px;padding:14px 18px;
  font-size:15px;background:rgba(51,193,119,.09)}
#formnote.on{display:block}

/* ---------- closing band ---------- */
.band{position:relative;overflow:hidden;border-top:1px solid var(--line2);
  padding-block:clamp(52px,6.4vw,104px)}
.band::before{content:"";position:absolute;left:50%;top:-60%;width:min(900px,110vw);height:600px;
  translate:-50% 0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(51,193,119,.18),transparent 68%)}
.band .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end}
@media(max-width:820px){.band .in{grid-template-columns:1fr;align-items:start}}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--void);padding-block:clamp(46px,5.6vw,78px) 30px}
.fmap{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,56px)}
@media(max-width:900px){.fmap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fmap{grid-template-columns:1fr}}
.fcol{display:grid;gap:11px;align-content:start}
.fcol .fh{font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--emerald);margin-bottom:4px}
.fcol a{font-size:15px;color:var(--grey);transition:color .2s}
.fcol a:hover{color:var(--white)}
.flock{display:grid;gap:18px;justify-items:start}
.flock .dom{font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mint);border-bottom:1px solid var(--line);padding-bottom:6px}
.fbar{margin-top:clamp(34px,4.6vw,58px);padding-top:24px;border-top:1px solid var(--line2);
  display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:baseline;
  font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey2)}
.fbar a:hover{color:var(--white)}
.fdisc{color:var(--grey2);font-family:Manrope,sans-serif;font-size:13px;line-height:1.75;max-width:92ch;
  margin-top:22px;letter-spacing:0;text-transform:none;font-weight:400}

/* ---------- utilities ---------- */
.rule{height:1px;background:var(--line2);border:0}
.pad-t{padding-top:clamp(26px,3.2vw,44px)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vw,48px)}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:18px 1fr;gap:14px;color:var(--grey);font-size:15.5px}
.list li::before{content:"";width:7px;height:7px;margin-top:9px;border-radius:2px;
  background:linear-gradient(135deg,var(--mint),var(--emerald2))}

/* ---------- motion ---------- */
/* The mark's light sweep, on a shorter, more frequent cycle than a first
   restrained pass used — it needs to actually be seen, not just exist. */
.shine{animation:bwf-shine 3.4s cubic-bezier(.3,.1,.2,1) infinite}
@keyframes bwf-shine{
  0%{transform:translateX(-6px);opacity:0}
  8%{opacity:1}
  46%{transform:translateX(150px);opacity:0}
  100%{transform:translateX(150px);opacity:0}
}

/* Hero content rises in on load in a visible cascade — each direct child of
   the hero/page-hero wrap a beat behind the last — rather than the whole
   block moving as one rigid unit, which barely reads as motion at all. */
.hero .wrap>*,.phero .wrap>*{animation:bwf-rise .8s cubic-bezier(.16,.8,.24,1) both}
.hero .wrap>*:nth-child(1),.phero .wrap>*:nth-child(1){animation-delay:.02s}
.hero .wrap>*:nth-child(2),.phero .wrap>*:nth-child(2){animation-delay:.12s}
.hero .wrap>*:nth-child(3),.phero .wrap>*:nth-child(3){animation-delay:.22s}
.hero .wrap>*:nth-child(4),.phero .wrap>*:nth-child(4){animation-delay:.32s}
.hero .wrap>*:nth-child(5),.phero .wrap>*:nth-child(5){animation-delay:.42s}
.hero .wrap>*:nth-child(6){animation-delay:.52s}
@keyframes bwf-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Below-the-fold content rises into place as it's scrolled to. JS adds
   .pending only where it can also observe and reveal — so with JS disabled,
   or before it runs, nothing sits waiting on a script that may never arrive.
   Grid children (tiles, cards, cluster rows, index rows, FAQ entries) reveal
   individually with a per-item delay set inline by JS, so a section cascades
   in piece by piece instead of arriving as one flat block. */
/* !important on transition only: .pending is never removed once .in is
   added, so it stays the active rule for the pending→in change — and grid
   items this applies to (.tile, .card, .cluster, .idx a) each carry their
   own transition for background/transform on hover, at the same .0,0,1,0.
   specificity as this two-class selector would only just barely beat.
   Winning outright, rather than by source-order luck, is the point. */
.reveal.pending{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1) !important}
.reveal.in{opacity:1;transform:none}

.tile,.card{transition:background .3s,transform .3s,box-shadow .3s}
.tile:hover,.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.cluster{transition:background .3s,transform .3s}
.cluster:hover{background:var(--panel);transform:translateY(-2px)}
.idx a,.faq summary{transition:background .25s,transform .2s}
.idx a:hover{transform:translateX(4px)}

/* A slow breathing glow on primary calls to action — the one piece of
   constant, idle motion on the page, so a reader who never scrolls or
   hovers still sees that something here is alive. Paused on hover so it
   doesn't fight the hover glow that already lands there. */
@keyframes bwf-pulse{
  0%,100%{box-shadow:0 0 0 rgba(51,193,119,0)}
  50%{box-shadow:0 12px 36px rgba(51,193,119,.4)}
}
.btn:not(.sm):not(.line){animation:bwf-pulse 3.2s ease-in-out infinite}
.btn:not(.sm):not(.line):hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal.pending{opacity:1;transform:none}
}