/* ───────── GLOBAL (neutral Apple-style) ───────── */
:root{
  --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --color-text:#1d1d1f;
  --color-accent:#007aff;
  --color-bg:#ffffff;
  --color-faint:#f2f2f5;
  --grid-max:1200px;
  --radius:0.75rem;
  --space:1rem;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-system);color:var(--color-text);background:var(--color-bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* Layout */
.container{width:90%;max-width:var(--grid-max);margin-inline:auto;padding-block:calc(var(--space)*2)}
.section-title{font-size:1.75rem;font-weight:600;margin-block:calc(var(--space)*3) calc(var(--space)*1.5)}

/* Navigation */
nav{background:var(--color-bg);border-bottom:1px solid #e5e5e7;position:sticky;top:0;z-index:1000}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space)}
.logo{font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.logo span{font-weight:400;opacity:.7}

/* Hamburger */
#nav-toggle{background:none;border:none;display:flex;flex-direction:column;gap:4px;padding:.25rem .5rem;cursor:pointer}
#nav-toggle span{width:22px;height:2px;background:var(--color-text);transition:.3s}
#nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
#nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Menu */
#nav-menu{display:flex;gap:var(--space)}
#nav-menu li a{padding:.5rem .75rem;border-radius:var(--radius);font-weight:500}
#nav-menu li a:hover,#nav-menu li a:focus{background:var(--color-faint);color:var(--color-accent)}
@media(max-width:740px){
  #nav-menu{position:absolute;inset-inline:0;top:100%;background:var(--color-bg);flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .3s}
  #nav-menu.open{max-height:240px;border-bottom:1px solid #e5e5e7}
  #nav-menu li a{display:block}
}

/* Hero */
.hero{position:relative;padding-block:calc(var(--space)*8) calc(var(--space)*10);text-align:center;overflow:hidden}
.hero h1{font-size:clamp(2.5rem,5vw+1rem,4rem);font-weight:700;line-height:1.15;margin-bottom:var(--space)}
.hero p{font-size:1.25rem;max-width:40ch;margin-inline:auto;margin-bottom:calc(var(--space)*2)}
.hero .cta-btn{display:inline-block;background:var(--color-accent);color:#fff;padding:.9rem 2.2rem;font-weight:600;border-radius:var(--radius);transition:background .2s}
.hero .cta-btn:hover,.hero .cta-btn:focus{background:#005dc1}
.hero-bg{position:absolute;inset:0;background:url('/assets/placeholder.webp') center/cover no-repeat;filter:blur(40px) brightness(.7);opacity:.35;z-index:-1}

/* Card grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:calc(var(--space)*2)}
.card{background:var(--color-bg);border:1px solid #e5e5e7;border-radius:var(--radius);overflow:hidden;transition:transform .3s}
.card:hover{transform:translateY(-4px)}
.card-thumb{aspect-ratio:4/3;overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.1rem}
.card-body h3{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}
.card-body p{font-size:.95rem;opacity:.85}

/* Footer */
footer{background:var(--color-faint);text-align:center;margin-top:calc(var(--space)*6);padding-block:calc(var(--space)*2);font-size:.9rem}

/* Animations */
@keyframes fade-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.reveal-up{opacity:0;animation:fade-up .8s ease forwards}
.reveal-fade{opacity:0;animation:fade .8s ease forwards}
.reveal-up.in,.reveal-fade.in{/* class added by JS */}
/* Utility */
.cta-btn{background:var(--color-accent);color:#fff;padding:.9rem 2.1rem;border-radius:var(--radius);font-weight:600;display:inline-block;transition:background .2s}
.cta-btn:hover,.cta-btn:focus{background:#005dc1}

@media(min-width:768px){body{font-size:1.05rem}}