/* Playgroup Card Styling */
#playgroup-card {
    background-image: url('C:\\Users\\HP\\Desktop\\kk\\new\\playgroup.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    padding: 20px;
}

#playgroup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    z-index: 0;
}

#playgroup-card .card-icon,
#playgroup-card .card-title,
#playgroup-card .card-description,
#playgroup-card .card-button {
    position: relative;
    z-index: 1;
}

.playgroup-description {
    background-color: white;
    color: black;
    padding: 5px;
    border-radius: 5px;
}

/* Quick Access Button and Menu */
.quick-access-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.quick-access-toggle {
    background-color: #00FF00; /* Energetic green */
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.quick-access-toggle:hover {
    background-color: orange;
    transform: scale(1.1);
}

.plus-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.plus-icon::before,
.plus-icon::after {
    content: '';
    position: absolute;
    background-color: #ffffff;
    border-radius: 2px;
}

.plus-icon::before {
    width: 100%;
    height: 4px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.plus-icon::after {
    width: 4px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.quick-access-menu {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    margin-bottom: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.quick-access-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quick-access-item {
    padding: 10px 20px;
    text-decoration: none;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95em;
    transition: background-color 0.2s ease;
}

.quick-access-item:hover {
    background-color: #f0f0f0;
}

/* Rotate plus icon to X when menu is active */
.quick-access-toggle.active .plus-icon::before {
    transform: translateY(-50%) rotate(45deg);
}

.quick-access-toggle.active .plus-icon::after {
    transform: translateX(-50%) rotate(-45deg);
}

/* Visual refresh: presentation only; all content and assets remain unchanged. */
:root { --lb-ink:#102a43; --lb-muted:#526d82; --lb-navy:#083358; --lb-blue:#087eac; --lb-aqua:#23c4cd; --lb-line:#cbe8ef; --lb-shadow:0 18px 44px rgba(8,51,88,.13); }
* { box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:smooth; }
html::before {
    background-image:
        radial-gradient(circle at center, transparent 0 34%, rgba(255,255,255,.95) 36% 40%, rgba(37,190,211,.62) 42%, transparent 46%),
        radial-gradient(circle at center, transparent 0 34%, rgba(255,255,255,.9) 36% 40%, rgba(9,140,180,.55) 42%, transparent 46%),
        radial-gradient(circle at center, transparent 0 34%, rgba(255,255,255,.9) 36% 40%, rgba(77,210,220,.56) 42%, transparent 46%);
    background-position: 68% 29%, 24% 56%, 84% 78%;
    background-repeat:no-repeat;
    background-size:12px 12px, 12px 12px, 12px 12px;
    content:"";
    inset:0;
    pointer-events:none;
    position:fixed;
    z-index:5;
    /* Each small accent expands quickly, then bursts before the next begins. */
    animation:lb-bubble-burst 36s linear infinite;
}
body { background:#f7fcfe; color:var(--lb-ink); font-family:"Segoe UI","Open Sans",Arial,sans-serif; line-height:1.65; overflow-x:hidden; }

/* Transparent, decorative water bubbles: visual only and never intercept clicks. */
body::before,
body::after {
    content:"";
    inset:0;
    pointer-events:none;
    position:fixed;
    z-index:5;
}
body::before {
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,.9) 0 5%, rgba(255,255,255,.46) 13%, rgba(116,225,238,.20) 45%, rgba(15,147,184,.28) 65%, rgba(255,255,255,.54) 69%, transparent 72%),
        radial-gradient(circle at center, rgba(255,255,255,.88) 0 5%, rgba(255,255,255,.42) 13%, rgba(80,210,228,.19) 45%, rgba(7,123,166,.27) 65%, rgba(255,255,255,.5) 69%, transparent 72%),
        radial-gradient(circle at center, rgba(255,255,255,.86) 0 5%, rgba(255,255,255,.4) 13%, rgba(110,225,236,.18) 45%, rgba(24,152,186,.26) 65%, rgba(255,255,255,.5) 69%, transparent 72%),
        radial-gradient(circle at center, rgba(255,255,255,.9) 0 5%, rgba(255,255,255,.42) 13%, rgba(103,222,235,.2) 45%, rgba(10,137,175,.27) 65%, rgba(255,255,255,.52) 69%, transparent 72%);
    background-position:10% 80%, 84% 18%, 50% 58%, 92% 46%;
    background-repeat:no-repeat;
    background-size:42px 42px, 34px 34px, 48px 48px, 38px 38px;
    opacity:.78;
    animation:lb-bubbles-burst-away-a 12s linear infinite;
}
body::after {
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,.9) 0 5%, rgba(255,255,255,.44) 13%, rgba(80,216,232,.2) 45%, rgba(12,137,175,.29) 65%, rgba(255,255,255,.54) 69%, transparent 72%),
        radial-gradient(circle at center, rgba(255,255,255,.88) 0 5%, rgba(255,255,255,.4) 13%, rgba(67,201,223,.19) 45%, rgba(5,112,157,.28) 65%, rgba(255,255,255,.5) 69%, transparent 72%),
        radial-gradient(circle at center, rgba(255,255,255,.86) 0 5%, rgba(255,255,255,.38) 13%, rgba(122,224,234,.2) 45%, rgba(32,154,186,.27) 65%, rgba(255,255,255,.5) 69%, transparent 72%),
        radial-gradient(circle at center, rgba(255,255,255,.9) 0 5%, rgba(255,255,255,.4) 13%, rgba(119,224,235,.2) 45%, rgba(13,136,174,.27) 65%, rgba(255,255,255,.5) 69%, transparent 72%);
    background-position:25% 22%, 76% 72%, 55% 88%, 8% 46%;
    background-repeat:no-repeat;
    background-size:28px 28px, 44px 44px, 36px 36px, 32px 32px;
    opacity:.64;
    animation:lb-bubbles-burst-away-b 12s .45s linear infinite;
}
@keyframes lb-bubbles-drift {
    from { transform:translate3d(-1vw, 1vh, 0); }
    to { transform:translate3d(2vw, -8vh, 0); }
}
@keyframes lb-bubbles-relocate-a {
    0%, 25% { background-position:18% 78%, 76% 28%, 46% 62%, 88% 48%; opacity:.78; transform:translate3d(0,0,0); }
    35% { opacity:0; transform:translate3d(1vw,-2vh,0); }
    48% { background-position:65% 18%, 24% 55%, 84% 76%, 44% 36%; opacity:0; }
    55%, 75% { background-position:65% 18%, 24% 55%, 84% 76%, 44% 36%; opacity:.78; transform:translate3d(-1vw,1vh,0); }
    85% { opacity:0; transform:translate3d(1vw,-1vh,0); }
    100% { background-position:18% 78%, 76% 28%, 46% 62%, 88% 48%; opacity:0; }
}
@keyframes lb-bubbles-relocate-b {
    0%, 28% { background-position:28% 30%, 79% 67%, 57% 85%, 12% 48%; opacity:.64; transform:translate3d(0,0,0); }
    38% { opacity:0; transform:translate3d(-1vw,-2vh,0); }
    50% { background-position:71% 42%, 17% 74%, 43% 22%, 91% 63%; opacity:0; }
    58%, 78% { background-position:71% 42%, 17% 74%, 43% 22%, 91% 63%; opacity:.64; transform:translate3d(1vw,1vh,0); }
    88% { opacity:0; transform:translate3d(-1vw,-1vh,0); }
    100% { background-position:28% 30%, 79% 67%, 57% 85%, 12% 48%; opacity:0; }
}
@keyframes lb-bubbles-burst-away-a {
    0% { background-position:10% 80%, 84% 18%, 50% 58%, 92% 46%; background-size:42px 42px, 34px 34px, 48px 48px, 38px 38px; opacity:.78; }
    20% { background-position:13% 76%, 81% 15%, 53% 55%, 89% 43%; background-size:42px 42px, 34px 34px, 48px 48px, 38px 38px; opacity:.78; }
    40% { background-position:9% 73%, 85% 12%, 49% 51%, 93% 40%; background-size:42px 42px, 34px 34px, 48px 48px, 38px 38px; opacity:.78; }
    60% { background-position:13% 69%, 80% 10%, 53% 47%, 89% 36%; background-size:42px 42px, 34px 34px, 48px 48px, 38px 38px; opacity:.78; }
    83.333% { background-position:10% 65%, 84% 7%, 50% 42%, 92% 32%; background-size:42px 42px, 34px 34px, 48px 48px, 38px 38px; opacity:.78; }
    93% { background-position:13% 71%, 81% 10%, 53% 50%, 89% 37%; background-size:62px 62px, 52px 52px, 68px 68px, 56px 56px; opacity:.5; }
    100% { background-position:13% 71%, 81% 10%, 53% 50%, 89% 37%; background-size:68px 68px, 58px 58px, 74px 74px, 62px 62px; opacity:0; }
}
@keyframes lb-bubbles-burst-away-b {
    0% { background-position:25% 22%, 76% 72%, 55% 88%, 8% 46%; background-size:28px 28px, 44px 44px, 36px 36px, 32px 32px; opacity:.64; }
    20% { background-position:22% 20%, 79% 69%, 52% 85%, 11% 43%; background-size:28px 28px, 44px 44px, 36px 36px, 32px 32px; opacity:.64; }
    40% { background-position:27% 17%, 74% 66%, 57% 81%, 6% 40%; background-size:28px 28px, 44px 44px, 36px 36px, 32px 32px; opacity:.64; }
    60% { background-position:22% 13%, 79% 63%, 52% 77%, 11% 36%; background-size:28px 28px, 44px 44px, 36px 36px, 32px 32px; opacity:.64; }
    83.333% { background-position:25% 9%, 76% 59%, 55% 73%, 8% 32%; background-size:28px 28px, 44px 44px, 36px 36px, 32px 32px; opacity:.64; }
    93% { background-position:22% 14%, 79% 63%, 52% 79%, 11% 37%; background-size:46px 46px, 64px 64px, 54px 54px, 50px 50px; opacity:.42; }
    100% { background-position:22% 14%, 79% 63%, 52% 79%, 11% 37%; background-size:52px 52px, 70px 70px, 60px 60px, 56px 56px; opacity:0; }
}
@keyframes lb-bubble-burst {
    0% { background-position:68% 29%, -200px -200px, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.8; }
    7% { background-position:71% 28%, -200px -200px, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.8; }
    14% { background-position:67% 26%, -200px -200px, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.8; }
    21% { background-position:71% 24%, -200px -200px, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.8; }
    27.778% { background-position:68% 22%, -200px -200px, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.8; }
    31.5% { background-position:70% 23%, -200px -200px, -200px -200px; background-size:58px 58px, 12px 12px, 12px 12px; opacity:.5; }
    33.333% { background-position:-200px -200px, 24% 56%, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    40% { background-position:-200px -200px, 21% 55%, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    47% { background-position:-200px -200px, 25% 53%, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    54% { background-position:-200px -200px, 21% 51%, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    61.111% { background-position:-200px -200px, 24% 49%, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    64.8% { background-position:-200px -200px, 22% 50%, -200px -200px; background-size:12px 12px, 54px 54px, 12px 12px; opacity:.45; }
    66.667% { background-position:-200px -200px, -200px -200px, 84% 78%; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    73% { background-position:-200px -200px, -200px -200px, 87% 77%; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    80% { background-position:-200px -200px, -200px -200px, 83% 75%; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    87% { background-position:-200px -200px, -200px -200px, 87% 73%; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    94.444% { background-position:-200px -200px, -200px -200px, 84% 71%; background-size:12px 12px, 12px 12px, 12px 12px; opacity:.72; }
    98% { background-position:-200px -200px, -200px -200px, 86% 72%; background-size:12px 12px, 12px 12px, 56px 56px; opacity:.45; }
    100% { background-position:-200px -200px, -200px -200px, -200px -200px; background-size:12px 12px, 12px 12px, 12px 12px; opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
    html::before, body::before, body::after, .swimming-fish, .swimming-shark, .octopus, .octopus-tentacle, .sun-ray, .water-surface::before, .water-surface::after, .refracted-ray, .sea-grass, .aquatic-flower, .fishing-boat, .line-1, .caught-fish, .water-snake, .water-swimmer, .swimmer-jet, .arm-front, .arm-back, .leg-front, .leg-back, #model-comparison::before, #model-comparison::after, .model-panel::before, .comparison-arrow-core, .model-panel li, .diagram-node, .comparison-diagram .diagram-old, .comparison-diagram .diagram-new, .diagram-step, .flow-step, .flow-arrow::before, .flow-arrow::after { animation:none; }
}
.container { max-width:1240px; }

.main-header { background:rgba(255,255,255,.92); border-bottom:1px solid rgba(203,232,239,.9); box-shadow:0 8px 28px rgba(8,51,88,.08); padding:11px 0; backdrop-filter:blur(14px); }
.logo a { color:var(--lb-navy); font-size:1.3em; letter-spacing:-.02em; }
.logo img { filter:drop-shadow(0 3px 5px rgba(8,51,88,.18)); }
.main-nav ul { gap:4px; }.main-nav ul li { margin-left:0; }
.main-nav ul li a,
.main-nav ul li .nav-dropdown-toggle {
    border-radius:999px;
    color:#35566f;
    font-size:.93em;
    padding:8px 12px;
    transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.main-nav ul li .nav-dropdown-toggle {
    align-items:center;
    background:transparent;
    border:none;
    cursor:pointer;
    display:inline-flex;
    font-family:inherit;
    gap:8px;
}
.main-nav ul li .nav-dropdown-toggle::after {
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:6px solid currentColor;
    content:"";
    height:0;
    opacity:.8;
    transform:translateY(1px);
    width:0;
}
.main-nav ul li a:hover,
.main-nav ul li .nav-dropdown-toggle:hover,
.main-nav ul li.dropdown.open > .nav-dropdown-toggle {
    background:#e2f7fa;
    color:#05789d;
    transform:translateY(-1px);
}
.main-nav ul li.dropdown .dropdown-menu {
    background:linear-gradient(180deg,#fff 0%,#f6fcfd 100%);
    border:1px solid #d5ebf1;
    border-radius:18px;
    box-shadow:0 18px 34px rgba(8,51,88,.12);
    overflow:visible;
    padding:10px 0;
}
.main-nav ul li.dropdown .dropdown-menu::before {
    background:linear-gradient(90deg,var(--lb-blue),var(--lb-aqua));
    content:"";
    display:block;
    height:4px;
    left:0;
    position:absolute;
    right:0;
    top:0;
}
.main-nav ul li.dropdown .dropdown-menu li a {
    border-radius:0;
    color:#35566f;
    font-size:.92em;
    font-weight:700;
    padding:10px 18px 10px 42px;
    position:relative;
}
.main-nav ul li.dropdown .dropdown-menu li a::before {
    background:linear-gradient(180deg,var(--lb-blue),var(--lb-aqua));
    border-radius:50%;
    content:"";
    height:8px;
    left:18px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:8px;
}
.main-nav ul li.dropdown .dropdown-menu li a:hover {
    background:#eaf9fb;
    color:#0a88ab;
}
.main-nav ul li.dropdown .dropdown-menu .nested-dropdown { position:relative; }
.main-nav ul li.dropdown .dropdown-menu .nested-dropdown-toggle {
    align-items:center;
    background:transparent;
    border:0;
    color:#35566f;
    cursor:pointer;
    display:flex;
    font-family:inherit;
    font-size:.92em;
    font-weight:700;
    justify-content:space-between;
    padding:10px 18px 10px 42px;
    position:relative;
    text-align:left;
    width:100%;
}
.main-nav ul li.dropdown .dropdown-menu .nested-dropdown-toggle::before {
    background:linear-gradient(180deg,var(--lb-blue),var(--lb-aqua));
    border-radius:50%;
    content:"";
    height:8px;
    left:18px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:8px;
}
.main-nav ul li.dropdown .dropdown-menu .nested-dropdown-toggle::after {
    border-bottom:5px solid transparent;
    border-left:6px solid currentColor;
    border-top:5px solid transparent;
    content:"";
    height:0;
    opacity:.75;
    width:0;
}
.main-nav ul li.dropdown .dropdown-menu .nested-dropdown-toggle:hover,
.main-nav ul li.dropdown .dropdown-menu .nested-dropdown.open > .nested-dropdown-toggle {
    background:#eaf9fb;
    color:#0a88ab;
}
.main-nav ul li .nested-dropdown-menu {
    background:linear-gradient(180deg,#fff 0%,#f6fcfd 100%);
    border:1px solid #d5ebf1;
    border-radius:14px;
    box-shadow:0 14px 28px rgba(8,51,88,.12);
    display:none;
    left:100%;
    min-width:190px;
    padding:8px 0;
    position:absolute;
    top:0;
    z-index:1001;
}
.main-nav ul li.nested-dropdown:hover > .nested-dropdown-menu,
.main-nav ul li.nested-dropdown.open > .nested-dropdown-menu { display:block; }
.main-nav ul li.dropdown.open .dropdown-menu,
.main-nav ul li.dropdown:hover .dropdown-menu {
    display:block;
}

.content-section { padding:92px 0; }
.section-light-bg { background:#fff; }.section-primary-bg { background:linear-gradient(135deg,#ecfbff 0%,#d7f4f7 100%); }
.section-title { color:var(--lb-navy); font-family:"Segoe UI","Poppins",sans-serif; font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.045em; line-height:1.12; margin-bottom:48px; }
.section-title::after { background:linear-gradient(90deg,var(--lb-blue),var(--lb-aqua)); border-radius:999px; content:""; display:block; height:5px; margin:17px auto 0; width:64px; }
.payment-options { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 auto 28px; max-width:900px; }
.payment-option,
.payment-steps { background:rgba(255,255,255,.9); border:1px solid var(--lb-line); border-radius:20px; box-shadow:0 12px 28px rgba(8,51,88,.08); padding:24px; }
.payment-option { text-align:center; }
.payment-option-label { color:var(--lb-blue); display:block; font-size:.82em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.payment-option h3 { color:var(--lb-navy); margin:10px 0 8px; }
.payment-option p { color:var(--lb-muted); margin:0 0 12px; }
.payment-upi { background:#e5f8fb; border:1px solid #a8e1e8; border-radius:10px; color:#056987; display:inline-block; font-family:Consolas,"Courier New",monospace; letter-spacing:.02em; padding:10px 14px; }
.payment-coming-soon { color:#b66a00 !important; font-weight:800; }
.payment-steps { margin:0 auto; max-width:900px; }
.payment-steps h3 { color:var(--lb-navy); margin:0 0 16px; }
.payment-steps ol { color:var(--lb-muted); margin:0; padding-left:22px; }
.payment-steps li { margin-bottom:12px; padding-left:6px; }
.payment-steps li:last-child { margin-bottom:0; }

.hero-section { min-height:min(640px,calc(100vh - 80px)); padding:110px 0; }
.transparent-layer { background:linear-gradient(110deg,rgba(3,30,59,.72),rgba(3,75,98,.38)); }
.hero-content { padding:22px; text-shadow:none; }
.button,.primary-button { background:linear-gradient(135deg,#ff8d2c,#f75755); border:0; border-radius:999px; box-shadow:0 12px 25px rgba(226,82,61,.3); color:#fff; font-size:1.05em; letter-spacing:.01em; padding:14px 26px; transition:transform .22s ease,box-shadow .22s ease,filter .22s ease; }
.button:hover,.primary-button:hover { background:linear-gradient(135deg,#ff9d3d,#fb6561); box-shadow:0 16px 30px rgba(226,82,61,.38); filter:brightness(1.03); transform:translateY(-3px); }

.courses-grid { gap:28px; }
.course-card { border:1px solid #d9edf2; border-radius:24px; box-shadow:0 12px 32px rgba(10,69,94,.1); min-height:360px; padding:38px 32px; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.course-card:hover { border-color:#72d2dd; box-shadow:var(--lb-shadow); transform:translateY(-9px); }
.course-card .card-icon { background:#ecfbfd; border-radius:20px; height:108px; margin-bottom:22px; width:108px; }
.course-card .card-icon img { filter:drop-shadow(0 5px 6px rgba(5,97,127,.16)); height:76px; width:76px; }
.course-card .card-title { color:var(--lb-navy); font-family:"Segoe UI","Poppins",sans-serif; font-size:1.45em; margin:0 0 12px; }
.course-card .card-description { color:var(--lb-muted); line-height:1.7; }
.course-card .card-button { background:#e2f8fa; border:1px solid #b9e9ed; border-radius:999px; color:#087e9d; padding:10px 20px; transition:all .2s ease; }
.course-card .card-button:hover { background:var(--lb-blue); border-color:var(--lb-blue); color:#fff; transform:translateY(-2px); }

.about-snapshot-content { align-items:flex-start; gap:52px; }.about-text { color:#365a70; font-size:1.02em; }
.about-text p { background:rgba(255,255,255,.63); border-left:4px solid #53cbd4; border-radius:0 12px 12px 0; margin:0 0 16px; padding:13px 17px; }
.about-text strong { color:var(--lb-navy); }.about-text .button { margin:8px 0 16px; }
.about-text h3 { color:var(--lb-navy); font-family:"Segoe UI","Poppins",sans-serif; font-size:1.55em; letter-spacing:-.025em; line-height:1.25; margin:32px 0 10px; }
.about-text h4 { color:var(--lb-blue); font-size:1.15em; margin:0 0 14px; }
.about-text .running-instructions { background:rgba(255,255,255,.72); border:1px solid #ccecf1; border-radius:16px; margin:0 0 22px; padding:20px 20px 20px 42px; }
.about-text .running-instructions li { color:#365a70; margin:0 0 13px; padding-left:4px; }
.about-text .running-instructions li:last-child { margin-bottom:0; }
.about-text code { background:#082f4d; border-radius:7px; color:#d9fbff; display:inline-block; font-family:Consolas,"Courier New",monospace; font-size:clamp(.4rem,1.8vw,.9rem); letter-spacing:-.045em; line-height:1.35; margin-top:9px; padding:7px 10px; white-space:nowrap; }
/* Keep the installation-folder command fully visible on one line without a scroll bar. */
.about-text p:nth-of-type(5) { overflow:visible; }
.about-text p:nth-of-type(5) strong:nth-of-type(3) {
    display:inline-block;
    font-size:clamp(.4rem, 1.8vw, .9rem);
    letter-spacing:-.045em;
    line-height:1.2;
    white-space:nowrap;
}

#model-comparison {
    background:
        radial-gradient(circle at 12% 14%, rgba(35,196,205,.14) 0, transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(17,178,140,.12) 0, transparent 22%),
        linear-gradient(180deg,#f3fdff 0%,#eaf9fb 100%);
    overflow:hidden;
    position:relative;
}
#model-comparison::before,
#model-comparison::after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
#model-comparison::before {
    background:radial-gradient(circle, rgba(222,93,83,.16), transparent 68%);
    height:240px;
    left:-80px;
    top:64px;
    width:240px;
}
#model-comparison::after {
    background:radial-gradient(circle, rgba(23,178,140,.16), transparent 68%);
    bottom:34px;
    height:260px;
    right:-90px;
    width:260px;
}
.comparison-intro {
    color:var(--lb-muted);
    font-size:1.08em;
    margin:-20px auto 34px;
    max-width:860px;
    text-align:center;
}
.comparison-diagram {
    align-items:center;
    display:grid;
    gap:18px;
    grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);
    margin:0 auto 34px;
    max-width:1120px;
}
.diagram-column {
    border-radius:26px;
    box-shadow:0 14px 30px rgba(8,51,88,.09);
    padding:24px 22px 22px;
    position:relative;
}
.diagram-old {
    background:linear-gradient(180deg,#fff8f7 0%,#ffe7e3 100%);
    border:1px solid #efc6bf;
}
.diagram-new {
    background:linear-gradient(180deg,#f5fffc 0%,#e0fbf4 100%);
    border:1px solid #9fded0;
}
.diagram-title {
    font-family:"Segoe UI","Poppins",sans-serif;
    font-size:1.12em;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0 0 16px;
    text-transform:uppercase;
}
.diagram-old .diagram-title { color:#a43d38; }
.diagram-new .diagram-title { color:#0f7e63; }
.diagram-step {
    background:rgba(255,255,255,.86);
    border-radius:16px;
    box-shadow:0 6px 16px rgba(8,51,88,.06);
    color:var(--lb-ink);
    font-weight:600;
    line-height:1.5;
    margin:0 0 12px;
    padding:13px 16px 13px 18px;
    position:relative;
}
.diagram-step:last-child { margin-bottom:0; }
.diagram-old .diagram-step { border-left:4px solid #de5d53; }
.diagram-new .diagram-step { border-left:4px solid #17b28c; }
.diagram-step::after {
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:11px solid rgba(8,51,88,.18);
    content:"";
    height:0;
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:0;
}
.diagram-bridge {
    align-items:center;
    display:flex;
    flex-direction:column;
    gap:10px;
    justify-content:center;
    min-height:100%;
    position:relative;
}
.diagram-line {
    background:linear-gradient(180deg, rgba(222,93,83,.18), rgba(23,178,140,.22));
    border-radius:999px;
    height:78px;
    width:8px;
}
.diagram-node {
    align-items:center;
    background:#fff;
    border:1px solid #d7e8ed;
    border-radius:50%;
    box-shadow:0 10px 24px rgba(8,51,88,.12);
    color:var(--lb-blue);
    display:flex;
    font-size:.85em;
    font-weight:900;
    height:84px;
    justify-content:center;
    letter-spacing:.08em;
    text-transform:uppercase;
    width:84px;
    animation:comparison-pulse 2.8s ease-in-out infinite;
}
.comparison-diagram .diagram-old,
.comparison-diagram .diagram-new {
    animation:diagram-card-in .8s ease both;
}
.comparison-diagram .diagram-old { animation-delay:.05s; }
.comparison-diagram .diagram-new { animation-delay:.18s; }
.diagram-step:nth-child(2) { animation:diagram-step-in .65s ease both; animation-delay:.1s; }
.diagram-step:nth-child(3) { animation:diagram-step-in .65s ease both; animation-delay:.2s; }
.diagram-step:nth-child(4) { animation:diagram-step-in .65s ease both; animation-delay:.3s; }
@keyframes diagram-card-in {
    from { opacity:0; transform:translateY(14px) scale(.98); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes diagram-step-in {
    from { opacity:0; transform:translateX(-12px); }
    to { opacity:1; transform:translateX(0); }
}
.flow-diagram {
    align-items:stretch;
    display:grid;
    gap:16px;
    grid-template-columns:repeat(7, minmax(0,1fr));
    margin:0 auto 22px;
}
.flow-step {
    background:#fff;
    border-radius:24px;
    box-shadow:0 14px 30px rgba(8,51,88,.1);
    overflow:hidden;
    padding:24px 20px 20px;
    position:relative;
    transition:transform .25s ease, box-shadow .25s ease;
}
.flow-step:hover { box-shadow:0 20px 38px rgba(8,51,88,.14); transform:translateY(-4px); }
.flow-step::before {
    content:"";
    height:5px;
    left:0;
    position:absolute;
    right:0;
    top:0;
}
.flow-step-accent-1::before { background:linear-gradient(90deg,#0f7e63,#39c9a9); }
.flow-step-accent-2::before { background:linear-gradient(90deg,#087eac,#23c4cd); }
.flow-step-accent-3::before { background:linear-gradient(90deg,#a43d38,#de5d53); }
.flow-step-accent-4::before { background:linear-gradient(90deg,#5a67d8,#23c4cd); }
.flow-step-number {
    align-items:center;
    background:rgba(8,126,172,.1);
    border:1px solid rgba(8,126,172,.18);
    border-radius:50%;
    color:var(--lb-blue);
    display:flex;
    font-weight:900;
    height:42px;
    justify-content:center;
    margin-bottom:14px;
    width:42px;
}
.flow-step h3 {
    color:var(--lb-navy);
    font-family:"Segoe UI","Poppins",sans-serif;
    font-size:1.15em;
    line-height:1.25;
    margin:0 0 10px;
}
.flow-step p {
    color:var(--lb-muted);
    margin:0;
}
.flow-arrow {
    align-self:center;
    height:52px;
    position:relative;
}
.flow-arrow::before,
.flow-arrow::after {
    content:"";
    left:50%;
    position:absolute;
    transform:translateX(-50%);
}
.flow-arrow::before {
    background:linear-gradient(180deg,#23c4cd,#087eac);
    border-radius:999px;
    height:3px;
    top:24px;
    width:100%;
    animation:flow-line 2.2s ease-in-out infinite;
}
.flow-arrow::after {
    border-bottom:8px solid transparent;
    border-left:12px solid #087eac;
    border-top:8px solid transparent;
    right:-2px;
    top:16px;
    animation:flow-head 2.2s ease-in-out infinite;
}
.flow-step,
.flow-arrow {
    animation:flow-pop .75s ease both;
}
.flow-step:nth-child(1) { animation-delay:.04s; }
.flow-arrow:nth-child(2) { animation-delay:.08s; }
.flow-step:nth-child(3) { animation-delay:.12s; }
.flow-arrow:nth-child(4) { animation-delay:.16s; }
.flow-step:nth-child(5) { animation-delay:.2s; }
.flow-arrow:nth-child(6) { animation-delay:.24s; }
.flow-step:nth-child(7) { animation-delay:.28s; }
.flow-outcomes {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(2, minmax(0,1fr));
    margin:0 auto 16px;
}
.flow-outcome {
    border-radius:22px;
    box-shadow:0 12px 26px rgba(8,51,88,.08);
    padding:22px 20px 18px;
    position:relative;
}
.flow-local {
    background:linear-gradient(180deg,#f3fffb 0%,#e2fbf2 100%);
    border:1px solid #a7e0cf;
}
.flow-cloud {
    background:linear-gradient(180deg,#f6fbff 0%,#e3f1ff 100%);
    border:1px solid #b8d5f0;
}
.flow-outcome-head {
    color:var(--lb-navy);
    font-family:"Segoe UI","Poppins",sans-serif;
    font-size:1.05em;
    font-weight:800;
    letter-spacing:-.02em;
    margin-bottom:10px;
}
.flow-outcome p {
    color:var(--lb-muted);
    margin:0;
}
.flow-note {
    background:#082f4d;
    border:1px solid rgba(120,229,240,.24);
    border-radius:20px;
    color:#dffbff;
    line-height:1.6;
    padding:18px 20px;
}
@keyframes flow-pop {
    from { opacity:0; transform:translateY(12px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes flow-line {
    0%,100% { transform:translateX(-50%) scaleX(.96); opacity:.76; }
    50% { transform:translateX(-50%) scaleX(1.02); opacity:1; }
}
@keyframes flow-head {
    0%,100% { transform:translateX(0) scale(.98); opacity:.78; }
    50% { transform:translateX(2px) scale(1.04); opacity:1; }
}
.model-comparison {
    align-items:stretch;
    display:grid;
    gap:22px;
    grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
}
.model-panel {
    border-radius:28px;
    box-shadow:0 16px 34px rgba(8,51,88,.1);
    overflow:hidden;
    padding:30px 28px 28px;
    position:relative;
    transition:transform .25s ease, box-shadow .25s ease;
    isolation:isolate;
}
.model-panel:hover {
    box-shadow:0 22px 42px rgba(8,51,88,.14);
    transform:translateY(-5px);
}
.model-panel::before {
    animation:model-glow 8s ease-in-out infinite;
    content:"";
    height:220px;
    left:-18%;
    opacity:.7;
    pointer-events:none;
    position:absolute;
    right:-18%;
    top:auto;
    bottom:-42px;
    border-radius:50%;
    z-index:-1;
}
.old-model {
    background:linear-gradient(180deg,#fff9f8 0%,#ffe9e7 100%);
    border:1px solid #f2c5bf;
}
.old-model::before { background:radial-gradient(circle, rgba(222,93,83,.28), transparent 68%); }
.new-model {
    background:linear-gradient(180deg,#f4fffb 0%,#e0fbf4 100%);
    border:1px solid #9fe0cf;
}
.new-model::before { background:radial-gradient(circle, rgba(23,178,140,.22), transparent 68%); }
.model-badge {
    align-items:center;
    border-radius:999px;
    display:inline-flex;
    font-size:.8em;
    font-weight:800;
    letter-spacing:.08em;
    padding:8px 14px;
    text-transform:uppercase;
    transition:transform .2s ease;
}
.old-model .model-badge { background:#ffe0dc; color:#a43d38; }
.new-model .model-badge { background:#d7fbef; color:#0f7e63; }
.model-panel h3 {
    font-family:"Segoe UI","Poppins",sans-serif;
    font-size:1.5em;
    letter-spacing:-.03em;
    line-height:1.2;
    margin:18px 0 0;
}
.old-model h3 { color:#8c2c28; }
.new-model h3 { color:#0b6f59; }
.model-panel ul {
    display:grid;
    gap:12px;
    list-style:none;
    margin:22px 0 0;
    padding:0;
}
.model-panel li {
    animation:panel-item-in .7s ease both;
    background:rgba(255,255,255,.82);
    border-radius:16px;
    color:var(--lb-ink);
    font-weight:600;
    line-height:1.55;
    padding:14px 14px 14px 48px;
    position:relative;
}
.model-panel li::before {
    border-radius:50%;
    box-shadow:0 0 0 6px rgba(255,255,255,.68);
    content:"";
    height:18px;
    left:16px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:18px;
}
.old-model li { border:1px solid #f0c0ba; }
.old-model li::before { background:#de5d53; }
.new-model li { border:1px solid #b9eadc; }
.new-model li::before { background:#17b28c; }
.old-model li:nth-child(2) { animation-delay:.12s; }
.old-model li:nth-child(3) { animation-delay:.24s; }
.old-model li:nth-child(4) { animation-delay:.36s; }
.new-model li:nth-child(2) { animation-delay:.12s; }
.new-model li:nth-child(3) { animation-delay:.24s; }
.new-model li:nth-child(4) { animation-delay:.36s; }
.comparison-arrow {
    align-items:center;
    align-self:center;
    display:flex;
    justify-content:center;
    min-height:100%;
    position:relative;
}
.comparison-arrow::before {
    background:linear-gradient(180deg, rgba(218,79,74,.12), rgba(17,178,140,.25));
    border-radius:999px;
    content:"";
    height:78%;
    position:absolute;
    width:8px;
}
.comparison-arrow-core {
    background:#fff;
    border:1px solid #d7e8ed;
    border-radius:50%;
    box-shadow:0 10px 24px rgba(8,51,88,.12);
    height:82px;
    position:relative;
    width:82px;
    z-index:1;
    animation:comparison-pulse 2.8s ease-in-out infinite;
}
.comparison-arrow-core::before {
    border-bottom:14px solid transparent;
    border-left:22px solid var(--lb-blue);
    border-top:14px solid transparent;
    content:"";
    left:31px;
    position:absolute;
    top:27px;
}
.comparison-arrow-label {
    background:#fff;
    border:1px solid #d7e8ed;
    border-radius:999px;
    bottom:-18px;
    box-shadow:0 8px 20px rgba(8,51,88,.08);
    color:var(--lb-blue);
    font-size:.85em;
    font-weight:800;
    left:50%;
    letter-spacing:.06em;
    padding:7px 14px;
    position:absolute;
    text-transform:uppercase;
    transform:translateX(-50%);
    white-space:nowrap;
}
.model-panel:hover .model-badge { transform:translateY(-1px) scale(1.03); }
@keyframes model-glow {
    0%,100% { transform:translateY(0) scale(1); opacity:.55; }
    50% { transform:translateY(-10px) scale(1.06); opacity:.88; }
}
@keyframes comparison-pulse {
    0%,100% { box-shadow:0 10px 24px rgba(8,51,88,.12); transform:scale(1); }
    50% { box-shadow:0 14px 30px rgba(8,51,88,.18); transform:scale(1.08); }
}
@keyframes panel-item-in {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}
.quick-stats-grid { gap:17px; }
.stat-item { background:rgba(255,255,255,.92); border:1px solid #c9eaf0; border-radius:20px; box-shadow:0 9px 22px rgba(10,90,111,.09); padding:24px 18px; transition:transform .2s ease,box-shadow .2s ease; }
.stat-item:hover { background:#fff; box-shadow:0 15px 27px rgba(10,90,111,.15); transform:translateY(-5px); }
.stat-number { color:var(--lb-blue); font-size:1.38em; }.stat-label { color:var(--lb-muted); }

#payment-notice { background:radial-gradient(circle at 8% 12%,#e6f9fb 0,transparent 25%),#fff; }
#source-code { background:linear-gradient(180deg,#f8feff 0%,#def6f8 100%); }
#source-code .source-code-image-frame { border-radius:24px; box-shadow:var(--lb-shadow); padding:14px; }
#source-code .source-code-callout { border-radius:24px; box-shadow:0 22px 44px rgba(8,93,117,.28); }

.quick-links-grid { gap:18px; }
.quick-link-button { background:rgba(255,255,255,.9); border:1px solid #c8eaf0; border-radius:20px; box-shadow:0 8px 20px rgba(10,90,111,.08); color:var(--lb-ink); min-height:174px; padding:24px 14px; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.quick-link-button:hover { background:#fff; border-color:#45c5d0; box-shadow:0 16px 30px rgba(10,90,111,.16); color:var(--lb-blue); transform:translateY(-7px); }
.quick-link-button::after { content:none; }.quick-link-button:hover span,.quick-link-button:hover img { opacity:1; }
.quick-link-button img { filter:drop-shadow(0 4px 5px rgba(8,51,88,.16)); transition:transform .22s ease; }.quick-link-button:hover img { transform:scale(1.08); }
.quick-link-button span { color:inherit; font-size:.98em; line-height:1.4; }

.main-footer { background:radial-gradient(circle at 15% 0%,#126a8a,transparent 35%),#072b4a; overflow:visible; padding:64px 0 22px; position:relative; }
.footer-col h4 { color:#6ee4ea; letter-spacing:-.02em; }.footer-col p,.footer-col ul li a { color:#c4e5ec; }.footer-col ul li a:hover { color:#fff; }.copyright { border-color:rgba(196,229,236,.25); color:#b7dce5; }
/* Preserve the original WhatsApp green and its existing side-to-side animation. */
#scroll-to-top { background-color:#00FF00; background-image:none; box-shadow:0 12px 25px rgba(0,128,0,.28); }
#scroll-to-top:hover { background-color:orange; background-image:none; transform:translateY(-3px); }

/* Independent bubbles: each follows its own winding path and burst offset. */
html::before, body::before, body::after { display:none; }
.bubble-field { inset:0; pointer-events:none; position:absolute; z-index:1; }
.main-footer .container,
.main-footer .copyright { position:relative; z-index:2; }
.water-surface {
    background:linear-gradient(180deg,rgba(218,255,251,.66),rgba(126,226,226,.25) 45%,transparent); height:31px; left:0; overflow:hidden; pointer-events:none; position:absolute; right:0; top:0; z-index:1;
}
.water-surface::before,
.water-surface::after {
    content:""; height:18px; left:-8%; position:absolute; right:-8%;
    background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 9px,rgba(232,255,252,.8) 10px 12px,transparent 13px 22px);
    background-size:56px 18px; animation:surface-wave 3.6s linear infinite;
}
.water-surface::before { top:1px; }
.water-surface::after { opacity:.45; top:10px; animation-duration:5.1s; animation-direction:reverse; }
.water-refraction { bottom:0; left:0; overflow:hidden; pointer-events:none; position:absolute; right:0; top:24px; z-index:0; }
.refracted-ray {
    background:linear-gradient(180deg,rgba(255,255,219,.28),rgba(183,248,240,.13) 45%,transparent 90%);
    filter:blur(5px); height:122%; opacity:.6; position:absolute; top:-6%; transform:rotate(6deg); transform-origin:top center; width:13%;
    animation:refracted-light-drift 8s ease-in-out infinite alternate;
}
.refraction-1 { left:22%; animation-delay:-1s; }
.refraction-2 { left:53%; opacity:.45; transform:rotate(-5deg); animation-delay:-4s; width:10%; }
.refraction-3 { left:78%; opacity:.5; transform:rotate(4deg); animation-delay:-6s; width:16%; }
@keyframes surface-wave { from { background-position:0 0; } to { background-position:56px 0; } }
@keyframes refracted-light-drift { from { margin-left:-2%; opacity:.32; } to { margin-left:3%; opacity:.65; } }
.sunlight-rays { inset:0; overflow:hidden; pointer-events:none; position:absolute; z-index:0; }
.water-swimmer { height:38px; left:0; pointer-events:none; position:absolute; top:3px; width:72px; z-index:2; animation:swimmer-to-boat 24s ease-in-out -5.28s infinite, swimmer-visibility 24s ease-in-out -5.28s infinite; }
.swimmer-jet { background:radial-gradient(circle,#fff5a1 0 18%,#ffbd32 22% 48%,#ec4b20 52% 72%,transparent 74%); border-radius:50%; filter:blur(.3px); height:13px; left:-22px; opacity:0; position:absolute; top:15px; transform:scale(.55); width:24px; animation:swimmer-jet-burst 24s ease-in-out infinite; }
.swimmer-jet::before,.swimmer-jet::after { background:#ff8a22; border-radius:50%; content:""; position:absolute; }
.swimmer-jet::before { height:7px; left:-10px; top:3px; width:11px; }
.swimmer-jet::after { background:#ffd24c; height:4px; left:-17px; top:5px; width:7px; }
@keyframes swimmer-jet-burst {
    0%, 18% { opacity:.8; transform:scale(.65); }
    30% { opacity:.95; transform:scale(1.05); }
    36%, 60% { opacity:0; transform:scale(.3); }
    66%, 88% { opacity:.85; transform:scale(.9); }
    100% { opacity:.7; transform:scale(.6); }
}
.swimmer-head { background:radial-gradient(circle at 58% 39%,#27313a 0 2px,transparent 2.5px),radial-gradient(ellipse at 92% 58%,#d98868 0 3px,transparent 3.5px),radial-gradient(ellipse at 76% 73%,#9b443d 0 1px,transparent 1.5px),#e9a27c; border-radius:54% 44% 47% 53%; box-shadow:inset 2px 1px rgba(255,255,255,.38); height:18px; left:29px; position:absolute; top:-5px; width:18px; z-index:2; }
.swimmer-head::before { background:#4b2d20; border-radius:55% 45% 0 0; content:""; height:5px; left:1px; position:absolute; top:-1px; transform:rotate(-8deg); width:15px; }
.swimmer-head::after { border-bottom:1px solid rgba(125,58,45,.9); content:""; height:4px; left:14px; position:absolute; top:11px; transform:rotate(8deg); width:5px; }
.swimmer-body { background:linear-gradient(180deg,#3b8fb0 0 24%,#2d7899 25% 68%,#24526b 69%); border-radius:42% 34% 28% 32%; clip-path:polygon(18% 0,82% 0,100% 26%,86% 76%,72% 100%,27% 100%,13% 76%,0 26%); height:22px; left:21px; position:absolute; top:10px; width:38px; }
.swimmer-body::before { background:rgba(219,247,246,.25); border-radius:50%; content:""; height:8px; left:9px; position:absolute; top:3px; transform:rotate(-8deg); width:17px; }
.swimmer-body::after { background:#172d46; border-radius:3px; content:""; height:4px; left:10px; position:absolute; bottom:1px; width:18px; }
.swimmer-hips { background:linear-gradient(180deg,#294d70,#142b47); border:1px solid rgba(128,180,204,.45); border-radius:35% 30% 45% 40%; height:10px; left:15px; position:absolute; top:26px; width:27px; z-index:1; }
.swimmer-arm,.swimmer-leg { background:#e29a76; border-radius:999px; position:absolute; transform-origin:left center; }
.swimmer-arm { height:5px; top:13px; width:29px; }
.arm-front { left:49px; transform:rotate(-26deg); animation:arm-front-swim-and-sit 24s ease-in-out -5.28s infinite; }
.arm-back { left:45px; transform:rotate(14deg); animation:arm-back-swim-and-sit 24s ease-in-out -5.28s infinite; }
.swimmer-leg { background:linear-gradient(180deg,#294d70,#142b47); border:1px solid rgba(128,180,204,.4); border-radius:999px; height:7px; top:31px; width:30px; z-index:2; }
.leg-front { left:17px; transform:rotate(158deg); animation:leg-front-swim-and-sit 24s ease-in-out -5.28s infinite; }
.leg-back { left:10px; transform:rotate(174deg); animation:leg-back-swim-and-sit 24s ease-in-out -5.28s infinite; }
@keyframes swimmer-to-boat {
    0% { transform:translateX(-6vw) translateY(0) rotate(-3deg); }
    /* Start close behind the boat, then make a slow, smooth approach to the seat. */
    22% { transform:translateX(20vw) translateY(0) rotate(2deg); }
    28% { transform:translateX(25vw) translateY(-1px) rotate(-1deg); }
    34% { transform:translateX(32vw) translateY(-2px) rotate(0deg); }
    38% { transform:translateX(40vw) translateY(-5px) rotate(2deg); }
    40% { transform:translateX(44vw) translateY(-15px) rotate(5deg); }
    41% { transform:translateX(46vw) translateY(-31px) rotate(12deg); }
    41.5% { transform:translateX(47vw) translateY(-46px) rotate(65deg); }
    42% { transform:translateX(48vw) translateY(-49px) rotate(82deg); }
    54.5% { transform:translateX(60vw) translateY(-49px) rotate(82deg); }
    60% { transform:translateX(66vw) translateY(-31px) rotate(32deg); }
    66% { transform:translateX(74vw) translateY(0) rotate(2deg); }
    76% { transform:translateX(84vw) translateY(2px) rotate(-3deg); }
    100% { transform:translateX(106vw) translateY(0) rotate(3deg); }
}
/* Hide the horizontal swimmer while their matching seated version is in the boat. */
@keyframes swimmer-visibility {
    0%, 40% { opacity:1; }
    42%, 54.5% { opacity:0; }
    60%, 100% { opacity:1; }
}
/* The swimmer's stroke pauses while they are seated in the boat (42%-54.5%). */
@keyframes arm-front-swim-and-sit {
    0%, 12%, 24%, 36% { transform:rotate(-35deg); }
    18%, 30% { transform:rotate(28deg); }
    42%, 54.5% { transform:rotate(68deg); }
    60%, 72%, 84%, 100% { transform:rotate(-35deg); }
    66%, 78%, 90% { transform:rotate(28deg); }
}
@keyframes arm-back-swim-and-sit {
    0%, 12%, 24%, 36% { transform:rotate(8deg); }
    18%, 30% { transform:rotate(36deg); }
    42%, 54.5% { transform:rotate(18deg); }
    60%, 72%, 84%, 100% { transform:rotate(8deg); }
    66%, 78%, 90% { transform:rotate(36deg); }
}
@keyframes leg-front-swim-and-sit {
    0%, 12%, 24%, 36% { transform:rotate(150deg); }
    18%, 30% { transform:rotate(174deg); }
    42%, 54.5% { transform:rotate(48deg); }
    60%, 72%, 84%, 100% { transform:rotate(150deg); }
    66%, 78%, 90% { transform:rotate(174deg); }
}
@keyframes leg-back-swim-and-sit {
    0%, 12%, 24%, 36% { transform:rotate(166deg); }
    18%, 30% { transform:rotate(188deg); }
    42%, 54.5% { transform:rotate(68deg); }
    60%, 72%, 84%, 100% { transform:rotate(166deg); }
    66%, 78%, 90% { transform:rotate(188deg); }
}
.sun-ray {
    background:linear-gradient(180deg,rgba(255,255,218,.32),rgba(184,243,236,.11) 53%,transparent 100%);
    filter:blur(4px); height:135%; opacity:.65; position:absolute; top:-28%; transform:rotate(15deg); transform-origin:top center; width:15%;
    animation:sun-ray-drift 9s ease-in-out infinite alternate;
}
.ray-1 { left:15%; animation-delay:-2s; }
.ray-2 { left:47%; opacity:.45; transform:rotate(-11deg); animation-delay:-6s; width:12%; }
.ray-3 { left:74%; opacity:.55; transform:rotate(9deg); animation-delay:-4s; width:18%; }
@keyframes sun-ray-drift { from { margin-left:-2%; opacity:.38; } to { margin-left:3%; opacity:.7; } }
.fishing-boat { height:116px; left:8%; pointer-events:none; position:absolute; top:-54px; width:112px; z-index:3; animation:boat-surface 24s ease-in-out -5.28s infinite; }
.fishing-boat::before { background:linear-gradient(180deg,#b86b36,#6b351d); border-radius:4px 4px 48% 48%; bottom:59px; box-shadow:inset 0 4px 0 rgba(255,210,135,.45),0 3px 5px rgba(4,45,61,.3); content:""; height:25px; left:10px; position:absolute; transform:skewX(-8deg); width:88px; }
.fishing-boat::after { background:#f3cc78; border-radius:3px; bottom:79px; content:""; height:5px; left:13px; position:absolute; transform:skewX(-8deg); width:84px; }
.boat-person { background:linear-gradient(180deg,#f4bb91 0 38%,#177b9f 39%); border:1px solid rgba(255,245,210,.85); border-radius:50% 50% 8px 8px; bottom:76px; box-shadow:0 2px 3px rgba(20,43,51,.35); height:36px; position:absolute; width:20px; }
.boat-person::before { background:#4b2d20; border-radius:50% 50% 30% 30%; content:""; height:9px; left:0; position:absolute; top:-3px; width:20px; }
.boat-person::after { background:#25323a; border-radius:50%; box-shadow:8px 0 #25323a; content:""; height:2px; left:5px; position:absolute; top:11px; width:2px; }
.person-1 { left:30px; }.person-2 { left:60px; background:linear-gradient(180deg,#e6a278 0 38%,#d95b42 39%); }
.person-3 { left:7px; }
.swimmer-seat { opacity:0; animation:swimmer-seat-visibility 24s ease-in-out -5.28s infinite; }
@keyframes swimmer-seat-visibility {
    0%, 40% { opacity:0; }
    42%, 54.5% { opacity:1; }
    60%, 100% { opacity:0; }
}
.fishing-rod { background:#6d4627; border-radius:999px; bottom:99px; height:3px; position:absolute; transform-origin:left center; width:43px; }
.rod-1 { left:48px; transform:rotate(-38deg); }.rod-2 { left:71px; transform:rotate(-48deg); }
.fishing-line { background:rgba(238,252,246,.94); bottom:-92px; box-shadow:0 0 2px rgba(10,84,110,.65); height:170px; position:absolute; transform:rotate(18deg); transform-origin:top; width:2px; }
.line-1 { left:80px; animation:fishing-line-pull 8s ease-in-out infinite; }.line-2 { bottom:-74px; left:99px; height:151px; opacity:.78; }
.caught-fish { background:linear-gradient(135deg,#fff3a2,#e89d24); border-radius:55% 42% 42% 55%; bottom:-97px; height:9px; left:99px; position:absolute; width:18px; animation:fish-caught 8s ease-in-out infinite; }
.caught-fish::before { background:#e89d24; clip-path:polygon(0 50%,100% 0,100% 100%); content:""; height:10px; left:15px; position:absolute; top:0; width:7px; }
@keyframes boat-surface {
    0% { transform:translateX(0) translateY(0) rotate(-1deg); }
    12.5% { transform:translateX(10vw) translateY(2px) rotate(1deg); }
    25% { transform:translateX(22vw) translateY(-1px) rotate(-1deg); }
    37.5% { transform:translateX(35vw) translateY(3px) rotate(1deg); }
    50% { transform:translateX(48vw) translateY(0) rotate(-1deg); }
    62.5% { transform:translateX(35vw) translateY(3px) rotate(1deg); }
    75% { transform:translateX(22vw) translateY(-1px) rotate(-1deg); }
    87.5% { transform:translateX(10vw) translateY(2px) rotate(1deg); }
    100% { transform:translateX(0) translateY(0) rotate(-1deg); }
}
@keyframes fishing-line-pull { 0%,48% { transform:rotate(18deg) scaleY(1); } 67% { transform:rotate(18deg) scaleY(.12); } 100% { transform:rotate(18deg) scaleY(1); } }
@keyframes fish-caught { 0%,42% { opacity:1; transform:translate(0,0) rotate(-5deg); } 55% { opacity:1; transform:translate(-28px,-58px) rotate(18deg); } 67% { opacity:1; transform:translate(-54px,-150px) rotate(-12deg) scale(.85); } 73% { opacity:0; transform:translate(-62px,-168px) scale(.45); } 74%,100% { opacity:0; transform:translate(0,0) scale(.4); } }
.bubble {
    --turn-one:10px; --turn-two:-8px;
    background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.45) 13%,rgba(111,225,237,.2) 46%,rgba(11,137,176,.28) 65%,rgba(255,255,255,.55) 70%,transparent 73%);
    border-radius:50%; height:var(--size); left:var(--left); opacity:.72; position:absolute; top:var(--top); width:var(--size);
    animation:bubble-snake-crawl 12s linear var(--delay) infinite;
}
.bubble-1 { --size:4.78125px; --left:10%; --top:80%; --delay:-1.4s; --turn-one:13px; --turn-two:-9px; }
.bubble-2 { --size:3.9375px; --left:84%; --top:18%; --delay:-3s; --turn-one:-11px; --turn-two:8px; }
.bubble-3 { --size:5.625px; --left:50%; --top:58%; --delay:-4.6s; --turn-one:12px; --turn-two:-13px; }
.bubble-4 { --size:4.5px; --left:91%; --top:46%; --delay:-6.2s; --turn-one:-9px; --turn-two:7px; }
.bubble-5 { --size:3.65625px; --left:24%; --top:22%; --delay:-7.8s; --turn-one:10px; --turn-two:-7px; }
.bubble-6 { --size:5.34375px; --left:75%; --top:72%; --delay:-9.4s; --turn-one:-12px; --turn-two:10px; }
.bubble-7 { --size:4.21875px; --left:55%; --top:88%; --delay:-10.7s; --turn-one:8px; --turn-two:-11px; }
.bubble-8 { --size:3.9375px; --left:8%; --top:47%; --delay:-0.2s; --turn-one:-8px; --turn-two:12px; }
@keyframes bubble-snake-crawl {
    0% { opacity:.72; transform:translate(0,0) scale(1); }
    21% { transform:translate(var(--turn-one),-28px) scale(1); }
    42% { transform:translate(var(--turn-two),-58px) scale(1); }
    63% { transform:translate(var(--turn-one),-88px) scale(1); }
    83.333% { opacity:.72; transform:translate(var(--turn-two),-118px) scale(1); }
    94% { opacity:.42; transform:translate(var(--turn-one),-130px) scale(1.42); }
    100% { opacity:0; transform:translate(var(--turn-one),-134px) scale(1.58); }
}

/* Tangent pairs make the bubbles feel connected without drawing an overlap. */
.bubble-pair {
    --large:5.34375px; --small:3.9375px; --small-top:5px; --turn-one:10px; --turn-two:-8px;
    height:var(--large); left:var(--pair-left); pointer-events:none; position:absolute; top:var(--pair-top);
    width:calc(var(--large) + var(--small));
    animation:bubble-pair-crawl 12s linear var(--pair-delay) infinite;
}
.bubble-pair .bubble {
    animation:none; background:radial-gradient(circle at 30% 24%,#fff 0 5%,rgba(255,255,255,.94) 6% 12%,rgba(216,250,252,.7) 19%,rgba(92,213,230,.28) 48%,rgba(8,132,173,.34) 70%,rgba(255,255,255,.72) 74%,transparent 76%);
    border:1px solid rgba(219,250,253,.88); border-radius:50%; box-shadow:inset -5px -7px 9px rgba(2,104,153,.16),inset 4px 5px 7px rgba(255,255,255,.68),0 2px 6px rgba(7,108,143,.16);
    height:var(--large); left:0; opacity:1; position:absolute; top:0; transform:none; width:var(--large);
}
.bubble-pair .bubble:nth-child(2) { height:var(--small); left:var(--large); top:var(--small-top); width:var(--small); animation:bubble-pair-separate 12s ease-in-out var(--pair-delay) infinite; }
.pair-1 { --pair-left:8%; --pair-top:78%; --pair-delay:-1.1s; --large:5.34375px; --small:3.796875px; --small-top:6px; --turn-one:14px; --turn-two:-9px; --separate-x:18px; --separate-y:-12px; }
.pair-2 { --pair-left:77%; --pair-top:16%; --pair-delay:-4.2s; --large:4.5px; --small:3.375px; --small-top:4px; --turn-one:-12px; --turn-two:9px; --separate-x:-16px; --separate-y:-10px; }
.pair-3 { --pair-left:55%; --pair-top:80%; --pair-delay:-8.6s; --large:5.0625px; --small:3.515625px; --small-top:5px; --turn-one:10px; --turn-two:-11px; --separate-x:15px; --separate-y:-11px; }
.pair-4 { --pair-left:5%; --pair-top:42%; --pair-delay:-10.1s; --large:4.21875px; --small:3.09375px; --small-top:4px; --turn-one:-9px; --turn-two:11px; }
.bubble-solo {
    --size:5.0625px; --turn-one:10px; --turn-two:-8px;
    background:radial-gradient(circle at 30% 24%,#fff 0 5%,rgba(255,255,255,.94) 6% 12%,rgba(216,250,252,.7) 19%,rgba(92,213,230,.28) 48%,rgba(8,132,173,.34) 70%,rgba(255,255,255,.72) 74%,transparent 76%);
    border:1px solid rgba(219,250,253,.88); border-radius:50%; box-shadow:inset -5px -7px 9px rgba(2,104,153,.16),inset 4px 5px 7px rgba(255,255,255,.68),0 2px 6px rgba(7,108,143,.16);
    height:var(--size); left:var(--solo-left); opacity:.78; pointer-events:none; position:absolute; top:var(--solo-top); width:var(--size);
    animation:bubble-pair-crawl 12s linear var(--solo-delay) infinite;
}
.solo-1 { --size:5.625px; --solo-left:46%; --solo-top:57%; --solo-delay:-7.3s; --turn-one:12px; --turn-two:-13px; }
.solo-2 { --size:4.21875px; --solo-left:6%; --solo-top:43%; --solo-delay:-10.1s; --turn-one:-9px; --turn-two:11px; }
.solo-3 { --size:3.796875px; --solo-left:32%; --solo-top:18%; --solo-delay:-2.6s; --turn-one:9px; --turn-two:-7px; }
.solo-4 { --size:4.78125px; --solo-left:82%; --solo-top:49%; --solo-delay:-5.4s; --turn-one:-11px; --turn-two:8px; }
.solo-5 { --size:3.375px; --solo-left:27%; --solo-top:88%; --solo-delay:-11.5s; --turn-one:8px; --turn-two:-9px; }
.swimming-fish {
    background:linear-gradient(135deg,#ffe995 0 22%,#ffb94b 54%,#f27c35 100%);
    border-radius:55% 42% 42% 55%; box-shadow:inset 4px 3px 5px rgba(255,255,255,.45),0 3px 7px rgba(5,70,103,.2);
    height:18px; left:var(--fish-left); opacity:.86; pointer-events:none; position:absolute; top:var(--fish-top); width:34px;
    animation:fish-swim var(--fish-duration) ease-in-out var(--fish-delay) infinite;
}
.swimming-fish::before {
    background:#f28b38; clip-path:polygon(0 50%,100% 0,100% 100%);
    content:""; height:18px; left:28px; position:absolute; top:0; width:13px;
}
.swimming-fish::after {
    background:#153b57; border:2px solid rgba(255,255,255,.8); border-radius:50%;
    content:""; height:3px; left:6px; position:absolute; top:5px; width:3px;
}
.fish-5 { --fish-left:87%; --fish-top:11%; --fish-duration:24s; --fish-delay:-13s; animation-name:fish-forward-wave; }
.golden-fish {
    background:radial-gradient(circle at 20% 35%,#4e2d0a 0 2px,transparent 2.5px),linear-gradient(135deg,#fff4a8 0 18%,#ffd84e 45%,#ee9a16 100%);
    box-shadow:inset 4px 3px 5px rgba(255,255,255,.55),0 3px 7px rgba(108,67,4,.25);
    animation:golden-fish-escape 22s ease-in-out infinite;
}
.golden-fish::before { background:#ee9a16; }
.swimming-shark {
    background:radial-gradient(circle at 20% 35%,#102c3d 0 2px,transparent 2.5px),linear-gradient(180deg,#91b8c5 0%,#547b8b 55%,#e6f5f6 57%,#d0e8e9 100%);
    border-radius:58% 42% 42% 58%; box-shadow:inset 4px 3px 5px rgba(255,255,255,.35),0 4px 8px rgba(2,46,69,.24);
    height:25px; left:var(--shark-left,98%); opacity:.82; pointer-events:none; position:absolute; top:var(--shark-top,58%); width:62px;
    animation:shark-cruise var(--shark-duration,28s) linear var(--shark-delay,-9s) infinite;
}
.swimming-shark::before {
    background:#5e8795; clip-path:polygon(0 50%,100% 0,100% 100%);
    content:""; height:30px; left:54px; position:absolute; top:-3px; width:24px;
}
.swimming-shark::after {
    background:#6f99a6; clip-path:polygon(0 100%,52% 0,100% 100%);
    content:""; height:20px; left:25px; position:absolute; top:-15px; width:20px;
}
.hunter-shark { animation:shark-hunt 22s ease-in-out infinite; }
@keyframes fish-forward-wave {
    0% { transform:translateX(10vw) translateY(0) rotate(-4deg); }
    12.5% { transform:translateX(-3vw) translateY(14px) rotate(3deg); }
    25% { transform:translateX(-16vw) translateY(0) rotate(-4deg); }
    37.5% { transform:translateX(-29vw) translateY(-14px) rotate(3deg); }
    50% { transform:translateX(-42vw) translateY(0) rotate(-4deg); }
    62.5% { transform:translateX(-55vw) translateY(14px) rotate(3deg); }
    75% { transform:translateX(-68vw) translateY(0) rotate(-4deg); }
    87.5% { transform:translateX(-81vw) translateY(-14px) rotate(3deg); }
    100% { transform:translateX(-94vw) translateY(0) rotate(-4deg); }
}
@keyframes shark-cruise {
    0% { transform:translateX(8vw) translateY(0) rotate(-2deg); }
    12.5% { transform:translateX(-6vw) translateY(11px) rotate(2deg); }
    25% { transform:translateX(-20vw) translateY(0) rotate(-2deg); }
    37.5% { transform:translateX(-34vw) translateY(-11px) rotate(2deg); }
    50% { transform:translateX(-48vw) translateY(0) rotate(-2deg); }
    62.5% { transform:translateX(-62vw) translateY(11px) rotate(2deg); }
    75% { transform:translateX(-76vw) translateY(0) rotate(-2deg); }
    87.5% { transform:translateX(-90vw) translateY(-11px) rotate(2deg); }
    100% { transform:translateX(-106vw) translateY(0) rotate(-2deg); }
}
@keyframes golden-fish-escape {
    0% { left:78%; top:54%; opacity:0; transform:scale(.3) translateX(0); }
    7% { opacity:1; transform:scale(1) translateX(0); }
    24% { left:61%; top:42%; opacity:1; transform:translateY(-11px) rotate(-5deg); }
    42% { left:42%; top:59%; opacity:1; transform:translateY(12px) rotate(5deg); }
    57% { left:23%; top:47%; opacity:1; transform:translateY(-8px) rotate(-4deg); }
    66% { left:12%; top:51%; opacity:1; transform:scale(1) rotate(1deg); }
    70% { left:11%; top:51%; opacity:0; transform:scale(.18); }
    71% { left:86%; top:21%; opacity:0; transform:scale(.2); }
    78% { opacity:1; transform:scale(1); }
    100% { left:55%; top:37%; opacity:1; transform:translateY(-8px) rotate(-4deg); }
}
@keyframes shark-hunt {
    0% { left:97%; top:57%; opacity:.9; transform:translateX(0) scale(.7); }
    7% { opacity:.9; transform:translateX(0) scale(1); }
    24% { left:78%; top:46%; opacity:.9; transform:translateY(-8px) rotate(-3deg); }
    42% { left:58%; top:62%; opacity:.9; transform:translateY(10px) rotate(3deg); }
    57% { left:36%; top:48%; opacity:.9; transform:translateY(-7px) rotate(-3deg); }
    66% { left:14%; top:52%; opacity:.95; transform:scale(1.12); }
    70% { left:11%; top:51%; opacity:.75; transform:scale(1.22); }
    76% { left:6%; top:51%; opacity:.9; transform:scale(1.1); }
    77% { left:2%; top:55%; opacity:.9; transform:scale(1); }
    100% { left:-28%; top:67%; opacity:.9; transform:scale(.85); }
}
.sea-floor {
    background:linear-gradient(180deg,rgba(166,219,189,.22),rgba(46,125,111,.55)); border-top:2px solid rgba(212,246,223,.42);
    bottom:0; height:48px; left:0; pointer-events:none; position:absolute; right:0; z-index:1;
}
.sea-stone {
    background:radial-gradient(ellipse at 29% 22%,rgba(255,220,160,.5) 0 6%,transparent 22%),radial-gradient(circle at 72% 65%,rgba(78,38,17,.42) 0 8%,transparent 24%),linear-gradient(145deg,#b77a43 0%,#84502d 47%,#452919 100%);
    border:1px solid rgba(237,186,120,.48); border-radius:47% 54% 43% 56%;
    bottom:8px; box-shadow:inset 4px 4px 5px rgba(255,226,177,.32),inset -5px -5px 6px rgba(54,29,15,.45),0 4px 6px rgba(22,36,31,.34); height:var(--stone-height); left:var(--stone-left); position:absolute; width:var(--stone-width);
}
.sea-stone::before { background:radial-gradient(circle,rgba(71,37,18,.52) 0 1px,transparent 1.5px); background-size:7px 6px; content:""; inset:3px; opacity:.58; position:absolute; }
.sea-stone::after { background:linear-gradient(120deg,rgba(255,232,183,.32),transparent 38%); border-radius:inherit; content:""; inset:1px; position:absolute; }
.stone-1 { --stone-left:5%; --stone-width:36px; --stone-height:19px; }
.stone-2 { --stone-left:28%; --stone-width:25px; --stone-height:15px; }
.stone-3 { --stone-left:52%; --stone-width:43px; --stone-height:22px; }
.stone-4 { --stone-left:74%; --stone-width:29px; --stone-height:17px; }
.stone-5 { --stone-left:91%; --stone-width:38px; --stone-height:20px; }
.stone-6 { --stone-left:14%; --stone-width:20px; --stone-height:12px; bottom:5px; }
.stone-7 { --stone-left:38%; --stone-width:34px; --stone-height:18px; bottom:4px; }
.stone-8 { --stone-left:64%; --stone-width:22px; --stone-height:13px; bottom:5px; }
.stone-9 { --stone-left:82%; --stone-width:40px; --stone-height:21px; bottom:4px; }
.stone-10 { --stone-left:97%; --stone-width:21px; --stone-height:13px; bottom:5px; }
.sea-grass {
    background:linear-gradient(90deg,#17684c,#57bb72); border-radius:100% 0 100% 0; bottom:8px; height:calc(var(--grass-height) * 1.4); left:var(--grass-left); pointer-events:none; position:absolute; transform:rotate(-10deg); transform-origin:bottom center; width:5px; z-index:1;
    box-shadow:none;
    animation:none;
}
.sea-grass::before,.sea-grass::after { background:linear-gradient(90deg,#17684c,#65c87a); border-radius:100% 0 100% 0; bottom:2px; content:""; height:calc(var(--grass-height) * .78); position:absolute; transform-origin:bottom center; width:4px; }
.sea-grass::before { left:-7px; transform:rotate(-24deg); }.sea-grass::after { left:7px; transform:rotate(25deg) scaleX(-1); }
.grass-1 { --grass-left:9%; --grass-height:31px; --grass-delay:-.4s; }.grass-2 { --grass-left:25%; --grass-height:24px; --grass-delay:-1.3s; }.grass-3 { --grass-left:42%; --grass-height:35px; --grass-delay:-2.1s; }.grass-4 { --grass-left:57%; --grass-height:27px; --grass-delay:-.8s; }.grass-5 { --grass-left:69%; --grass-height:33px; --grass-delay:-1.9s; }.grass-6 { --grass-left:78%; --grass-height:25px; --grass-delay:-2.6s; }.grass-7 { --grass-left:88%; --grass-height:34px; --grass-delay:-1.1s; }.grass-8 { --grass-left:97%; --grass-height:22px; --grass-delay:-2.4s; }
@keyframes sea-grass-sway { from { transform:rotate(-14deg); } to { transform:rotate(12deg); } }
.aquatic-flower {
    background:linear-gradient(90deg,#1d754f,#75c579); bottom:41px; height:var(--flower-stem); left:var(--flower-left); pointer-events:none; position:absolute; transform-origin:bottom center; width:4px; z-index:1;
    animation:flower-sway 3.4s ease-in-out var(--flower-delay) infinite alternate;
}
.aquatic-flower::after { content:""; height:var(--flower-size); left:50%; position:absolute; top:calc(var(--flower-size) * -.68); transform:translateX(-50%); width:var(--flower-size); }
.water-lily::after { background:radial-gradient(circle at center,#f5bf3c 0 18%,transparent 20%),conic-gradient(from 12deg,#fff 0 12%,#eaa8db 13% 24%,#fff 25% 37%,#eaa8db 38% 49%,#fff 50% 62%,#eaa8db 63% 74%,#fff 75% 87%,#eaa8db 88% 100%); border-radius:50%; box-shadow:0 2px 4px rgba(79,38,84,.25); }
.lotus::after { background:radial-gradient(circle at center,#ffe470 0 16%,transparent 18%),conic-gradient(from 0deg,#f28eb9 0 10%,transparent 11% 16%,#d75c9e 17% 28%,transparent 29% 34%,#f9b2cd 35% 46%,transparent 47% 52%,#d75c9e 53% 64%,transparent 65% 70%,#f9b2cd 71% 82%,transparent 83% 88%,#d75c9e 89% 100%); clip-path:polygon(50% 0,61% 29%,88% 12%,71% 39%,100% 50%,71% 61%,88% 88%,61% 71%,50% 100%,39% 71%,12% 88%,29% 61%,0 50%,29% 39%,12% 12%,39% 29%); }
.sea-anemone::after { background:repeating-conic-gradient(from 0deg,#f6b45a 0 8deg,transparent 9deg 18deg); border-radius:50%; box-shadow:inset 0 0 0 4px #d87542; }
.flower-1 { --flower-left:15%; --flower-stem:25px; --flower-size:18px; --flower-delay:-.6s; }.flower-2 { --flower-left:47%; --flower-stem:20px; --flower-size:16px; --flower-delay:-1.7s; }.flower-3 { --flower-left:82%; --flower-stem:27px; --flower-size:19px; --flower-delay:-2.5s; }
.flower-4 { --flower-left:31%; --flower-stem:30px; --flower-size:22px; --flower-delay:-1.1s; }.flower-5 { --flower-left:63%; --flower-stem:23px; --flower-size:18px; --flower-delay:-2.2s; }.flower-6 { --flower-left:93%; --flower-stem:26px; --flower-size:20px; --flower-delay:-.3s; }
.flower-7 { --flower-left:4%; --flower-stem:19px; --flower-size:16px; --flower-delay:-1.4s; }.flower-8 { --flower-left:54%; --flower-stem:26px; --flower-size:19px; --flower-delay:-2.8s; }.flower-9 { --flower-left:74%; --flower-stem:21px; --flower-size:17px; --flower-delay:-.9s; }
@keyframes flower-sway { from { transform:rotate(-9deg); } to { transform:rotate(9deg); } }
.water-snake {
    background:repeating-linear-gradient(90deg,#315b46 0 8px,#a9b45a 8px 12px,#315b46 12px 18px); border:1px solid rgba(18,55,42,.7); border-radius:999px; bottom:var(--snake-bottom); height:8px; left:0; pointer-events:none; position:absolute; width:var(--snake-length); z-index:1;
    animation:snake-slither var(--snake-duration) linear var(--snake-delay) infinite;
}
.water-snake::before { background:linear-gradient(135deg,#6d9350,#263f34); border-radius:55% 45% 45% 55%; content:""; height:11px; left:calc(var(--snake-length) - 2px); position:absolute; top:-1.5px; width:14px; }
.water-snake::after { background:#e85e67; box-shadow:4px 0 #e85e67; content:""; height:1px; left:calc(var(--snake-length) + 9px); position:absolute; top:3px; width:7px; }
.water-snake-1 { --snake-left:4%; --snake-bottom:18px; --snake-length:86px; --snake-duration:18s; --snake-delay:-3s; }
.water-snake-2 { --snake-left:35%; --snake-bottom:27px; --snake-length:64px; --snake-duration:14s; --snake-delay:-8s; }
.water-snake-3 { --snake-left:61%; --snake-bottom:14px; --snake-length:96px; --snake-duration:23s; --snake-delay:-12s; }
.water-snake-4 { --snake-left:82%; --snake-bottom:31px; --snake-length:55px; --snake-duration:16s; --snake-delay:-6s; }
@keyframes snake-slither {
    0% { transform:translateX(0) translateY(0) rotate(-2deg); }
    12.5% { transform:translateX(8.75vw) translateY(-5px) rotate(3deg); }
    25% { transform:translateX(17.5vw) translateY(0) rotate(-3deg); }
    37.5% { transform:translateX(26.25vw) translateY(5px) rotate(3deg); }
    50% { transform:translateX(35vw) translateY(0) rotate(-3deg); }
    62.5% { transform:translateX(43.75vw) translateY(-5px) rotate(3deg); }
    75% { transform:translateX(52.5vw) translateY(0) rotate(-3deg); }
    87.5% { transform:translateX(61.25vw) translateY(5px) rotate(3deg); }
    100% { transform:translateX(70vw) translateY(0) rotate(-2deg); }
}
.octopus {
    bottom:38px; height:28.5px; left:var(--octopus-left,18%); pointer-events:none; position:absolute; width:31px; z-index:1;
    animation:octopus-sway 4s ease-in-out infinite;
}
.sitting-octopus { animation:octopus-bottom-crawl 12s ease-in-out infinite alternate; }
.sitting-octopus-1 { --octopus-left:18%; }
.sitting-octopus-2 { --octopus-left:72%; animation-delay:-6s; }
.swimming-octopus {
    bottom:auto; top:var(--octopus-top); animation:octopus-swim var(--octopus-duration) ease-in-out var(--octopus-delay) infinite;
}
.octopus-head {
    background:radial-gradient(circle at 33% 32%,#fff 0 1.5px,transparent 1.75px),radial-gradient(circle at 67% 32%,#fff 0 1.5px,transparent 1.75px),linear-gradient(135deg,#e979bd,#974d9e);
    border-radius:55% 55% 42% 42%; box-shadow:inset 5px 4px 7px rgba(255,255,255,.32),0 3px 6px rgba(68,24,83,.3);
    height:19px; left:6.5px; position:absolute; top:0; width:19px;
}
.octopus-head::after { background:#293354; border-radius:50%; box-shadow:6.5px 0 #293354; content:""; height:2px; left:5px; position:absolute; top:6px; width:2px; }
.octopus-tentacle {
    background:linear-gradient(90deg,#a852a7,#ed82c2); border-radius:999px; bottom:0; height:14px; left:var(--tentacle-left); position:absolute; transform:rotate(var(--tentacle-angle)); transform-origin:top center; width:4.5px;
    animation:octopus-tentacle-wave 1.8s ease-in-out var(--tentacle-delay) infinite alternate;
}
.octopus-tentacle:nth-of-type(2) { --tentacle-left:5px; --tentacle-angle:-28deg; --tentacle-delay:-.2s; }
.octopus-tentacle:nth-of-type(3) { --tentacle-left:9px; --tentacle-angle:-16deg; --tentacle-delay:-.5s; }
.octopus-tentacle:nth-of-type(4) { --tentacle-left:13.5px; --tentacle-angle:-5deg; --tentacle-delay:-.8s; }
.octopus-tentacle:nth-of-type(5) { --tentacle-left:18px; --tentacle-angle:8deg; --tentacle-delay:-1.1s; }
.octopus-tentacle:nth-of-type(6) { --tentacle-left:22px; --tentacle-angle:18deg; --tentacle-delay:-1.4s; }
.octopus-tentacle:nth-of-type(7) { --tentacle-left:25.5px; --tentacle-angle:29deg; --tentacle-delay:-1.7s; }
@keyframes octopus-sway { 0%, 100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(2deg); } }
@keyframes octopus-tentacle-wave { from { transform:rotate(var(--tentacle-angle)); } to { transform:rotate(calc(var(--tentacle-angle) + 13deg)); } }
@keyframes octopus-bottom-crawl {
    0% { transform:translateX(-2vw) translateY(0) rotate(-3deg); }
    25% { transform:translateX(2vw) translateY(-2px) rotate(2deg); }
    50% { transform:translateX(6vw) translateY(0) rotate(-2deg); }
    75% { transform:translateX(10vw) translateY(-2px) rotate(2deg); }
    100% { transform:translateX(14vw) translateY(0) rotate(-3deg); }
}
@keyframes octopus-swim {
    0%, 100% { transform:translateX(0) translateY(0) rotate(-3deg); }
    25% { transform:translateX(12vw) translateY(-12px) rotate(4deg); }
    50% { transform:translateX(4vw) translateY(8px) rotate(-3deg); }
    75% { transform:translateX(-9vw) translateY(-6px) rotate(4deg); }
}
.bubble-water-source {
    background:
        radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.58) 0 5%,transparent 6%),
        radial-gradient(ellipse at 52% 0%,rgba(255,255,255,.5) 0 7%,transparent 8%),
        radial-gradient(ellipse at 84% 0%,rgba(255,255,255,.55) 0 5%,transparent 6%),
        linear-gradient(180deg,rgba(157,231,240,.12),rgba(22,167,193,.32));
    border-top:2px solid rgba(221,252,255,.82); box-shadow:inset 0 14px 24px rgba(255,255,255,.22),0 -8px 22px rgba(16,151,181,.08);
    height:100px; overflow:hidden; pointer-events:none; position:relative;
}
.bubble-water-source::before {
    background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 14px,rgba(237,255,255,.5) 15px 17px,transparent 18px 34px);
    content:""; height:30px; left:0; opacity:.7; position:absolute; right:0; top:-8px;
}
@keyframes bubble-pair-separate {
    0%, 42% { transform:translate(0,0); }
    63%, 100% { transform:translate(var(--separate-x),var(--separate-y)); }
}
@keyframes bubble-pair-crawl {
    0% { opacity:.78; transform:translate(0,0) scale(1); }
    21% { transform:translate(var(--turn-one),-28px) scale(1); }
    42% { transform:translate(var(--turn-two),-58px) scale(1); }
    63% { transform:translate(var(--turn-one),-88px) scale(1); }
    83.333% { opacity:.78; transform:translate(var(--turn-two),-118px) scale(1); }
    94% { opacity:.42; transform:translate(var(--turn-one),-130px) scale(1.42); }
    100% { opacity:0; transform:translate(var(--turn-one),-134px) scale(1.58); }
}

@media (max-width:768px) {
    body { padding-top:74px; }.main-header { padding:8px 0; }.logo a { font-size:1em; }.logo img { height:42px; }.menu-toggle span { background:var(--lb-navy); }
    .main-nav { background:rgba(255,255,255,.98)!important; border-top-color:var(--lb-line)!important; top:74px!important; }.main-nav ul li a { border-radius:8px; }
    .content-section { padding:64px 0; }.section-title { margin-bottom:34px; }.hero-section { min-height:440px; padding:70px 0; }.about-text { min-width:0; }.about-snapshot-content { gap:30px; }
    .payment-options { grid-template-columns:1fr; }
    .payment-option, .payment-steps { padding:20px 18px; }
    .main-nav ul li.dropdown > .nav-dropdown-toggle { width:100%; justify-content:center; }
    .main-nav ul li.dropdown .dropdown-menu { display:none !important; position:static !important; box-shadow:none !important; background:#f8fdfe !important; border:1px solid #d9edf2 !important; border-radius:16px !important; margin:8px 0 0 !important; padding:8px 0 !important; width:100% !important; }
    .main-nav ul li.dropdown.open .dropdown-menu { display:block !important; }
    .main-nav ul li.dropdown .dropdown-menu li { text-align:center; }
    .main-nav ul li.dropdown .dropdown-menu li a { padding:10px 18px !important; }
    .main-nav ul li.dropdown .dropdown-menu li a::before { display:none !important; content:none !important; }
    .main-nav ul li.dropdown .dropdown-menu .nested-dropdown-toggle { justify-content:center; padding:10px 18px !important; text-align:center; }
    .main-nav ul li.dropdown .dropdown-menu .nested-dropdown-toggle::before,
    .main-nav ul li.dropdown .dropdown-menu .nested-dropdown-toggle::after { display:none; }
    .main-nav ul li .nested-dropdown-menu { background:#e4f7fb; border:1px solid #8bd8e3; border-radius:12px; box-shadow:none; display:none !important; left:auto; margin:4px 12px 0; min-width:0; padding:4px 0; position:static; width:calc(100% - 24px); }
    .main-nav ul li.nested-dropdown.open > .nested-dropdown-menu { display:block !important; }
    .main-nav ul li.nested-dropdown .nested-dropdown-menu a { background:#c9f0f5; color:#056987 !important; font-size:.9em; font-weight:800; padding:11px 18px !important; }
    .main-nav ul li.nested-dropdown .nested-dropdown-menu a:hover { background:#a9e4ed; color:#034e69 !important; }
    .comparison-intro { margin:-16px auto 26px; }
    .flow-diagram { gap:12px; grid-template-columns:1fr; margin-bottom:18px; }
    .flow-step { padding:20px 18px 18px; }
    .flow-step h3 { font-size:1.06em; }
    .flow-arrow { height:44px; }
    .flow-arrow::before {
        height:100%;
        left:50%;
        top:0;
        width:3px;
    }
    .flow-arrow::after {
        border-left:7px solid transparent;
        border-right:7px solid transparent;
        border-top:10px solid #087eac;
        border-bottom:0;
        height:0;
        left:50%;
        top:auto;
        bottom:0;
        right:auto;
        transform:translateX(-50%);
        width:0;
        animation:none;
    }
    .flow-outcomes { grid-template-columns:1fr; }
    .flow-note { padding:16px 16px; }
    .comparison-diagram { gap:12px; grid-template-columns:1fr; margin-bottom:26px; }
    .diagram-bridge { min-height:86px; }
    .diagram-line { height:8px; width:72%; }
    .diagram-node { height:64px; width:64px; }
    .diagram-column { padding:20px 18px 18px; }
    .diagram-title { font-size:1.02em; }
    .diagram-step { padding:12px 14px 12px 16px; }
    .model-comparison { gap:16px; grid-template-columns:1fr; }
    .comparison-arrow { min-height:92px; margin-bottom:20px; z-index:2; }
    .comparison-arrow::before { height:8px; width:78%; }
    .comparison-arrow-core { height:64px; width:64px; }
    .comparison-arrow-core::before { left:23px; top:20px; }
    .comparison-arrow-label { bottom:auto; top:100%; }
    .model-panel { padding:24px 20px 22px; }
    .model-panel h3 { font-size:1.28em; }
    .model-panel li { padding:13px 12px 13px 44px; }
    #source-code .source-code-callout { padding:30px 20px!important; } #source-code .source-code-callout h2 { font-size:2em; } #scroll-to-top { bottom:18px; right:18px; }

    /* Keep the animated water life subtle and uncluttered on small screens. */
    .swimming-fish, .swimming-shark, .octopus, .water-snake { zoom:.52; }
    .water-swimmer, .fishing-boat { zoom:.62; }
    .bubble, .bubble-solo, .bubble-pair { zoom:.7; }
    .sea-grass, .aquatic-flower { zoom:.65; }
}