/* STREAMING_CHUNK:Configuring font imports and root variables */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Native cross-document view transitions for smooth page navigation */
@view-transition {
navigation: auto;
}

:root {
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--color-bg-base: #fbfdfc;
--color-text-main: #1e293b;
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* STREAMING_CHUNK:Setting global HTML and body box properties */
html, body {
overflow-x: clip;
width: 100%;
max-width: 100vw;
margin: 0;
padding: 0;
}

html {
font-family: var(--font-sans);
scroll-behavior: smooth;
background-color: var(--color-bg-base);
color: var(--color-text-main);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

/* STREAMING_CHUNK:Configuring system cursor hiding rules /
/ 1. Hide default system cursor on desktop hover devices */
@media (hover: hover) and (pointer: fine) {
html, body, a, button, input, select, textarea, [role="button"], label, * {
cursor: none !important;
}
}

@media (hover: none), (pointer: coarse) {
#koasis-cursor-dot, #koasis-interactive-orb {
display: none !important;
}
}

/* STREAMING_CHUNK:Styling page entry animation without transforms /
/

Safe Page Entry (OPACITY ONLY - Zero transform on body)

Crucial fix: Omitting transforms on body preserves the viewport containing

block so fixed headers and custom cursor coordinates never drift when scrolling.
*/
@keyframes pageEnter {
from {
opacity: 0.85;
}
to {
opacity: 1;
}
}

body {
animation: pageEnter 0.15s var(--ease-smooth);
}

/* STREAMING_CHUNK:Defining typography and fluid heading utilities /
/ Typography & Fluid Sizing (Pure Inter) */
.font-display {
font-family: var(--font-display);
letter-spacing: -0.025em;
}

.text-fluid-hero {
font-size: clamp(2.25rem, 5vw + 0.75rem, 4.25rem);
line-height: 1.12;
}

.text-fluid-title {
font-size: clamp(1.875rem, 3.5vw + 0.75rem, 3.25rem);
line-height: 1.15;
}

/* STREAMING_CHUNK:Styling interactive custom cursor dot /
/ Custom JS Cursor Dot & Ambient Orb */
#koasis-cursor-dot {
position: fixed;
top: 0;
left: 0;
width: 12px;
height: 12px;
background-color: #047857;
border: 2px solid #34d399;
box-shadow: 0 0 12px rgba(5, 150, 105, 0.6);
border-radius: 50%;
pointer-events: none;
z-index: 99999;
transform: translate3d(-100px, -100px, 0);
transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
will-change: transform;
opacity: 0;
}

#koasis-cursor-dot.cursor-hover {
width: 28px;
height: 28px;
background-color: rgba(5, 150, 105, 0.25);
border-color: #10b981;
box-shadow: 0 0 16px rgba(52, 211, 153, 0.8);
}

/* STREAMING_CHUNK:Styling ambient cursor follower orb */
#koasis-interactive-orb {
position: fixed;
top: 0;
left: 0;
width: 580px;
height: 580px;
border-radius: 50%;
background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.03) 45%, transparent 70%);
pointer-events: none;
z-index: 1;
transform: translate3d(-1000px, -1000px, 0);
will-change: transform;
transition: opacity 0.3s ease;
opacity: 0;
}

/* STREAMING_CHUNK:Configuring scroll reveal animations /
/ 3. Scroll In & Out Reveal Animation */
.reveal-on-scroll {
opacity: 0;
transform: translateY(24px) scale(0.98);
transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
will-change: opacity, transform;
}

.reveal-on-scroll.active {
opacity: 1;
transform: translateY(0) scale(1);
}

/* STREAMING_CHUNK:Styling background surfaces and mesh gradients /
/ Surfaces & Cards */
.hero-mesh-gradient {
background-color: #f4fbf7;
background-image:
radial-gradient(at 15% 20%, rgba(167, 243, 208, 0.45) 0px, transparent 55%),
radial-gradient(at 85% 15%, rgba(209, 250, 229, 0.6) 0px, transparent 50%),
radial-gradient(at 50% 90%, rgba(110, 231, 183, 0.25) 0px, transparent 60%);
}

.bg-grain-texture {
background-image: radial-gradient(rgba(6, 78, 59, 0.06) 1px, transparent 0);
background-size: 24px 24px;
}

/* STREAMING_CHUNK:Styling interactive cards and glow effects */
.card-subtle-glow {
transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.25s ease;
}

.card-subtle-glow:hover {
transform: translateY(-4px);
box-shadow: 0 20px 30px -10px rgba(6, 78, 59, 0.07);
border-color: rgba(16, 185, 129, 0.4);
}

.card-row-glow {
transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), border-color 0.2s ease;
}

.card-row-glow:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(6, 78, 59, 0.08);
border-color: rgba(16, 185, 129, 0.45);
}

.cta-box-glow {
background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
box-shadow: 0 25px 50px -12px rgba(2, 44, 34, 0.35);
}