:root {
    --cl-dark:   #3e4347;   /* logo text */
    --cl-accent: #f0a878;   /* logo accent */
    --cl-bg-gradient: linear-gradient(135deg, #ffffff 0%, #fff8f3 35%, #fdf1e9 100%);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin:0; }
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--cl-dark);
    background: var(--cl-bg-gradient);
    background-size: 200% 200%;
    animation: bg-shift 18s ease-in-out infinite;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
}

/* Layout */
header { position: relative; padding: 20px; }
.brand { position: absolute; top: 20px; left: 20px; display:inline-block; animation: fadeScale .7s ease both; }
.brand img { height: 200px; width: auto; transition: transform .25s ease, filter .25s ease; }
.brand img:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); }

main { place-self: center; text-align: center; padding: 24px; animation: fadeUp .6s ease both .1s; width: min(720px, 92vw); }

h1 { font-size: clamp(28px, 5.2vw, 56px); font-weight: 800; margin: 0.5em 0 0.25em; letter-spacing: .2px; }
p.sub { font-size: clamp(16px, 2.2vw, 20px); margin: 0 0 1.25rem; opacity: .9; }

footer { place-self: center; animation: fadeUp .6s ease both .25s; padding: 18px 24px 28px; }
.social { display:flex; gap:20px; align-items:center; }
.social a { display:inline-flex; align-items:center; gap:8px; color: var(--cl-dark); text-decoration:none; position:relative; }
.social a svg { width:22px; height:22px; fill:none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s ease; }
.social a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--cl-accent); transform-origin:left; transform: scaleX(0); transition: transform .25s ease; }
.social a:hover::after{ transform: scaleX(1); }
.social a:hover svg { transform: translateY(-1px); }

/* Animations */
@keyframes bg-shift { 0%{ background-position: 0% 0%; } 50%{ background-position: 100% 100%; } 100%{ background-position: 0% 0%; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeScale { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    body { animation: none; }
    .brand, main, footer { animation: none; }
}

@media (max-width: 768px) {
    .brand img { height: 60px }
}

@media (max-width: 992px) {
    .brand img { height: 100px }
}