:root{
    --primary:#1B84FF;           /* blue-600 */
    --primary-ink:#1e40af;       /* blue-800 */
    --ink:#0f172a;               /* slate-900 */
    --text:#374151;              /* gray-700 */
    --muted:#6b7280;             /* gray-500 */
    --line: rgba(10, 25, 41, 0.94);              /* gray-200 */
    --bg:#f3f4f6;                /* gray-100 */
    --white:#fff;
    --blue-50:#eff6ff;
    --green-50:#ecfdf5;
    --yellow-50:#fffbeb;
    --radius-xl:18px;
    --radius-2xl:22px;
    --shadow:0 10px 18px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:var(--bg);}

.container{width:100%;max-width:1261px;margin-inline:auto;padding:0 20px;}
.tiny{
    font-size: 16px;
    color: white;
    padding-top: 33px;
    border-top: 1px solid #1F2937;
    text-align: center;
    font-weight: 400;
}
a{color:inherit;text-decoration:none}

/* ===== Header Layout ===== */
.site-header{

}
.btn-header{
    background: transparent;
    border: 1px solid #1B84FF;
    color: #1B84FF;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
}
.btn-contact-header {
    background: #1B84FF;
    color: #fff;
    border-radius: 10px;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 500;
}
.header-bar{
    height:72px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
}

/* Brand */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-logo{height:45px; width:auto; display:block;}
.brand-name{font-weight:700; color:var(--ink);}

/* Center menu */
.menu-center{
    display:flex; justify-content:center; gap:28px;
}
.menu-center a{
    color: #2C3131;
    font-size: 16px;
    text-decoration: none;
    font-weight: normal;
    align-content: center;
    text-align: center;
}
.menu-center a:hover{color:var(--ink);}

/* Right actions */
.menu-right{display:flex; align-items:center; gap:16px;}
.explore-link{
    font-size: 16px;
    font-weight: 500;
    color: #2C3131;
    text-decoration: none;
}
.explore-link:hover{opacity:.85;}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border-radius:12px; font-weight:600;}
.btn-outline{border:1px solid var(--primary); color:var(--primary); background:#fff;}
.btn-outline:hover{background:#f8fbff;}

/* Mobile: sembunyikan center/right, tampilkan hamburger */
.hamburger{display:none; flex-direction:column; gap:5px; background:transparent; border:0; margin-left:auto;}
.hamburger span{width:22px; height:2px; background:var(--ink); border-radius:2px;}

@media (max-width: 768px){
    .header-bar{grid-template-columns:auto auto;}
    .menu-center, .menu-right{display:none;}
    .hamburger{display:inline-flex;}
    .brand-name{font-size:16px;}
}

/* === Hero Header Label === */
.container-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px 60px;
    max-width: 720px;
    margin: 0 auto;
}

.container-header h1 {
    font-size: 56px;
    font-weight: bold;
    line-height: 1.25;
    color: #1B84FF;
    margin-bottom: 16px;
}

.container-header .accent {
    color: #000C19;
}

.container-header .subtitle {
    font-size: 20px;
    color: #000C19;
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: 28px;
    max-width: 600px;
}

.container-header .hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-header .hero-actions .btn-primary {
    background-color: var(--primary);
    color: #fff;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.container-header .hero-actions .btn-primary:hover {
    background-color: var(--primary-ink);
}

/* Responsiveness */
@media (max-width: 768px) {
    .container-header {
        padding: 60px 24px 40px;
    }
    .container-header h1 {
        font-size: 30px;
    }
    .container-header .subtitle {
        font-size: 14px;
    }
    .header-img{
        padding: 0px 24px 25px;!important;
    }
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:10px;padding:.9rem 1.2rem;border:1px solid transparent;box-shadow:none;transition:.2s ease;gap:.5rem}
.btn-sm{padding:.55rem .9rem;font-size:.9rem}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-ink)}
.btn-outline{border-color:var(--line);background:var(--white)}
.btn-outline:hover{border-color:#cbd5e1}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:#00000008}
.btn-white{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-white:hover{background:#fafafa}

/* Hero */
.hero{background:linear-gradient(180deg,var(--white),var(--blue-50));position:relative;overflow:hidden}
.hero .container{padding:56px 20px 28px}
.eyebrow{color:var(--muted);font-size:.9rem;margin:0 0 6px}
.hero h1{color:var(--ink);font-size:32px;line-height:1.15;margin:0 0 10px}
.hero .accent{color:var(--primary)}
.subtitle{color:var(--muted);max-width:42ch;margin:0 0 18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hero-preview{overflow:hidden}
.hero-preview img{display:block;width:100%;height:auto}
.hero-wave{position:absolute;inset:auto -20% -40% -20%;height:200px;background:radial-gradient(50% 50% at 50% 0%, #9ec3ff40 0%, #ffffff00 70%);}

/* Key Features */
.key-features{padding:26px 0}
.grid-3{display:grid;grid-template-columns:1fr;gap:14px}

.kf-blue{background:#80BAFF}
.kf-green{background:#e9fbf3}
.kf-yellow{background:#fff6df}

/* Feature breakdown */
.feature-breakdown{
    background: #E5F1FF;
    padding: 100px;
    border-radius: 60px 60px 0px 0px;
    margin-bottom: -50px;
}
@media (max-width: 768px) {
    .feature-breakdown{
        padding: 55px 0px 100px;
    }
    .key-features {
        padding-bottom: 56px;
    }
}
.feature-breakdown h2{margin:0 0 14px;color:var(--ink);font-size:20px}
.icon-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-card{background:var(--white);border-radius:15px;padding:60px 21px;text-align:center;height: 341px;justify-items: center;}
.mini-card h4{margin:10px 0 4px;font-size:20px;color:var(--ink);padding: 40px 0 16px;}
.mini-card p{margin:0;color:var(--muted);font-size:16px}
.ic{
    width:78px;
    height:78px;
    margin: 0 auto;
}

.feature-header{
    text-align: center;
}
.feature-header h3 {
    font-size:40px;
    font-weight: bold;
    color: #111827;
    margin: 0px;
}

@media (max-width: 768px) {
    .feature-header h3 {
        padding: 0 20px;
        font-size: 32px;
    }
    .mini-card h4 {
        font-size: 18px;
    }
    .mini-card p{
        font-size: 14px;
    }
}
@media (max-width: 410px) {
    .mini-card{
        background: var(--white);
        border-radius: 15px;
        padding: 40px 10px;
        text-align: center;
        height: 341px;
        justify-items: center;
    }
    .mini-card h4 {
        font-size: 16px;
    }
    .mini-card p{
        font-size: 14px;
    }
}
.feature-header p{
    font-size: 18px;
    color: #000C19;
    margin-bottom: 50px;
}
/* About */
.about{
    background: var(--white);
    border-radius: 60px 60px 0px 0px;
    padding-top: 100px;
    padding-bottom: 160px;
    margin-bottom: -50px;
}
.about-wrap{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: center;
    background: #B2D6FF;
    border-radius: 20px;
    padding: 0px 50px;
}
.about-text h2{
    margin-bottom: 16px;
    color: #111827;
    font-size: 40px;
    font-weight: 600;
}
.about-text p{
    font-size: 18px;
    font-weight: normal;
    line-height: 1.45;
}
.tick{margin:0;padding-left:18px}
.tick li{margin:.3rem 0}
.about-media img{
    width:100%;height:auto;
}

@media (max-width: 768px) {
    .about {
        padding-left: 24px;
        padding-right: 24px;
        margin-bottom: -90px;
    }
    .about-wrap {
        background: #80BAFF;
    }
    .about-text h2 {
        font-size: 32px;
    }
    .about-text p{
        font-size: 16px;
    }
    .about-text {
        padding-top: 50px;
    }
}
@media (max-width: 430px) {
    .about-text h2 {
        font-size: 28px;
    }
    .about-text p{
        padding-top: 30px;
    }

    .about-text h2 {
        position: relative;
        color: transparent;
    }
    .about-text h2::after {
        content: "About\A Sentilabs";
        white-space: pre;
        color: var(--ink);
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* CTA */
.cta{
    position: relative;
    overflow: hidden;
    background: #2752E7;
    border-radius: 60px 60px 0px 0px;
    padding: 100px;
}
.cta-card {
    position: relative;
    z-index: 1;
    width: 100%;
}
.cta-card h2{
    margin-bottom: 16px;
    font-size: 40px;
    color: #fff;
    font-weight: bold;
}
.cta-card p{
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 48px;
}

.cta-decor {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    z-index: 0;
}
.cta-decor2 {
    position: absolute;
    top: -55px;
    right: -100px;
    height: auto;
    z-index: 0;
}
.cta-card-label {
    gap: 16px;
    margin-bottom: 40px;
}
.cta-button {
    margin: 0 auto;
    gap: 16px;
}
@media (max-width: 768px) {
    .cta {
        padding: 24px;
    }
    .cta-card {
        margin-bottom: 30px;
    }
    .cta-decor2 {
        top: 200px;
        right: -502px;
    }
    .cta-card-label {
        text-align: center;
    }
}

.cta .container,

    /* Footer */
.site-footer{padding:22px 0; position: relative;}
.footer-grid{display:flex;flex-direction:column;gap:14px}
.footer-brand{display:flex;flex-direction:column;gap:6px;color:var(--ink);font-weight:600;margin-bottom: 41px}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:white}
.footer-links a:hover{color:var(--text)}

/* Responsive */
@media (min-width: 768px){
    .nav{display:flex}
    .hamburger{display:none}
    .hero .container{padding: 20px 20px 100px;}
    .hero h1{font-size:56px}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .icon-grid{grid-template-columns: repeat(4, 1fr);
        gap: 22px;}
    .about-wrap{grid-template-columns:1.05fr .95fr}
    .cta-card{padding:28px 30px;text-align:center;gap: 16px;}
    .footer-grid{flex-direction:row;align-items:center;justify-content:space-between}
}

.features-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kf-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 992px) {
    .kf-row {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

.kf {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    /*border: 1px solid var(--line);*/
    padding: 62px 43px;
    background: #fff;
    /*box-shadow: var(--shadow);*/
}
@media (max-width: 768px) {
    /*.kf {*/
    /*    padding: 50px 22px;*/
    /*}*/
}

.kf h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
}

.kf p {
    margin: 0 0 16px;
    color: var(--text);
    line-height: 1.6;
}

.kf img {
    width: 100%;
    border-radius: 12px;
    display: block;
}
@media (max-width: 768px) {
    .kf h3 {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* Background colors */
.kf-blue { background: #80BAFF; }
.kf-green { background: #B0EC9C; }
.kf-yellow { background: #FFD88A; }

/* Split layout (Brand Monitoring) */
.kf-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 24px;
}
@media (max-width: 768px) {
    .kf-split {
        grid-template-columns: 1fr;
    }
}

/* === Features Section Custom Layout === */
.features-grid {
    display: flex;
    flex-direction: column;
}
.demo-btn{
    padding: 18px 40px;
    background: var(--white);
    color: #1B84FF;
    border-radius: 10px;
}
.explore-btn{
    padding: 18px 40px;
    background: transparent;
    color: var(--white);
    border-radius: 10px;
    border: 1px solid white;
}

@media (max-width: 768px) {
    .cta-card .demo-btn,
    .cta-card .explore-btn {
        justify-self: center;
        display: block;
        width: 100%;
        text-align: center;
        margin: 0 0 20px 0 !important;
        padding: 27px;
        font-size: 16px;
        font-weight: bold;
    }
    .cta-card .explore-btn {
        margin-bottom: 0 !important;
    }
}
/* Bagian atas */
.feature-top {
    height: 495px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 24px;
    margin-bottom: 61px;
}
.feature-top .kf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.kf-media {
    justify-items: center;
    max-width: 500px;
}

@media (max-width: 768px) {
    .kf-media {
        order: -1;
    }
}

/* Bagian bawah dua kolom */
.features-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.feature-item {
    height: 766px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.feature-item .kf-media {
    margin-top: auto;
}
.feature-item .kf-media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Responsif */
@media (max-width: 992px) {
    .feature-top {
        height: auto;
        grid-template-columns: 1fr;
    }
    .features-bottom {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .feature-item {
        height: auto;
    }
}
.footer {
    background: #000C19;
    padding-top: 88px;
    padding-bottom: 34px;
}
.brand-logo2 {
    height: 45px;
    width: 155px;
}
/* ===== Mobile Menu (drawer fullscreen) ===== */
.mobile-menu {
    position: fixed;
    inset: 0;
    display: none;               /* default: hidden */
    z-index: 60;
}
.mobile-menu.active { display: block; }

/* dark scrim */
.mobile-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.7);
}

/* white panel */
.mobile-panel {
    position: absolute;
    top: 112px;
    width: 100%;
    height: 300px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: auto;
}

/* header (logo kiri, X kanan) */
.mobile-panel-header {
    display: flex; align-items: center; justify-content: space-between;
}
.mobile-panel-header .brand-logo { height: 44px; width: auto; }

/* close button */
.mobile-close {
    background: transparent; border: 0; padding: 8px; line-height: 0; cursor: pointer;
}

/* nav links besar */
.mobile-nav { margin-top: 36px; display: grid;}
.mobile-link {
    font-size: 28px; line-height: 1.2; font-weight: 700;
    color: #111827; text-decoration: none;
}
.mobile-link:active, .mobile-link:focus { outline: none; opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
    .mobile-panel { transform: scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
    .mobile-menu.active .mobile-panel { transform: none; opacity: 1; }
    .mobile-backdrop { opacity: 0; transition: opacity .18s ease; }
    .mobile-menu.active .mobile-backdrop { opacity: 1; }
    .brand-logo2 {
        margin-bottom: 16px;
    }
    .footer {
        padding-top: 45px;
    }
}

@media (min-width: 769px) {
    .mobile-menu { display: none !important; }
}

.mobile-nav a {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
}

/* ==== Reveal on Scroll (lightweight) ==== */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    will-change: transform, opacity;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--delay, 0ms);
}

/* Variants */
.fade-in   { transform: none; }
.fade-up   { transform: translateY(18px); }
.fade-down { transform: translateY(-18px); }
.slide-left  { transform: translateX(24px); }
.slide-right { transform: translateX(-24px); }
.zoom-in   { transform: scale(.96); }


.reveal.slow  { transition-duration: .9s; }
.reveal.fast  { transition-duration: .35s; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}