@import 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';:root {
  --secondary-font: 'Poppins', sans-serif;
  --primary-font: 'Poppins', sans-serif;
  --primary-gradient: linear-gradient(135deg, hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l)) 0%, hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l)) 100%);
  --secondary-gradient: linear-gradient(135deg, hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l)) 0%, hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l)) 100%);
  --accent-gradient: linear-gradient(135deg, hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l)) 0%, hsl(var(--notion-teal-h), var(--notion-teal-s), var(--notion-teal-l)) 100%);
  --dark-gradient: linear-gradient(135deg, hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l)) 0%, hsl(var(--fg-color-h), var(--fg-color-s), calc(var(--fg-color-l) - 5%)) 100%);
  --light-gradient: linear-gradient(135deg, hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l)) 0%, hsl(var(--bg-color-h), var(--bg-color-s), calc(var(--bg-color-l) - 3%)) 100%);
  --section-padding: clamp(4rem, 8vw, 8rem) calc(min(96px, 8vw));
  --border-radius-lg: calc(var(--border-radius) * 3);
  --border-radius-xl: calc(var(--border-radius) * 4);
  /* --heading2: calc(var(--heading-font-size) * 1.7); */
  --navbar-btn-bg-color: var(--primary-gradient);
  /* --notion-max-width: 1200px; */
  --shadow-sm: 0 1px 2px 0 hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.05);
  --shadow-md: 0 4px 6px -1px hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.1), 0 2px 4px -1px hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.06);
  --shadow-lg: 0 10px 15px -3px hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.1), 0 4px 6px -2px hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.05);
  --shadow-xl: 0 20px 25px -5px hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.1), 0 10px 10px -5px hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.04);
  --shadow-2xl: 0 25px 50px -12px hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.25);
  --glow: 0 0 20px hsla(var(--brand-color-h), var(--brand-color-s), var(--brand-color-l), 0.3);
  --glass-bg: hsla(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l), 0.1);
  --glass-border: hsla(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l), 0.2);
  --glass-backdrop: blur(20px);
  --heading-font-size: 2rem;
}

* {
  box-sizing: border-box
}

body {
  font-family: var(--primary-font);
  line-height: 1.7;
  color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: hsl(var(--bg-color-h),var(--bg-color-s),calc(var(--bg-color-l) - 2%))
}

.notion-h1,.notion-h2,.notion-h3,.notion-h4,.notion-h5,.notion-h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0
}

.notion-h1 {
  font-size: var(--heading1);
  background: linear-gradient(135deg,hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l)),hsl(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.notion-h2 {
  font-size: var(--heading2);
  color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l))
}

.notion-h3 {
  font-size: var(--heading3);
  color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l))
}

.notion-text {
  line-height: 1.7;
  font-weight: 400
}

.bullet-btn,.button,.notion-button .notion-button-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
  font-family: var(--primary-font);
  font-size: var(--base-font-size);
  font-weight: 600;
  letter-spacing: -.01em;
  border: none;
  border-radius: var(--border-radius);
  background: var(--primary-gradient);
  color: var(--navbar-btn-fg-color);
  text-decoration: none;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-md);
  overflow: hidden
}
.notion-button{
  max-width: 100%;
  /* margin: 0 auto; */
  display: block;
}

.bullet-btn::before,
.notion-button .notion-button-inner::before
{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.3),transparent);
  transition: left .5s
}

.bullet-btn:hover::before,
.notion-button .notion-button-inner:hover::before
{
  left: 100%
}

.bullet-btn:hover,
.notion-button .notion-button-inner:hover
{
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  filter: brightness(1.1)
}

.bullet-btn:active,
.notion-button .notion-button-inner:active
{
  transform: translateY(0);
  box-shadow: var(--shadow-md)
}

.bullet-navbar-links a,.bullet-navbar-links .navbar-link {
  font-family: var(--primary-font);
  font-size: var(--navbar-font-size);
  font-weight: 500;
  color: var(--navbar-fg-color);
  text-decoration: none;
  position: relative;
  transition: all .3s ease
}

.bullet-navbar-links a:hover {
  color: hsl(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l))
}

.bullet-navbar-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-gradient);
  transition: width .3s ease
}

.bullet-navbar-links a:hover::after {
  width: 100%
}

.notion-list {
  font-size: var(--base-font-size);
  line-height: 1.7
}

.notion-list li {
  margin-bottom: .5rem;
  padding-left: .5rem
}

.bullet-simple-links {
  max-width: 90%;
  margin: 0 auto
}

.co-webeeui-hero-section .notion-callout-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 560' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='200' cy='100' r='40' fill='white' opacity='0.1'/%3E%3Ccircle cx='1200' cy='200' r='25' fill='white' opacity='0.1'/%3E%3Ccircle cx='800' cy='150' r='15' fill='white' opacity='0.1'/%3E%3Ccircle cx='300' cy='300' r='30' fill='white' opacity='0.1'/%3E%3Ccircle cx='1000' cy='400' r='20' fill='white' opacity='0.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
  height: auto
}

.co-webeeui-three-col .notion-h {
  text-align: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 2rem
}

.co-webeeui-hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: var(--section-padding);
  background: var(--primary-gradient);
  overflow: hidden;
  isolation: isolate
}

.co-webeeui-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%,hsla(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l),.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,hsla(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l),.2) 0%,transparent 50%);
  z-index: -1
}



.co-webeeui-hero-section>.notion-callout-text {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2
}

.co-webeeui-hero-section .notion-h1 {
  margin: 0 0 2rem;
  background: linear-gradient(135deg,hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l)) 0%,hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.03em
}

.co-webeeui-hero-section .notion-text {
  color: hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.9);
  margin-bottom: 3rem;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6
}

.co-webeeui-hero-section .bullet-btn,
.co-webeeui-hero-section .notion-button .notion-button-inner
{
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));
  padding: 1.25rem 2.5rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-2xl);
  transition: all .4s cubic-bezier(.4,0,.2,1)
}

.co-webeeui-hero-section .bullet-btn:hover,
.co-webeeui-hero-section .notion-button .notion-button-inner:hover
{
  background: hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.25);
  transform: translateY(-4px);
  box-shadow: 0 32px 64px hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.2)
}

.co-webeeui-faq {
  padding: var(--section-padding);
  background: var(--light-gradient)
}

.co-webeeui-faq .notion-h2 {
  text-align: center;
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-bottom: 1rem
}

.co-webeeui-faq .notion-h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--primary-gradient);
  border-radius: calc(var(--border-radius)/2)
}

.co-webeeui-faq .notion-toggle {
  background: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));
  border: 1px solid var(--primary-border-color);
  border-radius: var(--border-radius-lg);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto
}

.co-webeeui-faq .notion-toggle:hover {
  box-shadow: var(--shadow-md);
  border-color: hsla(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l),.2);
  transform: translateY(-2px)
}

.co-webeeui-faq summary {
  list-style: none;
  list-style-type: none;
  padding: 2rem 2.5rem;
  cursor: pointer;
  font-weight: 600;
  color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  position: relative;
  transition: all .3s ease
}

.co-webeeui-faq summary::-webkit-details-marker {
  display: none
}

.co-webeeui-faq summary::after {
  content: '+';
  position: absolute;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--primary-gradient);
  color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  transition: all .3s ease
}

.co-webeeui-faq details[open] summary::after {
  content: '−';
  transform: translateY(-50%)rotate(180deg)
}

.co-webeeui-faq details[open] summary {
  color: hsl(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l));
  padding-bottom: 1.5rem
}

.co-webeeui-faq details>div {
  padding: 0 2.5rem 2rem;
  font-size: var(--base-font-size);
  line-height: 1.7;
  border-top: 1px solid var(--primary-border-color);
  margin-top: -.5rem;
  padding-top: 1.5rem
}

.co-webeeui-faq details[open] {
  background: linear-gradient(135deg,hsla(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l),.02) 0%,hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l)) 100%)
}

html {
  scroll-behavior: smooth
}

* {
  will-change: auto
}
.co-webeeui-hero-section,
.co-webeeui-nested-features,
.co-webeeui-three-tiers,
.co-webeeui-faq,
.co-webeeui-full-width-brand,
.co-webeeui-three-col {
	width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


.co-webeeui-hero-section,.co-webeeui-nested-features .notion-callout,.co-webeeui-three-col .notion-collection-card,.co-webeeui-three-tiers .notion-callout,.co-webeeui-faq .notion-toggle,.bullet-btn, .notion-button .notion-button-inner {
  will-change: transform,box-shadow,filter
}

.co-webeeui-group-btns .notion-row {
  border: 1px solid var(--navbar-btn-bg-color);
  width: fit-content;
  border-radius: 8px;
  gap: 0;
  margin: auto;
  padding: 0
}

.co-webeeui-group-btns .notion-column {
  padding: 0
}

.co-webeeui-group-btns .notion-row>:first-child {
  border-right: 1px solid var(--navbar-btn-bg-color)
}

.co-webeeui-group-btns .notion-link {
  padding: .4rem .9rem;
  font-weight: 500
}

.co-webeeui-group-btns .active {
  background: var(--navbar-btn-bg-color);
  color: #fff
}

.co-webeeui-centered-2-col .notion-default_background_co {
  border: unset;
  padding: 0;
  margin: .5rem auto
}

.co-webeeui-centered-2-col .notion-h2 {
  padding-bottom: 1.5rem
}

.co-webeeui-centered-2-col .notion-page-icon-inline {
  margin-top: 6px;
  margin-right: 1rem;
  background: var(--navbar-btn-bg-color);
  border-radius: 7px;
  width: unset;
  height: unset;
  max-width: unset;
  max-height: unset
}

.co-webeeui-centered-2-col .notion-page-icon-inline img {
  height: 38px;
  width: 46px;
  padding: 8px
}

.co-webeeui-centered-2-col {
  text-align: center;
  margin: 3rem auto
}

.co-webeeui-centered-2-col .notion-default_background_co {
  text-align: start
}


.co-webeeui-centered-2-col>.notion-callout-text>* {
  margin: 0 auto;
  width: 70%
}
.co-webeeui-centered-2-col .bullet-2-column {
  padding-top: 3rem;
  width: 90%;
}
.co-webeeui-centered-2-col .notion-callout-text .notion-text>b{
	font-size: calc(var(--base-font-size) * 1.1);
}


.co-webeeui-nested-features {
  padding: var(--section-padding);
  background: var(--light-gradient)
}

.co-webeeui-nested-features .notion-row {
  padding-left: 20px;
  padding-right: 20px
}

.co-webeeui-nested-features>.notion-callout-text>.notion-h {
  text-align: center;
  max-width: 800px;
  display: block;
  margin: 0 auto 4rem;
  padding-bottom: 1rem;
  position: relative
}

.co-webeeui-nested-features>.notion-callout-text>.notion-h::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--primary-gradient);
  border-radius: calc(var(--border-radius)/2)
}

.co-webeeui-nested-features .notion-callout {
  background: var(--db-card-bg);
  border: 1px solid var(--primary-border-color);
  border-radius: var(--border-radius-xl);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  margin: .5rem
}

.co-webeeui-nested-features .notion-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transition: transform .3s ease
}

.co-webeeui-nested-features .notion-callout:hover::before {
  transform: scaleX(1)
}

.co-webeeui-nested-features .notion-callout:hover {
  transform: translateY(-8px);
  border-color: hsla(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l),.2)
}

.co-webeeui-nested-features .notion-callout .notion-h3 {
  margin-bottom: 1rem;
  font-weight: 700
}

.co-webeeui-nested-features .notion-callout .notion-text {
  font-size: var(--base-font-size);
  line-height: 1.7;
  margin-bottom: 2rem
}

.co-webeeui-nested-features .notion-callout .bullet-btn ,
.co-webeeui-nested-features .notion-callout .notion-button .notion-button-inner{
  background: var(--primary-gradient);
  border: none;
  padding: .875rem 1.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--border-radius);
  transition: all .3s ease
}

.co-webeeui-nested-features .notion-callout .bullet-btn:hover,
.co-webeeui-nested-features .notion-callout .notion-button .notion-button-inner:hover
{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg)
}

.co-webeeui-nested-features img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 1.5rem;
  border-radius: var(--border-radius);
  filter: drop-shadow(0 10px 20px hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.1))
}

.co-webeeui-three-col {
  padding: var(--section-padding);
  background: var(--light-gradient)
}

.co-webeeui-three-col .notion-h2 {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-bottom: 1rem
}

.co-webeeui-three-col .notion-h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--primary-gradient);
  border-radius: calc(var(--border-radius)/2)
}

.co-webeeui-three-col .notion-gallery-grid {
  border: none;
  gap: 2rem;
  padding: 0
}

.co-webeeui-three-col .notion-collection-header {
  display: none
}

.co-webeeui-three-col .notion-collection-card {
  background: var(--collection-card-bg);
  border: 1px solid var(--primary-border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  margin: 10px auto
}

.co-webeeui-three-col .notion-collection-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transition: transform .3s ease
}

.co-webeeui-three-col .notion-collection-card:hover::before {
  transform: scaleX(1)
}

.co-webeeui-three-col .notion-collection-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: hsla(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l),.2)
}

.co-webeeui-three-col .notion-collection-card-body {
  padding: 0;
  margin: 0
}

.co-webeeui-three-col .notion-page-icon-inline,.co-webeeui-three-col .notion-page-title-icon {
  width: 64px;
  height: 64px;
  max-height: 64px;
  max-width: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md)
}

.co-webeeui-three-col .notion-page-title {
  display: inline-flex
}

.co-webeeui-three-col .notion-page-title-text {
  font-weight: 600;
  color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  margin-bottom: .5rem;
  padding-left: 1rem
}

.co-webeeui-three-col .notion-property-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  margin-bottom: 1rem
}

.co-webeeui-three-col .prop-rating {
  font-size: var(--base-font-size);
  margin-bottom: 1rem;
  filter: hue-rotate(15deg)
}

.co-webeeui-three-tiers {
  padding: var(--section-padding);
  background: var(--primary-gradient);
  color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));
  text-align: center;
  position: relative;
  overflow: hidden
}

.co-webeeui-three-tiers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%,hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.05) 0%,transparent 50%);
  z-index: 0
}

.co-webeeui-three-tiers>.notion-callout-text {
  position: relative;
  z-index: 1
}

.co-webeeui-three-tiers .notion-h2 {
  color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));
  max-width: 800px;
  margin: 0 auto 1rem;
  /* font-size: var(--heading2) */
}

.co-webeeui-three-tiers>.notion-callout-text>.notion-text {
  max-width: 600px;
  margin: 0 auto 4rem;
  color: hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.9);
  line-height: 1.6
}

.co-webeeui-three-tiers .bullet-3-column {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-top: 0;
  position: relative;
  z-index: 1
}

.co-webeeui-three-tiers .notion-column {
  width: 100%!important
}

.co-webeeui-three-tiers .notion-spacer {
  display: none
}

.co-webeeui-three-tiers .notion-callout {
  background: var(--db-card-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-2xl);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  text-align: left;
  color: var(--fg-color)
}

.co-webeeui-three-tiers .notion-callout:hover {
  transform: translateY(-8px)scale(1.02);
  box-shadow: 0 32px 64px hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.2)
}

.co-webeeui-three-tiers .notion-column:nth-child(2) .notion-callout {
  border: 2px solid hsla(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l),.4);
  transform: scale(1.05)
}

.co-webeeui-three-tiers .notion-column:nth-child(2) .notion-callout::before {
  content: 'POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: .5rem 1.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: 20px;
  letter-spacing: .05em
}

.co-webeeui-three-tiers .notion-callout .notion-text:first-of-type {
  font-weight: 700;
  color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  margin-bottom: .5rem
}

.co-webeeui-three-tiers .notion-callout .notion-text:nth-of-type(2) {
  font-size: var(--base-font-size);
  margin-bottom: 2rem;
  line-height: 1.6
}

.co-webeeui-three-tiers .notion-h3 {
  font-weight: 800;
  color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  margin: 0 0 1.5rem;
  line-height: 1
}

.co-webeeui-three-tiers .notion-list {
  font-size: var(--text-sm);
  line-height: 1.6
}
.notion-full-page{
	padding-bottom: 0;
}

.co-webeeui-three-tiers .notion-list li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--primary-border-color)
}

.co-webeeui-three-tiers .notion-list li:last-child {
  border-bottom: none
}
.co-webeeui-three-tiers .notion-list li{
	padding-bottom: 0;
	margin-bottom: 0;
	font-size: calc(var(--base-font-size) - 2px);
}

.co-webeeui-three-tiers .notion-callout .notion-blank {
  height: 1rem
}

.co-webeeui-three-tiers .bullet-btn,
.co-webeeui-three-tiers .notion-button .notion-button-inner
{
  width: 100%;
  background: var(--primary-gradient);
  border: none;
  padding: 1rem 2rem;
  font-size: var(--base-font-size);
  font-weight: 600;
  border-radius: var(--border-radius);
  margin: 0;
  transition: all .3s ease
}

.co-webeeui-three-tiers .bullet-btn:hover,
.co-webeeui-three-tiers .notion-button .notion-button-inner:hover
{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg)
}

.co-webeeui-full-width-brand {
  padding: var(--section-padding);
  text-align: center;
  position: relative;
  overflow: hidden
}

.co-webeeui-full-width-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%,hsla(var(--brand-color-h),var(--brand-color-s),var(--brand-color-l),.2) 0%,transparent 50%),radial-gradient(circle at 70% 30%,hsla(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l),.2) 0%,transparent 50%);
  z-index: 0
}

.co-webeeui-full-width-brand .notion-callout-text {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.co-webeeui-full-width-brand .notion-h2 {
  /* font-size: var(--heading2); */
  margin: 0 0 2rem;
  font-weight: 800;
  line-height: 1.2
}

.co-webeeui-full-width-brand .notion-text {
  margin-bottom: 3rem;
  line-height: 1.6
}

.co-webeeui-full-width-brand .bullet-btn,
.co-webeeui-full-width-brand .notion-button .notion-button-inner
{
  font-weight: 700;
  padding: 1.25rem 3rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-2xl);
  transition: all .4s cubic-bezier(.4,0,.2,1)
}

.co-webeeui-full-width-brand .bullet-btn:hover,
.co-webeeui-full-width-brand .notion-button .notion-button-inner:hover
{
  transform: translateY(-4px)
}

.co-webeeui-full-width-brand .notion-default_background_co {
  border-radius: 0;
  border: none
}

html {
  scroll-behavior: smooth;
}

.scroll-container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth
}

.co-webeeui-hero-section,.co-webeeui-nested-features,.co-webeeui-centered-2-col,.co-webeeui-three-col,.co-webeeui-three-tiers,.co-webeeui-full-width-brand,.co-webeeui-faq {
  opacity: 0;
  transform: translateY(70px)scale(.95);
  transition: all 1.6s cubic-bezier(.16,1,.3,1);
  will-change: opacity,transform,filter;
  backface-visibility: hidden;
  perspective: 1000px
}

.co-webeeui-hero-section.animate,.co-webeeui-nested-features.animate,.co-webeeui-centered-2-col.animate,.co-webeeui-three-col.animate,.co-webeeui-three-tiers.animate,.co-webeeui-full-width-brand.animate,.co-webeeui-faq.animate {
  opacity: 1;
  transform: translateY(0)scale(1);
  filter: blur(0)
}

.co-webeeui-hero-section {
  transform: translateY(100px)scale(.9)rotateX(15deg);
  filter: blur(12px);
  transition: all 2.2s cubic-bezier(.16,1,.3,1);
  transform-origin: center bottom
}

.co-webeeui-hero-section.animate {
  transform: translateY(0)scale(1)rotateX(0);
  filter: blur(0)
}

@keyframes heroFloat {
  0%,100% {
      transform: translateY(0)scale(1)rotateX(0)
  }

  50% {
      transform: translateY(-10px)scale(1.01)rotateX(0)
  }
}

.co-webeeui-nested-features .notion-collection-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s cubic-bezier(.25,.46,.45,.94)
}

.co-webeeui-nested-features.animate .notion-collection-item:nth-child(1) {
  animation: slideInUp .8s cubic-bezier(.25,.46,.45,.94).1s forwards
}

.co-webeeui-nested-features.animate .notion-collection-item:nth-child(2) {
  animation: slideInUp .8s cubic-bezier(.25,.46,.45,.94).2s forwards
}

.co-webeeui-nested-features.animate .notion-collection-item:nth-child(3) {
  animation: slideInUp .8s cubic-bezier(.25,.46,.45,.94).3s forwards
}

.co-webeeui-centered-2-col {
  transform: translateX(-30px)
}

.co-webeeui-centered-2-col.animate {
  transform: translateX(0);
  transition: all 1s cubic-bezier(.23,1,.32,1)
}

.co-webeeui-three-col .notion-collection-item {
  opacity: 0;
  transform: translateY(60px)rotate(2deg);
  transition: all .8s cubic-bezier(.34,1.56,.64,1)
}

.co-webeeui-three-col.animate .notion-collection-item:nth-child(1) {
  animation: floatIn 1s cubic-bezier(.34,1.56,.64,1).1s forwards
}

.co-webeeui-three-col.animate .notion-collection-item:nth-child(2) {
  animation: floatIn 1s cubic-bezier(.34,1.56,.64,1).3s forwards
}

.co-webeeui-three-col.animate .notion-collection-item:nth-child(3) {
  animation: floatIn 1s cubic-bezier(.34,1.56,.64,1).5s forwards
}

.co-webeeui-three-tiers {
  transform: translateY(80px)scale(.95);
  transition: all 1.2s cubic-bezier(.23,1,.32,1)
}

.co-webeeui-three-tiers.animate {
  transform: translateY(0)scale(1)
}

.co-webeeui-three-tiers .notion-collection-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s cubic-bezier(.25,.46,.45,.94)
}

.co-webeeui-three-tiers.animate .notion-collection-item:nth-child(1) {
  animation: slideInUp .8s cubic-bezier(.25,.46,.45,.94).2s forwards
}

.co-webeeui-three-tiers.animate .notion-collection-item:nth-child(2) {
  animation: slideInUp .8s cubic-bezier(.25,.46,.45,.94).4s forwards;
  transform: translateY(40px)scale(1.05)
}

.co-webeeui-three-tiers.animate .notion-collection-item:nth-child(3) {
  animation: slideInUp .8s cubic-bezier(.25,.46,.45,.94).6s forwards
}

.co-webeeui-full-width-brand {
  transform: translateY(60px)scale(.9);
  transition: all 1.4s cubic-bezier(.23,1,.32,1)
}

.co-webeeui-full-width-brand.animate {
  transform: translateY(0)scale(1)
}

.co-webeeui-faq {
  transform: translateY(40px);
  transition: all .8s cubic-bezier(.25,.46,.45,.94)
}

.co-webeeui-faq.animate {
  transform: translateY(0)
}

@keyframes slideInUp {
  0% {
      opacity: 0;
      transform: translateY(40px)
  }

  100% {
      opacity: 1;
      transform: translateY(0)
  }
}

@keyframes floatIn {
  0% {
      opacity: 0;
      transform: translateY(60px)rotate(2deg)
  }

  100% {
      opacity: 1;
      transform: translateY(0)rotate(0)
  }
}

.co-webeeui-nested-features .notion-collection-item:hover,.co-webeeui-three-col .notion-collection-item:hover,.co-webeeui-three-tiers .notion-collection-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
  transition: all .3s cubic-bezier(.25,.46,.45,.94)
}

.co-webeeui-hero-section {
  background-attachment: fixed;
  background-size: cover
}

.co-webeeui-hero-section,.co-webeeui-nested-features,.co-webeeui-centered-2-col,.co-webeeui-three-col,.co-webeeui-three-tiers,.co-webeeui-full-width-brand,.co-webeeui-faq {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d
}

@media(min-width: 1400px) {
  .co-webeeui-hero-section>.notion-callout-text {
      max-width:940px
  }
}

@media(max-width: 1024px) {
  .co-webeeui-hero-section {
      min-height:80vh;
      padding: clamp(3rem,6vw,6rem)0
  }

  .co-webeeui-three-tiers .bullet-3-column {
      grid-template-columns: repeat(2,1fr);
      gap: 1.5rem
  }

  .co-webeeui-three-tiers .notion-column:nth-child(2) .notion-callout {
      transform: none
  }
}

@media(max-width: 768px) {
  .co-webeeui-hero-section {
      min-height:70vh;
      padding: 3rem 0
  }
  .co-webeeui-centered-2-col>.notion-callout-text>*{
      width: 100%;
  }
  .co-webeeui-centered-2-col .bullet-2-column{
      width: 100%;
  }

  .co-webeeui-hero-section .notion-h1 {
      margin-bottom: 1.5rem
  }

  .co-webeeui-hero-section .notion-text {
      font-size: var(--base-font-size);
      margin-bottom: 2rem
  }

  .co-webeeui-hero-section .bullet-btn,
  .co-webeeui-hero-section  .notion-button .notion-button-inner
  {
      padding: 1rem 2rem;
      font-size: var(--base-font-size)
  }

  .co-webeeui-nested-features .bullet-2-column {
      flex-direction: column;
      gap: 1rem
  }

  .co-webeeui-nested-features .bullet-2-column .notion-column {
      width: 100%!important
  }

  .co-webeeui-nested-features .notion-row {
      padding: 10px!important
  }

  .co-webeeui-nested-features .notion-callout {
      padding: 2rem 1.5rem
  }

  .co-webeeui-three-col .notion-gallery-grid {
      gap: 1rem
  }

  .co-webeeui-three-col .notion-collection-card {
      padding: 2rem 1.5rem
  }

  .co-webeeui-three-tiers .bullet-3-column {
      grid-template-columns: 1fr;
      gap: 1rem
  }

  .co-webeeui-three-tiers .notion-callout {
      padding: 2rem 1.5rem
  }

  .co-webeeui-faq summary {
      padding: 1.5rem;
      font-size: var(--base-font-size)
  }

  .co-webeeui-faq summary::after {
      right: 1.5rem;
      width: 28px;
      height: 28px;
      font-size: 1rem
  }

  .co-webeeui-faq details>div {
      padding: 0 1.5rem 1.5rem
  }
}

@media(max-width: 480px) {
  .co-webeeui-hero-section {
      min-height:60vh;
      padding: 2rem 0
  }

  .co-webeeui-hero-section .bullet-btn,
  .co-webeeui-hero-section .notion-button .notion-button-inner
  {
      padding: .875rem 1.5rem;
      font-size: var(--text-sm)
  }

  .co-webeeui-nested-features .notion-callout {
      padding: 1.5rem 1rem
  }

  .co-webeeui-three-col .notion-collection-card {
      padding: 1.5rem 1rem
  }

  .co-webeeui-three-tiers .notion-callout {
      padding: 1.5rem 1rem
  }

  .co-webeeui-three-tiers .notion-h3 {
      font-size: 2rem
  }

  .co-webeeui-faq summary {
      padding: 1rem;
      font-size: var(--text-sm)
  }

  .co-webeeui-faq summary::after {
      right: 1rem;
      width: 24px;
      height: 24px;
      font-size: .875rem
  }

  .co-webeeui-faq details>div {
      padding: 0 1rem 1rem;
      font-size: var(--text-sm)
  }
}