/* Nodo template — shared styles. Declares Tailwind's layer order first so these
   components sit below Tailwind utilities (the browser build injects its own layers later). */
@layer theme, base, components, utilities;

@layer base {
  /* Illustrations, the map and button labels are visuals, not copy: keep them out of text selection */
  svg, figure, [role="img"], .feat-art, .btn, button, [data-seg] { -webkit-user-select: none; user-select: none; }

  *, ::before, ::after { border-color: rgb(255 255 255 / .1); }
  html { scroll-behavior: smooth; scroll-padding-top: 124px; color-scheme: dark; }
  :focus-visible { outline: 2px solid #ff6b73; outline-offset: 3px; border-radius: 6px; }
  a[href], button:not(:disabled), [role="button"], [role="tab"], summary, label[for], select { cursor: pointer; }
  ::selection { background-color: #ec2f3a; color: #ffffff; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, ::before, ::after { transition-duration: .01ms !important; }
  }
}

@layer components {
  .wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 20px; }
  @media (min-width: 640px)  { .wrap { padding-inline: 32px; } }
  @media (min-width: 1024px) { .wrap { padding-inline: 48px; } }

  .ic  { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .icf { fill: currentColor; flex-shrink: 0; }

  /* Buttons (crisp.chat style): solid fill, soft top sheen, 1px lighter border, inset hairline, arrow tile */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 44px; padding: 0 18px;
         border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 500; white-space: nowrap;
         transition: background-color .2s ease, border-color .2s ease, transform .15s ease; }
  .btn:active { transform: translateY(1px); }
  /* One size for every button on the page */
  .btn:has(.btn-ic) { padding-right: 11px; }
  .btn-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgb(255 255 255 / .22); }
  .btn-ic svg { width: 12px; height: 12px; stroke-width: 2.25; }

  .btn-red { color: #fff; background-color: #ec2f3a; border-color: #f2666d;
             background-image: linear-gradient(rgb(255 255 255 / .24), rgb(255 255 255 / 0));
             box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 10px 24px -12px rgb(0 0 0 / .8); }
  .btn-red:hover { background-color: #dc2430; }
  .btn-glass { color: #fff; background-color: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16);
               background-image: linear-gradient(rgb(255 255 255 / .1), rgb(255 255 255 / 0)); }
  .btn-glass:hover { background-color: rgb(255 255 255 / .12); }
  .btn-discord { color: #fff; background-color: #5865f2; border-color: #7f89f6;
                 background-image: linear-gradient(rgb(255 255 255 / .22), rgb(255 255 255 / 0));
                 box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 10px 24px -12px rgb(0 0 0 / .8); }
  .btn-discord:hover { background-color: #4752c4; }
  .svc-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px;
             background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04)), rgb(12 12 15 / .55);
             border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(8px);
             box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 12px 24px -12px rgb(0 0 0 / .8); }
  .svc-ico-sm { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; }
  .tag-gold { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px;
              font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: #3a2804;
              background: linear-gradient(180deg, #ffe7a3, #e2ad45 55%, #c48a26);
              box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45), 0 0 0 1.5px #08080a, 0 6px 14px -6px rgb(0 0 0 / .8); }
  /* Feature cards: dark gradient frame + bottom-up fade behind the copy */
  .feat { background: #0f0f12; }
  .feat::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
                  background: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05) 45%, rgb(255 255 255 / .02) 70%, rgb(255 255 255 / .08));
                  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
                  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .feat::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
                 background: radial-gradient(130% 100% at 50% 30%, transparent 62%, rgb(0 0 0 / .28) 100%);
                 box-shadow: inset 0 0 36px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .05); }
  .feat-fade { position: absolute; inset: auto 0 0 0; height: 48%; z-index: 1; pointer-events: none;
               background: linear-gradient(to top, rgb(9 9 11 / .85) 10%, rgb(9 9 11 / .5) 45%, rgb(9 9 11 / .12) 75%, transparent); }
  .feat-art { aspect-ratio: 400 / 230; padding: 20px 20px 4px; }
  .btn-white { color: #08080a; background-color: #fff; border-color: #fff;
               background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .05)); }
  .btn-white:hover { background-color: #ececef; }
  .btn-white .btn-ic { background: rgb(0 0 0 / .08); }

  /* Atmospheric surfaces: brand glow, film grain, oblique lines */
  .fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
  .fx-grain { 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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
              opacity: .2; mix-blend-mode: overlay; }
  .fx-slash { background: repeating-linear-gradient(118deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 16px);
              mask-image: linear-gradient(200deg, #000 0%, transparent 55%); }
  .fx-beam  { background:
                linear-gradient(118deg, transparent 54%, rgb(255 255 255 / .06) 54% 58%, transparent 58%),
                linear-gradient(118deg, transparent 62%, rgb(255 255 255 / .035) 62% 63.5%, transparent 63.5%); }
  .fx-glow  { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .glow-hero { background:
                 radial-gradient(55% 70% at 85% 10%, rgb(245 67 68 / .55) 0%, rgb(180 20 50 / .3) 35%, transparent 70%),
                 radial-gradient(40% 50% at 100% 60%, rgb(226 42 110 / .25), transparent 70%); }
  .glow-1 { background: radial-gradient(90% 75% at -5% 0%, #f54344 0%, rgb(226 42 64 / .55) 30%, rgb(90 10 24 / .35) 55%, transparent 78%), #0d0d10; }
  .glow-2 { background: radial-gradient(85% 80% at 105% 0%, #e22a6e 0%, rgb(190 24 70 / .5) 30%, rgb(70 8 28 / .35) 55%, transparent 78%), #0d0d10; }
  .glow-3 { background: radial-gradient(95% 70% at 50% -10%, #f2523b 0%, rgb(214 40 50 / .5) 32%, rgb(80 10 20 / .35) 58%, transparent 80%), #0d0d10; }
  .glow-soft { background: radial-gradient(70% 60% at 0% 0%, rgb(245 67 68 / .16), transparent 70%), #0d0d10; }
  .glow-softer { background: radial-gradient(70% 60% at 0% 0%, rgb(245 67 68 / .06), transparent 70%), #0d0d10; }
  .glow-cta { background: radial-gradient(62% 105% at 0% 48%, rgb(245 67 68 / .72) 0%, rgb(200 30 52 / .42) 32%, rgb(110 12 30 / .22) 55%, transparent 80%),
                          radial-gradient(42% 65% at 100% 100%, rgb(226 42 110 / .24), transparent 70%), #0d0d10; }
  .cta-panel { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04), inset 0 -80px 120px -40px rgb(0 0 0 / .7), 0 50px 100px -40px rgb(0 0 0 / .95), 0 20px 40px -20px rgb(0 0 0 / .7); }
  .svc-card:hover .fx-glow { transform: scale(1.08) translate(2%, 2%); }

  .site-header { border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease; }
  .site-header.is-scrolled { border-bottom-color: rgb(255 255 255 / .08); background-color: rgb(8 8 10 / .85); }

  .dd-panel { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 4px; opacity: 0; visibility: hidden;
              transition: opacity .16s ease, translate .16s ease, visibility 0s linear .16s; }
  .dd-panel::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 12px; }
  [data-dd][data-open="true"] .dd-panel { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
  [data-dd][data-open="true"] .dd-chevron { rotate: 180deg; }
  .dd-chevron { transition: rotate .2s ease; }

  .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
  .faq-panel > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .3s; }
  [data-faq][data-open="true"] .faq-panel { grid-template-rows: 1fr; }
  [data-faq][data-open="true"] .faq-panel > div { visibility: visible; transition-delay: 0s; }
  [data-faq][data-open="true"] .faq-icon { rotate: 45deg; }
  .faq-icon { transition: rotate .25s ease; }
}


@layer components {
  /* ---------- Inner pages ---------- */
  /* Framed card: dark surface with a top-lit gradient border */
  .card { position: relative; isolation: isolate; background: #0f0f12; border-radius: 20px; }
  .card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
                  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .05) 45%, rgb(255 255 255 / .03) 75%, rgb(255 255 255 / .08));
                  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
                  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .card-hot { background: radial-gradient(100% 55% at 50% 0%, rgb(236 47 58 / .16), transparent 75%), #0f0f12; }
  .card-hot::before { background: linear-gradient(180deg, rgb(255 107 115 / .65), rgb(255 255 255 / .06) 45%, rgb(255 255 255 / .03) 75%, rgb(255 255 255 / .08)); }
  .card-lift { transition: transform .25s ease; }
  .card-lift:hover { transform: translateY(-3px); }

  /* Segmented control */
  .seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgb(255 255 255 / .04);
         border: 1px solid rgb(255 255 255 / .1); max-width: 100%; flex-wrap: wrap; }
  .seg [role="tab"] { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 16px; border-radius: 9px;
                      font-size: 14px; font-weight: 500; color: rgb(255 255 255 / .6); white-space: nowrap; transition: color .2s ease, background-color .2s ease; }
  .seg [role="tab"]:hover { color: #fff; }
  .seg [role="tab"][aria-selected="true"] { color: #fff; background: linear-gradient(rgb(255 255 255 / .14), rgb(255 255 255 / .06));
                                            box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 6px 14px -8px rgb(0 0 0 / .8); }
  .seg [role="tab"]:disabled { opacity: .45; cursor: not-allowed; }
  .tag-soon { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .7); }
  .tag-red { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; color: #fff;
             background: linear-gradient(180deg, #f2545d, #d6202c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }

  /* Benefit strip under the page heros */
  .benefits { display: grid; gap: 1px; border-radius: 16px; overflow: hidden; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .08); }
  .benefits > * { background: rgb(13 13 16 / .85); backdrop-filter: blur(6px); }

  /* Mobile plan carousels */
  .no-scrollbar { scrollbar-width: none; }
  .no-scrollbar::-webkit-scrollbar { display: none; }

  [data-dyn] { transition: opacity .18s ease; }
  [data-dyn].is-out { opacity: 0; }
}