/* ============================================================ SMOALD — shared stylesheet One source of truth for every page (home, AI, Learn, Store, portfolio). Light theme · white background · red + gold brand palette. Colour is themed per page via . ============================================================ */ :root{ /* surfaces (names kept from the old dark theme so rules don't churn) */ --ink:#FFFFFF; /* page background */ --ink-2:#FBF6EC; /* warm cream band */ --panel:#FFFFFF; /* cards */ --panel-2:#FCF7EF; /* card hover */ --line:rgba(26,18,11,.10); --line-strong:rgba(26,18,11,.18); --text:#1A120B; /* warm near-black */ --muted:#6B6256; --muted-2:#9C9286; --shadow:0 1px 2px rgba(26,18,11,.05), 0 10px 28px rgba(26,18,11,.06); --shadow-lg:0 2px 6px rgba(26,18,11,.06), 0 18px 44px rgba(26,18,11,.10); /* brand palette — red + gold (with amber as the in-between tone) */ --red:#E20613; --red-soft:rgba(226,6,19,.09); --red-line:rgba(226,6,19,.38); --gold:#ECA200; --gold-soft:rgba(236,162,0,.13); --gold-line:rgba(236,162,0,.45); /* "amber" kept as an alias of red so the brand stays strictly red + gold */ --amber:var(--red); --amber-soft:var(--red-soft); --amber-line:var(--red-line); /* two-tone hub aliases used by the homepage doors + ecosystem */ --build:var(--red); --build-soft:var(--red-soft); --learn:var(--gold); --learn-soft:var(--gold-soft); --shop:var(--red); --shop-soft:var(--red-soft); --life:var(--gold); --life-soft:var(--gold-soft); /* per-page accent — defaults to brand red; overridden by [data-hub] below */ --accent:var(--red); --accent-2:var(--gold); --accent-soft:var(--red-soft); --accent-shadow:rgba(226,6,19,.30); --on-accent:#FFFFFF; /* text colour that sits on the accent fill */ --maxw:1120px; --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; } /* ---- per-hub theming: set and the page recolours ---- Every hub is red-primary + gold-secondary on white, so the whole site stays consistently red + gold (the deep gold reads as orange when used as a big fill, so it's kept for highlights/gradients, not button/badge fills). */ body[data-hub="learn"], body[data-hub="shop"], body[data-hub="life"]{ --accent:var(--red); --accent-2:var(--gold); --accent-soft:var(--red-soft); --accent-shadow:rgba(226,6,19,.30); --on-accent:#FFFFFF; } /* Learn + Lifestyle keep a bright, shiny-gold heading accent so the pages clearly read as red + gold (never orange) — red fills, gold highlight. */ body[data-hub="learn"] .hero h1 .accent, body[data-hub="life"] h1 .accent{ background:linear-gradient(180deg,#FFDA5B 0%,#FFC107 55%,#F0A500 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} /* ---- base ---- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:18px} /* ---- NAV ---- */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s,box-shadow .3s;border-bottom:1px solid transparent} .nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(26,18,11,.05)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{font-family:var(--display);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;color:var(--text)} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent-shadow)} .brand .bolt{height:30px;width:auto;display:block} .brand .sub{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .brand-logo{height:30px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{font-size:.95rem;color:var(--muted);transition:color .2s} .nav-links a:hover{color:var(--text)} .nav-cta{font-family:var(--body);font-weight:600;font-size:.9rem;background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:999px;transition:transform .15s,box-shadow .2s} .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-shadow)} .menu-btn{display:none;background:none;border:1px solid var(--line-strong);color:var(--text);width:42px;height:42px;border-radius:10px;cursor:pointer;font-size:1.1rem} /* ---- breadcrumb (sub-pages) ---- */ .crumb{font-family:var(--mono);font-size:.8rem;color:var(--muted-2);margin-bottom:22px;letter-spacing:.03em} .crumb a{color:var(--accent)} .crumb a:hover{opacity:.7} /* ---- HERO (sub-page default: left-aligned, glow top-right) ---- */ .hero{position:relative;padding:150px 0 60px;overflow:hidden} .hero-glow{position:absolute;top:-160px;right:-100px;width:620px;height:620px;background:radial-gradient(circle at center,rgba(226,6,19,.10),rgba(236,162,0,.06) 42%,transparent 70%);filter:blur(10px);pointer-events:none;z-index:0} .hero .wrap{position:relative;z-index:1} .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.025em;max-width:18ch;margin-bottom:22px} .hero h1 .accent{color:var(--accent)} .hero-sub{font-size:1.15rem;color:var(--muted);max-width:54ch;margin-bottom:32px;line-height:1.65} .hero-sub strong{color:var(--text);font-weight:600} .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .avail{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.04em;margin-top:26px} .avail .pulse{width:9px;height:9px;border-radius:50%;background:#2FB463;box-shadow:0 0 0 0 rgba(47,180,99,.5);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,180,99,.45)}70%{box-shadow:0 0 0 9px rgba(47,180,99,0)}100%{box-shadow:0 0 0 0 rgba(47,180,99,0)}} /* ---- HERO (homepage: centred, grid backdrop, logo image) ---- */ .hero.home{padding:188px 0 74px;text-align:center} .hero.home::before{content:"";position:absolute;inset:0;z-index:0; background-image:linear-gradient(rgba(26,18,11,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(26,18,11,.045) 1px,transparent 1px); background-size:64px 64px; -webkit-mask:radial-gradient(circle at 50% 36%,#000 0%,transparent 70%); mask:radial-gradient(circle at 50% 36%,#000 0%,transparent 70%)} .hero.home .hero-glow{top:-180px;left:50%;right:auto;transform:translateX(-50%);width:840px;height:680px;background:radial-gradient(circle at center,rgba(226,6,19,.12),rgba(236,162,0,.07) 40%,transparent 68%)} .hero-tag{font-family:var(--mono);font-size:.92rem;letter-spacing:.34em;text-transform:uppercase;color:var(--red);margin-bottom:26px} .hero.home h1{max-width:none;margin-left:auto;margin-right:auto} .hero h1.hero-logo{display:block;margin:0 auto 22px} .hero h1.hero-logo img{width:min(560px,84vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 10px 30px rgba(226,6,19,.14))} /* crisp text wordmark — SMO in red, ALD in a gold gradient (scales sharp at any size) */ .hero-wordmark{font-family:var(--display);font-weight:800;font-size:clamp(3.6rem,12.5vw,8.2rem);line-height:.9;letter-spacing:-.02em;display:block;margin:0 auto 20px} .hero-wordmark .r{color:var(--red)} .hero-wordmark .g{background:linear-gradient(180deg,#FFF3B0 0%,#FFDA5B 28%,#FFC107 50%,#FFD75E 68%,#F0A500 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .hero.home .hero-sub{max-width:48ch;margin:0 auto 14px} .hero-sub .b{color:var(--red)} .hero-sub .l{color:var(--gold)} .hero-sub .s{color:var(--amber)} .hero-founder{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--muted-2);margin-bottom:34px} .hero-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .hero-btn{font-family:var(--body);font-weight:600;font-size:1rem;padding:13px 26px;border-radius:14px;border:1px solid;display:inline-flex;align-items:center;gap:9px;transition:transform .15s,box-shadow .2s,background .2s} .hero-btn.build{color:var(--red);border-color:var(--red-line);background:var(--red-soft)} .hero-btn.build:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,6,19,.22)} .hero-btn.learn{color:#9A6B00;border-color:var(--gold-line);background:var(--gold-soft)} .hero-btn.learn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(236,162,0,.24)} .hero-btn.shop{color:var(--red);border-color:var(--red-line);background:var(--red-soft)} .hero-btn.shop:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,6,19,.22)} .hero-btn.life{color:#9A6B00;border-color:var(--gold-line);background:var(--gold-soft)} .hero-btn.life:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(236,162,0,.24)} /* ---- buttons ---- */ .btn{font-family:var(--body);font-weight:600;font-size:.98rem;padding:14px 26px;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;display:inline-flex;align-items:center;gap:9px;border:1px solid transparent} .btn-primary{background:var(--accent);color:var(--on-accent)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--accent-shadow)} .btn-ghost{background:#fff;border:1px solid var(--line-strong);color:var(--text)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} /* ---- generic section heading ---- */ .section{padding:80px 0} .section-head{margin-bottom:44px;max-width:60ch} .section-head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.02em;line-height:1.1} .section-head p{color:var(--muted);margin-top:14px;font-size:1.05rem;max-width:54ch} /* ---- DOORS / CARDS (homepage) ---- */ .doors{padding:54px 0 96px} .doors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px} .door{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 30px 28px;min-height:308px;box-shadow:var(--shadow);transition:transform .22s,border-color .22s,box-shadow .22s;overflow:hidden} .door::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .28s;pointer-events:none} .door.build::after{background:radial-gradient(circle at 18% -10%,var(--build-soft),transparent 58%)} .door.learn::after{background:radial-gradient(circle at 18% -10%,var(--learn-soft),transparent 58%)} .door.shop::after{background:radial-gradient(circle at 18% -10%,var(--shop-soft),transparent 58%)} .door.life::after{background:radial-gradient(circle at 18% -10%,var(--life-soft),transparent 58%)} .door:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .door:hover::after{opacity:1} .door.build:hover{border-color:var(--red-line)} .door.learn:hover{border-color:var(--gold-line)} .door.shop:hover{border-color:var(--red-line)} .door.life:hover{border-color:var(--gold-line)} .door-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;position:relative;z-index:1} .door-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center} .door.build .door-ico{background:var(--build-soft);color:var(--red);border:1px solid var(--red-line)} .door.learn .door-ico{background:var(--learn-soft);color:var(--gold);border:1px solid var(--gold-line)} .door.shop .door-ico{background:var(--shop-soft);color:var(--red);border:1px solid var(--red-line)} .door.life .door-ico{background:var(--life-soft);color:var(--gold);border:1px solid var(--gold-line)} .door-ico svg{width:24px;height:24px} .door-arrow{color:var(--muted-2);transition:transform .2s,color .2s} .door:hover .door-arrow{transform:translate(4px,-4px);color:var(--text)} .door .verb{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;position:relative;z-index:1} .door.build .verb{color:var(--red)} .door.learn .verb{color:#9A6B00} .door.shop .verb{color:var(--red)} .door.life .verb{color:#9A6B00} .door h2{font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.015em;margin-bottom:10px;position:relative;z-index:1} .door p{color:var(--muted);font-size:.98rem;line-height:1.6;flex:1;position:relative;z-index:1} .door .stat{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;position:relative;z-index:1} .door .stat span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.76rem;color:var(--muted)} .door .stat i{width:8px;height:8px;border-radius:50%;flex:none} .door .stat .live i{box-shadow:0 0 8px currentColor} .door.build .stat .live i{background:var(--red);color:var(--red)} .door.learn .stat .live i{background:var(--gold);color:var(--gold)} .door.shop .stat .live i{background:var(--red);color:var(--red)} .door.life .stat .live i{background:var(--gold);color:var(--gold)} .door .stat .soon i{background:transparent;border:1.5px solid var(--muted-2)} /* ---- ECOSYSTEM (homepage interactive hub-and-spokes) ---- */ .eco{padding:48px 0 104px} .eco-head{text-align:center;max-width:60ch;margin:0 auto 10px} .eco-head h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.02em;line-height:1.02;text-transform:uppercase} .eco-head p{color:var(--muted);margin-top:14px;font-size:1.05rem} .eco-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:42px} .eco-viz{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto} .eco-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .eco-line{stroke:rgba(26,18,11,.14);stroke-width:.5;stroke-dasharray:2 2;transition:stroke .25s,stroke-width .25s} .eco-line.on{stroke-width:.9;stroke-dasharray:none} .eco-line[data-line="build"].on{stroke:var(--red);filter:drop-shadow(0 0 3px rgba(226,6,19,.5))} .eco-line[data-line="shop"].on{stroke:var(--red);filter:drop-shadow(0 0 3px rgba(226,6,19,.5))} .eco-line[data-line="learn"].on{stroke:var(--gold);filter:drop-shadow(0 0 3px rgba(236,162,0,.5))} .eco-line[data-line="life"].on{stroke:var(--gold);filter:drop-shadow(0 0 3px rgba(236,162,0,.5))} .eco-node{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1.5px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted);box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s,color .25s,background .25s;padding:0} .eco-node .ico{display:grid;place-items:center;gap:5px;text-align:center} .eco-node .ico svg{width:26px;height:26px} .eco-node .ico b{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500} .eco-node.hub{width:21%;height:21%;z-index:3} .eco-node.hub .ico svg{width:30px;height:30px} .eco-node.build,.eco-node.shop,.eco-node.learn,.eco-node.life{width:30%;height:30%;z-index:2} .eco-node.build.active{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px var(--red),0 14px 30px rgba(226,6,19,.22)} .eco-node.shop.active{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px var(--red),0 14px 30px rgba(226,6,19,.22)} .eco-node.learn.active{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 30px rgba(236,162,0,.24)} .eco-node.life.active{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 30px rgba(236,162,0,.24)} .eco-node.hub.active{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px var(--red),0 14px 28px rgba(226,6,19,.22)} .orbit{position:absolute;inset:-13%;border-radius:50%;opacity:0;transition:opacity .3s;color:inherit;pointer-events:none} .eco-node.active .orbit{opacity:1;animation:spin 9s linear infinite} .orbit i{position:absolute;border-radius:50%;background:currentColor} .orbit i:nth-child(1){width:7px;height:7px;top:-3px;left:46%} .orbit i:nth-child(2){width:5px;height:5px;top:30%;right:-2px} .orbit i:nth-child(3){width:6px;height:6px;bottom:4%;left:14%} .orbit i:nth-child(4){width:4px;height:4px;top:8%;left:6%;opacity:.7} @keyframes spin{to{transform:rotate(360deg)}} .eco-detail{position:relative;min-height:236px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 30px;display:flex;align-items:center;box-shadow:var(--shadow)} .eco-empty{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;color:var(--muted-2);text-align:center} .eco-empty svg{width:42px;height:42px;opacity:.5} .eco-detail.has .eco-empty{display:none} .eco-panel{display:none;width:100%} .eco-panel.show{display:block;animation:fade .3s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .eco-panel .pk{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px} .eco-panel.build .pk{color:var(--red)} .eco-panel.shop .pk{color:var(--red)} .eco-panel.learn .pk{color:#9A6B00} .eco-panel.life .pk{color:#9A6B00} .eco-panel.hub .pk{color:var(--red)} .eco-panel h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;margin-bottom:14px} .eco-panel ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .eco-panel li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--text)} .eco-panel li .d{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted-2)} .eco-panel li.on .d{box-shadow:0 0 8px currentColor} .eco-panel.build li.on .d{background:var(--red);color:var(--red)} .eco-panel.shop li.on .d{background:var(--amber);color:var(--amber)} .eco-panel.learn li.on .d{background:var(--gold);color:var(--gold)} .eco-panel.life li.on .d{background:var(--gold);color:var(--gold)} .eco-panel li.off{color:var(--muted)} .eco-panel li .soon{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-left:auto} .eco-panel li a{color:inherit;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .eco-panel.shop li a:hover{color:var(--amber);border-color:var(--amber)} .eco-panel li .live{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;margin-left:auto} .eco-panel.shop li .live{color:var(--amber)} .eco-panel p{color:var(--muted);font-size:1rem;line-height:1.65;margin-bottom:18px} .eco-panel .enter{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.84rem;transition:gap .2s} .eco-panel.build .enter{color:var(--red)} .eco-panel.shop .enter{color:var(--red)} .eco-panel.learn .enter{color:#9A6B00} .eco-panel.life .enter{color:#9A6B00} .eco-panel .enter:hover{gap:14px} /* ---- FOUNDER (homepage) ---- */ .founder{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .founder .wrap{padding:80px 28px} .founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .founder h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:18px} .founder p{color:var(--muted);font-size:1.08rem;line-height:1.75;margin-bottom:18px} .founder p strong{color:var(--text);font-weight:600} .acronym{display:grid;gap:10px} .acro-row{display:flex;align-items:baseline;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)} .acro-row .letter{font-family:var(--display);font-weight:800;font-size:1.4rem;width:30px} .acro-row:nth-child(1) .letter{color:var(--red)} .acro-row:nth-child(2) .letter{color:var(--amber)} .acro-row:nth-child(3) .letter{color:var(--gold)} .acro-row:nth-child(4) .letter{color:var(--red)} .acro-row:nth-child(5) .letter{color:var(--amber)} .acro-row .word{font-size:1.02rem;color:var(--text)} /* ---- SUB-HUB CARDS (AI / Learn) ---- */ .sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sub-grid.two{grid-template-columns:repeat(2,1fr)} .sub{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .sub:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .sub-emoji{font-size:1.7rem;line-height:1;margin-bottom:18px} .sub h3{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:10px} .sub p{color:var(--muted);font-size:.98rem;line-height:1.6;flex:1} .sub .status{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted-2);position:absolute;top:24px;right:24px;background:#fff} .sub .status.live{color:#1F9D57;border-color:rgba(31,157,87,.4);background:rgba(31,157,87,.08)} .sub .enter{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--mono);font-size:.84rem;color:var(--accent);transition:gap .2s} .sub:hover .enter{gap:14px} .sub.soon{opacity:.96} .sub.soon .enter{color:var(--muted-2)} /* ---- SPOKE CARDS ---- */ .spoke-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .spoke{display:flex;align-items:flex-start;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .spoke:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .spoke .em{font-size:1.3rem;line-height:1;flex:none} .spoke h3{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;margin-bottom:5px} .spoke p{color:var(--muted);font-size:.9rem;line-height:1.5} /* ---- SERVICES / STEPS (AI) ---- */ .services{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px} .step{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .step:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .step .num{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.1em;margin-bottom:16px;display:block} .step h3{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.01em;margin-bottom:10px} .step p{color:var(--muted);font-size:.98rem;line-height:1.6} .svc-offer{display:flex;flex-wrap:wrap;align-items:center;gap:11px} .svc-offer .lead{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-right:4px} .tag{font-family:var(--mono);font-size:.74rem;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:8px} /* ---- FEATURE STRIP (Learn) ---- */ .feature{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .feature .kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .feature h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:16px} .feature p{color:var(--muted);font-size:1.06rem;line-height:1.72;margin-bottom:18px} .feature p strong{color:var(--text);font-weight:600} .feature-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)} .feature-card .label{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px} .feat-row{display:flex;gap:12px;align-items:baseline;margin-bottom:12px} .feat-row:last-child{margin-bottom:0} .feat-row .tick{color:var(--accent)} .feat-row .v{color:var(--muted);font-size:.98rem} /* ---- STORE landing ---- */ .store-page{min-height:100vh;display:flex;flex-direction:column} .soon-wrap{flex:1;position:relative;overflow:hidden;padding:150px 0 90px} .soon-glow{position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:820px;height:640px;background:radial-gradient(circle at center,rgba(226,6,19,.10),rgba(236,162,0,.06) 40%,transparent 68%);filter:blur(12px);pointer-events:none;z-index:0} .soon-inner{position:relative;z-index:1;text-align:center;max-width:60ch;margin:0 auto} .soon-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-shadow);padding:8px 16px;border-radius:999px;margin-bottom:26px} .soon-badge .d{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} .store-page h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,7vw,5rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:22px} .store-page h1 .accent{color:var(--accent)} .lede{font-size:1.18rem;color:var(--muted);max-width:48ch;margin:0 auto 40px;line-height:1.68} .lede strong{color:var(--text);font-weight:600} .preview{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:0 auto 44px} .preview.two{grid-template-columns:repeat(2,1fr);max-width:560px;margin-bottom:36px} .pv{display:block;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;text-align:left;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s} .pv:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .pv .emoji{font-size:1.7rem;line-height:1;margin-bottom:14px} .pv h3{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:8px} .pv p{color:var(--muted);font-size:.95rem;line-height:1.55} .pv.live{border-color:var(--accent-shadow)} .pv.live:hover{border-color:var(--accent)} .pv.live p strong{color:var(--accent);font-weight:600} .pv.featured{max-width:560px;margin:0 auto 18px;text-align:center} .pv.featured .emoji{font-size:2.1rem} .pv.featured h3{font-size:1.45rem} .live-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-shadow);padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:7px} .soon-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);background:#fff;border:1px solid var(--line-strong);padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:7px} /* ---- generic CONTACT band ---- */ .contact{text-align:center;padding:104px 0} .contact h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.025em;line-height:1.04;margin-bottom:20px} .contact h2 .accent{color:var(--accent)} .contact p{color:var(--muted);font-size:1.12rem;max-width:46ch;margin:0 auto 36px} .contact-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* ---- FOOTER ---- */ footer{border-top:1px solid var(--line);padding:42px 0;background:var(--ink-2)} .foot-inner{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center} .foot-brand{font-family:var(--display);font-weight:700;font-size:1.05rem} .foot-brand span{display:block;font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--muted-2);letter-spacing:.06em;margin-top:5px} .foot-links{display:flex;gap:24px} .foot-links a{font-family:var(--mono);font-size:.85rem;color:var(--muted);transition:color .2s} .foot-links a:hover{color:var(--accent)} .foot-copy{font-family:var(--mono);font-size:.78rem;color:var(--muted-2);width:100%;margin-top:8px} /* ---- REVEAL on scroll + focus ---- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} a:focus-visible,.btn:focus-visible,button:focus-visible,.eco-node:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} /* ---- responsive ---- */ @media(max-width:900px){ .eco-stage{grid-template-columns:1fr;gap:28px} .eco-viz{max-width:420px} } @media(max-width:820px){ .nav-links{position:fixed;inset:72px 0 auto 0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);flex-direction:column;align-items:flex-start;gap:4px;padding:18px 28px 26px;border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(26,18,11,.08);transform:translateY(-130%);transition:transform .35s} .nav-links.open{transform:translateY(0)} .nav-links a{font-size:1.05rem;padding:10px 0;width:100%} .nav-links .nav-cta{margin-top:8px} .menu-btn{display:block} .doors-grid{grid-template-columns:1fr} .founder-grid{grid-template-columns:1fr;gap:34px} .sub-grid,.sub-grid.two,.steps{grid-template-columns:1fr} .spoke-grid{grid-template-columns:1fr} .feature-grid{grid-template-columns:1fr;gap:34px} .preview,.preview.two{grid-template-columns:1fr;max-width:380px} .hero{padding:130px 0 50px} .hero.home{padding:150px 0 56px} body{font-size:16px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}