/* PAPAN SSD LTD — theme.css */

/* Premium surface systems */
.engineering-surface,
.water-surface,
.contour-surface,
.dot-surface,
.grid-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.engineering-surface {
  background:
    radial-gradient(circle at 88% 12%, rgba(41, 170, 225, .10), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(245, 248, 250, .98));
}

.engineering-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .10;
  background-image: url("/assets/img/patterns/engineering-grid.svg");
  background-size: 720px auto;
  pointer-events: none;
}

.engineering-surface::after {
  content: "";
  position: absolute;
  right: -14rem;
  top: -14rem;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(41, 170, 225, .18);
  border-left-color: rgba(21, 71, 124, .18);
  border-radius: 50%;
  pointer-events: none;
}

.water-surface {
  color: var(--color-white);
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, .16), transparent 18rem),
    radial-gradient(circle at 82% 76%, rgba(41, 170, 225, .24), transparent 26rem),
    var(--gradient-water);
}

.water-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .16;
  background-image: url("/assets/img/patterns/water-lines.svg");
  background-size: 840px auto;
  animation: pattern-drift 24s linear infinite;
  pointer-events: none;
}

.water-surface::after {
  content: "";
  position: absolute;
  left: -12rem;
  bottom: -16rem;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-right-color: rgba(41, 170, 225, .36);
  border-radius: 50%;
  pointer-events: none;
}

.contour-surface {
  background:
    radial-gradient(circle at 88% 18%, rgba(41, 170, 225, .08), transparent 22rem),
    var(--color-white);
}

.contour-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .085;
  background-image: url("/assets/img/patterns/contour-map.svg");
  background-size: 980px auto;
  pointer-events: none;
}

.dot-surface {
  background:
    radial-gradient(circle at 8% 12%, rgba(21, 71, 124, .06), transparent 24rem),
    var(--color-white);
}

.dot-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .10;
  background-image: url("/assets/img/patterns/technical-dots.svg");
  background-size: 460px auto;
  pointer-events: none;
}

.grid-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(237, 248, 253, .78));
}

.grid-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .12;
  background-image:
    linear-gradient(rgba(21, 71, 124, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 71, 124, .08) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

/* Hero system */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 74vh, 820px);
  padding-block: clamp(76px, 10vw, 132px);
  background:
    radial-gradient(circle at 84% 16%, rgba(41, 170, 225, .26), transparent 24rem),
    radial-gradient(circle at 8% 88%, rgba(21, 71, 124, .11), transparent 26rem),
    linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .12;
  background-image: url("/assets/img/patterns/engineering-grid.svg");
  background-size: 720px auto;
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -12vw;
  top: 10%;
  z-index: -2;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  border: 2px solid rgba(41, 170, 225, .20);
  border-left-color: rgba(0, 0, 0, .24);
  border-bottom-color: rgba(21, 71, 124, .16);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(41, 170, 225, .12), transparent 58%),
    radial-gradient(circle, rgba(255, 255, 255, .70), transparent 44%);
  animation: ring-rotate 30s linear infinite;
  pointer-events: none;
}

.page-hero .lead {
  margin-top: 1.1rem;
}

.hero-actions {
  position: relative;
  z-index: 2;
}

/* Hero visual cards */
.hero-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.5rem, 3.4vw, 2.8rem);
  border: var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .84);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .30;
  background:
    radial-gradient(circle at top right, rgba(41, 170, 225, .20), transparent 16rem),
    url("/assets/img/patterns/technical-dots.svg");
  background-size: auto, 380px auto;
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  right: -64px;
  bottom: -64px;
  z-index: -1;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(41, 170, 225, .24);
  border-radius: 50%;
  pointer-events: none;
}

.hero-card-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  color: var(--color-sky-blue);
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-card-label::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.hero-card strong {
  display: block;
  margin-bottom: .75rem;
  color: var(--color-deep-blue);
  font-family: var(--font-heading);
  font-size: clamp(1.32rem, 2.4vw, 2.15rem);
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.hero-card p {
  color: var(--color-muted);
}

/* Premium content panels */
.content-placeholder,
.content-panel,
.feature-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.35rem, 3vw, 2.5rem);
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.content-placeholder::before,
.content-panel::before,
.feature-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--gradient-primary);
}

.content-placeholder::after,
.content-panel::after,
.feature-panel::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: -1;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(41, 170, 225, .16);
  border-radius: 50%;
  pointer-events: none;
}

/* CTA bands */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2rem, 5vw, 4.4rem);
  border-radius: var(--radius-xl);
  color: var(--color-white);
  background: var(--gradient-dark);
  box-shadow: var(--shadow-float);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .18;
  background-image:
    url("/assets/img/patterns/water-lines.svg"),
    radial-gradient(circle at 80% 20%, rgba(41, 170, 225, .55), transparent 24rem);
  background-size: 760px auto, auto;
  animation: pattern-drift 28s linear infinite;
  pointer-events: none;
}

.cta-band::after {
  content: "";
  position: absolute;
  right: -10rem;
  bottom: -14rem;
  z-index: -1;
  width: 30rem;
  height: 30rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-left-color: rgba(41, 170, 225, .50);
  border-radius: 50%;
  pointer-events: none;
}

.cta-band h2,
.cta-band h3 {
  color: var(--color-white);
}

.cta-band p {
  color: rgba(255, 255, 255, .78);
}

/* Timeline cards */
.timeline-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  border: var(--line);
  border-left: 4px solid var(--color-sky-blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.timeline-card::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -44px;
  width: 94px;
  height: 94px;
  border: 1px solid rgba(41, 170, 225, .18);
  border-radius: 50%;
}

.timeline-card h3 {
  margin-bottom: .5rem;
}

/* Technical callouts */
.callout,
.engineering-callout,
.water-callout {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border-radius: var(--radius-lg);
}

.callout {
  border: var(--line);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.engineering-callout {
  border: var(--line-blue);
  background:
    radial-gradient(circle at 90% 12%, rgba(41, 170, 225, .14), transparent 12rem),
    rgba(41, 170, 225, .06);
}

.water-callout {
  color: var(--color-white);
  background: var(--gradient-water);
  box-shadow: var(--shadow-blue);
}

.water-callout h2,
.water-callout h3,
.water-callout h4 {
  color: var(--color-white);
}

.water-callout p {
  color: rgba(255, 255, 255, .78);
}

/* Document label fallback */
.document-card {
  position: relative;
  padding: 1.4rem;
}

.document-card::after {
  content: "PDF";
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 28px;
  padding: .35rem .52rem;
  border-radius: var(--radius-xs);
  color: var(--color-white);
  background: var(--color-deep-blue);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
}

/* Visual frame accents */
.blueprint-frame,
.water-frame,
.infra-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-light);
  box-shadow: var(--shadow-float);
}

.blueprint-frame::before,
.water-frame::before,
.infra-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.blueprint-frame::before {
  opacity: .12;
  background-image: url("/assets/img/patterns/engineering-grid.svg");
  background-size: 640px auto;
}

.water-frame::before {
  opacity: .18;
  background-image: url("/assets/img/patterns/water-lines.svg");
  background-size: 720px auto;
}

.infra-frame::before {
  opacity: .10;
  background-image: url("/assets/img/patterns/contour-map.svg");
  background-size: 900px auto;
}

/* Dark section corrections */
.section-dark .content-panel,
.section-dark .feature-panel,
.water-surface .content-panel,
.water-surface .feature-panel {
  color: var(--color-text);
}

.section-dark .kicker,
.water-surface .kicker {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
}

/* Mobile */
@media (max-width: 900px) {
  .page-hero {
    min-height: auto;
    padding-block: clamp(68px, 12vw, 96px);
  }

  .page-hero::after {
    width: 80vw;
    right: -36vw;
    opacity: .65;
  }

  .hero-card {
    border-radius: var(--radius-lg);
  }

  .cta-band {
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 680px) {
  .engineering-surface::after,
  .water-surface::after,
  .cta-band::after {
    opacity: .5;
  }

  .hero-card,
  .content-placeholder,
  .content-panel,
  .feature-panel,
  .timeline-card,
  .callout,
  .engineering-callout,
  .water-callout {
    border-radius: var(--radius-md);
  }

  .page-hero::after {
    width: 96vw;
    right: -52vw;
    top: 8%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .water-surface::before,
  .page-hero::after,
  .cta-band::before {
    animation: none !important;
  }
}