/* About Us only: quiet material texture and motion polish. */
.rattan-native-about {
    --about-warm: #fcfbf8;
    --about-sand: #f7f3eb;
    --about-line: rgba(214, 167, 105, .16);
    --about-ink-line: rgba(16, 39, 34, .08);
}

/* Background language: soft gradients, a single arc group and restrained weave lines. */
.rattan-native-about .rattan-about-hero,
.rattan-native-about .rattan-about-facts,
.rattan-native-about .rattan-about-process,
.rattan-native-about .rattan-cta-band,
.rattan-native-about > .rattan-section:has(.rattan-about-story),
.rattan-native-about > .rattan-section:has(.rattan-about-material),
.rattan-native-about > .rattan-section:has(.rattan-about-capability),
.rattan-native-about > .rattan-section:has(.rattan-about-oem),
.rattan-native-about > .rattan-section:has(.rattan-about-markets) {
    position: relative;
    isolation: isolate;
}

.rattan-native-about .rattan-about-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(215, 177, 119, .12), transparent 28%),
        linear-gradient(118deg, #0d2822 0%, #153a31 58%, #23453a 100%);
}

.rattan-native-about .rattan-about-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -250px;
    top: -220px;
    border: 1px solid rgba(238, 220, 190, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(238, 220, 190, .035), 0 0 0 54px rgba(238, 220, 190, .025);
    pointer-events: none;
}

.rattan-native-about .rattan-about-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 0 56%;
    background: repeating-linear-gradient(135deg, rgba(232, 205, 164, .07) 0 1px, transparent 1px 24px);
    opacity: .55;
    pointer-events: none;
}

.rattan-native-about .rattan-about-hero-grid,
.rattan-native-about .rattan-cta-band > .rattan-wrap {
    position: relative;
    z-index: 1;
}

.rattan-native-about .rattan-about-facts {
    background: linear-gradient(180deg, #fff 0%, var(--about-warm) 100%);
}

.rattan-native-about .rattan-about-facts::after {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    right: -230px;
    top: -170px;
    border: 1px solid var(--about-line);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(214, 167, 105, .045), 0 0 0 44px rgba(214, 167, 105, .025);
    pointer-events: none;
}

.rattan-native-about .rattan-about-process {
    background:
        radial-gradient(ellipse at 88% 42%, rgba(214, 167, 105, .10), transparent 31%),
        linear-gradient(120deg, #0f2c25 0%, #12382f 100%);
}

.rattan-native-about .rattan-about-process::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(235, 211, 174, .12), transparent);
    pointer-events: none;
}

.rattan-native-about > .rattan-section:has(.rattan-about-story),
.rattan-native-about > .rattan-section:has(.rattan-about-capability) {
    background: var(--about-warm);
}

.rattan-native-about > .rattan-section:has(.rattan-about-material),
.rattan-native-about > .rattan-section:has(.rattan-about-oem),
.rattan-native-about > .rattan-section:has(.rattan-about-markets) {
    background: linear-gradient(180deg, var(--about-sand) 0%, #f5f1e8 100%);
}

.rattan-native-about > .rattan-section:has(.rattan-about-story)::before,
.rattan-native-about > .rattan-section:has(.rattan-about-capability)::before,
.rattan-native-about > .rattan-section:has(.rattan-about-material)::before,
.rattan-native-about > .rattan-section:has(.rattan-about-oem)::before,
.rattan-native-about > .rattan-section:has(.rattan-about-markets)::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -190px;
    bottom: -170px;
    border: 1px solid var(--about-line);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(214, 167, 105, .035);
    pointer-events: none;
}

.rattan-native-about > .rattan-section:has(.rattan-about-material)::after,
.rattan-native-about > .rattan-section:has(.rattan-about-oem)::after,
.rattan-native-about > .rattan-section:has(.rattan-about-markets)::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -150px;
    top: -130px;
    border: 1px solid rgba(16, 39, 34, .055);
    border-radius: 50%;
    pointer-events: none;
}

.rattan-native-about > .rattan-section:has(.rattan-about-story) > .rattan-wrap,
.rattan-native-about > .rattan-section:has(.rattan-about-material) > .rattan-wrap,
.rattan-native-about > .rattan-section:has(.rattan-about-capability) > .rattan-wrap,
.rattan-native-about > .rattan-section:has(.rattan-about-oem) > .rattan-wrap,
.rattan-native-about > .rattan-section:has(.rattan-about-markets) > .rattan-wrap {
    position: relative;
    z-index: 1;
}

.rattan-native-about .rattan-cta-band {
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 20%, rgba(255, 242, 214, .14), transparent 24%),
        linear-gradient(105deg, #ca7427 0%, #df8a35 100%);
}

.rattan-native-about .rattan-cta-band::before {
    left: auto;
    right: -120px;
    top: -200px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 247, 227, .23);
    border-radius: 50%;
    transform: none;
    box-shadow: 0 0 0 24px rgba(255, 247, 227, .06), 0 0 0 52px rgba(255, 247, 227, .04);
}

.rattan-native-about .rattan-cta-band::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 230px;
    height: 150px;
    background: repeating-linear-gradient(135deg, rgba(255, 247, 227, .09) 0 1px, transparent 1px 22px);
    pointer-events: none;
}

/* JS adds the ready class only after all targets are marked, so a script failure keeps content visible. */
.rattan-native-about.rattan-about-motion-ready .rattan-about-reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity .58s ease, transform .58s ease;
    transition-delay: var(--about-delay, 0ms);
}

.rattan-native-about.rattan-about-motion-ready .rattan-about-reveal--left { transform: translate3d(-22px, 0, 0); }
.rattan-native-about.rattan-about-motion-ready .rattan-about-reveal--right { transform: translate3d(22px, 0, 0); }
.rattan-native-about.rattan-about-motion-ready .rattan-about-reveal.is-visible { opacity: 1; transform: none; }

.rattan-native-about .rattan-stat-grid > div,
.rattan-native-about .rattan-about-advantage-grid .rattan-module-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.rattan-native-about .rattan-stat-grid > div:hover,
.rattan-native-about .rattan-about-advantage-grid .rattan-module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(16, 39, 34, .12);
}

.rattan-native-about .rattan-about-advantage-grid .rattan-module-card:hover { border-top-color: var(--rattan-accent); }
.rattan-native-about .rattan-cta-band .rattan-button::after { transition: transform .24s ease; }
.rattan-native-about .rattan-cta-band .rattan-button:hover::after,
.rattan-native-about .rattan-cta-band .rattan-button:focus-visible::after { transform: translateX(4px); }

@media (max-width: 700px) {
    .rattan-native-about .rattan-about-hero::before { width: 360px; height: 360px; right: -220px; top: -150px; opacity: .7; }
    .rattan-native-about .rattan-about-hero::after { inset: 0; opacity: .18; }
    .rattan-native-about .rattan-about-facts::after { width: 280px; height: 280px; right: -210px; top: -120px; }
    .rattan-native-about .rattan-about-process::after { opacity: .45; }
    .rattan-native-about > .rattan-section:has(.rattan-about-story)::before,
    .rattan-native-about > .rattan-section:has(.rattan-about-capability)::before,
    .rattan-native-about > .rattan-section:has(.rattan-about-material)::before,
    .rattan-native-about > .rattan-section:has(.rattan-about-oem)::before,
    .rattan-native-about > .rattan-section:has(.rattan-about-markets)::before { opacity: .45; }
    .rattan-native-about > .rattan-section:has(.rattan-about-material)::after,
    .rattan-native-about > .rattan-section:has(.rattan-about-oem)::after,
    .rattan-native-about > .rattan-section:has(.rattan-about-markets)::after { opacity: .35; }
    .rattan-native-about .rattan-cta-band::after { opacity: .45; }
    .rattan-native-about.rattan-about-motion-ready .rattan-about-reveal--left,
    .rattan-native-about.rattan-about-motion-ready .rattan-about-reveal--right { transform: translate3d(0, 16px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rattan-native-about .rattan-about-reveal,
    .rattan-native-about .rattan-stat-grid > div,
    .rattan-native-about .rattan-about-advantage-grid .rattan-module-card,
    .rattan-native-about .rattan-cta-band .rattan-button::after { transition: none !important; }
    .rattan-native-about.rattan-about-motion-ready .rattan-about-reveal,
    .rattan-native-about.rattan-about-motion-ready .rattan-about-reveal--left,
    .rattan-native-about.rattan-about-motion-ready .rattan-about-reveal--right { opacity: 1; transform: none; }
}