/* =========================================================
   DESA DIGITAL — LANDING PAGE
   Token system
   ========================================================= */
:root{
    --paper:      #EDE9DA;
    --paper-soft: #E4DFCC;
    --card:       #FFFDF7;
    --ink:        #1C2B22;
    --ink-soft:   #445044;
    --forest:     #2F5443;
    --forest-dark:#213E31;
    --ochre:      #C97A3D;
    --ochre-text: #9A5A28;
    --indigo:     #35507A;
    --line:       rgba(28,43,34,0.14);
    --line-dark:  rgba(255,255,255,0.16);

    --font-display: 'Fraunces', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    --maxw: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
    margin:0;
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    font-size:16px;
}

h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--ink);
    margin:0 0 0.5em;
    line-height:1.15;
}

h1{ font-size:clamp(2.1rem, 4.4vw, 3.2rem); font-weight:600; }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); max-width:18ch; }
h3{ font-size:1.1rem; margin-bottom:0.4em; }

p{ margin:0 0 1em; color:var(--ink-soft); max-width:62ch; }

a{ color:inherit; }

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

.wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 24px;
}
.wrap-narrow{ max-width:760px; }

:focus-visible{
    outline:3px solid var(--indigo);
    outline-offset:2px;
}

.skip-link{
    position:absolute;
    left:-999px;
    top:auto;
    background:var(--ink);
    color:#fff;
    padding:12px 18px;
    z-index:100;
    border-radius:4px;
}
.skip-link:focus{
    left:24px;
    top:24px;
}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.95rem;
    padding:13px 24px;
    border-radius:6px;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-primary{
    background:var(--forest);
    color:#fff;
}
.btn-primary:hover{ background:var(--forest-dark); }
.btn-ghost{
    background:transparent;
    color:var(--ink);
    border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--ink); }
.btn-on-dark{
    background:var(--ochre);
    color:var(--ink);
}
.btn-on-dark:hover{ background:#dd8a48; }
.btn-small{ padding:10px 18px; font-size:0.88rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(237,233,218,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
}
.header-row{
    display:flex;
    align-items:center;
    gap:32px;
    padding:16px 24px;
}
.brand{
    font-family:var(--font-display);
    font-size:1.3rem;
    font-weight:600;
    text-decoration:none;
    color:var(--ink);
    margin-right:auto;
}
.brand span{ color:var(--forest); }

.main-nav{
    display:flex;
    gap:26px;
    font-size:0.95rem;
    font-weight:500;
}
.main-nav a{
    text-decoration:none;
    color:var(--ink-soft);
}
.main-nav a:hover{ color:var(--ink); }

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:38px;
    height:38px;
    background:none;
    border:1px solid var(--line);
    border-radius:6px;
    margin-left:8px;
}
.nav-toggle span{
    width:18px;
    height:2px;
    background:var(--ink);
    margin:0 auto;
    display:block;
}

.mobile-nav{
    display:none;
    flex-direction:column;
    gap:2px;
    padding:8px 24px 20px;
    border-top:1px solid var(--line);
}
.mobile-nav a{
    padding:12px 4px;
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid var(--line);
    font-weight:500;
}
.mobile-nav .btn{ margin-top:14px; }

.site-header.nav-open .mobile-nav{ display:flex; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:64px 0 88px; }
.hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
}
.hero-copy .lead{
    font-size:1.08rem;
    max-width:52ch;
}
.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin:28px 0 22px;
}
.hero-note{
    font-size:0.88rem;
    color:var(--ink-soft);
    border-top:1px solid var(--line);
    padding-top:16px;
    max-width:44ch;
}

/* Browser mockup */
.browser-mock{
    background:var(--card);
    border-radius:10px;
    border:1px solid var(--line);
    box-shadow:0 24px 48px -24px rgba(28,43,34,0.35);
    overflow:hidden;
}
.browser-bar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    background:var(--paper-soft);
    border-bottom:1px solid var(--line);
}
.browser-bar .dot{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--line);
}
.browser-url{
    margin-left:10px;
    font-size:0.78rem;
    color:var(--ink-soft);
    background:var(--card);
    padding:4px 10px;
    border-radius:4px;
    border:1px solid var(--line);
}
.browser-body{
    background:var(--forest-dark);
}
.mock-hero{
    padding:28px 22px 20px;
    background:linear-gradient(160deg, var(--forest-dark), #16261d);
    color:#fff;
}
.mock-eyebrow{
    font-size:0.7rem;
    color:var(--ochre);
    margin-bottom:8px;
    max-width:none;
}
.mock-title{
    font-family:var(--font-display);
    font-size:1.35rem;
    color:#fff;
    max-width:none;
    margin:0;
}
.mock-news{
    background:var(--card);
    padding:18px 22px 22px;
}
.mock-news-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-weight:600;
    font-size:0.92rem;
    margin-bottom:10px;
    color:var(--ink);
}
.editing-indicator{
    font-size:0.72rem;
    font-weight:500;
    color:var(--indigo);
}
.cursor{
    animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.mock-news-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:9px;
}
.mock-news-list li{
    font-size:0.86rem;
    color:var(--ink-soft);
    padding-left:14px;
    position:relative;
}
.mock-news-list li::before{
    content:'';
    position:absolute;
    left:0; top:8px;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--ochre);
}
.visual-caption{
    font-size:0.8rem;
    color:var(--ink-soft);
    margin:12px 4px 0;
    max-width:none;
}

/* =========================================================
   SECTIONS (shared)
   ========================================================= */
.section{ padding:80px 0; }
.section-alt{ background:var(--paper-soft); }
.section-lead{
    font-size:1.02rem;
    max-width:58ch;
    margin-top:-6px;
    margin-bottom:36px;
}

/* Kenapa perlu — problem list */
.problem-list{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:36px;
}
.problem-item{
    border-left:3px solid var(--line);
    padding:4px 0 4px 20px;
}
.problem-item.accent-ochre{ border-color:var(--ochre); }
.problem-item.accent-indigo{ border-color:var(--indigo); }
.problem-item.accent-forest{ border-color:var(--forest); }
.problem-item p{ font-size:0.95rem; }

/* Fitur — ledger */
.ledger{
    border-top:1px solid var(--line);
    margin-top:8px;
}
.ledger-row{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:24px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
}
.ledger-row h3{ margin:0; }
.ledger-row p{ margin:0; font-size:0.95rem; }

/* Proses — numbered sequence (legitimate: real steps in order) */
.process{
    list-style:none;
    margin:36px 0 0;
    padding:0;
    max-width:640px;
}
.process-step{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:20px;
    padding-bottom:34px;
    margin-bottom:34px;
    border-bottom:1px solid var(--line);
    position:relative;
}
.process-step:last-child{
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}
.step-num{
    font-family:var(--font-display);
    font-size:1.5rem;
    color:var(--ochre-text);
    line-height:1;
}
.process-step h3{ margin-bottom:0.3em; }
.process-step p{ font-size:0.95rem; margin:0; }

/* Showcase */
.showcase-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
}
.showcase-swatch{
    height:150px;
    border-radius:8px;
    display:flex;
    align-items:flex-end;
    padding:16px;
    margin-bottom:14px;
}
.showcase-label{
    color:#fff;
    font-weight:600;
    font-size:0.92rem;
}
.swatch-a{ background:linear-gradient(135deg, #2F5443, #16261d); }
.swatch-b{ background:linear-gradient(135deg, #35507A, #16233a); }
.swatch-c{ background:linear-gradient(135deg, #9A5A28, #5c3210); }
.showcase-item p{ font-size:0.92rem; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing-table{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:var(--card);
    margin-top:8px;
}
.pricing-col{
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--line);
}
.pricing-col:first-child{ border-left:none; }
.pricing-cell{
    padding:16px 18px;
    font-size:0.92rem;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
}
.pricing-head .pricing-cell{
    color:var(--ink);
    font-weight:600;
}
.pricing-col:not(.pricing-head) .pricing-cell:not(.pricing-title){
    justify-content:center;
    color:var(--forest);
    font-weight:600;
}
.pricing-title{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-height:120px;
}
.plan-name{ font-family:var(--font-display); font-size:1.15rem; }
.plan-price{ font-weight:700; color:var(--ink); }
.plan-sub{ font-size:0.78rem; color:var(--ink-soft); }
.plan-badge{
    background:var(--ochre);
    color:var(--ink);
    font-size:0.7rem;
    font-weight:700;
    padding:3px 9px;
    border-radius:20px;
}
.pricing-col-highlight{ background:#FBF6EA; }
.pricing-note{
    font-size:0.85rem;
    margin-top:18px;
    color:var(--ink-soft);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{ margin-top:32px; border-top:1px solid var(--line); }
.faq-item{
    border-bottom:1px solid var(--line);
    padding:18px 0;
}
.faq-item summary{
    cursor:pointer;
    font-weight:600;
    font-size:1.02rem;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:'+';
    font-size:1.3rem;
    color:var(--ochre-text);
    flex:none;
}
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ margin:14px 0 0; font-size:0.95rem; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
    background:var(--ink);
    color:#fff;
    padding:72px 0;
}
.cta-inner{ text-align:left; max-width:640px; }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:rgba(255,255,255,0.75); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
    background:var(--forest-dark);
    color:rgba(255,255,255,0.8);
    padding:40px 0;
    font-size:0.9rem;
}
.footer-row{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    justify-content:space-between;
    align-items:flex-start;
}
.brand-footer{ color:#fff; margin-bottom:6px; }
.brand-footer span{ color:var(--ochre); }
.footer-contact p{ margin:0 0 4px; color:rgba(255,255,255,0.8); }
.footer-copy{ width:100%; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-dark); font-size:0.8rem; color:rgba(255,255,255,0.55); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; }
    .problem-list{ grid-template-columns:1fr; }
    .ledger-row{ grid-template-columns:1fr; gap:6px; }
    .showcase-grid{ grid-template-columns:1fr; }
    .pricing-table{ grid-template-columns:1fr; }
    .pricing-col{ border-left:none; border-top:1px solid var(--line); }
    .pricing-col:first-child{ border-top:none; }
    .pricing-title{ min-height:auto; }
}

@media (max-width: 780px){
    .main-nav{ display:none; }
    .nav-toggle{ display:flex; }
    .header-row .btn{ display:none; }
}

@media (max-width: 480px){
    .hero{ padding:44px 0 56px; }
    .section{ padding:56px 0; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .cursor{ animation:none; }
}