/* Polygonal style: bright polygons, tasteful parallax */
:root {
  --poly-a: #ef4444; /* red-500 */
  --poly-b: #f59e0b; /* amber-500 */
  --poly-c: #84cc16; /* lime-500 */
  --poly-d: #06b6d4; /* cyan-500 */
  --poly-e: #8b5cf6; /* violet-500 */
  --poly-fade: 0.12; /* global opacity */
}

.polygon-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6rem) 0;
  background: linear-gradient(180deg, rgba(2,132,199,.04), rgba(2,132,199,.08));
}

.polygon-hero .container { position: relative; z-index: 5; }
.polygon-hero h1 { letter-spacing: -0.02em; }
.polygon-hero .lead { max-width: 64ch; }

/* Parallax polygon layers */
.polygon-layer { position: absolute; inset: 0; pointer-events: none; }
.polygon-shape { position: absolute; will-change: transform; filter: drop-shadow(0 10px 24px rgba(2,6,23,.12)); opacity: .9; }
.polygon-shape.is-soft { opacity: .65; }

/* Triangles / polygons via clip-path */
.poly-tri {
  width: 42vw; height: 42vw; max-width: 700px; max-height: 700px;
  background: linear-gradient(135deg, var(--poly-a), var(--poly-d));
  opacity: var(--poly-fade);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.poly-kite {
  width: 40vw; height: 40vw; max-width: 640px; max-height: 640px;
  background: linear-gradient(135deg, var(--poly-b), var(--poly-e));
  opacity: calc(var(--poly-fade) + .03);
  clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 65%);
}
.poly-rhombus {
  width: 30vw; height: 30vw; max-width: 520px; max-height: 520px;
  background: linear-gradient(135deg, var(--poly-c), var(--poly-d));
  opacity: calc(var(--poly-fade) + .02);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Suggested placements */
.poly-1 { top: -10%; left: -8%; transform: rotate(8deg); }
.poly-2 { bottom: -18%; right: -12%; transform: rotate(-12deg); }
.poly-3 { top: 10%; right: 15%; transform: rotate(4deg); }

/* Cards with polygon top accent */
.polygon-card { position: relative; overflow: hidden; }
.polygon-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--poly-a), var(--poly-e));
  opacity: .6;
}

/* Subtle hover for polygon buttons */
.btn-polygon { position: relative; overflow: hidden; }
.btn-polygon::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease;
  background: radial-gradient(120% 120% at 50% 0%, rgba(139,92,246,.16), rgba(14,165,233,.12) 40%, transparent 60%);
}
.btn-polygon:hover::after { opacity: 1; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .polygon-shape { will-change: auto; }
}

/* Accent line for headers */
.poly-accent-bar { height: 6px; width: 100%; position: relative; overflow: hidden; }
.poly-accent-bar::before {
  content: ""; position: absolute; inset: 0; 
  background: linear-gradient(90deg, var(--poly-a), var(--poly-d), var(--poly-e));
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
  opacity: .6;
}

/* Corner polygons for sections */
.poly-corner { position: absolute; width: 220px; height: 220px; opacity: .12; pointer-events: none; }
.poly-corner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--poly-b), var(--poly-d)); clip-path: polygon(0 0, 100% 0, 0 100%); }
.poly-corner--tr { top: -10px; right: -10px; transform: rotate(0deg); }
.poly-corner--bl { bottom: -10px; left: -10px; transform: rotate(180deg); }

/* Background grid for secondary hero blocks */
.bg-grid {
  position: relative; overflow: hidden;
  background:
    linear-gradient(0deg, rgba(2,6,23,.04) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(2,6,23,.04) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(180deg, rgba(14,165,233,.05), rgba(14,165,233,.02));
}
.section-hero { padding: 2.5rem 0; border-bottom: 1px solid rgba(226,232,240,.6); }
.section-hero h1,.section-hero h2 { letter-spacing: -0.01em; }

/* Skeleton loaders */
[data-loading="true"] .skeleton { display: block; }
.skeleton { display: none; }
.skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(203,213,225,.35), rgba(226,232,240,.55), rgba(203,213,225,.35)); background-size: 200% 100%; animation: sk-pulse 1.2s ease-in-out infinite; }
.skeleton-line.sm { height: 8px; }
.skeleton-line.lg { height: 16px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(90deg, rgba(203,213,225,.35), rgba(226,232,240,.55), rgba(203,213,225,.35)); background-size: 200% 100%; animation: sk-pulse 1.2s ease-in-out infinite; }
@keyframes sk-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }