*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#f8fcfe;
    color:#073b59;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

/* =========================
   HEADER
   ========================= */

.site-header{
    height:92px;
    padding:0 clamp(22px,5vw,78px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:absolute;
    inset:0 0 auto;
    z-index:20;
}

.brand img{
    width:162px;
    height:58px;
    object-fit:contain;
    mix-blend-mode:multiply;
}

.site-header nav{
    display:flex;
    align-items:center;
    gap:clamp(14px,2vw,32px);
    font-size:13px;
    font-weight:750;
}

.site-header nav>a:not(.nav-cta){
    position:relative;
    padding:10px 0;
}

.site-header nav>a:not(.nav-cta):after{
    content:"";
    height:2px;
    position:absolute;
    left:0;
    right:100%;
    bottom:4px;
    background:var(--aqua);
    transition:.25s;
}

.site-header nav>a:hover:after{
    right:0;
}

.nav-cta{
    display:flex;
    gap:10px;
    align-items:center;
    color:#fff;
    background:#063a57;
    border-radius:999px;
    padding:13px 20px;
    box-shadow:0 12px 28px #002d4d25;
}

.menu-button{
    display:none;
    border:0;
    background:#fff;
    color:#063a57;
    width:44px;
    height:44px;
    border-radius:50%;
    font-size:21px;
}

/* =========================
   HERO
   ========================= */

.hero-section{
    min-height:790px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(400px,1fr);
    align-items:center;
    gap:5vw;
    padding:130px clamp(24px,7vw,112px) 72px;
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        radial-gradient(circle at 82% 22%,#87f4ee80,transparent 27%),
        linear-gradient(135deg,#edfbff 0%,#dff8ff 54%,#d5fff8 100%);
}

/* MATIKAN BENTUK PUTIH BESAR */
.hero-section:before,
.hero-section:after{
    display:none !important;
    content:none !important;
}

/* =========================
   HERO BANNER
   ========================= */

.hero-banner-section{
    display:block !important;
    min-height:auto !important;
    height:auto !important;
    padding:120px 7vw 45px !important;
    overflow:hidden !important;

    background:
        radial-gradient(circle at 82% 22%,#87f4ee80,transparent 27%),
        linear-gradient(135deg,#edfbff 0%,#dff8ff 54%,#d5fff8 100%) !important;
}

.hero-banner-link{
    display:block !important;
    max-width:1200px !important;
    margin:0 auto !important;
}

.hero-banner-image{
    width:100% !important;
    height:auto !important;
    max-width:1200px !important;
    margin:0 auto !important;
    border-radius:34px !important;
    box-shadow:0 35px 70px #006b9e2d !important;
}

/* =========================
   BUBBLE
   ========================= */

.bubble{
    position:absolute;
    border:1px solid #fff9;
    border-radius:50%;
    background:#fff3;
    box-shadow:
        inset 8px 8px 20px #fff9,
        inset -10px -10px 20px #00a5d822;
    backdrop-filter:blur(3px);
    animation:float 7s ease-in-out infinite;
}

.bubble-one{
    width:76px;
    height:76px;
    left:47%;
    top:19%;
}

.bubble-two{
    width:38px;
    height:38px;
    right:4%;
    top:57%;
    animation-delay:-2s;
}

/* =========================
   HERO CONTENT
   ========================= */

.hero-copy{
    max-width:650px;
    position:relative;
    z-index:2;
}

.eyebrow{
    color:var(--brand);
    letter-spacing:.2em;
    font-size:12px;
    font-weight:850;
    margin:0 0 20px;
}

.hero-copy h1{
    margin:0;
    color:#063751;
    font-size:clamp(54px,6.5vw,98px);
    line-height:.96;
    letter-spacing:-.064em;
    font-weight:820;
}

.hero-copy>p{
    font-size:18px;
    line-height:1.75;
    max-width:575px;
    color:#3b6579;
    margin:28px 0;
}

.hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}

.button{
    border:0;
    min-height:52px;
    padding:0 25px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    font-weight:800;
    transition:.2s;
}

.button:hover{
    transform:translateY(-3px);
}

.button.primary{
    color:#fff;
    background:linear-gradient(135deg,var(--brand),#004eaa);
    box-shadow:0 16px 35px #0077c83b;
}

.button.ghost{
    background:#ffffffaa;
    border:1px solid #fff;
    color:#074563;
    backdrop-filter:blur(10px);
}

.button.white{
    background:#fff;
    color:#055580;
}

.trust-row{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:38px;
    font-size:12px;
    color:#416b7e;
}

/* =========================
   HERO VISUAL
   ========================= */

.hero-visual{
    position:relative;
    perspective:1200px;
    z-index:2;
}

.hero-visual>img{
    width:100%;
    border-radius:34px;
    box-shadow:
        0 44px 80px #006b9e2d,
        0 10px 24px #006b9e1f;
    transform:rotateY(-8deg) rotateX(3deg);
    animation:heroFloat 7s ease-in-out infinite;
    position:relative;
    z-index:2;
}

.image-glow{
    position:absolute;
    inset:5% -4% -7% 8%;
    border-radius:50%;
    background:linear-gradient(135deg,var(--aqua),#188be0);
    filter:blur(50px);
    opacity:.35;
}

.float-card{
    position:absolute;
    z-index:3;
    background:#fffffff2;
    box-shadow:0 20px 50px #00486d30;
    border:1px solid #fff;
    backdrop-filter:blur(14px);
    border-radius:20px;
    padding:15px 18px;
    display:flex;
    align-items:center;
    gap:10px;
    animation:float 5s ease-in-out infinite;
}

.float-card b{
    font-size:27px;
    color:var(--brand);
}

.float-card small{
    max-width:85px;
    font-weight:700;
    line-height:1.2;
}

.card-top{
    right:-4%;
    top:8%;
}

.card-bottom{
    left:-9%;
    bottom:8%;
    animation-delay:-1.5s;
}

/* =========================
   RUNNING TEXT
   ========================= */

.marquee{
    position:relative;
    z-index:10;

    background:#063a57;
    color:#c7fff7;

    transform:rotate(-1.5deg) scale(1.02);

    padding:19px 0;

    overflow:hidden;

    font-weight:800;
    letter-spacing:.18em;
    font-size:12px;

    margin:0 !important;
}

.marquee div{
    width:max-content;
    animation:marquee 24s linear infinite;
}

/* =========================
   SECTION 01
   ========================= */

.story-intro{
    position:relative !important;
    z-index:20 !important;

    max-width:1240px;
    margin:0 auto;

    padding:80px 48px 70px !important;

    display:grid;
    grid-template-columns:90px 1.4fr 1fr;
    gap:40px;
    align-items:end;

    background:#f8fcfe;
}

.section-number{
    font-family:Georgia,serif;
    font-style:italic;
    color:#8ab5c5;
    font-size:14px;
}

.story-intro h2,
.section-heading h2,
.feature h2{
    margin:0;
    color:#073a54;
    letter-spacing:-.045em;
    font-size:clamp(42px,5vw,72px);
    line-height:1.04;
}

.story-intro h2 em,
.contact-section h2 em{
    color:var(--brand);
    font-family:Georgia,serif;
    font-weight:400;
}

.story-intro>p,
.section-heading>p{
    line-height:1.8;
    color:#557785;
    max-width:390px;
}

/* =========================
   FEATURE
   ========================= */

.feature{
    max-width:1240px;
    margin:0 auto;
    padding:70px 48px;
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:9vw;
    align-items:center;
}

.feature.reverse .feature-image{
    order:2;
}

.feature-image{
    position:relative;
    perspective:900px;
}

.feature-image img{
    border-radius:28px;
    box-shadow:0 40px 70px #00628d26;
    transform:rotateY(4deg) rotateX(2deg);
    position:relative;
    z-index:2;
    transition:.45s;
}

.feature.reverse img{
    transform:rotateY(-4deg) rotateX(2deg);
}

.feature-image:hover img{
    transform:rotateY(0) translateY(-8px);
}

.depth-layer{
    position:absolute;
    inset:18px -18px -18px 18px;
    border-radius:28px;
    background:linear-gradient(135deg,var(--aqua),var(--brand));
    opacity:.25;
}

.feature-copy .section-number{
    display:block;
    margin-bottom:55px;
}

.feature-copy h2{
    font-size:clamp(38px,4vw,62px);
}

.feature-copy>p:not(.eyebrow){
    font-size:17px;
    color:#557785;
    line-height:1.8;
    margin:24px 0 28px;
}

.text-link{
    color:var(--brand);
    font-weight:850;
    border-bottom:1px solid #4fb8df;
    padding-bottom:7px;
}

/* =========================
   PRODUCTS
   ========================= */

.products{
    margin-top:100px;
    padding-bottom:120px;
    background:linear-gradient(180deg,#e7faff,#c8f4ff);
}

.products .section-heading{
    padding-top:120px;
    grid-template-columns:1.5fr 1fr;
}

.section-heading{
    max-width:1240px;
    margin:0 auto;
    padding:80px 48px;
    display:grid;
    gap:40px;
}

.product-grid{
    max-width:1240px;
    margin:0 auto;
    padding:0 48px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.product-card{
    border-radius:28px;
    padding:18px 18px 25px;
    background:#ffffffbb;
    border:1px solid #fff;
    box-shadow:0 20px 50px #0077aa14;
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.product-card:hover{
    transform:translateY(-12px) rotateX(2deg);
    box-shadow:0 35px 70px #0077aa28;
}

.product-index{
    position:absolute;
    right:24px;
    top:25px;
    z-index:2;
    background:#fff;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font:italic 13px Georgia;
}

.product-image{
    border-radius:19px;
    overflow:hidden;
    aspect-ratio:1.42;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.product-card:hover img{
    transform:scale(1.05);
}

.product-card>p{
    font-size:13px;
    color:#668593;
    margin:21px 6px 8px;
}

.product-card h3{
    margin:0 6px 20px;
    font-size:25px;
    letter-spacing:-.03em;
}

.product-card>div:last-child{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0 6px;
}

.product-card strong{
    color:var(--brand);
}

.round-arrow{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#063a57;
    color:#fff;
}

/* =========================
   GALLERY
   ========================= */

.gallery-section{
    padding-bottom:130px;
}

.gallery-section .section-heading{
    grid-template-columns:1fr;
    padding-bottom:55px;
}

.gallery-grid{
    max-width:1240px;
    padding:0 48px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:280px;
    gap:20px;
}

.gallery-grid figure{
    margin:0;
    position:relative;
    border-radius:24px;
    overflow:hidden;
}

.gallery-grid figure.wide{
    grid-column:span 2;
}

.gallery-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s;
}

.gallery-grid figure:hover img{
    transform:scale(1.05);
}

.gallery-grid figcaption{
    position:absolute;
    inset:auto 0 0;
    padding:35px 22px 18px;
    color:#fff;
    background:linear-gradient(transparent,#003953d9);
    font-weight:750;
    display:flex;
    gap:13px;
}

.gallery-grid figcaption span{
    font:italic 12px Georgia;
}

/* =========================
   CONTACT
   ========================= */

.contact-section{
    margin:0 34px 34px;
    border-radius:40px;
    padding:110px 30px;
    text-align:center;
    color:#fff;

    background:
        radial-gradient(circle at 50% 0,#31d9dd 0,transparent 35%),
        linear-gradient(135deg,#067bc8,#004e96 75%);

    position:relative;
    overflow:hidden;
}

.contact-section .eyebrow{
    color:#cafffa;
}

.contact-section h2{
    font-size:clamp(48px,6vw,82px);
    line-height:1;
    letter-spacing:-.055em;
    margin:0;
}

.contact-section h2 em{
    color:#bafff6;
}

.contact-section>p:not(.eyebrow){
    color:#dffcff;
    margin:25px 0;
}

.contact-orb{
    width:58px;
    height:58px;
    margin:0 auto 24px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff2;
    border:1px solid #fff4;
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
    padding:70px clamp(28px,7vw,110px) 30px;
    display:grid;
    grid-template-columns:1.5fr repeat(3,1fr);
    gap:50px;
    background:#f3fbfd;
    color:#4a6d7d;
}

.footer-brand img{
    width:190px;
    mix-blend-mode:multiply;
}

.site-footer h4{
    margin:0 0 19px;
    color:#073a54;
}

.site-footer>div:not(.footer-brand){
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:13px;
}

.copyright{
    grid-column:1/-1;
    border-top:1px solid #d9edf2;
    padding-top:25px;
    font-size:12px;
}

/* =========================
   OPENING
   ========================= */

.opening{
    position:fixed;
    inset:0;
    z-index:100;
    background:linear-gradient(145deg,#e5fbff,#c8fff7);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:.55s;
}

.opening.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.opening img{
    width:min(390px,70vw);
    mix-blend-mode:multiply;
    z-index:2;
    animation:logoIn .8s ease both;
}

.opening-line{
    height:2px;
    background:var(--brand);
    animation:lineIn .9s .45s ease forwards;
}

.opening p{
    font-size:10px;
    letter-spacing:.35em;
    font-weight:900;
    opacity:0;
    animation:fadeIn .5s .75s forwards;
}

.opening-wave{
    position:absolute;
    width:75vw;
    height:75vw;
    border-radius:46%;
    background:#35d8db22;
    animation:spin 9s linear infinite;
}

/* =========================
   DETAIL PAGE
   ========================= */

.detail-main{
    min-height:75vh;
    background:linear-gradient(135deg,#f2fcff,#e4fff9);
    padding:145px max(24px,calc((100vw - 1250px)/2)) 120px;
}

.back-link{
    display:inline-block;
    color:#628291;
    font-size:13px;
    margin-bottom:45px;
}

.detail-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:8vw;
    align-items:center;
}

.detail-copy h1{
    font-size:clamp(50px,6vw,88px);
    line-height:.96;
    letter-spacing:-.055em;
    margin:0;
    color:#063a57;
}

.detail-lead{
    font-size:21px;
    line-height:1.6;
    color:#497387;
}

.detail-body{
    color:#577986;
    line-height:1.85;
}

.detail-price{
    display:block;
    color:var(--brand);
    font-size:24px;
    margin:28px 0 16px;
}

.detail-image img{
    border-radius:34px;
    box-shadow:0 35px 70px #006a9726;
    transform:rotateY(-4deg);
}

/* =========================
   PREVIEW
   ========================= */

.preview-banner{
    position:fixed;
    z-index:200;
    left:50%;
    top:10px;
    transform:translateX(-50%);
    padding:9px 18px;
    border-radius:999px;
    background:#ffcc55;
    color:#593d00;
    font-size:11px;
    font-weight:900;
}

.preview-banner~.site-header{
    top:32px;
}

/* =========================
   ANIMATIONS
   ========================= */

@keyframes heroFloat{
    50%{
        transform:rotateY(-4deg) rotateX(1deg) translateY(-12px);
    }
}

@keyframes float{
    50%{
        transform:translateY(-12px);
    }
}

@keyframes marquee{
    to{
        transform:translateX(-50%);
    }
}

@keyframes logoIn{
    from{
        opacity:0;
        transform:translateY(20px) scale(.92);
    }
}

@keyframes lineIn{
    to{
        width:min(440px,70vw);
    }
}

@keyframes fadeIn{
    to{
        opacity:.68;
    }
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

/* =========================
   WHATSAPP
   ========================= */

.whatsapp-float{
    position:fixed;
    right:26px;
    bottom:26px;
    z-index:70;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 16px 8px 8px;
    border-radius:999px;
    background:#fff;
    color:#087f34;
    font-weight:850;
    font-size:13px;
    box-shadow:0 15px 38px #004d2438;
    border:1px solid #d7f7e1;
    transition:.2s;
}

.whatsapp-float:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px #004d2448;
}

.whatsapp-float img{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:contain;
}

/* =========================
   MARKET
   ========================= */

.market-hero{
    padding:165px 24px 90px;
    text-align:center;

    background:
        radial-gradient(circle at 50% 25%,#86f3e880,transparent 32%),
        linear-gradient(135deg,#edfbff,#d5fff8);
}

.market-hero h1{
    margin:0;
    color:#063751;
    font-size:clamp(58px,8vw,105px);
    line-height:.92;
    letter-spacing:-.065em;
}

.market-hero h1 em{
    font-family:Georgia,serif;
    font-weight:400;
    color:var(--brand);
}

.market-hero>p:last-child{
    color:#557785;
    font-size:18px;
    margin:28px auto 0;
}

.market-products{
    margin-top:0;
    padding-top:90px;
    min-height:55vh;
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:900px){

    .site-header{
        height:76px;
        padding:0 20px;
    }

    .brand img{
        width:132px;
    }

    .menu-button{
        display:block;
        z-index:3;
    }

    .site-header nav{
        position:fixed;
        inset:0;
        height:100vh;
        background:#edfcff;
        flex-direction:column;
        justify-content:center;
        transform:translateX(100%);
        transition:.35s;
        font-size:18px;
    }

    .site-header nav.nav-open{
        transform:none;
    }

    .hero-section{
        grid-template-columns:1fr;
        padding:120px 24px 90px;
        min-height:auto;
    }

    .hero-copy h1{
        font-size:57px;
    }

    .hero-visual{
        margin-top:30px;
    }

    .hero-banner-section{
        padding:95px 24px 35px !important;
    }

    .story-intro,
    .feature,
    .section-heading{
        grid-template-columns:1fr;
        padding-left:24px;
        padding-right:24px;
    }

    .story-intro{
        padding-top:55px !important;
        padding-bottom:55px !important;
    }

    .story-intro .section-number{
        display:block;
    }

    .feature{
        gap:40px;
    }

    .feature.reverse .feature-image{
        order:0;
    }

    .product-grid{
        grid-template-columns:1fr;
        padding:0 24px;
    }

    .gallery-grid{
        grid-template-columns:1fr;
        grid-auto-rows:240px;
        padding:0 24px;
    }

    .gallery-grid figure.wide{
        grid-column:auto;
    }

    .contact-section{
        margin:0 14px 14px;
    }

    .site-footer{
        grid-template-columns:1fr 1fr;
    }

    .detail-grid{
        grid-template-columns:1fr;
    }

    .detail-image{
        order:-1;
    }
}

@media(max-width:560px){

    .hero-copy h1{
        font-size:48px;
    }

    .hero-banner-section{
        padding:90px 16px 25px !important;
    }

    .hero-banner-image{
        border-radius:22px !important;
    }

    .story-intro h2,
    .feature h2,
    .section-heading h2{
        font-size:42px;
    }

    .story-intro{
        padding-top:45px !important;
        padding-bottom:45px !important;
    }

    .site-footer{
        grid-template-columns:1fr;
    }

    .copyright{
        grid-column:auto;
    }

    .contact-section{
        padding:80px 18px;
    }

    .whatsapp-float{
        right:14px;
        bottom:14px;
        padding-right:10px;
    }

    .whatsapp-float span{
        display:none;
    }

    .market-hero{
        padding-top:125px;
    }

    .market-hero h1{
        font-size:55px;
    }
}

/* =========================
   REDUCE MOTION
   ========================= */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
    }
}