/* 20-hero.css — extracted from main.css */

/* ========== HERO ========== */
.hero{
  background: linear-gradient(135deg, #1273de 0%, #20a4ff 100%);
  color:#fff; padding:80px 0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.15);
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center; }
.hero-copy h1{ font-size: clamp(36px, 6vw, 64px); font-weight:900; letter-spacing:.5px; }
.hero-copy h1 span{ display:block; }
.subtitle{ opacity:.9; margin:8px 0 20px; }
.hero-art{ filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); }



/* ===== Digital Craftsmanship variant ===== */
.hero--craft {
  position: relative;
  overflow: hidden; /* for the soft overlay below */
}

/* subtle geometric glow overlay */
.hero--craft::after{
  content:"";
  position:absolute; inset:-20% -10%;
  pointer-events:none;
  background:
    radial-gradient(70% 70% at 120% -10%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(40% 40% at -20% 120%, rgba(255,255,255,.12) 0%, transparent 60%);
}

/* tighten copy width a touch for better rhythm */
.hero--craft .subtitle{ max-width:56ch; }

/* optional pill label (keeps your palette) */
.pill{ display:inline-block; padding:6px 12px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.2px; }
.pill-dark{ background:rgba(0,0,0,.22); color:#fff; }

/* image treatment (reuses your drop shadow) */
.hero--craft .hero-art img{ width:100%; height:auto; display:block; filter:drop-shadow(0 10px 24px rgba(0,0,0,.25)); }

/* reduce motion prefers */
@media (prefers-reduced-motion: reduce){
  .hero--craft *{ animation:none !important; transition:none !important; }
}