/* =========================================
   JULIO SAMUDRA — WARM EDITORIAL THEME
   ========================================= */

/* ---------- TOKENS ---------- */
:root {
    --bg:         #FAF7F2;
    --bg-warm:    #F3EDE4;
    --bg-card:    #FFFFFF;
    --bg-dark:    #1C1917;

    --ink:        #1C1917;
    --ink-soft:   #44403C;
    --ink-muted:  #78716C;
    --ink-faint:  #A8A29E;
    --ink-ghost:  #D6D3D1;

    --accent:     #B45309;
    --accent-soft:#B4530918;
    --accent-warm:#D97706;
    --accent-bg:  #FEF3C7;
    --green:      #16A34A;
    --green-soft: #16A34A20;

    --font:       'Inter', system-ui, sans-serif;
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-mono:  'JetBrains Mono', monospace;

    --radius:     12px;
    --radius-lg:  20px;
    --ease:       cubic-bezier(.22,1,.36,1);
    --max-w:      1200px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
::selection{background:var(--accent-warm);color:#fff}

/* ---------- DOT GRID ---------- */
.dot-grid{
    position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
}

/* ---------- CONTAINER ---------- */
.container{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 clamp(20px,5vw,48px);
    position:relative;
    z-index:1;
}

/* ---------- UTILITY ---------- */
.section-label{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:16px;
}
.section-heading{
    font-family:var(--font-display);
    font-size:clamp(2rem,5vw,3.2rem);
    font-weight:400;
    line-height:1.15;
    color:var(--ink);
}
.section-heading em{
    font-style:italic;
    color:var(--accent);
}

/* ---------- BUTTONS ---------- */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    font-size:.875rem;font-weight:600;
    padding:14px 28px;
    border-radius:100px;
    transition:all .35s var(--ease);
}
.btn-primary{
    background:var(--ink);
    color:var(--bg);
}
.btn-primary:hover{
    background:var(--accent);
    transform:translateY(-2px);
    box-shadow:0 8px 24px #b4530930;
}
.btn-outline{
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--ink-ghost);
}
.btn-outline:hover{
    border-color:var(--ink);
    transform:translateY(-2px);
}

/* ---------- NAV ---------- */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:120;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px clamp(20px,5vw,48px);
    transition:background .4s ease,box-shadow .4s ease,backdrop-filter .4s ease;
}
.nav.scrolled{
    background:#FAF7F2dd;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 1px 0 var(--ink-ghost);
}

.logo{
    font-family:var(--font);
    font-size:1.5rem;
    font-weight:800;
    letter-spacing:-.04em;
    display:flex;align-items:baseline;
    transition:transform .3s var(--ease);
}
.logo:hover{transform:scale(1.05)}
.logo-dot{
    color:var(--accent-warm);
    font-size:2rem;
    line-height:0;
    position:relative;
    top:-2px;
}

.nav-center{display:flex;gap:32px}
.nav-link{
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-muted);
    position:relative;transition:color .3s ease;
}
.nav-link:hover{color:var(--ink)}
.nav-link::after{
    content:'';position:absolute;bottom:-4px;left:0;
    width:0;height:1.5px;
    background:var(--accent);
    transition:width .3s var(--ease);
}
.nav-link:hover::after{width:100%}

.nav-contact{
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:8px 18px;
    border-radius:100px;
    border:1.5px solid var(--ink-ghost);
    transition:all .3s var(--ease);
}
.nav-contact:hover{
    border-color:var(--ink);
    background:var(--ink);
    color:var(--bg);
}

.nav-burger{
    display:none;
    flex-direction:column;gap:5px;padding:6px;z-index:110;
}
.nav-burger span{
    display:block;width:20px;height:1.5px;
    background:var(--ink);
    transition:all .3s var(--ease);
    transform-origin:center;
}
.nav-burger.active span:nth-child(1){transform:rotate(45deg) translate(3px,3px)}
.nav-burger.active span:nth-child(2){opacity:0}
.nav-burger.active span:nth-child(3){transform:rotate(-45deg) translate(3px,-3px)}

.mobile-overlay{
    position:fixed;inset:0;z-index:105;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
}
.mobile-overlay.active{opacity:1;pointer-events:all}
.mobile-nav{text-align:center}
.mobile-link{
    display:block;
    font-family:var(--font-display);
    font-size:2rem;
    margin-bottom:20px;
    color:var(--ink);
    transition:color .3s;
}
.mobile-link:hover{color:var(--accent)}

/* ==========================================
   HERO
   ========================================== */
.hero{
    padding:140px 0 0;
    position:relative;
}
.hero-layout{
    display:grid;
    grid-template-columns:1fr 400px;
    gap:64px;
    align-items:center;
}
.hero-eyebrow{
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-muted);
    margin-bottom:24px;
}
.hero-heading{
    font-family:var(--font-display);
    font-size:clamp(2.8rem,6.5vw,5rem);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-.02em;
    margin-bottom:28px;
}
.h-line{display:block}
.hero-heading em{
    font-style:italic;
    color:var(--accent);
}
.hero-body{
    font-size:1.0625rem;
    color:var(--ink-soft);
    line-height:1.75;
    max-width:520px;
    margin-bottom:36px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Photo */
.hero-photo{
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:3/4;
    position:relative;
    box-shadow:0 20px 60px #1c191718;
}
.hero-img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease);
}
.hero-photo:hover .hero-img{transform:scale(1.03)}

.hero-tag{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:16px;
    font-size:.78rem;font-weight:500;color:var(--ink-muted);
}
.tag-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--green);
    box-shadow:0 0 6px var(--green);
    animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.7)}
}

/* Divider stats */
.hero-divider{
    margin-top:72px;
    padding:32px 0;
    border-top:1px solid var(--ink-ghost);
    border-bottom:1px solid var(--ink-ghost);
}
.divider-stats{
    display:flex;
    justify-content:space-between;
    gap:32px;
}
.mini-stat{text-align:center;flex:1}
.mini-stat-val{
    font-family:var(--font-display);
    font-size:1.75rem;
    color:var(--accent);
    display:block;
    margin-bottom:4px;
}
.mini-stat-lbl{
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-muted);
}

/* ==========================================
   APPROACH
   ========================================== */
.approach{
    padding:clamp(80px,12vw,140px) 0;
}
.approach-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}
.approach-right p{
    font-size:.9375rem;
    color:var(--ink-soft);
    line-height:1.85;
    margin-bottom:16px;
}
.approach-emphasis{
    margin-top:12px;
    padding:20px 24px;
    background:var(--accent-soft);
    border-left:3px solid var(--accent);
    border-radius:0 var(--radius) var(--radius) 0;
    font-style:italic;
    color:var(--accent) !important;
    font-weight:500;
}

/* ==========================================
   SERVICES
   ========================================== */
.services{
    padding:0 0 clamp(80px,12vw,140px);
}
.service-list{
    margin-top:48px;
    display:flex;
    flex-direction:column;
}
.service-item{
    padding:40px 0;
    border-bottom:1px solid var(--ink-ghost);
    display:grid;
    grid-template-columns:280px 1fr auto;
    gap:40px;
    align-items:start;
    transition:background .4s ease;
}
.service-item:first-child{
    border-top:1px solid var(--ink-ghost);
}
.service-item:hover{
    background:var(--bg-warm);
    padding-left:24px;
    padding-right:24px;
    margin-left:-24px;
    margin-right:-24px;
    border-radius:var(--radius);
}
.service-idx{
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:500;
    color:var(--ink-faint);
    display:block;
    margin-bottom:8px;
}
.service-name{
    font-family:var(--font-display);
    font-size:1.5rem;
    font-weight:400;
}
.service-body p{
    font-size:.9rem;
    color:var(--ink-soft);
    line-height:1.75;
    max-width:440px;
}
.service-tags{
    display:flex;flex-wrap:wrap;gap:6px;
    align-self:center;
    max-width:260px;
}
.service-tags span{
    font-size:.68rem;font-weight:600;
    color:var(--ink-muted);
    background:var(--bg);
    border:1px solid var(--ink-ghost);
    padding:5px 12px;
    border-radius:100px;
    transition:all .3s ease;
}
.service-item:hover .service-tags span{
    border-color:var(--accent-soft);
    background:var(--bg-card);
}

/* ==========================================
   WORK / CASE STUDIES
   ========================================== */
.work{
    padding:clamp(80px,12vw,140px) 0 0;
    background:var(--bg-warm);
    border-top:1px solid var(--ink-ghost);
}

.case{
    padding:64px 0;
    border-bottom:1px solid var(--ink-ghost);
}
.case:last-of-type{border-bottom:none;padding-bottom:clamp(80px,10vw,120px)}

.case-label{
    font-size:.68rem;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:12px;
}
.case-name{
    font-family:var(--font-display);
    font-size:clamp(1.8rem,4vw,2.6rem);
    font-weight:400;
    margin-bottom:16px;
}
.case-own{
    font-size:.7em;
    color:var(--ink-muted);
    font-family:var(--font);
    font-weight:400;
}
.case-intro{
    font-size:.9375rem;
    color:var(--ink-soft);
    line-height:1.75;
    max-width:640px;
}

/* Metrics */
.case-metrics{
    margin-top:40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.case-metrics--simple{
    grid-template-columns:1fr;
    max-width:640px;
}
.metric-card{
    background:var(--bg-card);
    border:1px solid var(--ink-ghost);
    border-radius:var(--radius-lg);
    padding:28px;
    box-shadow:0 2px 12px #1c19170a;
}
.metric-header{
    font-size:.7rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-muted);
    margin-bottom:20px;
}
.metric-row{
    display:flex;align-items:center;gap:20px;
    margin-bottom:16px;
}
.metric-label{
    font-size:.68rem;font-weight:600;
    color:var(--ink-faint);
    text-transform:uppercase;
    letter-spacing:.06em;
    display:block;
    margin-bottom:4px;
}
.metric-val{
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:400;
    color:var(--ink);
}
.metric-val--highlight{
    color:var(--accent);
}
.metric-arrow{color:var(--ink-faint)}

.metric-growth-bar{
    height:6px;
    background:var(--ink-ghost);
    border-radius:6px;
    overflow:hidden;
    position:relative;
}
.metric-growth-fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--accent),var(--accent-warm));
    border-radius:6px;
    transition:width 1.6s var(--ease);
}
.metric-growth-pct{
    position:absolute;right:0;top:-22px;
    font-size:.75rem;font-weight:700;
    color:var(--accent);
}

/* Keyword grid */
.keyword-grid{display:flex;flex-direction:column;gap:14px}
.kw-row{
    display:grid;
    grid-template-columns:90px 1fr auto;
    gap:12px;
    align-items:center;
}
.kw-label{
    font-size:.72rem;font-weight:600;
    color:var(--ink-muted);
}
.kw-bar-wrap{
    height:8px;
    border-radius:8px;
    background:var(--bg-warm);
    position:relative;
    overflow:hidden;
}
.kw-bar{
    position:absolute;top:0;left:0;
    height:100%;
    border-radius:8px;
    width:0;
    transition:width 1.2s var(--ease);
}
.kw-bar--before{
    background:var(--ink-ghost);
    z-index:1;
}
.kw-bar--after{
    background:linear-gradient(90deg,var(--accent),var(--accent-warm));
    z-index:2;
    opacity:.8;
}
.kw-vals{
    font-size:.72rem;
    color:var(--ink-muted);
    white-space:nowrap;
    text-align:right;
}
.kw-vals strong{color:var(--accent);font-weight:700}

.kw-legend{
    display:flex;gap:16px;
    margin-top:16px;
    font-size:.68rem;color:var(--ink-faint);
}
.kw-dot{
    display:inline-block;
    width:8px;height:8px;
    border-radius:50%;
    margin-right:4px;
    vertical-align:middle;
}
.kw-dot--before{background:var(--ink-ghost)}
.kw-dot--after{background:var(--accent)}

/* Hero metric card */
.metric-card--hero{text-align:center;padding:48px 36px}
.metric-hero-val{
    font-family:var(--font-display);
    font-size:clamp(2.5rem,6vw,3.5rem);
    color:var(--accent);
    display:block;
    margin-bottom:12px;
}
.metric-hero-lbl{
    font-size:.9375rem;
    color:var(--ink-soft);
    line-height:1.7;
    max-width:440px;
    margin:0 auto;
}

/* Outcomes (Tech Blog) */
.case-outcomes{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.outcome{
    background:var(--bg-card);
    border:1px solid var(--ink-ghost);
    border-radius:var(--radius-lg);
    padding:28px;
    transition:transform .4s var(--ease),box-shadow .4s ease;
}
.outcome:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px #1c19170f;
}
.outcome-icon{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);
    border-radius:12px;
    color:var(--accent);
    margin-bottom:16px;
}
.outcome-title{
    font-family:var(--font);
    font-size:1.05rem;
    font-weight:600;
    color:var(--ink);
    margin-bottom:8px;
    letter-spacing:-0.01em;
}
.outcome-desc{
    font-size:.8125rem;
    color:var(--ink-muted);
    line-height:1.65;
}

/* ==========================================
   CONNECT / CTA
   ========================================== */
.connect{
    padding:clamp(80px,12vw,140px) 0;
    background:var(--bg);
    border-top:1px solid var(--ink-ghost);
}
.connect-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
}
.connect-body{
    margin-top:16px;
    font-size:.9375rem;
    color:var(--ink-soft);
    line-height:1.75;
    max-width:480px;
}
.connect-card{
    background:var(--bg-card);
    border:1px solid var(--ink-ghost);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:0 4px 20px #1c19170a;
}
.connect-avail{
    display:flex;align-items:center;gap:8px;
    font-size:.78rem;font-weight:600;
    color:var(--green);
    margin-bottom:24px;
}
.connect-email{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 24px;
    background:var(--ink);
    color:var(--bg);
    border-radius:var(--radius);
    font-weight:700;
    font-size:1rem;
    transition:all .35s var(--ease);
    margin-bottom:16px;
}
.connect-email:hover{
    background:var(--accent);
    transform:translateY(-2px);
    box-shadow:0 8px 28px #b4530930;
}
.connect-email svg{transition:transform .3s var(--ease)}
.connect-email:hover svg{transform:translate(3px,-3px)}

.connect-note{
    font-size:.8125rem;
    color:var(--ink-muted);
    line-height:1.6;
}

/* ==========================================
   FOOTER
   ========================================== */
.footer{
    padding:32px 0;
    border-top:1px solid var(--ink-ghost);
}
.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.footer-copy{
    font-size:.78rem;
    color:var(--ink-faint);
}

/* ==========================================
   FADE-IN ANIMATION
   ========================================== */
.fade-in{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.fade-in[data-d="1"]{transition-delay:.1s}
.fade-in[data-d="2"]{transition-delay:.2s}
.fade-in[data-d="3"]{transition-delay:.3s}
.fade-in[data-d="4"]{transition-delay:.4s}
.fade-in[data-d="5"]{transition-delay:.5s}
.fade-in[data-d="6"]{transition-delay:.6s}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media(max-width:1024px){
    .hero-layout{grid-template-columns:1fr;gap:48px}
    .hero-right{max-width:360px;margin:0 auto}
    .approach-layout{grid-template-columns:1fr;gap:40px}
    .service-item{grid-template-columns:1fr;gap:16px}
    .service-tags{max-width:none}
    .case-metrics{grid-template-columns:1fr}
    .case-outcomes{grid-template-columns:1fr 1fr}
    .connect-layout{grid-template-columns:1fr;gap:40px}
}

@media(max-width:768px){
    .nav-center,.nav-contact{display:none}
    .nav-burger{display:flex}
    .hero{padding:110px 0 0}
    .hero-heading{font-size:clamp(2.2rem,9vw,3.2rem)}
    .divider-stats{flex-direction:column;gap:20px}
    .mini-stat{text-align:left;display:flex;align-items:baseline;gap:12px}
    .mini-stat-val{font-size:1.3rem}
    .case-outcomes{grid-template-columns:1fr}
    .metric-card--comparison{text-align:center}
    .metric-row{flex-direction:column;align-items:center;gap:12px}
    .metric-arrow{transform:rotate(90deg);margin:4px 0}
    .footer-inner{flex-direction:column;gap:12px;text-align:center}
    .kw-row{grid-template-columns:70px 1fr auto}
}

@media(max-width:480px){
    .hero-heading{font-size:clamp(1.8rem,10vw,2.4rem)}
    .hero-body{font-size:.9375rem}
    .metric-hero-val{font-size:2rem}
    .metric-card{padding:20px}
    .kw-row{grid-template-columns:60px 1fr auto;gap:8px}
}