:root { --ink: #17152a; --muted: #6d6a7f; --violet: #6657e8; --violet-dark: #4839bf; --cream: #fbf9f5; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-manrope), Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-shell { min-height: 100svh; position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(115deg, rgba(255,255,255,.88), rgba(251,249,245,.52)), radial-gradient(circle at 75% 38%, rgba(102,87,232,.08), transparent 34%); }
.ambient { position: absolute; border-radius: 999px; pointer-events: none; filter: blur(2px); }
.ambient-one { width: 420px; height: 420px; right: -220px; top: 3%; background: rgba(255,184,133,.12); }
.ambient-two { width: 330px; height: 330px; left: -220px; bottom: 2%; background: rgba(102,87,232,.09); }
.topbar, .hero, footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; position: relative; z-index: 2; }
.topbar { height: 104px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 49px; height: 49px; display: grid; place-items: center; filter: drop-shadow(0 9px 12px rgba(77,61,193,.22)); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name { font-weight: 800; font-size: 22px; letter-spacing: -.7px; }
.brand-name span { color: var(--violet); }
.contact-link { display: inline-flex; align-items: center; gap: 10px; color: #4d4963; font-size: 14px; font-weight: 700; }
.mail-dot { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e4e0d8; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--violet); }
.hero { flex: 1; min-height: 650px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(32px, 6vw, 90px); padding: 52px 0 72px; }
.hero-copy { max-width: 650px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid #e5e1d9; border-radius: 999px; background: rgba(255,255,255,.7); color: #5b586d; font-size: 12px; font-weight: 750; box-shadow: 0 5px 16px rgba(39,33,73,.04); }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: #ff9c5b; box-shadow: 0 0 0 5px rgba(255,156,91,.14); animation: pulse 2.2s infinite; }
.eyebrow { margin: 28px 0 12px; color: var(--violet); font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(43px, 5vw, 72px); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; }
h1 span { color: var(--violet); }
.lead { margin: 26px 0 0; max-width: 590px; color: var(--muted); line-height: 1.8; font-size: clamp(15px, 1.45vw, 17px); }
.actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; }
.primary-button { min-width: 158px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 15px 18px 15px 22px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--violet), var(--violet-dark)); font-size: 14px; font-weight: 800; box-shadow: 0 14px 30px rgba(83,67,201,.25); transition: transform .2s ease, box-shadow .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(83,67,201,.33); }
.arrow { font-size: 18px; }
.actions p { margin: 0; color: #8a8796; font-size: 12px; line-height: 1.6; }
.actions strong { color: #4c4960; }
.hero-visual { position: relative; min-height: 505px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(102,87,232,.13); border-radius: 50%; }
.orbit-one { width: 470px; height: 470px; }
.orbit-two { width: 380px; height: 380px; border-style: dashed; animation: spin 35s linear infinite; }
.shopping-card { width: min(390px, 86%); position: relative; z-index: 2; padding: 25px; border: 1px solid rgba(255,255,255,.85); border-radius: 28px; background: rgba(255,255,255,.8); box-shadow: 0 28px 75px rgba(50,42,96,.16); backdrop-filter: blur(18px); transform: rotate(2.4deg); }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-top div { display: flex; flex-direction: column; gap: 4px; }
.card-top small { color: #9591a3; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.card-top strong { font-size: 18px; letter-spacing: -.03em; }
.mini-bag { width: 44px; height: 44px; border-radius: 13px; background: #f0edff; display: grid; place-items: center; overflow: hidden; }
.mini-bag img { width: 38px; height: 38px; object-fit: contain; }
.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.category-tile { min-height: 118px; padding: 16px; border-radius: 18px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 800; }
.category-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 21px; background: rgba(255,255,255,.72); }
.tile-violet { background: #e9e4ff; color: #5548bf; }.tile-orange { background: #ffe8d5; color: #c56b30; }.tile-pink { background: #fbe1ea; color: #b94d70; }.tile-blue { background: #dff1f8; color: #337b98; }
.card-footer { display: flex; align-items: center; gap: 12px; color: #777386; font-size: 11px; font-weight: 700; }
.avatar-stack { display: flex; }.avatar-stack i { width: 26px; height: 26px; margin-left: -6px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: #e8e3ff; color: #6054c9; font-size: 9px; font-style: normal; font-weight: 900; }.avatar-stack i:first-child { margin-left: 0; background: #ffe3d0; color: #bb6a38; }.avatar-stack i:last-child { background: #26213d; color: white; }
.floating-note { position: absolute; z-index: 3; padding: 13px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 18px 45px rgba(53,45,95,.13); backdrop-filter: blur(12px); }
.floating-note > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: #ece8ff; color: var(--violet); }.floating-note div { display: flex; flex-direction: column; gap: 2px; }.floating-note strong { font-size: 11px; }.floating-note small { color: #9995a6; font-size: 9px; }
.note-one { top: 9%; right: -1%; animation: float 4.5s ease-in-out infinite; }.note-two { left: -1%; bottom: 10%; animation: float 5s 1s ease-in-out infinite; }
footer { min-height: 72px; border-top: 1px solid #e8e4dc; display: flex; justify-content: space-between; align-items: center; color: #8a8796; font-size: 11px; } footer a { color: #514d65; font-weight: 800; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,156,91,0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; text-align: center; padding-top: 42px; }.hero-copy { margin-inline: auto; }.lead { margin-inline: auto; }.actions { justify-content: center; }.hero-visual { min-height: 480px; } }
@media (max-width: 560px) { .topbar, .hero, footer { width: min(100% - 30px, 1180px); }.topbar { height: 86px; }.contact-link span:last-child { display: none; }.hero { min-height: auto; padding: 38px 0 54px; gap: 36px; }h1 { font-size: clamp(39px, 12vw, 54px); }.actions { flex-direction: column; gap: 15px; }.hero-visual { min-height: 420px; width: 100%; }.orbit-one { width: 390px; height: 390px; }.orbit-two { width: 310px; height: 310px; }.shopping-card { width: 88%; padding: 19px; }.category-tile { min-height: 94px; }.floating-note { transform: scale(.9); }.note-one { right: -8%; }.note-two { left: -8%; bottom: 5%; }footer { flex-direction: column; justify-content: center; gap: 7px; text-align: center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }