:root { --ink:#17233d; --muted:#667085; --paper:#f5f7fb; --blue:#315efb; --violet:#7652f6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,Arial,sans-serif; }
main { max-width:1180px; margin:0 auto; padding:26px 20px 70px; }
.hero { position:relative; overflow:hidden; min-height:374px; border-radius:30px; padding:56px; color:#fff; background:linear-gradient(125deg,#13264d 0%,#315efb 53%,#8265ff 100%); }
.hero h1 { position:relative; z-index:1; margin:9px 0 16px; max-width:630px; font-size:clamp(34px,5vw,64px); line-height:1.02; letter-spacing:-.055em; }
.eyebrow { margin:0; font-weight:800; font-size:12px; letter-spacing:.14em; }
.hero-copy { position:relative; z-index:1; max-width:410px; margin:0 0 27px; color:#dfe7ff; font-size:17px; line-height:1.5; }
.hero-button { position:relative; z-index:1; display:inline-flex; gap:22px; align-items:center; border-radius:14px; padding:14px 18px; color:var(--ink); background:#fff; text-decoration:none; font-weight:800; }
.hero-button span { color:var(--blue); font-size:20px; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.8; }
.orb-one { width:350px; height:350px; right:-65px; top:-85px; background:radial-gradient(circle at 30% 35%,#d8f1ff,#7f63ff 58%,transparent 60%); }
.orb-two { width:210px; height:210px; right:225px; bottom:-125px; background:#1cc8e8; opacity:.5; }
.catalog { padding-top:62px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:23px; }
.section-heading h2 { margin:6px 0 0; font-size:32px; letter-spacing:-.035em; }.section-heading .eyebrow,.category { color:var(--blue); }
.section-heading>span { color:var(--muted); font-size:14px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid #e6eaf2; border-radius:20px; background:#fff; box-shadow:0 8px 22px rgba(32,53,96,.05); }
.product-image { display:grid; place-items:center; height:360px; min-height:360px; overflow:hidden; background:#ece8e4; }.product-image img { display:block; width:100%; height:100%; object-fit:contain; }
.image-placeholder { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; color:#fff; background:var(--blue); font-size:25px; font-weight:800; }
.product-info { position:relative; z-index:1; flex:1; padding:20px; background:#fff; }.category { margin:0 0 7px; font-size:12px; font-weight:800; text-transform:uppercase; }.product-info h3 { margin:0; font-size:20px; letter-spacing:-.025em; }.description { height:40px; overflow:hidden; margin:9px 0 16px; color:var(--muted); font-size:14px; line-height:1.4; }.product-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px; }.product-bottom strong { font-size:19px; }.product-bottom a { border-radius:10px; padding:10px 13px; color:#fff; background:var(--blue); text-decoration:none; font-weight:700; font-size:14px; }.empty-state { color:var(--muted); } footer { padding:24px; color:var(--muted); text-align:center; font-size:13px; }
@media (max-width:760px) { main { padding:12px 12px 45px; }.hero { min-height:385px; padding:34px 26px; border-radius:23px; }.hero h1 { font-size:40px; }.product-grid { grid-template-columns:1fr; }.section-heading h2 { font-size:27px; }.orb-one { right:-190px; }.orb-two { right:40px; } }