/* Base */
*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
::selection{ background: rgba(255,110,151,.28); }
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 1rem; top: 1rem; width:auto; height:auto; z-index: 9999;
  background: var(--panel); border: 1px solid var(--line);
  padding: .6rem .8rem; border-radius: 999px;
}

/* Links */
.link-soft{ color: rgba(234,240,255,.88); text-decoration: none; border-bottom: 1px solid rgba(234,240,255,.22); }
.link-soft:hover{ border-bottom-color: rgba(234,240,255,.5); }

/* Header/Nav */
.site-header{ backdrop-filter: blur(10px); }
.nav-glass{
  background: linear-gradient(180deg, rgba(15,28,53,.78), rgba(10,18,34,.55));
  border-bottom: 1px solid rgba(234,240,255,.10);
}
.navbar .nav-link{ color: rgba(234,240,255,.78); }
.navbar .nav-link:hover{ color: rgba(234,240,255,.95); }
.navbar .nav-link.active{ color: var(--text); }
.brand-mark{
  width: 34px; height: 34px; border-radius: 14px;
  background: radial-gradient(18px 18px at 30% 30%, rgba(255,110,151,.95), transparent 62%),
              radial-gradient(18px 18px at 70% 40%, rgba(47,230,194,.85), transparent 60%),
              radial-gradient(30px 30px at 40% 80%, rgba(122,134,255,.55), transparent 62%),
              rgba(255,255,255,.06);
  border: 1px solid rgba(234,240,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.brand-sub{
  margin-left: .35rem;
  font-size: .82rem;
  color: rgba(234,240,255,.55);
}

/* Buttons */
.btn-accent{
  background: linear-gradient(135deg, rgba(255,110,151,1), rgba(122,134,255,1));
  border: 0;
  color: #0b1020;
  box-shadow: 0 16px 34px rgba(255,110,151,.18);
}
.btn-accent:hover{ filter: brightness(1.03); color: #0b1020; }
.btn-outline-soft{
  border: 1px solid rgba(234,240,255,.22);
  color: rgba(234,240,255,.92);
  background: rgba(255,255,255,.02);
}
.btn-outline-soft:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(234,240,255,.34);
  color: var(--text);
}
.btn:focus{ box-shadow: var(--focus) !important; }

/* Hero */
.hero{
  position: relative;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(234,240,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,240,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 30% 30%, black 30%, transparent 70%);
  opacity: .65;
  pointer-events:none;
}
.hero-noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.18;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.hero-blobs .blob,
.inner-blobs .blob{
  position:absolute; border-radius: 999px;
  filter: blur(34px);
  opacity: .62;
  pointer-events:none;
}
.blob.b1{ width: 340px; height: 340px; left: -90px; top: -90px; background: rgba(255,110,151,.40); }
.blob.b2{ width: 420px; height: 420px; right: -140px; top: -120px; background: rgba(47,230,194,.26); }
.blob.b3{ width: 460px; height: 460px; left: 30%; bottom: -200px; background: rgba(122,134,255,.22); }
.blob.b4{ width: 380px; height: 380px; right: 20%; bottom: -240px; background: rgba(242,200,121,.18); }
.blob.b5{ width: 320px; height: 320px; left: 10%; bottom: -220px; background: rgba(122,134,255,.22); }

.tagline-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(234,240,255,.12);
}
.tagline-pill .dot{
  width: 10px; height: 10px; border-radius: 99px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2));
  box-shadow: 0 0 0 6px rgba(255,110,151,.14);
}
.text-soft{ color: rgba(234,240,255,.68); }

/* Cards */
.hero-card, .pattern-card, .feature-card, .price-card, .case-card, .footer-card, .side-card, .note-card, .image-panel, .mini-card, .meta-chip, .cta-banner, .strip-item{
  background: linear-gradient(180deg, rgba(15,28,53,.78), rgba(12,22,44,.62));
  border: 1px solid rgba(234,240,255,.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.pattern-card{
  position: relative;
  overflow: hidden;
}
.pattern-card:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 260px at 10% 0%, rgba(255,110,151,.10), transparent 60%),
    radial-gradient(700px 260px at 90% 20%, rgba(47,230,194,.08), transparent 60%),
    radial-gradient(700px 260px at 40% 100%, rgba(122,134,255,.10), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.pattern-card > *{ position: relative; }

.feature-card{
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(15,28,53,.70), rgba(12,22,44,.55));
}
.icon-badge{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(10,18,34,.95);
  background: linear-gradient(135deg, rgba(47,230,194,.95), rgba(242,200,121,.95));
  box-shadow: 0 14px 26px rgba(47,230,194,.10);
}

/* Lists */
.checklist{ list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.checklist .check{
  display:inline-block; width: 18px; height: 18px; border-radius: 7px;
  background: rgba(255,110,151,.16);
  border: 1px solid rgba(255,110,151,.35);
  margin-right: .6rem;
  vertical-align: -3px;
  position: relative;
}
.checklist .check:after{
  content:"";
  position:absolute; left: 5px; top: 3px;
  width: 6px; height: 10px;
  border-right: 2px solid rgba(234,240,255,.90);
  border-bottom: 2px solid rgba(234,240,255,.90);
  transform: rotate(35deg);
}

/* Mini facts */
.mini-facts{
  display:grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  max-width: 560px;
}
@media (min-width: 768px){
  .mini-facts{ grid-template-columns: repeat(3, 1fr); }
}
.fact{
  padding: .85rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(234,240,255,.10);
}
.fact .kicker{ font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(234,240,255,.55); }
.fact .value{ margin-top: .2rem; font-size: .92rem; color: rgba(234,240,255,.88); }

/* Pricing */
.price-card{ position:relative; overflow:hidden; border-radius: 22px; }
.price-card.featured{
  border-color: rgba(255,110,151,.34);
  box-shadow: 0 26px 60px rgba(255,110,151,.12);
}
.price-card .shine{
  position:absolute; inset:-2px;
  background: radial-gradient(520px 220px at 30% 10%, rgba(255,110,151,.22), transparent 60%),
              radial-gradient(520px 220px at 80% 20%, rgba(47,230,194,.16), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.price-card > *{ position: relative; }
.badge-soft{
  background: rgba(234,240,255,.06);
  border: 1px solid rgba(234,240,255,.14);
  color: rgba(234,240,255,.78);
}
.badge-accent{
  background: rgba(255,110,151,.16);
  border: 1px solid rgba(255,110,151,.28);
  color: rgba(234,240,255,.92);
}
.price-list{ margin: 0; padding-left: 1.1rem; color: rgba(234,240,255,.84); }
.price-list li{ margin: .35rem 0; }

/* FAQ */
.accordion-soft .accordion-item{
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: .8rem;
}
.accordion-soft .accordion-button{
  background: transparent;
  color: rgba(234,240,255,.92);
}
.accordion-soft .accordion-button:not(.collapsed){
  background: rgba(255,110,151,.08);
  color: rgba(234,240,255,.96);
}
.accordion-soft .accordion-body{
  background: rgba(255,255,255,.02);
  color: rgba(234,240,255,.84);
}

/* Sections */
.section-soft{
  background: radial-gradient(900px 400px at 10% 0%, rgba(255,110,151,.10), transparent 60%),
              radial-gradient(900px 400px at 90% 0%, rgba(47,230,194,.08), transparent 60%),
              rgba(255,255,255,.01);
  border-top: 1px solid rgba(234,240,255,.06);
  border-bottom: 1px solid rgba(234,240,255,.06);
}
.soft-blur{
  position:absolute; inset: -120px -120px auto -120px;
  height: 340px;
  background: radial-gradient(closest-side, rgba(122,134,255,.20), transparent 70%);
  filter: blur(20px);
  opacity: .7;
}

/* Waves */
.section-wave{
  position:absolute; left:0; right:0; bottom:-1px;
  height: 180px;
  pointer-events:none;
  opacity: .9;
}
.section-wave svg{ width: 100%; height: 100%; display:block; }
.section-wave path{
  fill: rgba(10,18,34,.96);
  filter: drop-shadow(0 -16px 30px rgba(0,0,0,.18));
}
.small-wave{ height: 140px; opacity: .85; }

/* Inner hero */
.inner-hero{
  position: relative;
  background: linear-gradient(180deg, rgba(15,28,53,.55), rgba(10,18,34,0));
}

/* Panels */
.image-panel{
  background:
    radial-gradient(700px 260px at 10% 10%, rgba(242,200,121,.10), transparent 60%),
    radial-gradient(700px 260px at 90% 20%, rgba(47,230,194,.10), transparent 60%),
    linear-gradient(180deg, rgba(15,28,53,.72), rgba(12,22,44,.55));
}
.panel-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}
@media (min-width: 768px){
  .panel-grid{ grid-template-columns: 1fr 1fr; }
}
.chip-pill{
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.78);
  font-size: .82rem;
}

/* Steps */
.steps{ list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap: .9rem; }
.steps li{
  display:flex; gap: .8rem; align-items:flex-start;
  padding: .85rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(234,240,255,.10);
  background: rgba(255,255,255,.02);
}
.step-num{
  width: 34px; height: 34px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,110,151,.16);
  border: 1px solid rgba(255,110,151,.28);
  color: rgba(234,240,255,.92);
  font-weight: 600;
}

/* CTA */
.cta-banner{
  border-radius: 26px;
  background:
    radial-gradient(620px 240px at 20% 0%, rgba(255,110,151,.16), transparent 60%),
    radial-gradient(620px 240px at 90% 30%, rgba(47,230,194,.12), transparent 60%),
    linear-gradient(180deg, rgba(15,28,53,.78), rgba(12,22,44,.55));
}
.meta-chip{
  padding: .9rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(234,240,255,.10);
}
.note-card{ border-radius: 20px; background: rgba(255,255,255,.02); }

/* Contact lines */
.contact-lines{ display:flex; flex-direction:column; gap: .75rem; }
.contact-lines .line{ display:flex; gap: .75rem; }
.contact-lines .label{
  min-width: 110px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(234,240,255,.55);
}
.contact-lines .value{ flex:1; }

/* Forms */
.form-control, .form-select{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(234,240,255,.14);
  color: rgba(234,240,255,.92);
}
.form-control::placeholder{ color: rgba(234,240,255,.40); }
.form-control:focus{
  border-color: rgba(255,110,151,.40);
  box-shadow: var(--focus);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.95);
}
.form-check-input{
  background-color: rgba(255,255,255,.02);
  border: 1px solid rgba(234,240,255,.18);
}
.form-check-input:focus{ box-shadow: var(--focus); }
.form-check-input:checked{
  background-color: rgba(255,110,151,.85);
  border-color: rgba(255,110,151,.85);
}
.form-status{
  min-height: 1.2rem;
  color: rgba(47,230,194,.92);
}
.form-status.error{ color: rgba(255,110,151,.92); }

/* Dividers */
.divider-soft{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,240,255,.18), transparent);
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(234,240,255,.08);
  background: linear-gradient(180deg, rgba(10,18,34,0), rgba(10,18,34,.65));
}
.footer-links a{
  color: rgba(234,240,255,.78);
  text-decoration:none;
  display:inline-block;
  padding: .25rem 0;
}
.footer-links a:hover{ color: rgba(234,240,255,.95); }
.social-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(255,255,255,.02);
  color: rgba(234,240,255,.80);
  text-decoration:none;
  font-size: .86rem;
}
.social-pill:hover{ border-color: rgba(234,240,255,.28); color: rgba(234,240,255,.95); }

/* Reveal */
[data-reveal]{ opacity: 0; transform: translateY(10px); }
.revealed{ opacity: 1 !important; transform: none !important; transition: opacity .55s ease, transform .55s ease; }

/* Small stamp */
.stamp{ width: 46px; height: 46px; position: relative; }
.stamp-ring{
  position:absolute; inset: 0;
  border-radius: 18px;
  border: 1px dashed rgba(234,240,255,.22);
  transform: rotate(18deg);
}
.stamp-core{
  position:absolute; inset: 9px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(47,230,194,.9), rgba(255,110,151,.9));
  opacity: .9;
}
