/* =========================================================
ANIMATED CSS CUSTOM PROPERTY
Used for rotating gradient border animation
========================================================= */
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

/* =========================================================
CUSTOM FONT : UHUDSCRIPT
Used for handwritten CTA button styling
========================================================= */
@font-face {
font-family: "Uhudscript";
src: url("/fonts/Uhudscript-Demo.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* =========================================================
CUSTOM FONT : GALANO
Main website font
========================================================= */
@font-face {
font-family: "Galano";
src: url("/fonts/GalanoGrotesque-Medium.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* =========================================================
CUSTOM FONT : BAHAGIA
========================================================= */
@font-face {
font-family: "Bahagia";
src: url("/fonts/Bahagia.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* =========================================================
GLOBAL COLOR VARIABLES
========================================================= */
:root {
--navy: #02253d;
--ink: #02253d;
--paper: #fcfcfc;

/* Decorative top border gradient */
--paper-gradient: linear-gradient(
90deg,
#0baae6 0%,
#70f0a4 40%,
#fae806 63%,
#fbb413 73%,
#f778d6 86%,
#c37ce9 100%
);
}

/* =========================================================
GLOBAL BOX SIZING RESET
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* =========================================================
HTML + BODY RESET
========================================================= */
html,
body {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}

/* Prevent horizontal scrolling */
html {
overflow-x: hidden;
}

/* =========================================================
MAIN BODY STYLING
========================================================= */
body {
color: var(--ink);

/* Dark radial background */
background: radial-gradient(
118.38% 101.85% at 50% 0%,
#000000 44.82%,
#01243c 92.63%
);

/* Main site font */
font-family: Galano, Arial, sans-serif;

overflow-x: hidden;
}

/* =========================================================
GLOBAL LINK RESET
========================================================= */
a {
color: inherit;
text-decoration: none;
}

/* =========================================================
MAIN PAGE WRAPPER
========================================================= */
.founder-page {
position: relative;
display: flex;
width: 100%;
min-height: calc(100dvh - 58px);
align-items: flex-start;
justify-content: center;
padding: 112px 24px 0;
overflow: hidden;
isolation: isolate;
}

/* =========================================================
MAIN FOUNDERS NOTE CARD
========================================================= */
.founder-note {
position: relative;
z-index: 2;
width: 650px;
max-width: calc(100vw - 48px);
height: 548px;
max-height: calc(100dvh - 195px);
min-height: 0;
overflow: hidden;
border-radius: 38px;

/* Paper-like background */
background: var(--paper);

/* Soft shadow effect */
box-shadow:
inset -2px -2px 4px 2px rgba(0, 0, 0, 0.3),
0 10px 18px rgba(0, 0, 0, 0.28);
}

/* =========================================================
TOP GRADIENT STRIP ON NOTE CARD
========================================================= */
.founder-note::before {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 14px;
content: "";
background: var(--paper-gradient);
}

/* =========================================================
CONTENT INSIDE NOTE CARD
========================================================= */
.founder-note__content {
position: relative;
z-index: 3;

/* Content width */
width: 100%;
height: 100%;
max-width: 95%;

padding: 42px 36px 32px;

color: var(--ink);

font-family: Galano, Arial, sans-serif;

font-size: 15px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.02em;

/* Text wrapping protection */
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
}

/* =========================================================
RESET DEFAULT MARGINS
========================================================= */
.founder-note h1,
.founder-note p {
margin: 0;
font: inherit;
}

.founder-note h1,
.founder-name {
font-family: Galano, Arial, sans-serif;
}

/* =========================================================
MAIN HEADING
========================================================= */
.founder-note h1 {
margin-bottom: 12px;
}

/* =========================================================
PARAGRAPH SPACING
========================================================= */
.founder-note p + p {
margin-top: 12px;
}

.quote {
font-family: "Uhudscript", cursive !important;
font-size: 30px !important;
line-height: 1.00 !important;
font-weight: 300 !important;
letter-spacing: 1.25 !important;
}

/* =========================================================
FOUNDERS SIGNATURE IMAGE
========================================================= */
.signature {
display: block;
width: 78px;
height: auto;
margin: 5px 0;
}

/* =========================================================
FOUNDERS NAME
========================================================= */
.founder-name {
font-size: 16.4px;
}

/* =========================================================
DECORATIVE FLOWER IMAGE
========================================================= */
.flower {
position: absolute;
right: -2px;
bottom: 10px;
z-index: 2;
width: 150px;
pointer-events: none;
}

/* =========================================================
DESKTOP DECORATIVE ASSETS
========================================================= */
.desk-asset {
position: fixed;
z-index: 1;
display: block;
pointer-events: none;
user-select: none;
}

/* Coffee cup decorative image */
.desk-asset--coffee {
top: 28.5%;
left: 14%;
width: 180px;
}

/* Leaves decorative image */
.desk-asset--leaves {
left: -62px;
bottom: 15px;
width: 300px;
}

/* Laptop decorative image */
.desk-asset--laptop {
top: 10px;
right: -135px;
width: 415px;
}

/* Paper clips decorative image */
.desk-asset--clips {
top: 34.5%;
right: 18.2%;
width: 100px;
}

/* =========================================================
CTA SYMBOL (decorative — mirrors 504 pattern)
========================================================= */
.founder-cta-symbol {
position: fixed;
right: 15px;
bottom: 124px;
width: 160px;
height: auto;
pointer-events: none;
user-select: none;
z-index: 4;
}

/* =========================================================
CTA BUTTON WRAPPER
========================================================= */
.btn-wrapper {
position: fixed;
right: -24px;
bottom: 145px;
z-index: 5;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 2px;
border-radius: 999px;

cursor: pointer;
}

/* =========================================================
ANIMATED OUTER BUTTON BORDER
========================================================= */
.btn-wrapper::before {
position: absolute;
inset: 0;
z-index: 0;
border-radius: 52px;

background: conic-gradient(
from var(--angle, 0deg),
#02bcdd,
#06d1e5,
#64eda8,
#d0f88d,
#64eda8,
#06d1e5,
#02bcdd
);

content: "";

/* Infinite rotation animation */
animation: spin 2s linear infinite;
}

/* =========================================================
INNER BUTTON BACKGROUND
========================================================= */
.btn-wrapper::after {
position: absolute;
inset: 1px;
z-index: 1;
border-radius: 48px;
background: #0d1f3c;
content: "";
}

/* =========================================================
BUTTON TEXT
========================================================= */
.btn-inner {
position: relative;
z-index: 2;

display: inline-flex;
align-items: center;
justify-content: center;

min-width: 250px;
height: 61px;
padding: 4px 62px;

border-radius: inherit;

/* Gradient text */
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 20.71%,
#64eda8 48.26%,
#d0f88d 100%
);

background-clip: text;
-webkit-background-clip: text;

color: transparent;
-webkit-text-fill-color: transparent;

/* Handwritten font */
font-family: Uhudscript, cursive;

font-size: 42px;
font-weight: 400;
letter-spacing: 0;
line-height: 1;

white-space: nowrap;
}

/* Hidden hover text */
.text-hover {
display: none;
}

/* =========================================================
BUTTON HOVER EFFECTS
========================================================= */
.btn-wrapper:hover::before {
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 20.71%,
#64eda8 48.26%,
#d0f88d 100%
);

animation: none;
}

.btn-wrapper:hover::after {
inset: 2px;

background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 20.71%,
#64eda8 48.26%,
#d0f88d 100%
);
}

/* Button text hover inversion */
.btn-wrapper:hover .btn-inner {
background: none;
color: #0a1628;
-webkit-text-fill-color: #0a1628;
}

/* Hide default text on hover */
.btn-wrapper:hover .text-default {
display: none;
}

/* Show alternate hover text */
.btn-wrapper:hover .text-hover {
display: inline;
}

/* =========================================================
ROTATION ANIMATION
========================================================= */
@keyframes spin {
to {
--angle: 360deg;
}
}

/* =========================================================
RESPONSIVE MEDIA QUERIES START HERE
========================================================= */

/* Large tablet / small desktop */
@media (max-width: 1100px) {

/* Main page spacing */
.founder-page {
padding: 104px 24px 0;
}

/* Slightly smaller note card */
.founder-note {
width: 620px;
max-width: 94vw;
height: 525px;
max-height: 74dvh;
border-radius: 34px;
}

/* Thicker top gradient strip */
.founder-note::before {
height: 16px;
}

/* Smaller content spacing */
.founder-note__content {
padding: 50px 44px 34px;
font-size: 15px;
line-height: 1.62;
}

/* Decorative assets resized */
.desk-asset--coffee {
left: 9%;
width: 160px;
}

.desk-asset--leaves {
left: -70px;
width: 270px;
}

.desk-asset--laptop {
right: -125px;
width: 390px;
}

.desk-asset--clips {
right: 11%;
width: 100px;
}
}

/* =========================================================
TABLET + MOBILE LAYOUT
========================================================= */
@media (max-width: 1024px) {

/* Reset layout sizing */
html,
body {
width: 100%;
min-width: 100%;
min-height: 100dvh;
margin: 0;
padding: 0;
background: #00111a;
}

/* Grid layout structure */
body {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Remove max-width limitations from wrappers */
.page,
.main,
.container,
.site-main,
.site-wrapper,
.page-wrapper {
width: 100%;
max-width: none;
margin: 0;
padding-left: 0;
padding-right: 0;
}

/* Hide desktop decorative assets */
.desk-asset {
display: none;
}

/* Main page layout adjustments */
.founder-page {
width: 100vw;
max-width: none;
min-height: 0;
height: auto;
margin: 0;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
overflow: visible;
}

/* Founder note card */
.founder-note {
width: 560px;
max-width: 86vw;
height: auto;
min-height: 0;
max-height: none;
border-radius: 24px;
}

/* Content spacing and typography */
.founder-note__content {
width: 100%;
height: auto;
min-height: 0;
padding: 58px 46px 44px;
font-size: 15px;
font-weight: 400;
line-height: 1.76;
}

/* Normalize font weights */
.founder-note__content * {
font-weight: 400;
}

/* Heading spacing */
.founder-note h1 {
margin-bottom: 15px;
}

/* Paragraph spacing */
.founder-note p + p {
margin-top: 15px;
}

/* Signature size */
.signature {
width: 72px;
margin: 9px 0 6px;
}

/* Founder name size */
.founder-name {
font-size: 14px;
}

/* Decorative flower size */
.flower {
width: 112px;
right: -4px;
bottom: 8px;
}

/* Hide decorative symbol on tablet/mobile */
.founder-cta-symbol {
display: none;
}

/* CTA button — flows below card, centered */
.btn-wrapper {
position: relative;
/*right: 30%;*/
bottom: 22%;
left: 38%;
transform: none;
margin-top: 24px;
width: auto;
height: auto;

padding: 2px;

box-shadow: none;
}

/* Keep spinning animated border */
.btn-wrapper::before {
background: conic-gradient(from var(--angle), #02bcdd, #06d1e5, #64eda8, #d0f88d, #64eda8, #06d1e5, #02bcdd);
animation: spin 2s linear infinite;
}

/* Dark inner fill */
.btn-wrapper::after {
inset: 1px;
background: #0d1f3c;
}

/* Gradient text */
.btn-inner {
min-width: 220px;
height: 52px;
padding: 4px 48px;
font-size: 32px;
line-height: 1;
background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 20.71%, #64eda8 48.26%, #d0f88d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

/* Hover: stop spin */
.btn-wrapper:hover::before {
animation: none;
}

/* Hover: fill with gradient */
.btn-wrapper:hover::after {
inset: 2px;
background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 20.71%, #64eda8 48.26%, #d0f88d 100%);
}

/* Hover: dark text on gradient fill */
.btn-wrapper:hover .btn-inner {
background: none;
color: #0a1628;
-webkit-text-fill-color: #0a1628;
}
}

/* =========================================================
TABLET FULL WIDTH FIX
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

.founder-page {
width: 100vw;
margin-left: -1px;
margin-right: -1px;
padding-left: 24px;
padding-right: 24px;
}
}

/* =========================================================
MOBILE LAYOUT
========================================================= */
@media (max-width: 768px) {

.founder-page {
padding: 38px 10px;
}

/* Mobile note card */
.founder-note {
width: 390px;
max-width: 86vw;
border-radius: 21px;
}

/* Mobile typography */
.founder-note__content {
padding: 52px 25px 38px;
font-size: 12px;
line-height: 1.78;
}

/* Heading spacing */
.founder-note h1 {
margin-bottom: 13px;
}

/* Paragraph spacing */
.founder-note p + p {
margin-top: 13px;
}

/* Signature size */
.signature {
width: 62px;
margin: 8px 0 5px;
}

/* Founder name */
.founder-name {
font-size: 12.6px;
}

/* Decorative flower */
.flower {
width: 78px;
right: -4px;
bottom: 7px;
}

/* CTA button */
.btn-wrapper {
left: 40%;
right: auto;
bottom: 20%;
width: 162px;
height: 42px;
transform: none;
}
}

/* =========================================================
SMALL MOBILE DEVICES
========================================================= */
@media (max-width: 640px) {

.founder-page {
padding: 36px 10px;
}

/* Smaller note card */
.founder-note {
width: 370px;
max-width: 86vw;
}

/* Smaller typography */
.founder-note__content {
padding: 50px 24px 36px;
font-size: 11px;
line-height: 1.76;
}

/* Paragraph spacing */
.founder-note p + p {
margin-top: 12px;
}

/* Signature */
.signature {
width: 60px;
}

/* Founder name */
.founder-name {
font-size: 12.2px;
}

/* Button */
.btn-wrapper {
left: 40%;
bottom: 22%;
width: 160px;
height: 40px;
}

/* Button text */
.btn-inner {
font-size: 22px;
}
}

/* =========================================================
EXTRA SMALL MOBILE DEVICES
========================================================= */
@media (max-width: 480px) {

.founder-page {
padding: 34px 10px;
}

/* Note card */
.founder-note {
width: 350px;
max-width: 84vw;
border-radius: 20px;
}

/* Typography */
.founder-note__content {
padding: 48px 22px 34px;
font-size: 12px;
line-height: 1.74;
}

/* Heading spacing */
.founder-note h1 {
margin-bottom: 12px;
}

/* Paragraph spacing */
.founder-note p + p {
margin-top: 11px;
}

/* Signature */
.signature {
width: 58px;
margin: 7px 0 5px;
}

/* Founder name */
.founder-name {
font-size: 11.8px;
}

/* Decorative flower */
.flower {
width: 74px;
}

/* CTA button */
.btn-wrapper {
left: 38%;
bottom: 20%;
width: 154px;
height: 39px;
}

/* Button text */
.btn-inner {
font-size: 21px;
}
}

/* =========================================================
ULTRA SMALL DEVICES
========================================================= */
@media (max-width: 360px) {

.founder-page {
padding: 32px 10px;
}

/* Smallest card */
.founder-note {
width: 320px;
max-width: 88vw;
border-radius: 18px;
}

/* Smallest typography */
.founder-note__content {
padding: 45px 18px 31px;
font-size: 11px;
line-height: 1.72;
}

/* Heading spacing */
.founder-note h1 {
margin-bottom: 10px;
}

/* Paragraph spacing */
.founder-note p + p {
margin-top: 10px;
}

/* Signature */
.signature {
width: 54px;
}

/* Founder name */
.founder-name {
font-size: 11.4px;
}

/* Decorative flower */
.flower {
width: 68px;
}

/* CTA button */
.btn-wrapper {
left: 40%;
bottom: 20%;
width: 146px;
height: 38px;
}

/* CTA button text */
.btn-inner {
font-size: 20px;
}
}

@media (max-width: 480px) and (max-height: 720px) {
    .founder-note__content {
        font-size: 10px;
        line-height: 1.5;
    }

    .quote {
        font-family: "Uhudscript", cursive !important;
        font-size: 24px !important;
        line-height: 1 !important;
    }
}



@media (max-width: 380px) {
    .btn-wrapper {
        left: 38%;
        bottom: 24%;
        width: 154px;
        height: 39px;
    }
}

@media (max-width: 360px) {
    .btn-wrapper {
        bottom: 20%;

    }
}