/* INAYAH digital visiting card: refined green palette and compact responsive layout. */
:root {
    color-scheme: light;
    --bg: #f5faf6;
    --green: #287638;
    --green-deep: #173c25;
    --green-soft: #e4f1e7;
    --text: #1b2b20;
    --muted: #66786c;
    --line: rgba(23, 60, 37, 0.10);
}

/* Accent colour tokens: --c is the strong colour, --soft its pale tint */
.c-green  { --c: #287638; --soft: #e4f1e7; }
.c-teal   { --c: #3a9a4d; --soft: #e4f1e7; }
.c-sky    { --c: #579363; --soft: #e4f1e7; }
.c-violet { --c: #84ac8a; --soft: #e9f2ea; }
.c-amber  { --c: #173c25; --soft: #e1eee3; }

* { box-sizing: border-box; }
html { min-width: 320px; height: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 12px; }

/* ---------- Background wash ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(132,172,138,0.22), transparent 48%), radial-gradient(ellipse at 100% 100%, rgba(58,154,77,0.09), transparent 42%), linear-gradient(145deg, #f0f7f1 0%, #fbfdfb 52%, #eaf3eb 100%); }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.g-mint  { top: -140px; left: -80px; width: 420px; height: 420px; background: rgba(58, 154, 77, 0.22); }
.g-sky   { top: 22%; right: -160px; width: 380px; height: 380px; background: rgba(87, 147, 99, 0.16); }
.g-peach { bottom: -120px; left: -120px; width: 400px; height: 400px; background: rgba(58, 154, 77, 0.12); }
.g-lilac { bottom: 18%; right: -140px; width: 360px; height: 360px; background: rgba(40, 118, 56, 0.12); }

/* ---------- Layout ---------- */
.page-shell { position: relative; width: min(100% - 44px, 480px); height: 100vh; height: 100svh; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom)); display: grid; align-content: center; gap: 16px; overflow: hidden; }

/* ---------- Logo: white JPG background multiplies away into the page ---------- */
.topbar { display: flex; align-items: center; justify-content: center; padding: 10px 0; background: transparent; }
.brand { display: inline-flex; width: min(190px, 50vw); overflow: hidden; border-radius: 3px; background: transparent; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; background: transparent; -webkit-mix-blend-mode: multiply; mix-blend-mode: multiply; transform: translateY(0) scale(1); transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 220ms ease; }
.brand:active .brand-logo { transform: translateY(-2px) scale(1.025); filter: drop-shadow(0 4px 7px rgba(23, 60, 37, 0.12)); }

/* ---------- Hero ---------- */
.hero, .quick { position: relative; z-index: 1; }
.hero { position: relative; display: grid; justify-items: center; text-align: center; padding: 22px 18px 20px; overflow: hidden; border: 1px solid rgba(40, 118, 56, 0.12); border-radius: 24px; background: linear-gradient(150deg, rgba(255,255,255,0.96), rgba(241,248,242,0.84) 62%, rgba(231,242,233,0.76)); box-shadow: 0 18px 44px rgba(23,60,37,0.075), inset 0 1px rgba(255,255,255,0.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hero::before { position: absolute; inset: 0 18% auto; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(40,118,56,0.42), transparent); content: ""; }
.hero > * { animation: fade-up 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero > :nth-child(2) { animation-delay: 120ms; }
.hero > :nth-child(3) { animation-delay: 200ms; }
.hero > :nth-child(4) { animation-delay: 280ms; }
.hero > :nth-child(5) { animation-delay: 360ms; }

.avatar-wrap { position: relative; width: 116px; height: 116px; margin-bottom: 18px; isolation: isolate; }
.avatar-wrap::before { position: absolute; z-index: 0; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(58, 154, 77, 0.2), rgba(58, 154, 77, 0)); content: ""; filter: blur(8px); }

.avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 2px solid rgba(40, 118, 56, 0.22); border-radius: 50%; background: rgba(228, 241, 231, 0.75); color: #fff; box-shadow: 0 0 0 4px rgba(40, 118, 56, 0.045), 0 8px 22px rgba(23, 60, 37, 0.08); transform: scale(1.08); transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.avatar:hover, .avatar:active { transform: scale(1.14) translateY(-2px); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 78%, transparent 100%); mask-image: radial-gradient(circle, #000 78%, transparent 100%); }
.avatar-initials { font-family: Manrope, sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -1px; }

.hero h1 { color: var(--green-deep); font-family: Manrope, sans-serif; font-size: clamp(28px, 8vw, 34px); font-weight: 800; letter-spacing: -1.15px; line-height: 1.12; text-shadow: 0 1px 0 rgba(255,255,255,0.85); }
.role { display: grid; justify-items: center; gap: 4px; margin-top: 11px; color: #627267; font-size: 14px; line-height: 1.45; }
.role .department { color: #829087; font-size: 12px; }
.role strong { color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 0.015em; }
.location { display: inline-flex; align-items: center; gap: 7px; max-width: 320px; margin-top: 11px; color: #66766b; font-size: 12.5px; line-height: 1.55; }
.location svg { width: 15px; height: 15px; flex: 0 0 15px; color: #287638; }

/* ---------- Buttons ---------- */
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 20px; }
.hero-actions:has(.btn:only-child) { grid-template-columns: 1fr; }
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 13px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; }
.btn svg { width: 19px; height: 19px; flex: 0 0 19px; }
.btn-primary { border-color: rgba(23,60,37,0.12); background: linear-gradient(115deg, #328444 0%, #287638 52%, #1d542e 100%); color: #fff; box-shadow: 0 7px 17px rgba(40,118,56,0.19), inset 0 1px rgba(255,255,255,0.2); }
.btn:active { transform: scale(0.98); }

/* ---------- Quick tiles ---------- */
.quick { display: grid; gap: 10px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 9px; }
.quick-grid li { animation: contact-enter 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.quick-grid li:nth-child(2) { animation-delay: 70ms; }
.quick-grid li:nth-child(3) { animation-delay: 140ms; }
.quick-grid li:nth-child(4) { animation-delay: 210ms; }
.tile { position: relative; display: grid; justify-items: center; gap: 7px; padding: 11px 7px 9px; overflow: hidden; border: 1px solid rgba(23,60,37,0.09); border-radius: 16px; background: linear-gradient(155deg, rgba(255,255,255,0.94), rgba(237,246,238,0.76)); box-shadow: 0 8px 22px rgba(23,60,37,0.055), inset 0 1px rgba(255,255,255,0.9); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.tile::before { content: ""; position: absolute; inset: 0 18% auto; height: 2px; border-radius: 99px; background: color-mix(in srgb, var(--c) 66%, white); }
.tile-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(23,60,37,0.08); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 88%, white), var(--c)); color: #fff; box-shadow: 0 5px 12px color-mix(in srgb, var(--c) 22%, transparent), inset 0 1px rgba(255,255,255,0.18); }
.tile-icon svg { width: 18px; height: 18px; }
.tile-label { font-size: 12px; font-weight: 700; color: var(--green-deep); }
.tile:active { transform: translateY(1px) scale(0.985); }
.website-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; overflow: hidden; border: 1px solid rgba(23,60,37,0.09); border-radius: 15px; background: linear-gradient(100deg, rgba(228,241,231,0.92), rgba(255,255,255,0.9)); box-shadow: 0 8px 20px rgba(23,60,37,0.055); font-size: 13.5px; font-weight: 700; color: var(--green-deep); transition: border-color 160ms ease, transform 160ms ease; }
.website-link { animation: contact-enter 480ms 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.website-link .tile-icon { width: 38px; height: 38px; border-radius: 12px; }
.website-link .tile-icon svg { width: 19px; height: 19px; }
.wl-text { flex: 1; }
.website-link b { color: var(--c); font-weight: 600; }

/* ---------- Keyframes ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes contact-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (hover: hover) and (pointer: fine) {
    .brand:hover .brand-logo { transform: translateY(-2px) scale(1.025); filter: drop-shadow(0 4px 7px rgba(23, 60, 37, 0.12)); }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(40, 118, 56, 0.42); }
    .tile:hover { transform: translateY(-3px); border-color: var(--c); }
    .website-link:hover { border-color: var(--c); }
}

@media (max-width: 600px) {
    .page-shell { width: min(100% - 32px, 480px); gap: 15px; }
    .brand { isolation: isolate; background: linear-gradient(145deg, #f0f7f1 0%, #fbfdfb 52%, #eaf3eb 100%); }
    .quick-grid { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 8px; }
    .tile { padding-inline: 6px; }
    .btn { min-height: 46px; }
}

@media (max-width: 380px) {
    .page-shell { width: min(100% - 28px, 480px); gap: 13px; padding-top: max(14px, env(safe-area-inset-top)); }
    .hero { padding-top: 12px; }
    .avatar-wrap { width: 100px; height: 100px; margin-bottom: 13px; }
    .hero h1 { font-size: clamp(25px, 8vw, 30px); }
    .hero-actions { grid-template-columns: 1fr; }
    .btn { min-height: 44px; padding: 9px 12px; }
}

@media (max-height: 620px) {
    .page-shell { gap: 6px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .topbar { padding-block: 3px; }
    .brand { width: min(160px, 44vw); }
    .hero { padding: 10px 12px; border-radius: 22px; }
    .avatar-wrap { width: 82px; height: 82px; margin-bottom: 7px; }
    .hero h1 { font-size: clamp(24px, 7vw, 30px); }
    .role { margin-top: 5px; font-size: 13px; }
    .location { margin-top: 5px; font-size: 12px; }
    .hero-actions { margin-top: 8px; }
    .btn { min-height: 40px; }
    .quick { gap: 5px; }
    .quick-grid { gap: 5px; }
    .tile { gap: 3px; padding-block: 5px; }
    .tile-icon { width: 29px; height: 29px; }
    .tile-label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero > *, .quick-grid li, .website-link { animation: none !important; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}