/* ==================================================================
   FOLDER WAV brand effects
   In WordPress: Appearance > Customize > Additional CSS, paste ALL of
   this file, then Publish. In Elementor, type a class name (without the
   dot) into a widget's Advanced > CSS Classes box to use an effect.
   ================================================================== */

/* Backup rounded font for PCs and Android, which don't have Arial Rounded */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap");

:root {
  --fw-navy: #0b1a4a;
  --fw-deep: #050b22;
  --fw-blue: #3cc4ff;
  --fw-folder: #6ac8f0;
  --fw-gold: #e9dc7c;
  --fw-text: #e8eefc;
  --fw-dim: #9aa6c4;
}

/* fw-hero: put on the top section. Navy glow plus the three neon
   waveform lines from the app icon. */
.fw-hero {
  background-color: var(--fw-deep) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g' x='-10%25' y='-50%25' width='120%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%233cc4ff' stroke-width='2.5' filter='url(%23g)'%3E%3Cpath d='M0 82 H330 C400 82 410 38 470 38 C530 38 540 82 600 82 C660 82 670 38 730 38 C790 38 800 82 870 82 H1200'/%3E%3Cpath d='M0 100 H440 C490 100 500 12 545 12 C590 12 610 188 655 188 C700 188 710 100 760 100 H1200'/%3E%3Cpath d='M0 118 H330 C400 118 410 162 470 162 C530 162 540 118 600 118 C660 118 670 162 730 162 C790 162 800 118 870 118 H1200'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 45%, rgba(60, 196, 255, .22), transparent 60%),
    linear-gradient(180deg, var(--fw-navy), var(--fw-deep)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 260px, 100% 100%, 100% 100% !important;
  background-position: center 22%, center, center !important;
}

/* fw-glow: soft blue glow on a heading */
.fw-glow .elementor-heading-title,
h1.fw-glow, h2.fw-glow {
  text-shadow: 0 0 18px rgba(60, 196, 255, .55), 0 0 2px rgba(255, 255, 255, .6);
}

/* fw-title: the rounded "Folder WAV" lettering (put on a Heading widget).
   Macs and iPhones show Arial Rounded MT Bold; others get Nunito. */
.fw-title .elementor-heading-title,
h1.fw-title, .fw-title {
  font-family: "Arial Rounded MT Bold", "Arial Rounded MT", Nunito, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

/* fw-icon-wave: blue sound-wave icon. In Elementor, add an HTML widget
   containing <span class="fw-icon-wave"></span> */
.fw-icon-wave {
  display: inline-block;
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg stroke='%233cc4ff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M4 20v8M12 14v20M20 6v36M28 16v16M36 2v44M44 10v28M52 18v12M60 22v4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(60, 196, 255, .6));
}

/* fw-stars: five star outlines with three lit (used in the preview;
   in Elementor, use the free Star Rating widget instead) */
.fw-stars {
  font-size: 34px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--fw-dim);
}
.fw-stars b {
  color: #ffb020;
  font-weight: normal;
  text-shadow: 0 0 10px rgba(255, 176, 32, .5);
}

/* fw-icon-glow: glowing app icon (put on an Image widget) */
.fw-icon-glow img {
  filter: drop-shadow(0 0 28px rgba(60, 196, 255, .55));
}

/* fw-card: glassy card with a thin blue border (put on a container) */
.fw-card {
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(60, 196, 255, .22) !important;
  border-radius: 20px !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fw-card:hover {
  transform: translateY(-3px);
  border-color: rgba(60, 196, 255, .5) !important;
  box-shadow: 0 12px 40px rgba(60, 196, 255, .12);
}

/* fw-card-featured: the price card, with a stronger glow */
.fw-card-featured {
  background: linear-gradient(180deg, rgba(60, 196, 255, .12), rgba(255, 255, 255, .03)) !important;
  border: 2px solid var(--fw-blue) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 60px rgba(60, 196, 255, .2);
}

/* fw-badge: small gold label, e.g. "Made by Our Human Power" */
.fw-badge .elementor-heading-title,
span.fw-badge {
  display: inline-block;
  background: var(--fw-gold);
  color: #000 !important;
  font-size: 13px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
}

/* fw-btn: glowing blue pill button (put on a Button widget) */
.fw-btn .elementor-button,
a.fw-btn {
  background: var(--fw-blue) !important;
  color: #001226 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 rgba(60, 196, 255, 0);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fw-btn .elementor-button:hover,
a.fw-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(60, 196, 255, .45);
}

/* fw-btn-ghost: outlined button */
.fw-btn-ghost .elementor-button,
a.fw-btn-ghost {
  background: transparent !important;
  color: var(--fw-text) !important;
  border: 2px solid rgba(60, 196, 255, .5) !important;
  border-radius: 999px !important;
}

/* fw-screenshot: rounded, shadowed frame for app screenshots */
.fw-screenshot img {
  border-radius: 14px;
  border: 1px solid rgba(60, 196, 255, .25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(60, 196, 255, .12);
}

/* fw-label: outlined pill that names a screenshot, e.g. "Full View"
   (put on a Heading widget above the image) */
.fw-label .elementor-heading-title,
span.fw-label {
  display: inline-block;
  font-family: Oswald, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fw-blue) !important;
  border: 1px solid rgba(60, 196, 255, .5);
  background: rgba(60, 196, 255, .08);
  padding: 5px 14px;
  border-radius: 999px;
}