@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root{
--bg:#0a0a0a;
--surface:#121212;
--surface-2:#1b1b1b;
--border:rgba(255,255,255,.06);
--border-hi:rgba(255,255,255,.16);

--ink:#e5e5e5;
--ink-2:#9a9a9a;
--ink-3:#5a5a5a;

--a1:#d4d4d4;
--a2:#4a4a4a;
--a-grad:linear-gradient(110deg,#d4d4d4 0%,#4a4a4a 100%);

--radius-sm:10px;
--radius:18px;
--radius-lg:28px;

--shadow-sm:0 2px 8px rgba(0,0,0,.5);
--shadow:0 10px 40px rgba(0,0,0,.7);
--shadow-lg:0 25px 70px rgba(0,0,0,.8);

--ease-bounce:cubic-bezier(.34,1.56,.64,1);
--ease-out:cubic-bezier(.22,1,.36,1);

--font-display:'Poppins',sans-serif;
--font-body:'Poppins',sans-serif
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font:300 1rem/1.65 var(--font-body);
color:var(--ink);
background:var(--bg);
background-image:radial-gradient(circle,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:32px 32px
}

.container{width:min(1200px,92%);margin:auto}

header{
position:relative;
padding:110px 0 80px;
text-align:center;
overflow:hidden;
border-bottom:1px solid var(--border);
isolation:isolate
}

header::before,header::after{
content:'';
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.18;
pointer-events:none;
z-index:-1
}
header::before{
width:620px;height:420px;
background:#bfbfbf;
top:-140px;left:-120px
}
header::after{
width:500px;height:380px;
background:#3a3a3a;
bottom:-120px;right:-80px
}

.hero-title{
margin:0 0 8px;
font:800 clamp(3rem,6vw,5rem)/1 var(--font-display);
letter-spacing:-1.5px;
background:var(--a-grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent
}

.category-buttons,.cta-row{
display:flex;
justify-content:center;
gap:12px;
margin:30px 0 8px;
flex-wrap:wrap
}

.main-button,
.category-buttons button{
font:600 .85rem var(--font-display);
letter-spacing:.6px;
text-transform:uppercase;
padding:11px 26px;
border-radius:999px;
cursor:pointer;
text-decoration:none;
border:1px solid var(--border-hi);
background:var(--surface-2);
color:var(--ink);
box-shadow:var(--shadow-sm);
transition:all .25s var(--ease-out)
}

.main-button:hover,
.category-buttons button:hover{
transform:translateY(-3px);
border-color:var(--a1);
box-shadow:0 0 20px -6px var(--a1),var(--shadow);
color:#fff
}

.category-buttons button.active,
.category-buttons button[aria-pressed="true"]{
background:var(--a1);
color:#111;
border-color:transparent;
box-shadow:0 6px 20px -6px rgba(255,255,255,.4)
}

.promo a{
color:var(--a1);
text-decoration:none;
border-bottom:1px dashed rgba(255,255,255,.25);
transition:border-color .2s
}
.promo a:hover{border-bottom-color:var(--a1)}

section.section{padding:70px 0 30px}

.section-title{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
margin-bottom:36px;
font:700 clamp(1.6rem,2.8vw,2.2rem) var(--font-display);
letter-spacing:-.5px;
text-align:center
}
.section-title::after{
content:'';
display:block;
width:42px;height:3px;
border-radius:2px;
background:var(--a-grad);
margin:10px auto 0
}

.products{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
gap:22px
}

.product{
position:relative;
overflow:hidden;
text-align:center;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
box-shadow:var(--shadow-sm);
transition:all .35s var(--ease-out)
}

.product::before{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 60%);
opacity:0;
transition:opacity .3s;
pointer-events:none
}

.product:hover{
transform:translateY(-6px);
border-color:var(--border-hi);
box-shadow:var(--shadow),0 0 35px -12px var(--a1)
}
.product:hover::before{opacity:1}

.product img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:calc(var(--radius) - 6px);
border:1px solid var(--border-hi);
transition:transform .4s var(--ease-out)
}
.product img:hover{transform:scale(1.05)}

.product h3{
margin:16px 0 12px;
font:500 1rem var(--font-body)
}

.product a{
display:inline-block;
margin-top:6px;
font:600 .8rem var(--font-display);
letter-spacing:.6px;
text-transform:uppercase;
padding:9px 22px;
border-radius:999px;
background:var(--a-grad);
color:#111;
border:none;
transition:all .25s var(--ease-bounce);
box-shadow:0 6px 20px -8px var(--a2)
}
.product a:hover{
transform:translateY(-2px) scale(1.05);
box-shadow:0 10px 28px -10px var(--a2)
}

.faq{
padding:48px;
max-width:860px;
margin:60px auto;
border-radius:var(--radius-lg);
border:1px solid var(--border);
background:var(--surface);
box-shadow:var(--shadow)
}

.faq h2{
margin:0 0 32px;
font:700 1.9rem var(--font-display);
text-align:center
}

.faq-item{
margin-bottom:12px;
border-radius:var(--radius-sm);
border:1px solid var(--border);
background:var(--surface-2);
overflow:hidden;
transition:border-color .25s
}
.faq-item:hover{border-color:var(--border-hi)}

.faq-item h3{
margin:0;
padding:18px 22px;
font:600 1rem var(--font-display);
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
user-select:none
}

.faq-item h3::after{
content:'';
width:10px;height:10px;
border-right:2px solid var(--a1);
border-bottom:2px solid var(--a1);
transform:rotate(45deg);
transition:transform .25s var(--ease-out)
}

.faq-item.open h3::after{transform:rotate(-135deg)}

.faq-item p{
margin:0;
padding:0 22px 20px;
color:var(--ink-2);
font-size:.95rem;
line-height:1.7
}

footer{
text-align:center;
padding:36px 20px 52px;
background:var(--surface);
color:var(--ink-3);
border-top:1px solid var(--border);
font-size:.85rem
}

footer img{
width:44px;height:44px;
opacity:.6;
transition:all .25s var(--ease-bounce)
}
footer img:hover{
opacity:1;
transform:translateY(-4px) scale(1.08)
}

.fade-in{
opacity:0;
transform:translateY(28px);
transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
will-change:transform,opacity
}
.fade-in.visible{opacity:1;transform:translateY(0)}

.products .fade-in:nth-child(2){transition-delay:.07s}
.products .fade-in:nth-child(3){transition-delay:.14s}
.products .fade-in:nth-child(4){transition-delay:.21s}
.products .fade-in:nth-child(5){transition-delay:.28s}
.products .fade-in:nth-child(6){transition-delay:.35s}

body[data-page="spreadsheet"] .product img{aspect-ratio:1/1;object-fit:cover}
body[data-page="bb"] .product img{
aspect-ratio:4/3;
object-fit:contain;
background:#fff;
padding:8px
}

@media (max-width:768px){
header{padding:80px 0 60px}
.faq{padding:28px}
.hero-title{letter-spacing:-1px}
}

@media (max-width:480px){
.product a{font-size:.75rem;padding:8px 18px}
}