/* ==========================================================================
   Shopfront Studios — Signal glass refresh
   --------------------------------------------------------------------------
   The interface language requested for this pass: deep navy glass, electric
   blue-to-cyan light, violet and magenta bloom, generous rounded surfaces and
   gradient primary actions. This file sits after the component stylesheets so
   it can refine the whole site without changing its structure.
   ========================================================================== */

:root {
  --glass-bg: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.078) 0%,
    rgba(160, 190, 255, 0.035) 34%,
    rgba(9, 15, 33, 0.62) 68%,
    rgba(4, 7, 16, 0.82) 100%
  );
  --glass-border: rgba(178, 202, 255, 0.18);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --glass-shadow:
    0 34px 90px -46px rgba(0, 0, 0, 0.95),
    0 0 80px -46px rgba(47, 123, 255, 0.42);
  --primary-gradient: linear-gradient(100deg, #2f6bff 0%, #3f8cff 44%, #4fd8ff 100%);
  --primary-gradient-hot: linear-gradient(100deg, #3f7bff 0%, #52a7ff 42%, #7ceae8 100%);
  --signal-gradient: linear-gradient(
    100deg,
    #e8f6ff 0%,
    #8bd7ff 24%,
    #4f8cff 52%,
    #a78bfa 76%,
    #ff7ae4 100%
  );
}

/* --------------------------------------------------------------------------
   Page light
   -------------------------------------------------------------------------- */

body {
  background-color: #050812;
  background-image:
    radial-gradient(58rem 42rem at 88% -12%, rgba(47, 123, 255, 0.26), transparent 62%),
    radial-gradient(44rem 36rem at -10% 22%, rgba(255, 79, 216, 0.14), transparent 64%),
    radial-gradient(48rem 36rem at 52% 108%, rgba(79, 216, 255, 0.1), transparent 70%);
}

#app {
  position: relative;
  isolation: isolate;
}

#app::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(36rem 30rem at 72% 18%, rgba(109, 92, 255, 0.13), transparent 68%),
    radial-gradient(30rem 26rem at 14% 68%, rgba(255, 79, 216, 0.08), transparent 70%),
    radial-gradient(26rem 22rem at 84% 88%, rgba(79, 216, 255, 0.08), transparent 72%);
  pointer-events: none;
}

::selection {
  background: rgba(79, 216, 255, 0.9);
  color: #04101c;
}

/* --------------------------------------------------------------------------
   Header and brand
   -------------------------------------------------------------------------- */

.site-header {
  background: rgba(5, 8, 18, 0.64);
  border-bottom-color: rgba(175, 198, 255, 0.12);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

.site-header::after {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(79, 216, 255, 0.7),
    rgba(109, 92, 255, 0.55),
    rgba(255, 79, 216, 0.42),
    transparent
  );
  opacity: 0.5;
}

.brand-symbol {
  filter: drop-shadow(0 0 12px rgba(79, 216, 255, 0.45));
}

.brand:hover .brand-symbol {
  filter: drop-shadow(0 0 16px rgba(255, 79, 216, 0.5));
}

.brand em {
  background: var(--signal-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nav-link {
  color: rgba(226, 235, 255, 0.72);
}

.nav-link::after {
  background: linear-gradient(90deg, #4fd8ff, #ff4fd8);
}

@media (max-width: 56.24rem) {
  .nav-links {
    z-index: 1;
    background: linear-gradient(180deg, #0a1226 0%, #050a16 100%);
    border-bottom-color: rgba(79, 216, 255, 0.24);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.btn {
  border-color: rgba(175, 198, 255, 0.22);
  background: rgba(255, 255, 255, 0.035);
  color: #eaf1ff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.btn:hover {
  border-color: rgba(79, 216, 255, 0.55);
  background: rgba(79, 216, 255, 0.08);
  box-shadow: 0 18px 44px -26px rgba(47, 123, 255, 0.8);
}

.btn-primary {
  border-color: rgba(159, 220, 255, 0.5);
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow:
    0 18px 46px -20px rgba(47, 123, 255, 0.75),
    0 0 0 1px rgba(79, 216, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.btn-primary:hover {
  border-color: rgba(200, 244, 255, 0.8);
  background: var(--primary-gradient-hot);
  color: #ffffff;
  box-shadow:
    0 22px 56px -18px rgba(79, 216, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-primary:focus-visible {
  outline-color: #9beeff;
}

.hero-cta--ghost {
  border-color: rgba(175, 198, 255, 0.24);
  background: rgba(255, 255, 255, 0.045);
}

.hero-cta--ghost:hover {
  border-color: rgba(79, 216, 255, 0.5);
  background: rgba(79, 216, 255, 0.08);
}

.tag {
  border-color: rgba(175, 198, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero-atmosphere__beam {
  background:
    radial-gradient(circle at 54% 48%, rgba(47, 123, 255, 0.32), transparent 45%),
    radial-gradient(circle at 36% 44%, rgba(109, 92, 255, 0.2), transparent 38%),
    radial-gradient(circle at 66% 64%, rgba(255, 79, 216, 0.14), transparent 36%),
    radial-gradient(circle at 60% 38%, rgba(79, 216, 255, 0.12), transparent 32%);
}

.hero-atmosphere__grid {
  background-image:
    linear-gradient(90deg, rgba(175, 198, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(175, 198, 255, 0.05) 1px, transparent 1px);
}

.hero-topline {
  border-bottom-color: rgba(175, 198, 255, 0.14);
}

.hero-title em,
.accent,
.manifesto-copy h2 span,
.contact-copy h2 .accent {
  background: var(--signal-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-title__outline {
  -webkit-text-stroke-color: rgba(151, 181, 255, 0.6);
}

.hero-stage__aura {
  background:
    radial-gradient(circle at 50% 46%, rgba(47, 123, 255, 0.3), transparent 48%),
    radial-gradient(circle at 34% 62%, rgba(109, 92, 255, 0.18), transparent 42%),
    radial-gradient(circle at 68% 40%, rgba(255, 79, 216, 0.12), transparent 38%),
    radial-gradient(circle at 64% 66%, rgba(79, 216, 255, 0.1), transparent 36%);
}

.hero-stage {
  filter: drop-shadow(0 28px 60px rgba(47, 123, 255, 0.12));
}

/* --------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */

.section-head {
  border-top-color: rgba(175, 198, 255, 0.14);
}

.section-head h2,
.manifesto-copy h2,
.contact-copy h2 {
  background: linear-gradient(180deg, #ffffff 0%, #e9f0ff 46%, #b9c9ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.section-head h2 .accent,
.manifesto-copy h2 span,
.contact-copy h2 .accent {
  background: var(--signal-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#services > .wrap,
#work > .wrap,
#packages > .wrap,
#configurator > .wrap,
#contact > .wrap {
  position: relative;
  padding: clamp(1.25rem, 3.6vw, 3rem);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  background: var(--glass-bg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

.portfolio-section {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Cards and panels
   -------------------------------------------------------------------------- */

.service-card,
.project-card,
.package,
.config-panel,
.estimate-panel,
.contact-form,
.chat-panel {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-highlight), 0 30px 76px -48px rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.service-card {
  border-radius: 1.6rem;
  background:
    radial-gradient(18rem 12rem at 50% 116%, rgba(47, 123, 255, 0.16), transparent 70%),
    var(--glass-bg);
}

.service-card::before {
  opacity: 0.55;
  background:
    radial-gradient(18rem 14rem at 100% 0, rgba(47, 123, 255, 0.28), transparent 62%),
    radial-gradient(14rem 12rem at 0 100%, rgba(255, 79, 216, 0.14), transparent 70%);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover,
.project-card:hover {
  border-color: rgba(79, 216, 255, 0.42);
  box-shadow:
    var(--glass-highlight),
    0 36px 90px -46px rgba(0, 0, 0, 0.95),
    0 0 60px -28px rgba(79, 216, 255, 0.45);
}

.service-icon {
  border-color: rgba(79, 216, 255, 0.3);
  background: rgba(79, 216, 255, 0.07);
  box-shadow: 0 0 28px -14px rgba(79, 216, 255, 0.7);
}

.service-card h3,
.project-meta h3,
.package h3 {
  color: #f5f8ff;
}

/* Selected work */
.project-card {
  border-radius: 1.6rem;
}

.project-screen {
  border-radius: 1.6rem 1.6rem 0 0;
}

.project-open {
  border-color: rgba(175, 198, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
}

.project-actions {
  border-top: 1px solid transparent;
}

/* Approach */
.manifesto.surface-light {
  --color-bg: transparent;
  --color-bg-deep: #04060e;
  --color-surface-1: #0a1022;
  --color-surface-2: #0e1530;
  --color-surface-3: #141d3d;
  --color-text: #f2f6ff;
  --color-text-soft: #c3cdf0;
  --color-text-muted: #94a2c8;
  --color-text-faint: #7482a8;
  --color-line: rgba(175, 198, 255, 0.14);
  --color-line-strong: rgba(175, 198, 255, 0.26);
  --color-line-accent: rgba(79, 216, 255, 0.5);
  --color-accent: #4fd8ff;
  --color-accent-strong: #8be9ff;
  --color-focus: #4fd8ff;
  background-color: transparent;
  background-image:
    radial-gradient(30rem 26rem at 100% 0, rgba(47, 123, 255, 0.22), transparent 62%),
    radial-gradient(26rem 24rem at 0 100%, rgba(255, 79, 216, 0.13), transparent 66%),
    linear-gradient(155deg, rgba(17, 27, 58, 0.92), rgba(5, 8, 18, 0.97));
  color: var(--color-text);
  color-scheme: dark;
}

.manifesto-stamp {
  border-color: rgba(79, 216, 255, 0.3);
  background:
    radial-gradient(18rem 15rem at 18% 18%, rgba(47, 123, 255, 0.42), transparent 62%),
    radial-gradient(16rem 14rem at 88% 82%, rgba(255, 79, 216, 0.2), transparent 66%),
    linear-gradient(155deg, #101c42, #060b1a 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 60px -34px rgba(0, 0, 0, 0.9);
}

.manifesto-stamp .eyebrow {
  color: #9beeff;
}

.manifesto-stamp .eyebrow::before {
  background: #4fd8ff;
}

.principle b {
  color: #8be9ff;
}

/* Packages */
.package {
  border-radius: 1.6rem;
}

.package.featured {
  border-color: rgba(79, 216, 255, 0.5);
  background:
    radial-gradient(22rem 18rem at 100% 0, rgba(47, 123, 255, 0.26), transparent 64%),
    radial-gradient(18rem 16rem at 0 100%, rgba(255, 79, 216, 0.12), transparent 68%),
    var(--glass-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 30px 80px -38px rgba(47, 123, 255, 0.55),
    0 0 60px -34px rgba(79, 216, 255, 0.45);
}

.package li::before {
  box-shadow: 0 0 10px rgba(79, 216, 255, 0.7);
}

.price,
.estimate-panel .price {
  background: linear-gradient(120deg, #ffffff 0%, #b9d7ff 48%, #6ee7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.price small {
  color: var(--color-text-muted);
  -webkit-text-fill-color: var(--color-text-muted);
}

.pricing-note {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Configurator and forms
   -------------------------------------------------------------------------- */

.choice {
  border-color: rgba(175, 198, 255, 0.22);
  background: rgba(255, 255, 255, 0.025);
}

.choice:hover {
  border-color: rgba(79, 216, 255, 0.5);
  background: rgba(79, 216, 255, 0.06);
}

.choice.active {
  border-color: transparent;
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow:
    0 12px 30px -16px rgba(47, 123, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #4fd8ff, #2f6bff 58%, rgba(79, 216, 255, 0.16));
}

input[type="range"]::-webkit-slider-thumb {
  background: #dffbff;
  box-shadow:
    0 0 0 1px rgba(79, 216, 255, 0.9),
    0 0 18px rgba(79, 216, 255, 0.65);
}

input[type="range"]::-moz-range-track {
  background: rgba(79, 216, 255, 0.2);
}

input[type="range"]::-moz-range-thumb {
  background: #dffbff;
}

.estimate-panel {
  background:
    radial-gradient(28rem 22rem at 100% 0, rgba(47, 123, 255, 0.24), transparent 62%),
    radial-gradient(22rem 18rem at 0 100%, rgba(255, 79, 216, 0.1), transparent 66%),
    var(--glass-bg);
}

.field input,
.field textarea,
.field select,
.chat-form input {
  border-color: rgba(175, 198, 255, 0.2);
  border-radius: 0.9rem;
  background-color: rgba(4, 8, 18, 0.68);
  color: #f2f6ff;
}

.field input:hover,
.field textarea:hover,
.field select:hover,
.chat-form input:hover {
  border-color: rgba(79, 216, 255, 0.45);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.chat-form input:focus {
  border-color: rgba(79, 216, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(79, 216, 255, 0.16), 0 0 24px -10px rgba(79, 216, 255, 0.5);
  outline: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394a2c8' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Contact, ticker and footer
   -------------------------------------------------------------------------- */

.contact {
  background:
    radial-gradient(42rem 32rem at 0 100%, rgba(79, 216, 255, 0.08), transparent 62%),
    radial-gradient(40rem 32rem at 100% 0, rgba(47, 123, 255, 0.18), transparent 62%),
    radial-gradient(28rem 24rem at 74% 76%, rgba(255, 79, 216, 0.07), transparent 68%);
}

.contact-form {
  border-radius: var(--radius-xl);
}

.ticker {
  border-block-color: rgba(175, 198, 255, 0.12);
  background: rgba(8, 13, 28, 0.62);
}

.ticker span {
  color: rgba(193, 207, 236, 0.72);
}

.ticker b {
  color: #4fd8ff;
  text-shadow: 0 0 16px rgba(79, 216, 255, 0.7);
}

.footer {
  border-top-color: rgba(175, 198, 255, 0.12);
  background: rgba(4, 7, 16, 0.58);
}

/* --------------------------------------------------------------------------
   Dot assistant
   -------------------------------------------------------------------------- */

.chat-launch {
  border-color: rgba(175, 198, 255, 0.22);
  background: rgba(8, 14, 30, 0.82);
  color: #f2f6ff;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(79, 216, 255, 0.06),
    0 0 40px -18px rgba(47, 123, 255, 0.65);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.chat-launch:hover {
  border-color: rgba(79, 216, 255, 0.5);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(79, 216, 255, 0.16),
    0 0 48px -16px rgba(79, 216, 255, 0.6);
}

.dot-launch-copy small {
  color: #94a2c8;
}

.dot-launch-arrow {
  color: #4fd8ff;
}

.chat-panel {
  border-radius: var(--radius-lg);
}

.chat-head {
  background: linear-gradient(110deg, #101c42, #060b1a);
}

.dot-head-avatar {
  border-color: rgba(79, 216, 255, 0.32);
}

.bubble.user {
  background: var(--primary-gradient);
  color: #ffffff;
}

.chat-form button {
  background: var(--primary-gradient);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Opening study
   -------------------------------------------------------------------------- */

.intro {
  background: #03050c;
}

.intro__bg {
  background:
    radial-gradient(ellipse 70% 62% at 52% 42%, #0e2350 0%, #09142c 38%, #050a18 74%, #02040a 100%);
}

.intro__glow {
  background:
    radial-gradient(circle at 46% 46%, rgba(47, 123, 255, 0.3), transparent 46%),
    radial-gradient(circle at 32% 58%, rgba(109, 92, 255, 0.18), transparent 38%),
    radial-gradient(circle at 70% 38%, rgba(255, 79, 216, 0.14), transparent 36%),
    radial-gradient(circle at 60% 66%, rgba(79, 216, 255, 0.1), transparent 34%);
}

.intro__grid {
  background-image:
    linear-gradient(90deg, rgba(175, 198, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(175, 198, 255, 0.04) 1px, transparent 1px);
}

.intro__prompt {
  border-color: rgba(175, 198, 255, 0.3);
  background: rgba(6, 12, 26, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 44px -22px rgba(47, 123, 255, 0.6);
}

.intro__trigger:hover .intro__prompt,
.intro__trigger:focus-visible .intro__prompt {
  border-color: rgba(79, 216, 255, 0.62);
  background: rgba(10, 19, 42, 0.86);
}

.intro__skip {
  border-bottom-color: rgba(175, 198, 255, 0.26);
  color: rgba(226, 235, 255, 0.72);
}

.intro__skip:hover {
  border-color: #4fd8ff;
  color: #8be9ff;
}

/* --------------------------------------------------------------------------
   Motion and small screens
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  #services > .wrap,
  #work > .wrap,
  #packages > .wrap,
  #configurator > .wrap,
  #contact > .wrap {
    padding: clamp(1.05rem, 4.5vw, 1.6rem);
    border-radius: 1.75rem;
  }

  .hero-title em {
    background-size: 140% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .service-card,
  .project-card {
    transition: none !important;
  }
}