/* T824b round 2: the public 95 Bulls homepage, its own layout only. design.css and shell.css (the 95 Bulls layer)
   load first and carry the colour tokens, Poppins, the buttons and the focus ring (agency/back-office/DESIGN.md); this
   file adds no colour, only a type scale, a spacing rhythm and the page's layout.
   Type: a 1.25 scale on an 18 px body (16 px on a phone). Space: an 8 px rhythm. Sections alternate in weight: white,
   the light surface, white, the accent-soft band. Motion: a short rise on load, a fade and rise as a block scrolls in
   (CSS scroll timelines, no script; the block is still before it reaches the middle of the screen, so text never moves
   while it is read), a soft lift on hover; prefers-reduced-motion turns all of it off. The brand colours stay
   decoration: lines, the glyphs, the outline symbol. */
.home{
  --t-xs:13px;--t-sm:15px;--t-md:18px;--t-lg:20px;--t-xl:25px;--t-2xl:31px;--t-3xl:39px;--t-4xl:49px;
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;--s-8:128px;
  --gutter:32px;--band:var(--s-8);
  --brand-line:linear-gradient(90deg,var(--brand-magenta),var(--brand-orange) 50%,var(--brand-teal));
  --brand-line-v:linear-gradient(180deg,var(--brand-magenta),var(--brand-orange) 50%,var(--brand-teal));
  background:var(--bg);font-size:var(--t-md);line-height:1.6;color:var(--text)
}
.home main:not(.notfound){max-width:none;margin:0;padding:0}
.home h1,.home h2,.home h3{font-family:var(--head);color:var(--text);letter-spacing:-.01em}
.home h2{font-size:clamp(var(--t-2xl),3.6vw,var(--t-4xl));font-weight:600;line-height:1.15;margin:0 0 var(--s-3);max-width:24ch}
.home h3{font-size:var(--t-lg);font-weight:600;line-height:1.3;margin:0 0 var(--s-1)}
:where(.home) p{margin:0 0 var(--s-2)}   /* the lowest weight, so each part's own margin wins */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:var(--s-2);top:-80px;z-index:20;background:var(--surface);padding:0 var(--s-2);min-height:44px;display:inline-flex;align-items:center;border-radius:var(--r-sm)}
.skip:focus{top:var(--s-1)}
.eyebrow{display:flex;align-items:center;gap:var(--s-1);font-family:var(--head);font-weight:600;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s-2)}
.eyebrow::before{content:"";width:24px;height:3px;border-radius:2px;background:var(--brand-line)}
.section-lead{font-size:var(--t-lg);color:var(--text-2);max-width:40ch}

/* the top bar */
.topbar{position:sticky;top:0;z-index:10;background:var(--surface)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand-line)}
.topbar-in{display:flex;align-items:center;gap:var(--s-1);min-height:72px}
.home-brand{display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;color:var(--text);text-decoration:none;font-family:var(--head);font-weight:600;font-size:var(--t-lg)}
.home-brand img{height:29px;width:auto;display:block}
.topnav{display:flex;gap:4px;margin-left:auto}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2);border-radius:var(--r-sm);color:var(--text-2);text-decoration:none;font-family:var(--head);font-weight:500;font-size:var(--t-sm)}
.topnav a:hover{color:var(--text);background:var(--surface-2)}
.topbar .btn{margin-left:var(--s-1)}

/* the hero */
.hero{position:relative;overflow:hidden;padding:var(--s-7) 0 var(--s-8)}
.hero-outline{position:absolute;top:24px;right:-90px;width:min(620px,52vw);height:auto;opacity:.9;pointer-events:none}
.hero-in{position:relative}
.home h1{font-size:clamp(40px,6.4vw,78px);font-weight:600;line-height:1.04;letter-spacing:-.025em;margin:0 0 var(--s-3);max-width:13ch}
.mark-line{background:var(--brand-line) left 92% / 100% .12em no-repeat;padding-bottom:.04em}
.hero-lead{font-size:clamp(var(--t-lg),2vw,var(--t-xl));line-height:1.45;color:var(--text-2);max-width:34ch;margin:0 0 var(--s-4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-6)}
.film{margin:0}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.film-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--brand-line)}
.film-frame img,.film-frame iframe{display:block;width:100%;height:100%;border:0;object-fit:cover}
.film-play{position:absolute;inset:0;display:block;color:var(--text)}
.film-play:focus-visible{outline-offset:-6px}
/* the play control: a white pill in the lower left, clear of the logo, the triangle in the typography blue */
.play{position:absolute;left:var(--s-3);bottom:var(--s-3);display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 18px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-2);font-family:var(--head);font-weight:600;font-size:var(--t-sm);color:var(--text);transition:transform .2s ease,box-shadow .2s ease}
.play::before{content:"";flex:0 0 auto;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--text)}
.film-play:hover .play,.film-play:focus-visible .play{background:var(--surface-2)}
.film figcaption{margin-top:var(--s-2);font-family:var(--head);font-weight:500;font-size:var(--t-sm);color:var(--text-3)}

/* the bands, alternating in weight */
.band{padding:var(--band) 0}
.band.tint{background:var(--surface-2)}
.band.strong{background:var(--accent-soft)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:var(--s-4)}
.card p{color:var(--text-2);margin:0}

/* the story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-5)}
.timeline{list-style:none;margin:0;padding:0 0 0 var(--s-4);position:relative}
.timeline::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--brand-line-v)}
.timeline li{position:relative;padding-bottom:var(--s-4)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--s-4) - 5px);top:8px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.timeline .when{display:block;font-family:var(--head);font-weight:600;font-size:var(--t-sm);color:var(--accent);margin-bottom:4px}
.timeline p{margin:0}
.timeline strong{font-weight:600;color:var(--text)}
.statement{position:relative;font-family:var(--head);font-weight:500;font-size:clamp(var(--t-xl),2.4vw,var(--t-2xl));line-height:1.3;color:var(--text);padding-left:var(--s-3);margin:0 0 var(--s-4)}
.statement::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:2px;background:var(--brand-line-v)}
.prose p{color:var(--text-2)}
.values{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.values .card{display:flex;align-items:center;gap:var(--s-3)}
.values h3{margin:0}
/* the brand guide's iconography: the orange triangle, the teal square, the magenta circle */
.glyph{position:relative;flex:0 0 auto;width:60px;height:52px;background:linear-gradient(to bottom right,var(--brand-orange) 50%,transparent 50%) 0 2px / 22px 22px no-repeat}
.glyph::before{content:"";position:absolute;left:8px;bottom:0;width:32px;height:32px;background:var(--brand-teal)}
.glyph::after{content:"";position:absolute;right:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--brand-magenta)}
.values li:nth-child(2) .glyph::before{background:var(--brand-magenta)}
.values li:nth-child(2) .glyph::after{background:var(--brand-teal)}
.values li:nth-child(3) .glyph{background-image:linear-gradient(to bottom right,var(--brand-magenta) 50%,transparent 50%)}
.values li:nth-child(3) .glyph::after{background:var(--brand-orange)}

/* the founder */
.founder{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
/* the portrait beside the name and the numbers; the story's timeline under them, in line with the name */
.founder-head{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s-5);align-items:center}
.portrait{display:block;width:240px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:24px;box-shadow:var(--shadow-2)}
.founder > .timeline{margin-left:calc(240px + var(--s-5));max-width:760px}
.stats-cap{font-size:var(--t-sm);color:var(--text-3);margin:var(--s-3) 0 var(--s-2)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin:0}
@media (min-width:1280px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}   /* four in a row only where 500,000+ fits */
.stats div{display:flex;flex-direction:column-reverse;gap:4px;background:var(--surface-2);border-radius:16px;padding:20px;min-width:0}
.stats dd{margin:0;font-family:var(--head);font-weight:600;font-size:clamp(28px,2.2vw,34px);line-height:1.1;color:var(--text);letter-spacing:-.02em}
.stats dt{font-size:var(--t-sm);color:var(--text-2)}
.founder .timeline p{color:var(--text-2)}

/* the software */
.steps{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.steps .card{position:relative;overflow:hidden;padding:var(--s-5) var(--s-4) var(--s-4)}
.steps .card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--brand-line)}
.num{display:block;font-family:var(--head);font-weight:600;font-size:var(--t-4xl);line-height:1;color:var(--accent);margin-bottom:var(--s-3);letter-spacing:-.02em}

/* the connectors: every mark at one optical size (a glyph at 32 px, a mark on its own square at 30 px) */
.logos{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-2)}
.logos li{display:flex;align-items:center;gap:var(--s-2);min-height:72px;padding:0 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;font-family:var(--head);font-weight:500;font-size:var(--t-sm);line-height:1.25;color:var(--text);min-width:0}
.logos img{flex:0 0 auto;width:32px;height:32px;object-fit:contain}
.logos img.tile{width:30px;height:30px;margin:1px;border-radius:8px}
.logos img.wide{transform:scale(1.5)}   /* WooCommerce's mark is a wordmark inside a square box */
.note{color:var(--text-3);font-size:var(--t-xs);margin:var(--s-3) 0 0}

/* the brands: each logo at the same visual area, not the same height */
.brands{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5) var(--s-7)}
.brands img{display:block;width:auto;max-width:100%}
.b-sf{height:84px}.b-bp{height:60px}.b-rc{height:41px}

/* what is inside */
.functions{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.functions .card{position:relative}
.functions .card::before{content:"";position:absolute;left:var(--s-4);top:-2px;width:40px;height:3px;border-radius:2px;background:var(--brand-line)}

/* the closing call */
.band.cta{background:var(--accent-soft);padding:var(--s-7) 0}
.cta-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-in img{height:45px;width:auto;margin-bottom:var(--s-3)}
.cta-in h2{margin:0 0 var(--s-1);max-width:none}
.cta-in .section-lead{margin:0 0 var(--s-4)}

/* the footer */
.foot{border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:96px}
.foot-in p{margin:0;color:var(--text-3);font-size:var(--t-sm)}
.foot .home-brand img{height:23px}

/* the 404 page */
.notfound{min-height:70vh;display:flex;flex-direction:column;justify-content:center;max-width:600px;margin:0 auto;padding:var(--s-5) var(--gutter)}

/* hover: a soft shadow; the lift only where motion is welcome */
.card,.logos li{transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
.card:hover,.logos li:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}

@media (prefers-reduced-motion:no-preference){
  .card:hover,.logos li:hover{transform:translateY(-3px)}
  .film-play:hover .play,.film-play:focus-visible .play{transform:translateY(-2px)}
  .hero-in>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-in>:nth-child(2){animation-delay:.06s}
  .hero-in>:nth-child(3){animation-delay:.12s}
  .hero-in>:nth-child(4){animation-delay:.18s}
  .hero-in>:nth-child(5){animation-delay:.26s}
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (max-width:1000px){
  .story,.founder{grid-template-columns:1fr;gap:var(--s-5)}
  .founder-head{grid-template-columns:200px minmax(0,1fr);gap:var(--s-4)}
  .portrait{width:200px}
  .founder > .timeline{margin-left:0}
  .steps,.functions,.values{grid-template-columns:1fr}
  .topnav{display:none}
  .topbar .btn{margin-left:auto}
}
@media (max-width:600px){
  .home{--gutter:20px;--band:var(--s-7);font-size:16px}
  .topbar-in{min-height:64px}
  .hero{padding:var(--s-5) 0 var(--s-7)}
  .hero-outline{display:none}   /* behind the headline at a phone's width it costs legibility */
  .home h1{font-size:40px;max-width:11ch}
  .hero-lead{font-size:var(--t-md)}
  .hero-actions{margin-bottom:var(--s-5)}
  .hero-actions .btn{flex:1 1 100%}
  .film-frame{border-radius:16px}
  .play{left:12px;bottom:12px;min-height:44px;padding:0 16px 0 14px;gap:10px;font-size:14px}
  .home h2{font-size:28px}
  .section-lead{font-size:var(--t-md)}
  .card{padding:var(--s-3)}
  .steps .card{padding:var(--s-4) var(--s-3) var(--s-3)}
  .num{font-size:var(--t-3xl)}
  .statement{font-size:22px}
  .stats dd{font-size:24px}
  .stats div{padding:var(--s-2)}
  .founder-head{grid-template-columns:1fr;gap:var(--s-3)}
  .portrait{width:144px;border-radius:16px}
  .logos{grid-template-columns:1fr 1fr;gap:var(--s-1)}
  .logos li{min-height:64px;padding:0 12px;gap:10px;font-size:13px}
  .logos img{width:28px;height:28px}
  .logos img.tile{width:26px;height:26px}
  .brands{gap:var(--s-4) var(--s-5)}
  .b-sf{height:64px}.b-bp{height:46px}.b-rc{height:31px}
  .band.cta{padding:var(--s-6) 0}
  .foot-in{justify-content:flex-start;padding-top:var(--s-3);padding-bottom:var(--s-3)}
}
@media (max-width:359px){.logos{grid-template-columns:1fr}.stats dd{font-size:21px}.stats div{padding:12px}}   /* the smallest phones: one connector per row, the numbers a step smaller */