:root{
--ocean:#0E5E8B; --ocean-600:#0B4F74; --ocean-500:#0E5E8B; --ocean-400:#1678AD;
--coral:#FF7A59; --coral-600:#E86648;
--sand:#F3E6D0; --sand-600:#E7D7BD;
--ink:#0D1117; --fog:#EAEFF4;

--radius-xl:22px; --radius-lg:16px;
--shadow-1: 0 10px 30px rgba(14,94,139,.25);
--glass-bg: rgba(255,255,255,.14);
--glass-stroke: rgba(255,255,255,.28);
--glass-inner: inset 0 1px 0 rgba(255,255,255,.35);

/* fonts */
--font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
--font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
}

/* base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: linear-gradient(180deg, var(--sand) 0%, #fff 100%);
}
h1,h2,h3{ font-family: var(--font-serif); letter-spacing: -0.01em; }
a{color:var(--ocean-500);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(140%);background:rgba(255,255,255,.6);border-bottom:1px solid rgba(0,0,0,.06)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink)}
.nav .menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav .menu a{padding:8px 10px;border-radius:10px}
.nav .menu a:hover{background:rgba(0,0,0,.06)}

/* hero */
.hero{position:relative;isolation:isolate;padding:72px 0 56px}
.hero-card{max-width:900px;margin:0 auto;padding:36px 36px}
.hero-title{margin:0 0 8px;font-size:42px;line-height:1.1}
.hero-sub{margin:0 0 22px;font-size:20px;opacity:.9}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* glass */
.glass,.glass-nav{
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.34);
border-radius: var(--radius-xl);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 14px 40px rgba(14,94,139,.30);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
}
.glass-nav{border-radius:16px;border:1px solid rgba(255,255,255,.45)}

/* content cards */
.content{padding:40px 0}
.card{padding:28px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:12px 18px;border-radius:999px;font-weight:700;transition:.2s ease;border:2px solid transparent}
.btn--ocean{background:var(--ocean-500);color:#fff}
.btn--ocean:hover{background:var(--ocean-600)}
.btn--coral-outline{background:transparent;color:var(--coral);border-color:var(--coral)}
.btn--coral-outline:hover{background:rgba(255,122,89,.1);color:var(--coral-600);border-color:var(--coral-600)}

/* footer */
.site-footer{padding:32px 0;color:#415269;background:linear-gradient(180deg,#fff 0%, var(--fog) 100%)}
.site-footer .wrap{display:flex;justify-content:center}

/* === Hero Parallax === */
#hero{position:relative;min-height:clamp(420px,70vh,680px);overflow:hidden;border-radius:22px;margin:clamp(16px,4vw,40px) auto;padding:clamp(24px,4vw,56px);max-width:1120px;backdrop-filter:blur(22px) saturate(120%);background:rgba(255,255,255,0.08);box-shadow:0 10px 30px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.25)}
#hero .parallax{position:absolute;inset:-15%;pointer-events:none;filter:blur(30px)}
#hero .parallax-layer{position:absolute;inset:0;transform:translate3d(0,0,0);transition:transform .06s linear;opacity:.9;mix-blend-mode:normal}
/* blobs */
.entry-content h2{font-size:clamp(22px,2.6vw,28px);margin:1.6em 0 .6em}
/* Magnetic helpers */
.magnet, .btn, .chip, .card, .price-card, .brand, .menu a, .hero-card, .section-title {
will-change: transform;
transition: transform 60ms linear; /* snappy; physics handled in JS */
}
/* Lift hovered items a hair for visual feedback */
.magnet:hover, .btn:hover, .chip:hover, .card:hover, .price-card:hover, .menu a:hover {
filter: saturate(1.05);
}