/* Body font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400..700&display=swap');
/* Try local install first (works for licensed users), then CDN */
@font-face {
     font-family: "STXihei";
     src: local("STXihei"), local("华文细黑"),
          url("https://db.onlinewebfonts.com/t/165fd6b4666591f4ac2765c4ed1c0b4a.woff2") format("woff2"),
          url("https://db.onlinewebfonts.com/t/165fd6b4666591f4ac2765c4ed1c0b4a.woff") format("woff"),
          url("https://db.onlinewebfonts.com/t/165fd6b4666591f4ac2765c4ed1c0b4a.ttf") format("truetype");
     font-display: swap;
}
/* ========================
   Reset & Base Styles
   ========================= */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html,
body {
     height: 100%;
     font-family: 'Plus Jakarta Sans', sans-serif;
     background-color: #2c2c2c;
     scroll-behavior: smooth;
     color: #dbdbdb;
}

/* =========================
      Typography
      ========================= */
h1, h2, h3 {
     font-family: "STXihei", sans-serif;
     font-optical-sizing: auto;
     font-style: normal;
}

h1 {
     font-size: 7rem;
     font-weight: 500;
     text-transform: lowercase;
     color: #ffffff;
     letter-spacing: 0.04em;
     text-shadow:
          0 0 10px rgba(255, 255, 255, 0.6),
          0 0 30px rgba(255, 255, 255, 0.3),
          0 0 60px rgba(255, 255, 255, 0.15);
     animation: glowFade 6s ease-in-out infinite alternate;
}

h2 {
     font-size: 4rem;
     font-weight: 400;
     text-transform: lowercase;
     text-align: left;
     max-width: min(860px, 88vw);
     margin: 0 auto 1rem;
     width: 100%;
     text-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

h3 {
     font-size: 2rem;
     font-weight: 400;
     text-transform: lowercase;
     text-align: left;
     max-width: min(860px, 88vw);
     margin: 2rem auto 1rem;
     width: 100%;
}

p {
     font-size: 1.25rem;
     opacity: 0.85;
     margin-bottom: 3rem;
     max-width: min(860px, 88vw);
     margin-left: auto;
     margin-right: auto;
}

@keyframes glowFade {
     0% {
          text-shadow:
               0 0 10px rgba(255, 255, 255, 0.5),
               0 0 30px rgba(255, 255, 255, 0.25),
               0 0 60px rgba(255, 255, 255, 0.1);
          opacity: 1;
     }

     100% {
          text-shadow:
               0 0 14px rgba(255, 255, 255, 0.75),
               0 0 40px rgba(255, 255, 255, 0.4),
               0 0 80px rgba(255, 255, 255, 0.2);
          opacity: 0.95;
     }
}

/* =========================
      Agent Cards
      ========================= */
.agent-card {
     max-width: min(860px, 88vw);
     width: 100%;
     margin: 1rem auto 2rem;
     position: relative;
     isolation: isolate;
     background: #2c2c2c;
     border-radius: 24px;
     padding: 0.9rem 2rem 1.5rem;
     box-shadow: 0 0 25px 4px rgba(255, 255, 255, 0.05);
}

.agent-card::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 2px;
     background: conic-gradient(from var(--angle), #d16ba5, #86a8e7, #5ffbf1, #ffb86b, #d16ba5);
     animation: rotateBorder 12s linear infinite;
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: destination-out;
     mask-composite: exclude;
     z-index: -1;
}

.agent-card p {
     margin-bottom: 1.25rem;
}

.store-links {
     display: flex;
     justify-content: center;
     margin-top: 0.25rem;
}

.store-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.65rem 2rem;
     border-radius: 999px;
     font-size: 1.1rem;
     text-transform: none;
     text-decoration: none;
     background: linear-gradient(-45deg, #d16ba5, #86a8e7, #5ffbf1, #ffb86b);
     background-size: 400% 400%;
     animation: gradientAnimation 6s ease infinite;
     color: #2c2c2c;
     border: none;
     transition: box-shadow 0.3s ease, transform 0.3s ease;
     letter-spacing: 0.02em;
     font-weight: 600;
}

.store-badge:hover {
     box-shadow: 0 0 16px rgba(134, 168, 231, 0.3), 0 0 32px rgba(95, 251, 241, 0.12);
     transform: scale(1.05);
}

.agent-card-header {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 0.25rem;
}

.agent-card-header h3 {
     margin: 0;
}

.agent-logo {
     height: 28px;
     width: auto;
     flex-shrink: 0;
}

.subtext {
     opacity: 0.4;
     font-size: 0.75em;
}

/* =========================
      Footer
      ========================= */
.site-footer {
     background-color: #222222;
     padding: 1.5rem 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-inner {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     max-width: min(860px, 88vw);
     margin: 0 auto;
}

.footer-left {
     font-size: 0.8rem;
     opacity: 0.45;
     text-transform: lowercase;
}

/* Legal pages */
.section.legal {
     display: block;
     max-width: 720px;
     margin: 0 auto;
}

.legal-meta {
     font-size: 0.85rem;
     opacity: 0.45;
     margin-bottom: 2.5rem;
}

.section.legal h3 {
     font-size: 1.25rem;
     font-weight: 400;
     margin-top: 2.5rem;
     margin-bottom: 0.4rem;
     text-transform: none;
}

.section.legal h4 {
     font-size: 1rem;
     font-weight: 400;
     margin-top: 1.25rem;
     margin-bottom: 0.2rem;
}

.section.legal p,
.section.legal li {
     font-size: 0.875rem;
     line-height: 1.75;
     opacity: 0.75;
     margin-top: 0;
     margin-bottom: 0.4rem;
     text-align: left;
}

.section.legal ul {
     list-style: disc;
     margin: 0.25rem 0 0.75rem 1.5rem;
}

.section.legal em {
     font-style: normal;
     opacity: 0.55;
}

.section.legal a:link,
.section.legal a:visited {
     color: #5ffbf1;
     text-decoration: underline;
     text-decoration-color: rgba(95, 251, 241, 0.35);
}

.section.legal a:hover {
     color: #86a8e7;
     text-decoration-color: rgba(134, 168, 231, 0.5);
}

/* Contact form */
.contact-form {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
     width: 100%;
     max-width: 560px;
     margin-top: 2rem;
}

.form-group {
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
}

.form-group label {
     font-size: 0.8rem;
     opacity: 0.5;
     letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 6px;
     color: #e0e0e0;
     font-family: inherit;
     font-size: 0.9rem;
     padding: 0.65rem 0.9rem;
     transition: border-color 0.2s;
     outline: none;
     width: 100%;
     box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
     border-color: rgba(95, 251, 241, 0.45);
}

.form-group textarea {
     resize: vertical;
     min-height: 120px;
}

.form-row--extra {
     position: absolute;
     left: -9000px;
     top: auto;
     width: 1px;
     height: 1px;
     overflow: hidden;
}

.form-submit {
     align-self: flex-start;
     margin-top: 0.5rem;
}

.form-message {
     display: none;
     margin-top: 2rem;
}

.form-message p:first-child {
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
}

.form-error {
     color: #ff6b6b;
     font-size: 0.85rem;
     margin-top: 0.25rem;
     display: none;
}

.anima-core-logo {
     font-family: "Reem Kufi", sans-serif;
     font-size: 1rem;
     font-weight: 600;
     letter-spacing: 0.01em;
     color: #c8c8c8;
     opacity: 1;
     text-transform: lowercase;
     text-decoration: none;
}

.anima-core-logo .ma {
     font-style: italic;
     color: #E8481A;
}

.footer-left strong {
     font-weight: 600;
     opacity: 1;
}

.footer-links {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem 1.5rem;
     align-items: center;
}

.footer-links a {
     color: #dbdbdb;
     font-size: 0.8rem;
     text-decoration: none;
     text-transform: lowercase;
     opacity: 0.45;
     transition: opacity 0.2s ease;
}

.footer-links a:hover {
     opacity: 1;
}

@media (max-width: 600px) {
     .footer-inner {
          flex-direction: column;
          align-items: flex-start;
     }
}

/* =========================
      Burger Menu
      ========================= */
.burger-menu {
     position: fixed;
     top: 1rem;
     left: 1rem;
     width: 40px;
     height: 30px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     cursor: pointer;
     z-index: 100;
     background: none;
     border: none;
     padding: 0;
}

.burger-menu:focus-visible {
     outline: 2px solid #5ffbf1;
     outline-offset: 4px;
     border-radius: 2px;
}

.burger-menu div {
     height: 4px;
     background: #fff;
     border-radius: 2px;
     transition: 0.3s;
}

.nav-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(44, 44, 44, 0.95);
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2rem;
     z-index: 99;
}

.nav-overlay.show {
     display: flex;
}

.nav-overlay a {
     color: #fff;
     font-size: 2rem;
     text-decoration: none;
     text-transform: lowercase;
     transition: all 0.5s ease;
     background: transparent;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: #fff;
}

.nav-overlay .nav-small {
     font-size: 0.85rem;
     opacity: 0.45;
     -webkit-text-fill-color: rgba(255, 255, 255, 0.45);
}

.nav-overlay .nav-small:hover {
     opacity: 1;
}

hr.nav-divider {
     border: none;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     width: 120px;
     margin: 0.25rem 0;
}

.nav-overlay a:hover {
     background: linear-gradient(-45deg, #d16ba5, #86a8e7, #5ffbf1, #ffb86b);
     background-size: 400% 400%;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: gradientAnimation 15s ease infinite;
}

/* =========================
      Utility Classes
      ========================= */
.gradient-text {
     background: linear-gradient(-45deg, #d16ba5, #86a8e7, #5ffbf1, #ffb86b);
     background-size: 400% 400%;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: gradientAnimation 15s ease infinite;
}

hr.gradient {
     border: none;
     height: 2px;
     border-radius: 6px;
     background: #ffffff;
     margin-top: 0.5rem;
     margin-bottom: 2.5rem;
     margin-left: auto;
     margin-right: auto;
     width: 77%;
     display: block;
     transition: all 0.5s ease;
}

hr.gradient:hover {
     background: linear-gradient(90deg, #d16ba5, #86a8e7, #5ffbf1, #ffb86b, #d16ba5);
     background-size: 400% 400%;
     animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}

/* =========================
      Hero Section
      ========================= */
.hero {
     position: relative;
     width: 100%;
     height: 100vh;
     background: linear-gradient(-45deg, #d16ba5, #86a8e7, #5ffbf1, #ffb86b);
     background-size: 400% 400%;
     animation: gradientAnimation 25s ease infinite;
     overflow: hidden;
}

.blob {
     position: absolute;
     border-radius: 50%;
     will-change: transform;
     transform: translateZ(0);
     animation: morph 40s ease-in-out infinite alternate;
     z-index: 1;
}

.blob1 {
     width: 1000px;
     height: 1000px;
     top: 5%;
     left: -10%;
     background: radial-gradient(circle at center, rgba(255, 150, 255, 0.4), transparent);
     box-shadow: 0 0 60px rgba(255, 150, 255, 0.3);
     animation: morph 40s ease-in-out infinite alternate;
     filter: blur(100px);
}

.blob2 {
     width: 600px;
     height: 600px;
     bottom: 5%;
     right: 0;
     background: radial-gradient(circle at center, rgba(150, 255, 255, 0.3), transparent);
     animation: morph 40s ease-in-out infinite alternate;
     filter: blur(80px);
}

.blob3 {
     width: 800px;
     height: 800px;
     top: 15%;
     right: 10%;
     background: radial-gradient(circle at center, rgba(255, 255, 150, 0.25), transparent);
     animation: morph 40s ease-in-out infinite alternate;
     filter: blur(90px);
}

@media (max-width: 768px) {
     .blob1,
     .blob3 {
          display: none;
     }

}


@keyframes morph {
     0% {
          transform: scale(1) translate(0, 0);
          border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
     }

     50% {
          transform: scale(1.15) translate(80px, -60px);
          border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
     }

     100% {
          transform: scale(1) translate(-70px, 50px);
          border-radius: 70% 30% 50% 50% / 40% 70% 30% 60%;
     }
}

.overlay {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background: rgba(0, 0, 0, 0.05);
     z-index: 0;
}

.content {
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 0 2rem;
}

.down-arrow {
     font-size: 2rem;
     color: rgba(255, 255, 255, 0.6);
     text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
     cursor: pointer;
     animation: bounce 2s infinite;
     z-index: 2;
     display: inline-block;
     margin-top: 2rem;
     margin-bottom: 1rem;
     text-align: center;
}

.hero .down-arrow {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
}

@keyframes bounce {

     0%,
     100% {
          transform: translateY(0);
     }

     50% {
          transform: translateY(10px);
     }
}

/* =========================
      Sections
      ========================= */
.section {
     min-height: 100vh;
     padding: 6rem 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

/* =========================
      Workflow Specific Layout
      ========================= */
.workflow {
     max-width: 800px;
     margin: 1rem auto;
}


/* .flow-node {
     background: rgba(255, 255, 255, 0.08);
     padding: 1rem 1.5rem;
     border-radius: 20px;
     font-size: 1rem;
     font-weight: 400;
     backdrop-filter: blur(10px);
     color: #dbdbdb;
}*/

.workflow-desc {
     font-size: 1.125rem;
     opacity: 0.85;
     margin-top: 1rem;
     text-align: left;
}

ul.workflow-points {
     list-style: disc;
     margin-left: 1.5rem;
     margin-top: 0.5rem;
     font-size: 1rem;
     opacity: 0.85;
}

/* =========================
      Two Column Section
      ========================= */
.two-column-section {
     display: flex;
     justify-content: center;
     align-items: stretch;
     gap: 2rem;
     padding: 4rem 0;
     width: 80%;
     max-width: 100%;
     margin: 0 auto;
}

.column-box {
     flex-basis: 0;
     flex-grow: 1;
     max-width: 50%;
     position: relative;
     isolation: isolate;
     background: #2c2c2c;
     border-radius: 24px;
     padding: 2rem;
     box-shadow: 0 0 25px 4px rgba(255, 255, 255, 0.1);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     transition: transform 0.3s ease;
}

.column-box::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 2px;
     background: conic-gradient(from var(--angle), #d16ba5, #86a8e7, #5ffbf1, #ffb86b, #d16ba5);
     animation: rotateBorder 12s linear infinite;
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: destination-out;
     mask-composite: exclude;
     z-index: -1;
}


.column-box:hover {
     transform: scale(1.02);
}

/* =========================
      Animated Gradient Border
      ========================= */
@property --angle {
     syntax: "<angle>";
     initial-value: 0deg;
     inherits: false;
}

@keyframes rotateBorder {
     to {
          --angle: 360deg;
     }
}

/* =========================
      Arrows
      ========================= */
.flow-arrow {
     font-size: 2rem;
     margin-top: -1.5rem;
     margin-bottom: -1.1rem;
     text-align: center;
     line-height: 1;
     color: rgba(255, 255, 255, 0.08);
}

/* =========================
      Responsive Typography
      ========================= */
@media (max-width: 600px) {
     h1 {
          font-size: 3rem;
     }

     h2 {
          font-size: 2.5rem;
     }

     h3 {
          font-size: 1.5rem;
     }

     .two-column-section {
          flex-direction: column;
     }

     .column-box {
          max-width: 100%;
          width: 100%;
          margin: 0 auto;
     }
}

/* =========================
   Workflow Arrows Responsive
   ========================= */
.flow-diagram {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
     position: relative;
}

.flow-node {
     width: 90%;
     max-width: 100%;
     background: rgba(255, 255, 255, 0.08);
     padding: 1rem 1.5rem;
     border-radius: 20px;
     font-size: 1rem;
     font-weight: 400;
     backdrop-filter: blur(10px);
     color: #dbdbdb;
}

.flow-node li {
     padding-left: 2%;
}

.glacierr-node {
     font-size: clamp(0.85rem, 1vw, 0.95rem);
     word-break: break-word;
     text-align: left;
     width: 90%;
     max-width: 100%;
     position: relative;
     isolation: isolate;
     background: #2c2c2c;
     border-radius: 24px;
}

.glacierr-node::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
     padding: 6px;
     background: conic-gradient(from var(--angle), #d16ba5, #86a8e7, #5ffbf1, #ffb86b, #d16ba5);
     animation: rotateBorder 5s linear infinite;
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: destination-out;
     mask-composite: exclude;
     z-index: -1;
}

.flow-node::before {
     content: none;
}

.flow-connector {
     position: absolute;
     background: transparent;
     pointer-events: none;
     z-index: 1;
     width: 24px;
     height: 24px;
}

.two-column-list {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem 2rem;
     padding-left: 1.2rem;
     /* maintain bullet spacing */
     margin: 0;
     font-size: 1rem;
}

.two-column-list li {
     width: 45%;
     /* slightly less than 50% to leave room for spacing */
     list-style-position: outside;
}


@media (max-width: 768px) {
     .flow-diagram {
          flex-direction: column;
          align-items: center;
     }

     .two-column-list {
          flex-direction: column;
     }


     .two-column-list li {
          width: 100%;
     }
}

@media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
     }
}