@import "section/section.css";
@import "section/utility.align.css";
@import "section/utility.display.css";
@import "section/utility.padding.css";
@import "css-icon.css";
@import "perfection-logo.css";

@font-face {
  font-family: "Inter", sans-serif;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("../fonts/Inter-roman.var.woff2") format("woff2");
}

:root {
  --section-page-gap: 4rem;
  --section-gap: clamp(1.25rem, 0.8036rem + 1.4286vw, 1.875rem);
  --section-col-gap: clamp(1rem, 2vw, 1.125rem);
  --section-padding-unit: clamp(1rem, 2vw, 1.125rem);
  --section-row-gap: clamp(1rem, 0.375rem + 2vw, 1.875rem);

  --section-w-xxs: 240px;
  --section-w-xs: 360px;
  --section-w-sm: 480px;
  --section-w-md: 768px;
  --section-w-lg: 1024px;
  --section-w-xl: 1280px;
  --section-w-xxl: 1920px;

  /* COLORS */
  --c-blue-raspberry: hsl(190, 84%, 51%);
  --c-bosporos: hsl(190, 100%, 23%);
  --c-cold-snow: hsl(300, 100%, 98%);
  --c-early-snow: hsl(37, 86%, 95%);
  --c-ebony-clay: hsl(230, 6%, 21%);
  --c-electric-blue: hsl(181, 100%, 47%);
  --c-electric-green: hsl(160, 100%, 74%);
  --c-electric-pink: hsl(318, 96%, 64%);
  --c-error: #ed0131;
  --c-larimar-green: hsl(160, 41%, 70%);
  --c-lavender: hsl(300, 69%, 72%);
  --c-lightgrey: hsla(260, 79%, 11%, 0.02);
  --c-magic-whale: hsl(259, 79%, 15%);
  --c-orange: hsl(39, 100%, 47%);
  --c-vapor: hsl(189, 100%, 97%);
  --c-violet: hsl(263, 46%, 60%);
  --c-violet-light: hsla(263, 46%, 60%, 0.75);
  --c-text: hsl(259.57deg 79.31% 11.37%);
  --c-text-grey: hsla(222, 48%, 15%, 0.6);
  --c-underline: hsl(296, 100%, 92%);
  --c-white: hsl(0, 0%, 100%);
}

/* TAGS */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-image: url("/assets/images/decorations.svg");
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--c-text);
  font-family: "Inter", ui-san-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.8;
  margin: 0;
  padding-block-start: 1rem;
}
body.content {
  background-image: url("/assets/images/blog.svg");
}
a {
  color: inherit;
}
button,
.button {
  background-color: var(--btn-bg, var(--accent));
  border: 0;
  border-radius: 0.5rem;
  color: var(--btn-c, color-mix(in srgb, var(--btn-bg, var(--accent)), white 95%));
  display: grid;
  font-size: 0.9rem;
  font-weight: 600;
  isolation: isolate;
  line-height: 1.1875;
  padding: 1rem 2rem;
  place-items: center;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
  white-space: nowrap;
}
:is(button, .button):hover {
  background-color: color-mix(in srgb, var(--accent), black 15%);
}
button:disabled {
  filter: opacity(0.2);
}
.outline {
  --btn-c: var(--btn-bg);
  background-color: transparent;
  border: 1px solid var(--btn-bg);
}
.outline:hover {
  text-decoration: underline;
}
h1,
h2,
h3 {
  margin: unset;
  text-wrap: balance;
  white-space: unset;
}
img {
  inline-size: 100%;
  max-inline-size: 100%;
}
p {
  margin: unset;
}

/* TYPOGRAPHY */
.h1 {
  font-size: clamp(2.36875rem, 1.7554rem + 3.0667vw, 4rem);
  font-weight: 600;
  line-height: clamp(2.8125rem, 2.0625rem + 3.75vw, 5.0625rem);
  letter-spacing: -0.06em;
}
.h2 {
  font-size: clamp(1.7762500047683716rem, 1.5787rem + 0.9875vw, 2.3687500953674316rem);
  font-weight: 700;
  line-height: clamp(2.125rem, 1.8958rem + 1.1458vw, 2.8125rem);
  letter-spacing: -0.03em;
}
.h3 {
  font-size: 21.329999923706055px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.h4 {
  color: var(--c-violet);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* MISC */
.icon {
  block-size: 2rem;
  inline-size: 2rem;
}
.footer .icon {
  block-size: 1.5rem;
  inline-size: 1.5rem;
}
[data-sr] {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.sup {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.25em;
  letter-spacing: normal;
  line-height: 3em;
}

/* COLOR DECORATIONS */
.optimization {
  --accent: var(--c-lavender);
  --section-bg: var(--c-cold-snow);
}
.collaboration {
  --accent: var(--c-orange);
  --section-bg: var(--c-early-snow);
}
.developer {
  --accent: var(--c-larimar-green);
  --btn-c: hsla(160, 41%, 5%, 1);
  --section-bg: var(--c-ebony-clay);
  --section-c: hsla(230, 6%, 95%, 1);
}
.editing {
  --accent: var(--c-blue-raspberry);
  --section-bg: var(--c-vapor);
}
.footer {
  --section-bg: var(--c-lightgrey);
}
.head {
  --accent: var(--c-violet);
  --section-bg: transparent;
}
.opaque {
  --accent: hsla(0, 0%, 100%, 0.2);
  --btn-c: black;
}
.secondary {
  --accent: var(--c-bosporos);
}
.tertiary {
  border: 2px solid #8e6bc8;
  color: #8e6bc8;
  --accent: none;
  box-shadow: none !important;
}
.secondary:hover,
.tertiary:hover {
  filter: brightness(1.3);
}
/* HEADER/MENU */
header {
  --_h: 50px;
  align-items: center;
  display: flex;
  gap: 2ch;
  inline-size: 100%;
  justify-content: space-between;
  margin-block-end: var(--section-page-gap);
  margin-inline: auto;
  max-inline-size: var(--section-w-xl);
}
header:has(input:checked) menu-panel {
  translate: 0;
}
header label {
  block-size: var(--_h);
}
header > label:first-of-type {
  display: grid;
  place-content: center;
}
header menu-panel label {
  display: flex;
  justify-content: space-between;
}
header label logo-text {
  background-color: #fff;
}
header .logo {
  flex: 0 0 210px;
}
menu-panel {
  background: var(--c-magic-whale);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: 4ch;
  inset: 0;
  padding: 2ch;
  position: fixed;
  transition: translate 0.2s ease-in-out;
  translate: -100vw 0;
  z-index: 1;
}
menu-panel a {
  display: block;
  font-size: 21px;
  text-decoration: none;
}
menu-panel a:not(.button)::after {
  border-bottom: 3px solid var(--c-underline);
  content: "";
  display: block;
  transition: width 0.2s ease-in-out;
  width: 0px;
}
menu-panel a.active::after {
  width: 100%;
}
menu-panel nav {
  display: flex;
  flex-direction: column;
}
menu-panel nav:first-of-type {
  gap: clamp(1rem, -7rem + 12.5vw, 4rem);
}
menu-panel nav:last-of-type {
  gap: 1rem;
}

@media (min-width: 1024px) {
  html {
    height: 100dvh;
  }
  html,
  body {
    display: grid;
  }
  body {
    grid-template-rows: min-content 1fr min-content;
    padding-block-start: 26px;
  }
  header > label:first-of-type,
  header menu-panel label {
    display: none;
  }
  menu-panel {
    display: contents;
    color: inherit;
  }
  menu-panel a {
    font-size: initial;
  }
  menu-panel a:hover::after {
    width: 100%;
  }
  menu-panel nav {
    flex-direction: row;
  }
}
header .button {
  box-shadow: 0px 15px 50px rgba(30, 193, 193, 0.2);
}

/* LOGO */
.logo {
  container-type: inline-size;
}
.logo logo-inner {
  gap: 8px;
}
.logo-footer {
  place-self: start;
}

/* EXPERIENCE */
.experience {
  border-radius: 24px;
}
.experience-article {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--section-row-gap);
}
.experience-article > div {
  align-content: start;
  display: grid;
  justify-items: center;
  grid-row-gap: var(--section-row-gap);
  text-align: start;
}
.experience-article > div > .buttons-list {
  display: flex;
  column-gap: 1rem;
}
@media (max-width: 1280px) {
  header,
  page-wrapper {
    padding-inline: 1rem;
  }
  .footer {
    text-align: center;
  }
  .footer inner-section {
    justify-items: center;
  }
}
@media (min-width: 1024px) {
  .experience-article {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .experience article > div {
    justify-items: start;
  }
}
.experience-header {
  align-items: center;
  color: var(--accent);
  display: flex;
}
.experience :is(h1, h2, h3) svg {
  background: var(--accent);
  border-radius: 8px;
  color: white;
  height: 1.66em;
  margin-right: 0.5em;
  padding: 5px;
  width: 1.66em;
}
.experience figure {
  display: grid;
  margin: unset;
  place-content: center;
}

/* EXPERIENCE TABS */
.experience [template*="tabs-"] a {
  border-bottom: var(--_bdw, 3px) solid transparent;
  font-weight: bold;
  letter-spacing: -0.02rem;
  padding-block-end: 0.15em;
  text-decoration: none;
  white-space: nowrap;
}
.experience [template*="tabs-"] a:has(small) {
  --_bdw: 2px;
  color: var(--c-violet-light);
  font-weight: 600;
  padding-block-end: 0;
}
.experience [template*="tabs-"] a:has(small).active {
  color: var(--c-violet);
}
.experience [template*="tabs-"] a.active {
  border-color: var(--accent);
}
.experience [template*="tabs-"] a:not(.active):hover {
  border-color: color-mix(in srgb, var(--accent), white 70%);
}

.shadow {
  --_shadow: color-mix(in srgb, var(--accent), white 70%);
  filter: drop-shadow(-15px 2px 15px var(--_shadow));
  padding-block-end: 30px;
}

/* MASKS */
.mask {
  mask: var(--_url) center no-repeat;
  -webkit-mask: var(--_url) center no-repeat;
}
.mask-leg {
  --_url: url("../images/mask-leg.svg");
}
.mask-leg-petal {
  --_url: url("../images/mask-leg-petal.svg");
}
.mask-petal {
  --_url: url("../images/mask-petal.svg");
}
.mask-text {
  --_url: url("../images/mask-text.svg");
}

/* FAQ */
.faq {
  background: var(--c-white);
  box-shadow: 0px 15px 70px rgba(0, 0, 0, 0.07);
  border-radius: 33px;
  padding: calc(2 * var(--section-padding-unit));
  text-align: start;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary + div {
  padding-top: var(--section-padding-unit);
}

/* FOOTER */
.footer nav {
  line-height: 2.25;
}
.footer nav a {
  display: block;
  text-decoration: none;
}
.footer nav a:hover {
  text-decoration: underline;
}

/* CONSULTING */
.consulting img {
  inline-size: 25%;
  max-inline-size: 25%;
}

.consulting h3 {
  color: var(--c-violet);
}

/* PRICING */
.pricing {
  --btn-bg: var(--c-bosporos);
  background: var(--c-white);
  border-radius: 14px;
  box-shadow: 0px 25px 100px -50px rgba(0, 0, 0, 0.15);
  display: grid;
  gap: 1em;
  padding: 1.875rem;
}
.pricing-selected {
  --btn-bg: var(--c-white);
  --pill-bg: var(--c-white);
  --pill-c: var(--c-bosporos);
  background: radial-gradient(178.99% 84.52% at 65.92% 84.52%, #005f73 0%, #0c8098 100%);
  color: color-mix(in srgb, var(--c-bosporos), white 90%);
}
.pricing .button {
  place-self: center;
}
.pricing svg {
  block-size: 1.5em;
}
.pricing .disabled {
  opacity: 0.2;
}
.pricing li:not(.disabled)::marker {
  content: "✓ ";
}
.pricing li.disabled::marker {
  content: "✕ ";
}

/* PILL */
.pill {
  background-color: var(--pill-bg, var(--c-bosporos));
  color: var(--pill-c, var(--c-white));
  border-radius: 100px;
  display: grid;
  inline-size: min-content;
  padding: 3px 16px;
  place-content: center;
  place-self: start;
}

/* CARD */
.card {
  display: grid;
  grid-template-columns: 1fr !important; /* TODO: FIX FIX FIX */
  gap: 1ch;
  position: relative;
}
.card a {
  inset: 0;
  position: absolute;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  visibility: visible;
}
.card img {
  border-radius: 12px;
}

/* IFRAME */
iframe {
  border: 0;
  height: 820px;
  width: 100%;
}

/* TOOLS */
.tools {
  color: var(--c-text-grey);
}
.tools img {
  opacity: 0.3;
}

/* COMPONENTS */
gradient-text {
  background: linear-gradient(var(--angle, 91.11deg), var(--from, #8e6bc8) 27.84%, var(--to, #00e9ee) 75%);
  background-clip: text;
  -webkit-background-clip: text;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: transparent;
  padding-inline-end: 1px;
}

under-line {
  background-image: linear-gradient(90deg, var(--from, hsl(296, 100%, 92%)), var(--to, var(--from, #fcd4ff)));
  background-position: left 87.5%;
  background-repeat: no-repeat;
  background-size: 100% var(--size, 12.5%);
}

/* TEXT ANIMATION */
:where(.ui-word-replace) {
  --_speed: 3s;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5ch;
  & div {
    clip-path: inset(2px 0 0 0);
    height: calc(1lh + 2px);
    overflow: hidden;
  }
  & ul {
    all: unset;
    display: grid;
    & li {
      list-style: none;
    }
  }
  &.--spin li {
    animation: spin-word calc(var(--_speed, 2s) * var(--_length, 1)) calc(var(--_speed, 2s) * var(--_index, 0)) cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
    grid-area: 1 / -1;
    text-align: var(--_ta, start);
    translate: 0 1lh;
  }
  &.--step li {
    animation: step-word calc(var(--_speed, 2s) * var(--_length, 1)) steps(var(--_length, 1), jump-none) infinite;
  }
}
@keyframes spin-word {
  12.5% {
    opacity: 1;
    translate: 0;
  }
  25% {
    opacity: 0;
    translate: 0 -1lh;
  }
  100% {
    opacity: 0;
  }
}
@keyframes step-word {
  to {
    translate: 0 calc((-1lh * var(--_length)) + 1lh);
  }
}

/* PROVIDER */
.provider {
  clip-path: inset(0 0 0 0 round 10px);
  max-width: 600px;
  width: 100%;
}
.provider-card {
  display: grid;
  gap: 1ch;
  position: relative;
  & a {
    inset: 0;
    position: absolute;
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
    visibility: visible;
  }
  &:hover .provider-card-logo {
    filter: brightness(1.5);
  }
}
.provider-card-logo {
  align-content: center;
  aspect-ratio: 1.4/1;
  border-radius: 14px;
  background-color: #140533;
  color: #fff;
  display: grid;
  margin: 0;
  transition: filter 0.2s ease-in-out;
  width: 100%;
  & img {
    filter: grayscale(1) invert(1);
    padding-inline: 2em;
  }
}

/* DARK PAGE */
.dark-page {
  background-color: #140533;
  background-image: url("data:image/svg+xml,%3Csvg width='1440' height='950' viewBox='0 0 1440 950' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.6'%3E%3Cg style='mix-blend-mode:hard-light' opacity='0.5'%3E%3Cellipse cx='671.732' cy='281.915' rx='482.5' ry='995.5' transform='rotate(84 671.732 281.915)' fill='url(%23paint0_linear_2_1594)' fill-opacity='0.35'/%3E%3C/g%3E%3Ccircle cx='1295.81' cy='437.057' r='375.5' transform='rotate(-150 1295.81 437.057)' fill='url(%23paint1_radial_2_1594)' fill-opacity='0.1'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2_1594' x1='535.704' y1='844.277' x2='1386' y2='178.532' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FE9F8B'/%3E%3Cstop offset='1' stop-color='%230DBBBF'/%3E%3C/linearGradient%3E%3CradialGradient id='paint1_radial_2_1594' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(1067.31 188.557) rotate(46.0809) scale(281.125 1963.57)'%3E%3Cstop stop-color='%238E6BC8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%233AA9A4'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100vw auto;
  color: #fff;
  & logo-text {
    background-color: #fff;
  }
  & under-line {
    --from: hsl(296, 90%, 72%);
  }
  & page-section:not(:first-of-type):not(:last-of-type) .experience-article {
    color: var(--c-text);
  }
  & .secondary.button {
    background: #8e6bc8;
  }
}

/* FORM */
.trial fieldset {
  --accent: var(--c-violet);
  border: 0;
  border-radius: 4px;
  display: grid;
  gap: 3ch;
  padding: 4ch;
  text-align: start;
  &.submitting {
    filter: grayscale(1) opacity(0.5);
    pointer-events: none;
  }
  & .error {
    color: var(--c-error);
  }
}
label {
  display: grid;
  color: #6f7482;
  max-inline-size: 460px;
  &:has([type="checkbox"]) {
    font-size: smaller;
    gap: 2ch;
    grid-template-columns: min-content 1fr;
    line-height: 1.3;
  }
}
:is(input:not([type="checkbox"]), select) {
  background: #f8fafc;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: inherit;
  padding: 12px;
  & + small {
    color: var(--c-error);
    display: none;
  }
  &:user-invalid {
    border-color: var(--c-error);
    & + small {
      display: block;
    }
  }
}