/* YOUR/SITE — Midnight Atelier redesign
   Black / warm white / electric blue / deep violet / champagne. No green accents. */

:root {
  --ink: #060609;
  --ink2: #101016;
  --paper: #f4f0e8;
  --white: #ffffff;
  --muted: #66656b;
  --line: rgba(6, 6, 9, 0.14);
  --blue: #5268ff;
  --blue2: #e6e9ff;
  --violet: #7448ff;
  --champagne: #d9bd8b;
  --lime: #d9bd8b;
  --radius: 18px;
  --shadow: 0 32px 100px rgba(6, 6, 12, 0.18);
}

::selection { color: #fff; background: #5268ff; }
body { background: var(--paper); }
h1, h2, h3 { text-wrap: balance; }
.section { position: relative; }

/* Navigation and identity */
.site-header {
  position: fixed;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 6, 9, 0.78);
  backdrop-filter: blur(22px) saturate(135%);
}
.nav-shell, .nav { min-height: 78px; }
.brand-sign {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: linear-gradient(145deg, #5268ff, #7448ff 68%, #d9bd8b);
  box-shadow: 0 10px 32px rgba(82, 104, 255, 0.3);
  transform: none;
}
.brand strong { letter-spacing: -0.045em; }
.brand small { color: rgba(255, 255, 255, 0.46); }
.nav-links > a:not(.button), .back-link { color: rgba(255, 255, 255, 0.66); }
.button { border-radius: 10px; letter-spacing: -0.01em; }
.button-blue, .button-primary {
  color: #fff;
  background: linear-gradient(135deg, #5268ff, #7448ff);
  box-shadow: 0 14px 35px rgba(82, 104, 255, 0.25);
}
.button-blue:hover, .button-primary:hover { background: linear-gradient(135deg, #6578ff, #855fff); }

/* Main hero: editorial, darker and more sculpted */
.hero {
  min-height: 980px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 79% 12%, rgba(82, 104, 255, 0.32), transparent 33%),
    radial-gradient(circle at 8% 83%, rgba(116, 72, 255, 0.22), transparent 31%),
    #060609;
  background-size: 76px 76px, 76px 76px, auto, auto, auto;
}
.hero-noise { opacity: .07; }
.orb-blue { background: radial-gradient(circle, rgba(82, 104, 255, .58), rgba(82, 104, 255, 0) 68%); }
.orb-lime { background: radial-gradient(circle, rgba(116, 72, 255, .34), rgba(116, 72, 255, 0) 70%); }
.hero-layout { min-height: 880px; grid-template-columns: 1.08fr .92fr; }
.availability {
  border-color: rgba(217, 189, 139, .34);
  border-radius: 8px;
  color: #e5d2ae;
  background: rgba(217, 189, 139, .07);
}
.availability span, .pulse, .response-badge::before {
  background: #d9bd8b;
  box-shadow: 0 0 0 5px rgba(217, 189, 139, .11);
}
.hero h1 { max-width: 900px; font-weight: 650; letter-spacing: -.07em; }
.hero h1 em {
  display: block;
  margin-top: .08em;
  color: #e8e5ff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.06em;
}
.hero-lead { max-width: 630px; color: rgba(255, 255, 255, .68); }
.hero-checks li::before { color: #d9bd8b; }
.hero-price-teasers a { border-radius: 10px; }
.hero-price-teasers a.is-featured {
  border-color: rgba(82, 104, 255, .7);
  background: linear-gradient(135deg, rgba(82, 104, 255, .25), rgba(116, 72, 255, .14));
}
.hero-price-teasers span { color: #141014; background: #d9bd8b; }

.browser-card, .portfolio-card, .case-study { border-radius: 14px; }
.browser-main { transform: rotate(-1.5deg); }
.browser-content {
  background:
    radial-gradient(circle at 88% 20%, rgba(116, 72, 255, .36), transparent 31%),
    linear-gradient(145deg, #10162c, #090a12 58%, #150d2d);
}
.hero-browser-shade { background: linear-gradient(90deg, rgba(6,7,13,.94), rgba(6,7,13,.62) 48%, rgba(6,7,13,.08)), linear-gradient(0deg, rgba(7,7,13,.58), transparent 58%); }
.mini-nav b i, .case-nav i { color: #fff; background: #5268ff; }
.mini-hero small, .mini-hero strong em, .case-copy small, .case-copy strong em { color: #d9bd8b; }
.mini-hero > span, .case-copy button { color: #fff; background: linear-gradient(135deg, #5268ff, #7448ff); }
.mini-stats, .case-panel span { color: #111118; }
.floating-card { border-radius: 13px; background: rgba(15, 15, 22, .91); }

/* Editorial sections */
.capability-marquee { background: #0b0b10; }
.capability-marquee i, .portfolio-overlay > span, .case-label { color: #d9bd8b; }
.problem-section { overflow: hidden; background: #f4f0e8; }
.problem-section::after {
  content: "YOUR/SITE";
  position: absolute;
  right: -25px;
  bottom: -28px;
  color: rgba(6,6,9,.025);
  font-size: clamp(6rem, 18vw, 17rem);
  font-weight: 950;
  line-height: .75;
  letter-spacing: -.1em;
  pointer-events: none;
}
.problem-grid article, .service-card, .feature, .care-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 15px 55px rgba(8, 8, 13, .045);
}
.problem-grid article > span, .service-icon, .feature > span { border-radius: 10px; background: #5268ff; }
.work-section { background: #08080c; }
.case-visual { background: radial-gradient(circle at 85% 15%, rgba(116,72,255,.36), transparent 30%), linear-gradient(145deg,#151c3b,#0a0a12); }
.case-page { background: #0a0a12; }
.portfolio-card { background: #111117; }
.portfolio-image::after { background: linear-gradient(90deg, rgba(4,5,12,.88), rgba(4,5,12,.28) 55%, transparent), linear-gradient(0deg, rgba(4,5,11,.66), transparent 62%); }
.concept-note { border-radius: 12px; }
.concept-note > span { color: #161015; background: #d9bd8b; }
.services-section { background: #f4f0e8; }
.card-dark { background: linear-gradient(145deg, #0a0a0e, #151222); }
.timeline li > span { border-radius: 10px; background: linear-gradient(145deg, #5268ff, #7448ff); }

/* Packages and checkout entry */
.pricing-section {
  background:
    radial-gradient(circle at 50% -20%, rgba(82, 104, 255, .3), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(116, 72, 255, .18), transparent 35%),
    #07070b;
}
.price-card {
  min-height: 610px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
}
.price-card.featured-price {
  color: #fff;
  border: 1px solid rgba(120, 139, 255, .8);
  background: linear-gradient(145deg, rgba(82, 104, 255, .34), rgba(116, 72, 255, .14) 48%, rgba(255,255,255,.05));
  box-shadow: 0 40px 110px rgba(82, 104, 255, .25);
}
.featured-price .price-caption, .featured-price .package-detail-link { color: rgba(255,255,255,.58); }
.featured-price ul { border-color: rgba(255,255,255,.14); }
.price-card li::before, .featured-price li::before { color: #d9bd8b; }
.recommendation { color: #171117; background: #d9bd8b; }
.price-card .checkout-button { color: #fff; border-color: transparent; background: linear-gradient(135deg, #5268ff, #7448ff); }
.price-card.featured-price .checkout-button { color: #111; background: #fff; box-shadow: none; }
.payment-note {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.payment-note strong, .payment-note small { display: block; }
.payment-note strong { font-size: .88rem; }
.payment-note small { margin-top: 5px; color: rgba(255,255,255,.5); font-size: .7rem; }
.payment-methods { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin: 0; padding: 0; list-style: none; }
.payment-methods li {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 7px;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
  font-size: .67rem;
  font-weight: 850;
}

/* Tools, care and forms */
.studio-section { background: #0d0d13; }
.tool-card, .demo-hub { border-radius: 16px; }
.tool-card-head > span { color: #fff; background: linear-gradient(145deg, #5268ff, #7448ff); }
.choice input:checked + span { border-color: #6174ff; color: #fff; background: #5268ff; }
.tool-result { border-color: rgba(82,104,255,.34); background: rgba(82,104,255,.1); }
.calc-check input { accent-color: #5268ff; }
.estimate-box { color: #fff; background: linear-gradient(135deg, #5268ff, #7448ff); }
.estimate-box small { color: rgba(255,255,255,.56); }
.demo-link[style*="#d9bd8b"] { --demo-accent: #7448ff !important; }
.care-section, .check-section { background: #f4f0e8; }
.care-card.featured { border-color: #5268ff; }
.check-shell { border-radius: 16px; }
.check-copy { background: radial-gradient(circle at 10% 100%, rgba(116,72,255,.36), transparent 40%); }
.check-points li::before { color: #d9bd8b; }
.contact-shell { border-radius: 16px; background: linear-gradient(135deg, #3f55e8, #6e3ee8); }
.contact-copy { background: radial-gradient(circle at 0 100%, rgba(217,189,139,.26), transparent 38%); }
.contact-meta a > span { color: #171116; background: #d9bd8b; }
.form-status.success, .check-status.success { color: #28316f; background: #e8ebff; }
.whatsapp-float { border-radius: 12px; background: #101016; }
.whatsapp-float i { color: #fff; background: linear-gradient(145deg, #5268ff, #7448ff); }

/* Package detail pages */
.package-hero {
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #060609;
  background-size: 74px 74px;
}
.package-hero[data-package="LAUNCH"] { --accent: #6f82ff !important; --accent-glow: rgba(82,104,255,.55) !important; }
.package-hero[data-package="BUSINESS"] { --accent: #a88cff !important; --accent-glow: rgba(116,72,255,.5) !important; }
.package-hero[data-package="PREMIUM"] { --accent: #d9bd8b !important; --accent-glow: rgba(217,189,139,.34) !important; }
.package-hero h1 { font-weight: 650; }
.package-hero h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.price-panel { border-radius: 16px; background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.025)); }
.microproof li::before, .scope-card.included li::before { color: #d9bd8b; }
.final-cta .cta-shell { border-radius: 16px; background: linear-gradient(135deg, #5268ff, #7448ff); }
.final-cta .cta-shell .button { color: #171116; background: #fff; }

/* Legal and checkout pages */
.legal { background: radial-gradient(circle at 85% 0, rgba(82,104,255,.12), transparent 30%), #f4f0e8; }
.legal-card { border-radius: 14px !important; }
.legal a { color: #4158e7 !important; }
.checkout-page { min-height: 100vh; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(82,104,255,.27), transparent 32%), radial-gradient(circle at 10% 90%, rgba(116,72,255,.2), transparent 30%), #060609; }
.checkout-header { border-bottom: 1px solid rgba(255,255,255,.1); }
.checkout-nav { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 24px; }
.checkout-back { color: rgba(255,255,255,.62); text-decoration: none; font-size: .78rem; font-weight: 800; }
.checkout-main { padding: 72px 0 100px; }
.checkout-intro { max-width: 820px; margin-bottom: 40px; }
.checkout-kicker { color: #d9bd8b; font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.checkout-intro h1 { margin-top: 15px; font-size: clamp(3.3rem, 7vw, 7rem); font-weight: 650; }
.checkout-intro h1 em { color: #e7e5ff; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: normal; }
.checkout-intro > p:last-child { max-width: 650px; margin-top: 20px; color: rgba(255,255,255,.6); }
.checkout-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 20px; align-items: start; }
.order-summary, .checkout-form-card { border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.055); box-shadow: 0 30px 90px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.order-summary { position: sticky; top: 105px; padding: 28px; }
.summary-label { color: #d9bd8b; font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.summary-name { margin-top: 12px; font-size: 2rem; }
.summary-total { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 28px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.summary-total span { color: rgba(255,255,255,.52); font-size: .72rem; }
.summary-total strong { font-size: 3.2rem; line-height: .9; letter-spacing: -.07em; }
.summary-copy { margin-top: 20px; color: rgba(255,255,255,.58); font-size: .79rem; }
.summary-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.74); font-size: .78rem; }
.summary-list li::before { content: "✓"; margin-right: 8px; color: #d9bd8b; }
.checkout-form-card { padding: 30px; }
.checkout-form-card h2 { font-size: 2rem; }
.checkout-form-card > p { margin-top: 10px; color: rgba(255,255,255,.55); font-size: .8rem; }
.checkout-form { display: grid; gap: 15px; margin-top: 25px; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-form label > span { display: block; margin-bottom: 7px; color: rgba(255,255,255,.76); font-size: .72rem; font-weight: 800; }
.checkout-form input, .checkout-form select { width: 100%; height: 50px; padding: 0 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; color: #fff; background: rgba(255,255,255,.06); outline: none; }
.checkout-form select option { color: #111; }
.checkout-form input:focus, .checkout-form select:focus { border-color: #6679ff; box-shadow: 0 0 0 3px rgba(82,104,255,.18); }
.checkout-consent { display: grid !important; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.03); }
.checkout-consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: #5268ff; }
.checkout-consent span { margin: 0 !important; color: rgba(255,255,255,.58) !important; font-size: .68rem !important; font-weight: 600 !important; }
.checkout-consent a { color: #aeb8ff; }
.pay-button { width: 100%; min-height: 58px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #5268ff, #7448ff); font-weight: 900; cursor: pointer; }
.pay-button:disabled { cursor: not-allowed; opacity: .52; }
.checkout-status { display: none; padding: 12px 14px; border-radius: 9px; font-size: .75rem; font-weight: 800; }
.checkout-status.show { display: block; }
.checkout-status.error { color: #ffcece; background: rgba(160,28,45,.25); }
.checkout-status.info { color: #e1e5ff; background: rgba(82,104,255,.18); }
.checkout-security { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; color: rgba(255,255,255,.42); font-size: .66rem; }
.checkout-security .payment-methods { justify-content: flex-start; }
.checkout-footnote { margin-top: 28px; color: rgba(255,255,255,.4); font-size: .66rem; }

@media (max-width: 1060px) {
  .site-header { background: rgba(6,6,9,.94); }
  .hero-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}

@media (max-width: 700px) {
  .nav-shell, .nav, .checkout-nav { min-height: 72px; }
  .hero-layout { min-height: 0; padding-top: 145px; }
  .hero h1 em { display: inline; }
  .price-card { min-height: 0; }
  .payment-note { grid-template-columns: 1fr; }
  .payment-methods { justify-content: flex-start; }
  .checkout-main { padding-top: 48px; }
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-form-card, .order-summary { padding: 23px 19px; }
  .checkout-security { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}