/* =========================================================================
BOTRIX -- DESIGN SYSTEM v19 (Premium Robotics)
Minimalist industrial design language. Electric Cyan on Deep Graphite.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');
:root {
/* Inherits base palette from design-system.css, but adds specific structural aliases */
--bg: var(--background);
--bg-alt: var(--surface-alt);
--text: var(--text-primary);
--ink: var(--background); /* Text color for inverted panels */
--muted: var(--text-muted);
--gray: var(--text-secondary);
--success: var(--c-success);
--warning: var(--c-warning);
--error: var(--c-error);
--error-text: #FF6B6B;
--success-text: #00E5FF;
--glass-bg: var(--surface);
--glass-bg-hover: var(--surface-alt);
--glass-bg-strong: #222222;
--glass-border: var(--border);
--glass-border-hover: var(--primary);
--glass-blur: 0px;
/* Typography */
--font-display: var(--font-sans);
--font-body: var(--font-sans);
/* Radius */
--radius-s: 0px;
--radius-m: 2px;
--radius-l: 4px;
--radius-round: var(--radius-m);
/* Shadows */
--shadow-card: none;
--shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.8);
--shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.9);
--container: 1400px;
/* Typography Scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
/* Form/Button Sizes */
--btn-h-sm: 32px;
--btn-h-md: 40px;
--btn-h-lg: 48px;
--input-h-md: 40px;
}
*{box-sizing:border-box;}
html{
overflow-x:hidden;
width:100%;
background:#060608 !important;
color-scheme:dark;
}
body{
margin:0;
font-family:var(--font-body);
color:var(--text);
background:#060608 !important;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
min-height:100vh;
position:relative;
padding-top:88px;
}
@media(max-width:1024px){body{padding-top:76px;}}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
font-family:var(--font-display);
color:var(--text);
line-height:1.1;
margin:0 0 0.5em;
font-weight:700;
letter-spacing:-0.03em;
text-transform: uppercase;
}
h1{font-size:clamp(2.5rem,4vw,3.5rem);font-weight:700;letter-spacing:-0.04em;}
.hero h1{font-size:clamp(3rem,6vw,5.5rem);font-weight:700;letter-spacing:-0.05em;line-height:1;margin-bottom:24px;};}
h2{font-size:clamp(1.7rem,3.2vw,2.7rem);}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-0.01em;}
p{margin:0 0 1em;color:var(--gray);}
.mono{font-family:var(--font-mono);}
/* .text-gradient used to fade text through three shades of the same acid
green. Kept as a no-op selector because several templates still carry the
class; it now simply renders as normal emphasis. */
.text-gradient{color:var(--primary);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;position:relative;z-index:1;}
@media(min-width:1025px){.container{padding:0 56px;}}
@media(min-width:1900px){:root{--container:1900px;}}
.section{padding:80px 0;}
.section-alt{background:var(--bg-alt);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);position:relative;}
/* `.section-glow-kit`, `.section-glow-iot` and `.section-glow-store` used to be three
separate wrappers here, each painting a 520px blurred radial blob in a ::before --
rose behind #kits, amber behind #iot, orange behind #store -- at blur(90px) and
opacity 0.5. Two of those three hues are not in the palette at all any more, but the
bigger problem is what they are: a soft-focus coloured orb bleeding out of a section
corner is the most reproduced decoration on the landing-page internet, and on this
homepage in particular they sat directly behind the 3D robot and washed it out.
`overflow:hidden` went with the blobs: it existed to clip them, and with nothing to
clip it only risked cutting off a child that wanted to overflow.
What was left was one rule doing `position:relative` under three names that all
promised a glow, on a site where a stray halo is the thing being hunted. The three
are now one honest class -- `.section-stack`, which is all it ever does: give the
section a stacking context so its .container can sit at z-index 1 above the fixed
3D canvas at z-index -1. index.php:286/337/380 carry it. */
.section-stack{position:relative;}
.section-stack .container{position:relative;z-index:1;}
.stats-band{padding:52px 0;background:var(--surface-2);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);position:relative;}
/* Was a 6px gold dot dead-centre of the band carrying
`box-shadow:0 0 16px 4px rgba(239,177,29,0.35)` -- a bare glowing point with
no meaning attached to it, floating between the four figures. */
.stats-band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;text-align:center;}
/* The figures were italic, and filled with a left-to-right gradient clipped to
the glyphs via `background-clip:text;color:transparent`. Gradient-filled
numerals are a signature of the same template family as the orbs above, and
the technique fails loudly: if the gradient does not paint, `color` is
transparent and the number is simply not there. Solid gold, upright. */
.stats-band-grid div strong{display:block;font-family:var(--font-display);font-size:2.2rem;font-weight:800;color:var(--primary);}
.stats-band-grid div span{font-size:0.85rem;color:var(--gray);letter-spacing:0.02em;}
@media(max-width:768px){.stats-band-grid{grid-template-columns:repeat(2,1fr);gap:32px 20px;}}
@media(min-width:1025px){.section{padding:100px 0;}}
/* Was gold, bold, ALL CAPS, with a 7px filled circle in front of it, on every
section of every page. The dot-plus-coloured-eyebrow pair is the most copied
landing-page motif there is, and it read as decoration rather than as a
label. Kept: mono and uppercase, which on a hardware site reads like a
datasheet section marker. Changed: muted instead of accent, so the heading
below it is the thing your eye lands on, and a short hairline rule in place
of the dot. */
.section-eyebrow{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;font-weight:600;}
.section-eyebrow::before{content:'';width:20px;height:1px;background:var(--border);flex-shrink:0;}
.section-head{max-width:640px;margin-bottom:48px;}
.text-center{text-align:center;margin-left:auto;margin-right:auto;}
/* Cards -- clean light editorial cards, subtle hairline border, soft shadow */
.glass-card,.pillar-card,.product-card,.form-card,.cart-summary,.leader-card,.stat-card,.admin-card,.empty-state,.faq-item{
background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-m);
box-shadow:var(--shadow-card);transition:transform 0.25s cubic-bezier(.2,.8,.2,1),box-shadow 0.25s ease,border-color 0.25s ease;
position:relative;
}
.glass-card:hover,.pillar-card:hover,.product-card:hover,.leader-card:hover,.stat-card:hover{
transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--glass-border-hover);
}
.glass-card{padding:32px;}
/* "Why Botrix" feature cards -- a larger icon with a tasteful hover lift,
scoped to .feature-card specifically rather than every .glass-card
(which is used broadly across the site in unrelated contexts). */
.feature-card{transition:transform 0.25s ease,box-shadow 0.25s ease;}
.feature-card:hover{transform:translateY(-4px);}
.feature-card-icon{
display:inline-block;font-size:2.2rem;line-height:1;margin-bottom:14px;
transition:transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.feature-card:hover .feature-card-icon{transform:scale(1.15) rotate(-4deg);}
@media(prefers-reduced-motion:reduce){
.feature-card,.feature-card-icon,.feature-card:hover,.feature-card:hover .feature-card-icon{transition:none;transform:none;}
}
/* Circular progress ring (e.g. learning path completion) -- animates
its fill from 0 to the real tracked percentage once scrolled into
view, driven by a data-percent attribute set from actual progress
data, not a decorative placeholder. */
.progress-ring-wrap{position:relative;width:100px;height:100px;flex-shrink:0;}
.progress-ring{width:100%;height:100%;transform:rotate(-90deg);}
.progress-ring-track{fill:none;stroke:var(--glass-border);stroke-width:8;}
.progress-ring-fill{
fill:none;stroke:var(--c-success);stroke-width:8;stroke-linecap:round;
stroke-dasharray:263.89;stroke-dashoffset:263.89;
transition:stroke-dashoffset 1.1s cubic-bezier(.25,.8,.25,1);
}
.progress-ring-label{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--text);
}
@media(prefers-reduced-motion:reduce){
.progress-ring-fill{transition:none;}
}
/* Buttons
Three things were wrong in this block after the palette moved to ENIG gold on
FR4 green, and all three were live on shipped pages:
1. `.btn-primary` was `color:#fff` over `var(--primary)`. That passed while
--primary was a dark orange; gold #C89B3C behind white text measures about
2.6:1, well under the 4.5:1 WCAG AA asks for. The ink #060D0B that
emods.css already uses for the hero CTA gives 7.7:1 on the same gold.
2. `--ink` used to be a near-black. It holds bone #EDE7D9 now, so
`.btn-buy-now` and `.btn-secondary:hover` were painting white text on a
near-white fill: the Buy Now button on every store-detail page was
readable only by its own shadow. This is the kind of break a palette swap
leaves behind when the token name stops describing the value.
3. The shadows were tints of rgba(228,61,18,...), the pre-redesign orange --
a hue that is not in the palette any more. scripts/deglow.mjs skipped them
because that tint is not in its TINT regex.
The 999px pill went too: --radius-m is 4px, and a stadium-shaped button is
the single most recognisable stock-template shape there is. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:0.92rem;padding:13px 26px;border-radius:var(--radius-m);border:none;cursor:pointer;transition:background 0.18s ease,border-color 0.18s ease,color 0.18s ease,transform 0.18s ease;white-space:nowrap;}
.btn-primary{background:var(--primary);color:var(--bg);}
.btn-primary:hover{background:var(--primary-hover);}
.btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--border);padding:11.5px 24px;}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--primary);color:var(--primary);}
.btn-buy-now{background:var(--ink);color:var(--bg);}
.btn-buy-now:hover{background:var(--primary);color:var(--bg);}
.btn-cart{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-cart:hover{border-color:var(--primary);color:var(--primary);}
/* WhatsApp brand green with white on it is 2:1. The logo lockup gets away with
that; a button with words in it does not. Ink on the same green is 9.9:1. */
.btn-whatsapp{background:#25D366;color:var(--bg);}
.btn-whatsapp:hover{background:#1FB855;}
.btn-share{background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px;font-size:0.82rem;}
.btn svg{width:17px;height:17px;flex-shrink:0;}
/* =========================================================================
NAVBAR -- minimal top bar, logo left / links right (matches reference)
========================================================================= */
.navbar-wrap{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;transform:none!important;z-index:300;background:var(--bg)!important;border-bottom:1px solid var(--glass-border);padding:0!important;box-shadow:none!important;}
.navbar{display:block;background:none;}
.navbar,.navbar-wrap>nav{width:100%;}
.nav-unified-island,.navbar-island{
display:flex!important;align-items:center!important;justify-content:space-between!important;
gap:20px;height:76px;
max-width:var(--container);margin:0 auto;padding:0 24px;
background:none!important;border:none!important;box-shadow:none!important;border-radius:0!important;
}
@media(min-width:1025px){.nav-unified-island,.navbar-island{padding:0 56px;}}
.brand,.nav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img,.nav-brand img{height:26px;width:auto;display:block;}
.nav-sep{width:1px;height:20px;background:var(--glass-border-hover);flex-shrink:0;margin:0 4px;}
.nav-sep:nth-of-type(1){display:none;} /* hide sep next to logo -- matches reference's plain spacing */
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex:1;justify-content:flex-end;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links>li{position:relative;flex-shrink:0;}
.nav-links>li>a{
font-weight:700;font-size:0.78rem;letter-spacing:0.09em;text-transform:uppercase;
padding:8px 14px;border-radius:var(--radius-m);display:inline-flex;align-items:center;gap:5px;
color:var(--text);cursor:pointer;background:none;border:none;font-family:var(--font-body);
transition:all 0.18s ease;white-space:nowrap;
}
.nav-links>li>a::before{content:'\2022';color:var(--primary);margin-right:7px;font-size:0.9em;}
.nav-links>li>a:hover{color:var(--primary);background:rgba(200, 155, 60,0.06);}
/* Dropdown nav parents (Store / Learn) */
.has-dropdown{position:relative;}
.nav-parent-link{position:relative;}
.nav-parent-link::after{content:'';display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:6px;margin-bottom:1px;transition:transform 0.18s ease;}
.has-dropdown:hover .nav-parent-link::after,.has-dropdown:focus-within .nav-parent-link::after{transform:rotate(-135deg);}
.dropdown-menu{
position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
min-width:220px;background:var(--surface);border:1.5px solid var(--glass-border-hover);
border-radius:var(--radius-m);box-shadow:var(--shadow-lift);padding:8px;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s ease;
z-index:310;
}
.has-dropdown.dropdown-open .dropdown-menu{
opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.dropdown-menu a{
display:block;padding:10px 14px;border-radius:10px;font-size:0.84rem;font-weight:600;
text-transform:none;letter-spacing:normal;color:var(--text);white-space:nowrap;
}
.dropdown-menu a::before{display:none;}
.dropdown-menu a:hover{background:var(--surface-2);color:var(--primary);}
.nav-mobile-only{display:none;}
.nav-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;transition:background 0.18s ease;color:var(--text);}
.icon-btn:hover{background:var(--surface-2);color:var(--primary);}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;}
/* Ink, not white: this is 0.6rem type on gold, the smallest text on the site,
and white on #C89B3C is 2.6:1. The 50% radius stays -- a count bubble is one
of the few things on the page that is genuinely a circle. */
.cart-badge,.wishlist-badge{position:absolute;top:0;right:0;background:var(--primary);color:var(--bg);font-size:0.6rem;font-weight:800;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);}
/* Wishlist heart button -- used on catalog cards, detail pages, and full-width variant */
.wishlist-form{display:inline-flex;flex-shrink:0;}
.wishlist-form.full{width:100%;}
.wishlist-btn{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:50%;flex-shrink:0;
background:var(--surface);border:1.5px solid var(--glass-border-hover);
color:var(--text);cursor:pointer;transition:all 0.18s ease;
}
.wishlist-btn svg{width:19px;height:19px;stroke:currentColor;flex-shrink:0;}
/* Both states were copper -- var(--accent) on hover, var(--secondary) when saved --
and a wishlist button lives on a .product-card, i.e. on --surface, where copper is
3.25:1. Gold is 5.49:1 on the card and 4.86:1 on the 14% copper tint the active
state fills with, so the tint stays (it is a fill, and copper is a fill hue) and
only the glyph changes. */
.wishlist-btn:hover{border-color:var(--primary);color:var(--primary);}
.wishlist-btn.active{background:rgba(180,101,58,0.14);border-color:var(--secondary);color:var(--primary);}
.wishlist-btn-full{
width:100%;height:auto;border-radius:var(--radius-m);gap:8px;
padding:13px 26px;font-weight:700;font-size:0.92rem;
}
.wishlist-btn-full svg{width:17px;height:17px;}
@media(max-width:480px){
.wishlist-btn{width:38px;height:38px;}
.wishlist-btn svg{width:17px;height:17px;}
}
.login-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 7px;border-radius:var(--radius-m);background:var(--surface-2);border:1px solid var(--glass-border);font-weight:700;font-size:0.82rem;transition:all 0.18s ease;}
.login-pill:hover{background:var(--ink);color:var(--bg);border-color:var(--text);}
/* A 24px circle is too small to show a gradient as anything but a smudge, and
the two stops were --primary and --accent, which is gold to copper -- white
initials measured under 3:1 against both ends. Solid gold, ink initials. */
.login-pill .avatar{width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:800;color:var(--bg);}
/* Search: single clean button, no category dropdown */
.search-toggle{background:none;border:none;cursor:pointer;}
#mobileSearchWrap{display:none;position:absolute;top:76px;left:0;right:0;z-index:299;background:var(--bg);border-bottom:1px solid var(--glass-border);padding:16px 24px;}
#mobileSearchWrap.search-open{display:block;}
#mobileSearchWrap .container{height:auto;display:block;padding:0;}
.nav-search{position:relative;flex:0 0 auto;max-width:560px;margin:0 auto;}
.nav-search input{width:100%;padding:12px 18px 12px 42px;border-radius:var(--radius-m);border:1.5px solid var(--glass-border-hover);background:var(--surface);color:var(--text);font-size:0.92rem;}
.nav-search input::placeholder{color:var(--gray);}
.search-suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg);border:1px solid var(--glass-border);border-radius:var(--radius-m);box-shadow:0 12px 32px rgba(0,0,0,0.15);z-index:500;max-height:340px;overflow-y:auto;display:none;}
.search-suggestions.open{display:block;}
.search-suggestion-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;text-decoration:none;color:var(--text);font-size:0.88rem;border-bottom:1px solid var(--glass-border);}
.search-suggestion-item:last-child{border-bottom:none;}
.search-suggestion-item:hover{background:var(--surface-2);}
.ssi-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ssi-type{flex-shrink:0;font-size:0.72rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.03em;}
.nav-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(200, 155, 60,0.12);}
.nav-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--gray);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--text);}
@media(max-width:980px){
.nav-links{display:none;}
.nav-links.open{
display:flex !important;position:fixed !important;top:82px !important;left:0 !important;right:0 !important;bottom:0 !important;
width:100% !important;height:auto !important;background:var(--bg) !important;z-index:2147483647 !important;
flex-direction:column !important;overflow-y:auto !important;padding:20px !important;
}
.nav-toggle,.search-toggle{display:flex;align-items:center;justify-content:center;}
.nav-unified-island,.navbar-island{height:68px;padding:0 16px;}
/* Inside the mobile fullscreen menu, dropdowns render as static
always-open sub-lists (no hover on touch devices). */
.dropdown-menu{
position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
box-shadow:none;border:none;background:none;padding:0 0 6px 18px;min-width:0;
}
.nav-parent-link::after{display:none;}
.has-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:100%;}
}
/* =========================================================================
HERO -- big bold italic display type, cream bg, subtle color accents
========================================================================= */
/* =========================================================================
COMING SOON -- countdown banner, admin-toggleable
========================================================================= */
/* This band was `background:var(--ink)` with white text, which read as a dark
inverted strip while --ink was a near-black. --ink holds bone #EDE7D9 now, so
it had become white text on an almost-white panel. Every child rule below
assumes a dark ground -- the title, the message and the countdown chips are
all white or translucent white -- so the honest fix is to name the dark
surface the band always meant, not to invert six rules. It carries no
.section class, so the transparent override in emods.css does not reach it
and a solid strip is allowed here. */
.coming-soon-banner{
background:var(--bg-alt);color:var(--white);text-align:center;
padding:36px 20px;position:relative;
border-bottom:1px solid var(--border);
}
/* Was `color:var(--pink)` behind a 7px filled dot. The dot is the motif already
taken off .section-eyebrow, and the label's own text starts with `//` -- it
did not need a second marker in front of that. */
.coming-soon-eyebrow{
font-family:var(--font-mono);font-size:0.76rem;letter-spacing:0.16em;text-transform:uppercase;
color:var(--muted);display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600;position:relative;
}
.coming-soon-title{
font-family:var(--font-display);font-weight:800;
font-size:clamp(1.8rem,4vw,3rem);color:var(--white);margin:0 0 8px;position:relative;letter-spacing:-0.02em;
}
.coming-soon-message{color:var(--muted);margin:0 0 24px;position:relative;font-size:0.95rem;}
.coming-soon-countdown{
display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;position:relative;
}
.cs-unit{
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius-m);min-width:76px;padding:12px 10px;
}
.cs-num{
font-family:var(--font-mono);font-weight:700;font-size:1.8rem;line-height:1;
color:var(--primary);
}
.cs-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-top:4px;}
/* The separator between the countdown numerals was color:var(--border) -- a hairline
colour, rgba(255,255,255,0.1), used on 1.6rem type. That is 1.38:1 on the page
ground: the colons between the digits were not visible at all. --muted is the 62%
bone the rest of the site's secondary type uses, 5.33:1 on the worst ground here,
and it stays a step below the gold .cs-num it separates. */
.cs-sep{font-family:var(--font-mono);font-size:1.6rem;font-weight:700;color:var(--muted);}
@media(max-width:640px){
.coming-soon-banner{padding:28px 16px;}
.cs-unit{min-width:60px;padding:9px 6px;}
.cs-num{font-size:1.3rem;}
.cs-sep{font-size:1.1rem;}
}
.hero{position:relative;overflow:hidden;padding:80px 0 96px;min-height:560px;display:flex;align-items:center;justify-content:flex-start;}
.hero .container{position:relative;z-index:2;width:100%;max-width:100%;margin:0;padding:0 24px;text-align:left;}
@media(min-width:1025px){.hero .container{padding:0 56px;}}
.hero-text-col{max-width:600px;text-align:left;}
.hero-text-col *{text-align:left;}
/* Full-bleed background media layer -- an uploaded image, gif or video.
3D no longer lands here: the model used to be mounted in #heroModelCanvas
inside this box by an inline three.js r128 script in index.php. It is now a
full-page scene in #robotBg (see src/3d/main.js), so the two rules that sized
that canvas are gone -- the ids they targeted no longer exist. */
.hero-bg-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg-media img,.hero-bg-media video{width:100%;height:100%;object-fit:cover;object-position:75% center;display:block;}
/* Scrim behind the hero copy, fading out to the right so the 3D robot reads
through the far side. The comment here used to say "solid cream", which it has
not been for two palettes; the stops were rgba(14,15,18), a cool near-black
left over from the same dark theme that supplied the acid lime. Against the
#060D0B page it showed as a faintly blue panel over a green-black ground. */
.hero-overlay{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.9) 100%);
}
@media(max-width:900px){
.hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.7) 75%,rgba(0,0,0,0.95) 100%);}
}
/* Eyebrow: sentence case, no dot, no acid green. ALL-CAPS mono labels with a
coloured bullet in front of them are the single most templated element on
the modern marketing page, so this keeps the mono and drops the shouting. */
.hero-eyebrow{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.02em;color:var(--muted);margin:0 0 20px;font-weight:500;}
/* .hero-title / .hero-note are the classes index.php's rewritten hero uses.
The title inherits .hero h1 above; this only sets the measure, so a two-line
headline breaks where the says it does and not one word earlier. */
.hero-title{max-width:16em;text-wrap:balance;}
.hero-note{font-family:var(--font-mono);font-size:0.8rem;line-height:1.6;color:var(--muted);margin:24px 0 0;padding-top:18px;border-top:1px solid var(--border);max-width:44ch;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.hero-stats{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap;}
.hero-stats div strong{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--primary);}
.hero-stats div span{font-size:0.85rem;color:var(--gray);}
/* CC-BY credit for the robot model, printed in includes/footer.php wherever
the scene mounts. Small, but it has to stay legible: the licence requires
the attribution be reasonable to the medium, not merely present. */
.model-credit{font-family:var(--font-mono);font-size:0.72rem;line-height:1.7;color:var(--muted);margin:28px 0 0;max-width:70ch;}
.model-credit a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.model-credit a:hover,.model-credit a:focus-visible{color:var(--text);}
@media(max-width:768px){.hero{min-height:auto;padding:56px 0 72px;}.hero-text-col{max-width:100%;}}
/* Grids */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
/* Pillar cards */
.pillar-card{padding:32px 28px;}
/* Pillar cards overlap the hero's bottom edge. Normal document flow --
the section right after the hero has no other content in the way, so a
simple negative margin pulls the cards up cleanly with no guesswork
about heading heights and no leftover reserved gap below. */
.pillar-section-wrap{padding-top:0;}
.pillar-overlap-hero{position:relative;z-index:3;margin-top:-90px;}
@media(max-width:900px){.pillar-overlap-hero{margin-top:-60px;}}
@media(max-width:540px){.pillar-overlap-hero{margin-top:-40px;}}
/* Was var(--accent), the copper, at 0.78rem on a .pillar-card -- 3.25:1. Gold at
5.49:1. Same change as .leader-role and .card-info-list .info-label below: all
three were small copper labels sitting on a card. */
.pillar-card .num{font-family:var(--font-mono);font-size:0.78rem;color:var(--primary);font-weight:700;}
/* Only `.pillar-card .icon-badge` was ever declared, so the one `.icon-badge` on
the site that is not inside a pillar card -- the tick on order-confirmation.php,
which is the first thing a customer sees after paying -- had no rule at all: no
width, no height, no radius. Its `