*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --cream: #f0f6f9; --white: #ffffff; --sand: #d8e6ec; --muted: #7a9aaa; --ink: #1a2e3a;
    --teal: #3a8fa8; --teal-light: #5aafc8; --teal-dark: #1a5f75;
    --teal-pale: rgba(58,143,168,0.08); --teal-mid: rgba(58,143,168,0.18);
    --studio-dark: #1a2e3a; --studio-mid: #2a4a5a; --studio-deep: #0d1e28;
    --studio-subtle: #e8f2f6; --green: #48b08a; --green-pale: rgba(72,176,138,0.1);
    --yellow: #e8a84a; --yellow-pale: rgba(232,168,74,0.1);
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; font-weight: 300; background: var(--cream); color: var(--ink); overflow-x: hidden; cursor: none; }
body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1000; opacity: .5; }

/* CURSOR */
.cursor { width:12px;height:12px;background:var(--teal);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:multiply;transition:.1s,width .3s,height .3s; }
.cursor-ring { width:36px;height:36px;border:1.5px solid var(--teal);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .15s ease;opacity:.4; }

/* PAGE SYSTEM */
.page { display: none; min-height: 100vh; flex-direction: column; }
.page.active { display: flex; }

/* ══ SHARED NAV (public) ══ */
.pub-nav { position:fixed;top:0;left:0;right:0;z-index:500;padding:1.3rem 3.5rem;display:flex;justify-content:space-between;align-items:center;transition:background .4s,backdrop-filter .4s; }
.pub-nav.scrolled { background:rgba(240,246,249,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--sand); }
.nav-logo { display:flex;align-items:center;gap:.5rem;font-family:'Lora',serif;font-size:1.05rem;font-weight:600;color:var(--studio-dark);text-decoration:none;cursor:pointer; }
.nav-logo-dot { width:6px;height:6px;background:var(--teal);border-radius:50%; }
.nav-logo-sub { font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-family:'DM Sans',sans-serif; }
.nav-links { display:flex;gap:2.2rem;list-style:none; }
.nav-links a { font-size:.76rem;font-weight:400;color:var(--muted);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;transition:color .3s;cursor:pointer; }
.nav-links a:hover,.nav-links a.active { color:var(--teal); }
.nav-right { display:flex;align-items:center;gap:1rem; }
.nav-lang { display:flex;align-items:center; }
.lang-toggle { background:none;border:1.5px solid var(--sand);border-radius:100px;padding:.26rem .75rem;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:.3rem;transition:border-color .2s; }
.lang-toggle:hover { border-color:var(--teal); }
.lang-toggle span { transition:color .2s; }
.lang-toggle span.active { color:var(--teal);font-weight:600; }
.lang-divider { color:var(--sand); }
.nav-client { display:flex;align-items:center;gap:.35rem;padding:.38rem .9rem;border-radius:100px;background:var(--teal-pale);border:1.5px solid rgba(58,143,168,.25);color:var(--teal);font-size:.72rem;font-weight:500;text-decoration:none;transition:all .3s;cursor:pointer; }
.nav-client:hover { background:var(--teal);color:#fff; }

/* ══ SHARED BUTTONS ══ */
.btn-primary { background:var(--studio-dark);color:#fff;border:none;padding:.85rem 1.8rem;border-radius:100px;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all .3s;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem; }
.btn-primary::before { content:'';position:absolute;inset:0;background:var(--teal);opacity:0;transition:opacity .3s; }
.btn-primary span { position:relative;z-index:1; }
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover { transform:translateY(-3px);box-shadow:0 12px 30px rgba(58,143,168,.3); }
.btn-ghost { background:transparent;color:var(--studio-dark);border:1.5px solid var(--sand);padding:.85rem 1.8rem;border-radius:100px;font-family:'DM Sans',sans-serif;font-size:.85rem;cursor:pointer;text-decoration:none;transition:all .3s;display:inline-flex;align-items:center;gap:.4rem; }
.btn-ghost:hover { border-color:var(--teal);color:var(--teal);transform:translateY(-3px); }
.btn-teal { background:var(--teal);color:#fff;border:none;padding:.85rem 1.8rem;border-radius:100px;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all .3s;display:inline-flex;align-items:center;gap:.4rem; }
.btn-teal:hover { background:var(--teal-light);transform:translateY(-3px);box-shadow:0 10px 28px rgba(58,143,168,.3); }
.btn-cv { background:transparent;color:var(--teal);border:1.5px dashed rgba(58,143,168,.4);padding:.85rem 1.5rem;border-radius:100px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all .3s;display:inline-flex;align-items:center;gap:.45rem; }
.btn-cv:hover { background:var(--teal-pale);border-color:var(--teal);border-style:solid;transform:translateY(-3px); }

/* ══ SHARED SECTION ══ */
.section-line { display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem; }
.section-line::after { content:'';flex:1;height:1px;background:var(--sand); }
.section-tag { font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500; }

/* ══ SHARED FOOTER ══ */
.page-footer { background:var(--studio-deep);color:rgba(180,210,220,.4);padding:2.5rem 3.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(58,143,168,.15); }
.footer-logo { font-family:'Lora',serif;font-size:1rem;color:rgba(180,210,220,.7);display:flex;align-items:center;gap:.5rem; }
.footer-dot { width:5px;height:5px;background:var(--teal);border-radius:50%; }
.footer-tagline { font-family:'Lora',serif;font-style:italic;font-size:.8rem; }
.footer-copy { font-size:.73rem; }
.footer-link { color:var(--teal);text-decoration:none; }

/* ══ REVEAL ══ */
.reveal { opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
@keyframes revealUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes revealRight { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }

/* ════════════════════════════════════════
    PAGE: LANDING
════════════════════════════════════════ */
.hero { min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:7rem 3.5rem 4rem;gap:4rem;position:relative;overflow:hidden; }
.hero::after { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(58,143,168,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(58,143,168,.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0; }
.hero-left { position:relative;z-index:2; }
.hero-right { position:relative;z-index:2; }
.hero-eyebrow { display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:2rem;opacity:0;animation:revealUp .8s .1s ease forwards; }
.hero-eyebrow::before { content:'';width:24px;height:1px;background:var(--teal);display:inline-block; }
.hero-title { font-family:'Lora',serif;font-size:clamp(2.8rem,5vw,4.8rem);font-weight:600;line-height:1.05;color:var(--studio-dark);margin-bottom:.8rem;opacity:0;animation:revealUp .8s .2s ease forwards; }
.hero-title em { font-family:'Playfair Display',serif;font-style:italic;color:var(--teal);position:relative; }
.hero-title em::after { content:'';position:absolute;bottom:3px;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--teal),transparent); }
.hero-sub { font-family:'Lora',serif;font-size:.95rem;color:var(--muted);font-style:italic;margin-bottom:2.5rem;line-height:1.7;opacity:0;animation:revealUp .8s .3s ease forwards; }
.hero-tags { display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.5rem;opacity:0;animation:revealUp .8s .4s ease forwards; }
.tag { display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .8rem;border-radius:100px;font-size:.7rem;font-weight:500;letter-spacing:.06em;background:var(--teal-pale);color:var(--teal);border:1px solid rgba(58,143,168,.2); }
.tag::before { content:'·'; }
.hero-cta { display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;opacity:0;animation:revealUp .8s .5s ease forwards; }
.hero-card-wrap { opacity:0;animation:revealRight .9s .4s ease forwards; }
.hero-main-card { background:var(--studio-dark);border-radius:24px;padding:2rem;position:relative;overflow:hidden;margin-bottom:1rem; }
.hero-main-card::before { content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(58,143,168,.3),transparent 70%);pointer-events:none; }
.hc-label { font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1.2rem; }
.hc-name { font-family:'Lora',serif;font-size:1.4rem;font-weight:600;color:#fff;margin-bottom:.25rem; }
.hc-role { font-size:.8rem;color:var(--teal-light);margin-bottom:1.5rem; }
.hc-stats { display:grid;grid-template-columns:1fr 1fr;gap:.7rem; }
.hc-stat { background:rgba(255,255,255,.06);border-radius:12px;padding:.8rem 1rem; }
.hc-stat-num { font-family:'Lora',serif;font-size:1.5rem;font-weight:600;color:#fff;line-height:1;margin-bottom:.2rem; }
.hc-stat-num sup { font-size:.85rem;color:var(--teal-light); }
.hc-stat-lbl { font-size:.67rem;color:rgba(255,255,255,.4); }
.hero-mini { display:grid;grid-template-columns:1fr 1fr;gap:.8rem; }
.mini-card { background:var(--white);border:1px solid var(--sand);border-radius:14px;padding:.9rem 1rem;transition:border-color .3s,transform .3s; }
.mini-card:hover { border-color:var(--teal);transform:translateY(-3px); }
.mini-icon { font-size:1.2rem;margin-bottom:.4rem; }
.mini-name { font-size:.8rem;font-weight:500;color:var(--studio-dark); }
.mini-sub { font-size:.68rem;color:var(--muted);margin-top:.1rem; }

/* Strip */
.strip { background:var(--studio-dark);overflow:hidden; }
.strip-track { display:flex;width:max-content;animation:scrollStrip 30s linear infinite; }
.strip-item { flex-shrink:0;display:flex;align-items:center;gap:1rem;padding:1rem 2.2rem;white-space:nowrap;color:rgba(90,175,200,.6);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase; }
.strip-dot { width:4px;height:4px;border-radius:50%;background:var(--teal);flex-shrink:0; }
@keyframes scrollStrip { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Projects preview */
.proj-preview { padding:7rem 3.5rem;max-width:1150px;margin:0 auto; }
.proj-preview-header { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem; }
.section-big-title { font-family:'Lora',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;color:var(--studio-dark); }
.section-big-title em { font-family:'Playfair Display',serif;font-style:italic;color:var(--teal); }
.see-all { font-size:.8rem;color:var(--teal);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:.4rem;transition:gap .3s;cursor:pointer; }
.see-all:hover { gap:.7rem; }
.proj-grid-3 { display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.2rem; }
.proj-card { background:var(--white);border:1px solid var(--sand);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s;display:flex;flex-direction:column; }
.proj-card:hover { transform:translateY(-6px);box-shadow:0 20px 50px rgba(26,46,58,.1);border-color:var(--teal); }
.proj-thumb { aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;overflow:hidden;transition:transform .4s; }
.proj-card:hover .proj-thumb { transform:scale(1.04); }
.pt1 { background:linear-gradient(135deg,#d8edf3,#b8d8e5); }
.pt2 { background:linear-gradient(135deg,#dde8ec,#c5d8e2); }
.pt3 { background:linear-gradient(135deg,#e2ecef,#ccdee6); }
.pt4 { background:linear-gradient(135deg,#d5e9ee,#bdd6e0); }
.proj-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(26,46,58,.85) 0%,transparent 60%);opacity:0;transition:opacity .35s; }
.proj-card:hover .proj-overlay { opacity:1; }
.proj-overlay-info { position:absolute;bottom:0;left:0;right:0;padding:1rem;transform:translateY(6px);opacity:0;transition:all .35s; }
.proj-card:hover .proj-overlay-info { transform:translateY(0);opacity:1; }
.proj-overlay-year { font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5); }
.proj-overlay-cta { font-size:.78rem;color:var(--teal-light);font-weight:500;margin-top:.2rem; }
.proj-body { padding:1.1rem;flex:1;display:flex;flex-direction:column; }
.proj-tags { display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem; }
.proj-tag { font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;padding:.16rem .5rem;border-radius:100px;background:var(--teal-pale);color:var(--teal);font-weight:500; }
.proj-name { font-family:'Lora',serif;font-size:.92rem;font-weight:600;color:var(--studio-dark);margin-bottom:.35rem; }
.proj-desc { font-size:.78rem;color:var(--muted);line-height:1.65;flex:1; }
.proj-footer { display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--studio-subtle); }
.proj-stack { font-size:.68rem;color:var(--muted); }
.proj-arrow { font-size:.75rem;color:var(--teal); }

/* Services */
.svc-section { background:var(--studio-subtle);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand);padding:7rem 3.5rem; }
.svc-inner { max-width:1150px;margin:0 auto; }
.svc-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem; }
.svc-card { background:var(--white);border:1px solid var(--sand);border-radius:20px;padding:2rem;transition:all .35s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden; }
.svc-card::after { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--teal-light));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.svc-card:hover { transform:translateY(-6px);box-shadow:0 20px 50px rgba(26,46,58,.08);border-color:var(--teal); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-num { font-family:'Lora',serif;font-style:italic;font-size:2.5rem;color:var(--studio-subtle);font-weight:600;margin-bottom:.8rem;line-height:1; }
.svc-name { font-family:'Lora',serif;font-size:1.1rem;font-weight:600;color:var(--studio-dark);margin-bottom:.6rem; }
.svc-desc { font-size:.82rem;color:var(--muted);line-height:1.8;margin-bottom:1.2rem; }
.svc-list { list-style:none;display:flex;flex-direction:column;gap:.4rem; }
.svc-list li { font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:.4rem; }
.svc-list li::before { content:'→';color:var(--teal);font-size:.7rem; }

/* Client teaser */
.client-teaser { background:var(--studio-dark);padding:7rem 3.5rem;position:relative;overflow:hidden; }
.client-teaser::before { content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(58,143,168,.15),transparent 70%);pointer-events:none; }
.client-inner { max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:2; }
.client-eyebrow { font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-light);font-weight:500;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem; }
.client-eyebrow::before { content:'⬡';font-size:.7rem; }
.client-title { font-family:'Lora',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;color:#fff;margin-bottom:1rem;line-height:1.2; }
.client-title em { font-family:'Playfair Display',serif;font-style:italic;color:var(--teal-light); }
.client-desc { font-size:.9rem;color:rgba(255,255,255,.5);line-height:1.9;margin-bottom:2rem; }
.client-feats { display:flex;flex-direction:column;gap:.8rem;margin-bottom:2.5rem; }
.client-feat { display:flex;align-items:center;gap:.8rem; }
.feat-dot { width:6px;height:6px;background:var(--teal);border-radius:50%;flex-shrink:0; }
.feat-text { font-size:.85rem;color:rgba(255,255,255,.65); }
.mockup-box { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:1.5rem; }
.mockup-hdr { display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08); }
.mockup-dots { display:flex;gap:.4rem; }
.mockup-dot { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12); }
.mockup-dot:last-child { background:rgba(58,143,168,.4); }
.mockup-url { font-size:.72rem;color:rgba(255,255,255,.25);letter-spacing:.04em; }
.mockup-proj { background:rgba(58,143,168,.08);border:1px solid rgba(58,143,168,.2);border-radius:12px;padding:1rem 1.1rem;margin-bottom:.8rem; }
.mockup-proj-hdr { display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem; }
.mockup-proj-name { font-size:.82rem;font-weight:500;color:#fff; }
.mockup-badge { font-size:.6rem;padding:.2rem .6rem;border-radius:100px;background:rgba(58,143,168,.3);color:var(--teal-light);letter-spacing:.06em;text-transform:uppercase; }
.mockup-pct-row { display:flex;justify-content:space-between;margin-bottom:.4rem; }
.mockup-pct-row span { font-size:.68rem;color:rgba(255,255,255,.3); }
.mockup-pct-row strong { font-size:.68rem;color:var(--teal-light); }
.mockup-bar { height:4px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden;margin-bottom:.8rem; }
.mockup-fill { height:100%;border-radius:100px;background:linear-gradient(90deg,var(--teal),var(--teal-light)); }
.mockup-ms { display:flex;flex-direction:column;gap:.35rem; }
.mockup-ms-item { display:flex;align-items:center;gap:.6rem;font-size:.7rem;color:rgba(255,255,255,.28); }
.mockup-ms-item.done { color:rgba(255,255,255,.6); }
.mockup-ms-dot { width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.12);flex-shrink:0; }
.mockup-ms-item.done .mockup-ms-dot { background:var(--teal); }

/* Contact */
.contact-section { background:var(--studio-subtle);border-top:1px solid var(--sand);padding:7rem 3.5rem; }
.contact-inner { max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:6rem;align-items:start; }
.contact-title { font-family:'Lora',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;color:var(--studio-dark);margin-bottom:.8rem; }
.contact-title em { font-family:'Playfair Display',serif;font-style:italic;color:var(--teal); }
.contact-desc { font-size:.9rem;color:var(--muted);line-height:1.9;margin-bottom:2rem; }
.contact-info { display:flex;flex-direction:column;gap:.8rem; }
.contact-info-item { display:flex;align-items:center;gap:.8rem; }
.c-icon { width:34px;height:34px;background:var(--teal-pale);border:1px solid rgba(58,143,168,.2);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0; }
.c-text { font-size:.85rem;color:var(--studio-dark);font-weight:500; }
.contact-form { background:var(--white);border:1px solid var(--sand);border-radius:24px;padding:2.2rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem; }
.form-field { display:flex;flex-direction:column;gap:.4rem; }
.form-field.full { grid-column:span 2; }
.form-label { font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); }
.form-input,.form-textarea { background:var(--cream);border:1.5px solid var(--sand);border-radius:10px;padding:.75rem 1rem;font-family:'DM Sans',sans-serif;font-size:.85rem;color:var(--ink);font-weight:300;outline:none;transition:border-color .2s,box-shadow .2s;width:100%; }
.form-input:focus,.form-textarea:focus { border-color:var(--teal);box-shadow:0 0 0 3px rgba(58,143,168,.1);background:#fff; }
.form-textarea { resize:none;min-height:120px;line-height:1.7; }
.form-submit { width:100%;padding:.9rem;background:var(--studio-dark);color:#fff;border:none;border-radius:100px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;cursor:pointer;letter-spacing:.04em;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;margin-top:.5rem; }
.form-submit::before { content:'';position:absolute;inset:0;background:var(--teal);opacity:0;transition:opacity .3s; }
.form-submit span { position:relative;z-index:1; }
.form-submit:hover::before { opacity:1; }
.form-submit:hover { transform:translateY(-2px);box-shadow:0 10px 28px rgba(58,143,168,.25); }

/* ════════════════════════════════════════
    PAGE: ABOUT
════════════════════════════════════════ */
.about-hero {
    padding: 4rem 3.5rem 5rem;
    max-width: 1150px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
    overflow: visible;
}

.about-photo {
    background: linear-gradient(135deg,var(--studio-subtle),var(--sand));
    border-radius: 28px;
    aspect-ratio: 3/4;
    max-width: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

.about-photo::before { content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(58,143,168,.15),rgba(26,46,58,.05)); }
.about-photo-placeholder { opacity:.25;position:relative;z-index:1; }
.about-photo-cap { font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-top:.8rem;text-align:center; }
.about-deco {
    position: absolute;
    bottom: 20px;
    right: 80px;  /* ← dorong ke kanan, keluar dari foto tapi tidak nimpa teks */
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: 16px;
    padding: .9rem 1.2rem;
    box-shadow: 0 8px 30px rgba(26,46,58,.1);
    z-index: 10;
    white-space: nowrap;
}
.about-deco-lbl { font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.2rem; }
.about-deco-val { font-family:'Lora',serif;font-size:.92rem;color:var(--studio-dark);font-weight:600; }
.about-eyebrow { font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:1rem; }
.about-title { font-family:'Lora',serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:600;color:var(--studio-dark);margin-bottom:1.2rem;line-height:1.1; }
.about-title em { font-family:'Playfair Display',serif;font-style:italic;color:var(--teal); }
.about-body { font-size:.92rem;color:var(--muted);line-height:1.95;margin-bottom:1.2rem; }
.about-body strong { color:var(--studio-dark);font-weight:500; }
.cv-card { background:var(--teal-pale);border:1.5px solid rgba(58,143,168,.2);border-radius:16px;padding:1.2rem 1.4rem;margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem; }
.cv-card-text { font-size:.85rem;font-weight:500;color:var(--studio-dark);margin-bottom:.2rem; }
.cv-card-sub { font-size:.72rem;color:var(--muted); }
.about-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:2rem; }
.about-stat { background:var(--white);border:1px solid var(--sand);border-radius:14px;padding:1rem 1.1rem;text-align:center; }
.about-stat-num { font-family:'Lora',serif;font-size:1.6rem;font-weight:600;color:var(--studio-dark);line-height:1;margin-bottom:.2rem; }
.about-stat-num sup { font-size:.9rem;color:var(--teal); }
.about-stat-lbl { font-size:.68rem;color:var(--muted); }
.skills-section { padding:5rem 3.5rem;background:var(--studio-subtle);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand); }
.skills-inner { max-width:1150px;margin:0 auto; }
.skills-grid { display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.5rem; }
.skill-col-title { font-family:'Lora',serif;font-size:1.1rem;font-weight:600;color:var(--studio-dark);margin-bottom:1.2rem; }
.skill-row { margin-bottom:1.1rem; }
.skill-hdr { display:flex;justify-content:space-between;margin-bottom:.4rem; }
.skill-name { font-size:.82rem;font-weight:500;color:var(--studio-dark); }
.skill-pct { font-size:.72rem;color:var(--teal);font-weight:500; }
.skill-bar { height:5px;background:var(--sand);border-radius:100px;overflow:hidden; }
.skill-fill { height:100%;border-radius:100px;background:linear-gradient(90deg,var(--teal),var(--teal-light));transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.4,0,.2,1); }
.skill-row.visible .skill-fill { transform:scaleX(1); }
.stack-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:2rem; }
.stack-tag { background:var(--white);border:1px solid var(--sand);border-radius:10px;padding:.6rem .8rem;text-align:center;font-size:.75rem;font-weight:500;color:var(--studio-mid);transition:all .3s; }
.stack-tag:hover { background:var(--teal-pale);color:var(--teal);border-color:rgba(58,143,168,.25); }
.exp-section { padding:5rem 3.5rem;max-width:1150px;margin:0 auto; }
.exp-list { display:flex;flex-direction:column;gap:1.2rem;margin-top:2.5rem; }
.exp-item { background:var(--white);border:1px solid var(--sand);border-radius:18px;padding:1.5rem 1.8rem;display:flex;gap:2rem;align-items:flex-start;transition:border-color .3s; }
.exp-item:hover { border-color:var(--teal); }
.exp-year { font-family:'Lora',serif;font-style:italic;font-size:1rem;color:var(--teal);font-weight:600;white-space:nowrap;min-width:80px; }
.exp-title { font-family:'Lora',serif;font-size:1rem;font-weight:600;color:var(--studio-dark);margin-bottom:.2rem; }
.exp-place { font-size:.8rem;color:var(--teal);margin-bottom:.5rem;font-weight:500; }
.exp-desc { font-size:.82rem;color:var(--muted);line-height:1.75; }

/* ════════════════════════════════════════
    PAGE: PROJECTS
════════════════════════════════════════ */
.projects-hero { padding:3.5rem 3.5rem 2rem;max-width:1150px;margin:0 auto; }
.projects-big-title { font-family:'Lora',serif;font-size:clamp(2.2rem,4vw,3.5rem);font-weight:600;color:var(--studio-dark);margin-bottom:.7rem; }
.projects-big-title em { font-family:'Playfair Display',serif;font-style:italic;color:var(--teal); }
.projects-sub { font-size:.92rem;color:var(--muted);line-height:1.7; }
.filter-wrap { padding:0 3.5rem 2.5rem;max-width:1150px;margin:0 auto;display:flex;gap:.6rem;flex-wrap:wrap; }
.filter-btn { padding:.38rem 1rem;border-radius:100px;font-size:.75rem;font-weight:500;border:1.5px solid var(--sand);background:var(--white);color:var(--muted);cursor:pointer;transition:all .25s;font-family:'DM Sans',sans-serif; }
.filter-btn:hover,.filter-btn.active { background:var(--teal);border-color:var(--teal);color:#fff; }
.all-projects { padding:0 3.5rem 7rem;max-width:1150px;margin:0 auto; }
.all-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem; }
.all-card { background:var(--white);border:1px solid var(--sand);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s; }
.all-card:hover { transform:translateY(-6px);box-shadow:0 20px 50px rgba(26,46,58,.1);border-color:var(--teal); }
.all-thumb { aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:2.2rem;overflow:hidden;transition:transform .4s; }
.all-card:hover .all-thumb { transform:scale(1.04); }
.all-body { padding:1.2rem; }
.all-name { font-family:'Lora',serif;font-size:.95rem;font-weight:600;color:var(--studio-dark);margin-bottom:.35rem;margin-top:.5rem; }
.all-desc { font-size:.78rem;color:var(--muted);line-height:1.65;margin-bottom:.8rem; }
.all-footer { display:flex;justify-content:space-between;align-items:center;padding-top:.8rem;border-top:1px solid var(--studio-subtle); }
.all-stack { font-size:.68rem;color:var(--muted); }
.badge-live { font-size:.7rem;color:var(--green);font-weight:500;display:flex;align-items:center;gap:.3rem; }
.badge-live::before { content:'';width:5px;height:5px;background:var(--green);border-radius:50%; }
.badge-private { font-size:.7rem;color:var(--muted); }

/* ════════════════════════════════════════
    PAGE: PROJECT DETAIL
════════════════════════════════════════ */
.detail-back-bar { padding:1.5rem 3.5rem 0;max-width:1150px;margin:0 auto; }
.back-btn { display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);cursor:pointer;transition:color .2s;background:none;border:none;font-family:'DM Sans',sans-serif; }
.back-btn:hover { color:var(--teal); }
.detail-hero { padding:2rem 3.5rem 3rem;max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start; }
.detail-main-thumb { background:linear-gradient(135deg,#d8edf3,#b8d8e5);border-radius:20px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:5rem;position:relative;overflow:hidden; }
.detail-main-thumb::after { content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(58,143,168,.1),rgba(26,46,58,.05)); }
.detail-eyebrow { font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:1rem; }
.detail-title { font-family:'Lora',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;color:var(--studio-dark);margin-bottom:.7rem;line-height:1.15; }
.detail-badges { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem; }
.detail-badge { font-size:.65rem;padding:.22rem .65rem;border-radius:100px;background:var(--teal-pale);color:var(--teal);font-weight:500;letter-spacing:.06em;text-transform:uppercase; }
.detail-badge.live { background:var(--green-pale);color:var(--green); }
.detail-badge.private { background:var(--studio-subtle);color:var(--muted); }
.detail-meta { display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.5rem; }
.detail-meta-item { display:flex;gap:.8rem;align-items:center; }
.detail-meta-icon { width:30px;height:30px;background:var(--teal-pale);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0; }
.detail-meta-label { font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); }
.detail-meta-value { font-size:.82rem;font-weight:500;color:var(--studio-dark);margin-top:.05rem; }
.detail-body { padding:0 3.5rem 4rem;max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr .55fr;gap:3rem; }
.d-section-title { font-family:'Lora',serif;font-size:1.1rem;font-weight:600;color:var(--studio-dark);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem; }
.d-section-title::before { content:'';width:3px;height:16px;background:var(--teal);border-radius:100px; }
.detail-desc { font-size:.88rem;color:var(--muted);line-height:2;margin-bottom:2rem; }
.challenge-box { background:var(--teal-pale);border:1px solid rgba(58,143,168,.15);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:2rem; }
.challenge-title { font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.7rem; }
.challenge-item { display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.5rem;font-size:.82rem;color:var(--studio-mid);line-height:1.6; }
.challenge-item::before { content:'→';color:var(--teal);font-size:.7rem;margin-top:.2rem;flex-shrink:0; }
.screens-grid { display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem; }
.screen-thumb { background:var(--studio-subtle);border-radius:10px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.sidebar-card { background:var(--white);border:1px solid var(--sand);border-radius:16px;padding:1.3rem;margin-bottom:1rem; }
.sidebar-label { font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem; }
.tech-list { display:flex;flex-wrap:wrap;gap:.5rem; }
.tech-tag { font-size:.72rem;padding:.25rem .7rem;border-radius:100px;background:var(--studio-subtle);color:var(--studio-mid);font-weight:500; }
.feat-list { display:flex;flex-direction:column;gap:.5rem; }
.feat-item { font-size:.8rem;color:var(--studio-mid);display:flex;gap:.5rem;align-items:flex-start; }
.feat-item-check { color:var(--teal);margin-top:.15rem;flex-shrink:0; }

/* ════════════════════════════════════════
    CLIENT PAGES (Login, Dashboard, Detail)
════════════════════════════════════════ */
/* Client topbar */
.client-topbar { background:var(--white);border-bottom:1px solid var(--sand);padding:0 2.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;width:100%;flex-shrink:0; }
.client-topbar-logo { display:flex;align-items:center;gap:.5rem;font-family:'Lora',serif;font-size:1rem;font-weight:600;color:var(--studio-dark);text-decoration:none;cursor:pointer; }
.client-topbar-right { display:flex;align-items:center;gap:1rem; }
.client-greeting { font-size:.82rem;color:var(--muted); }
.client-greeting strong { color:var(--studio-dark);font-weight:500; }
.client-avatar { width:34px;height:34px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#fff; }
.client-logout { font-size:.75rem;color:var(--muted);cursor:pointer;padding:.3rem .8rem;border-radius:100px;border:1px solid var(--sand);background:transparent;font-family:'DM Sans',sans-serif;transition:all .2s; }
.client-logout:hover { border-color:var(--teal);color:var(--teal); }

/* Login page */
#loginPage { background:var(--cream);align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden; }
#loginPage::before { content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(58,143,168,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(58,143,168,.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none; }
.login-wrap { width:100%;max-width:400px;position:relative;z-index:1; }
.login-brand { text-align:center;margin-bottom:2rem; }
.login-brand-logo { display:inline-flex;align-items:center;gap:.5rem;font-family:'Lora',serif;font-size:1.2rem;font-weight:600;color:var(--studio-dark);cursor:pointer; }
.login-brand-sub { font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.3rem; }
.login-card { background:var(--white);border:1px solid var(--sand);border-radius:24px;padding:2.5rem;box-shadow:0 20px 60px rgba(26,46,58,.07); }
.login-title { font-family:'Lora',serif;font-size:1.3rem;font-weight:600;color:var(--studio-dark);margin-bottom:.3rem; }
.login-desc { font-size:.82rem;color:var(--muted);margin-bottom:1.8rem;line-height:1.6; }
.login-group { margin-bottom:1.1rem; }
.login-label { display:block;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem; }
.login-input { width:100%;padding:.75rem 1rem;background:var(--cream);border:1.5px solid var(--sand);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:.88rem;color:var(--ink);font-weight:300;outline:none;transition:border-color .2s,box-shadow .2s; }
.login-input:focus { border-color:var(--teal);box-shadow:0 0 0 3px rgba(58,143,168,.1);background:#fff; }
.login-btn { width:100%;padding:.9rem;background:var(--studio-dark);color:#fff;border:none;border-radius:100px;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s;margin-top:.5rem;position:relative;overflow:hidden; }
.login-btn::before { content:'';position:absolute;inset:0;background:var(--teal);opacity:0;transition:opacity .3s; }
.login-btn span { position:relative;z-index:1; }
.login-btn:hover::before { opacity:1; }
.login-btn:hover { transform:translateY(-2px);box-shadow:0 10px 28px rgba(58,143,168,.25); }
.login-back { display:block;text-align:center;margin-top:1.2rem;font-size:.78rem;color:var(--muted);text-decoration:none;cursor:pointer;transition:color .2s; }
.login-back:hover { color:var(--teal); }

/* Dashboard */
.dash-content { flex:1;padding:2.5rem;max-width:1000px;margin:0 auto;width:100%; }
.dash-hello { font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:.3rem; }
.dash-title { font-family:'Lora',serif;font-size:1.6rem;font-weight:600;color:var(--studio-dark);margin-bottom:2rem; }
.dash-title em { font-family:'Playfair Display',serif;font-style:italic;color:var(--teal); }
.dash-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem; }
.dash-stat { background:var(--white);border:1px solid var(--sand);border-radius:14px;padding:1.1rem 1.3rem;display:flex;align-items:center;gap:.9rem; }
.dash-stat-icon { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0; }
.dash-stat-icon.teal { background:var(--teal-pale); }
.dash-stat-icon.green { background:var(--green-pale); }
.dash-stat-icon.yellow { background:var(--yellow-pale); }
.dash-stat-val { font-family:'Lora',serif;font-size:1.3rem;font-weight:600;color:var(--studio-dark);line-height:1; }
.dash-stat-lbl { font-size:.7rem;color:var(--muted);margin-top:.2rem; }
.dash-section-lbl { font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:1rem; }
.dash-proj-cards { display:grid;grid-template-columns:1fr 1fr;gap:1.2rem; }
.dash-proj-card { background:var(--white);border:1px solid var(--sand);border-radius:20px;padding:1.5rem;cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden; }
.dash-proj-card::after { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--teal-light));transform:scaleX(0);transform-origin:left;transition:transform .4s; }
.dash-proj-card:hover { transform:translateY(-5px);box-shadow:0 16px 40px rgba(26,46,58,.1);border-color:var(--teal); }
.dash-proj-card:hover::after { transform:scaleX(1); }
.dash-proj-hdr { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem; }
.dash-proj-name { font-family:'Lora',serif;font-size:1rem;font-weight:600;color:var(--studio-dark);margin-bottom:.25rem; }
.dash-proj-type { font-size:.72rem;color:var(--muted); }
.status-badge { font-size:.62rem;font-weight:600;padding:.25rem .7rem;border-radius:100px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap; }
.status-badge.inprogress { background:var(--teal-pale);color:var(--teal); }
.status-badge.done { background:var(--green-pale);color:var(--green); }
.status-badge.queued { background:var(--yellow-pale);color:var(--yellow); }
.dash-pct-row { display:flex;justify-content:space-between;margin-bottom:.4rem; }
.dash-pct-row span { font-size:.72rem;color:var(--muted); }
.dash-pct-row strong { font-size:.72rem;color:var(--teal);font-weight:600; }
.dash-bar { height:5px;background:var(--studio-subtle);border-radius:100px;overflow:hidden;margin-bottom:1rem; }
.dash-fill { height:100%;border-radius:100px;background:linear-gradient(90deg,var(--teal),var(--teal-light));transition:width .8s ease; }
.dash-proj-meta { display:flex;gap:.6rem;flex-wrap:wrap; }
.dash-proj-meta-item { display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--muted); }
.dash-view-btn { margin-top:1.1rem;width:100%;padding:.6rem;background:var(--teal-pale);border:1px solid rgba(58,143,168,.2);border-radius:100px;color:var(--teal);font-size:.8rem;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .25s; }
.dash-view-btn:hover { background:var(--teal);color:#fff; }

/* Client project detail */
.client-detail-content { flex:1;padding:2.5rem;max-width:1000px;margin:0 auto;width:100%; }
.client-back-btn { display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);cursor:pointer;margin-bottom:1.5rem;transition:color .2s;background:none;border:none;font-family:'DM Sans',sans-serif; }
.client-back-btn:hover { color:var(--teal); }
.client-detail-header { background:var(--white);border:1px solid var(--sand);border-radius:20px;padding:1.8rem 2rem;margin-bottom:1.5rem; }
.client-detail-hdr-top { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.2rem; }
.client-detail-title { font-family:'Lora',serif;font-size:1.4rem;font-weight:600;color:var(--studio-dark);margin-bottom:.3rem; }
.client-detail-type { font-size:.8rem;color:var(--muted); }
.client-progress-row { display:flex;align-items:center;gap:1rem; }
.client-progress-bar { flex:1;height:8px;background:var(--studio-subtle);border-radius:100px;overflow:hidden; }
.client-progress-fill { height:100%;border-radius:100px;background:linear-gradient(90deg,var(--teal),var(--teal-light));transition:width 1s ease; }
.client-pct { font-family:'Lora',serif;font-size:1.1rem;font-weight:600;color:var(--teal);white-space:nowrap; }
.preview-card { background:linear-gradient(135deg,var(--teal-pale),rgba(58,143,168,.04));border:1.5px solid rgba(58,143,168,.2);border-radius:14px;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem; }
.preview-card-left { display:flex;align-items:center;gap:.8rem; }
.preview-icon { width:36px;height:36px;background:var(--teal);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0; }
.preview-label { font-size:.82rem;font-weight:500;color:var(--studio-dark);margin-bottom:.1rem; }
.preview-url { font-size:.72rem;color:var(--teal); }
.preview-btn { padding:.5rem 1.1rem;border-radius:100px;background:var(--teal);color:#fff;font-size:.78rem;font-weight:500;border:none;font-family:'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;transition:all .25s; }
.preview-btn:hover { background:var(--teal-light);transform:translateY(-2px); }
.client-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem; }
.client-detail-card { background:var(--white);border:1px solid var(--sand);border-radius:18px;padding:1.5rem; }
.client-detail-card.full { grid-column:span 2; }
.client-card-title { display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem; }
.client-card-title::before { content:'';width:3px;height:14px;background:var(--teal);border-radius:100px; }
.ms-list { display:flex;flex-direction:column;gap:0; }
.ms-item { display:flex;align-items:flex-start;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--studio-subtle);position:relative; }
.ms-item:last-child { border-bottom:none; }
.ms-connector { display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding-top:2px; }
.ms-dot { width:14px;height:14px;border-radius:50%;background:var(--studio-subtle);border:2px solid var(--sand);flex-shrink:0;transition:all .3s; }
.ms-dot.done { background:var(--teal);border-color:var(--teal); }
.ms-dot.current { background:var(--white);border-color:var(--teal);border-width:3px;box-shadow:0 0 0 3px var(--teal-pale); }
.ms-line { width:2px;flex:1;background:var(--studio-subtle);margin:3px 0;min-height:20px; }
.ms-line.done { background:var(--teal); }
.ms-body { flex:1; }
.ms-name { font-size:.85rem;font-weight:500;color:var(--studio-dark);margin-bottom:.2rem; }
.ms-name.done { color:var(--studio-mid); }
.ms-name.pending { color:var(--muted); }
.ms-name.current { color:var(--teal);font-weight:600; }
.ms-date { font-size:.72rem;color:var(--muted); }
.ms-check { font-size:.75rem;color:var(--green);flex-shrink:0;align-self:center; }
.update-list { display:flex;flex-direction:column;gap:.8rem; }
.update-item { display:flex;gap:.9rem;align-items:flex-start;padding:.9rem;background:var(--cream);border-radius:12px;border:1px solid var(--studio-subtle); }
.update-avatar { width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0; }
.update-body { flex:1; }
.update-hdr { display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem; }
.update-from { font-size:.78rem;font-weight:600;color:var(--studio-dark); }
.update-time { font-size:.68rem;color:var(--muted); }
.update-text { font-size:.8rem;color:var(--studio-mid);line-height:1.6; }
.update-tag { display:inline-block;font-size:.62rem;padding:.15rem .55rem;border-radius:100px;background:var(--teal-pale);color:var(--teal);font-weight:500;margin-top:.4rem; }
.file-list { display:flex;flex-direction:column;gap:.6rem; }
.file-item { display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;background:var(--cream);border:1px solid var(--studio-subtle);border-radius:10px;transition:border-color .2s; }
.file-item:hover { border-color:var(--teal); }
.file-icon { width:30px;height:30px;background:var(--teal-pale);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0; }
.file-name { font-size:.8rem;font-weight:500;color:var(--studio-dark);flex:1; }
.file-size { font-size:.68rem;color:var(--muted); }
.file-dl { font-size:.72rem;color:var(--teal);cursor:pointer;padding:.2rem .6rem;border-radius:100px;background:var(--teal-pale);transition:all .2s; }
.file-dl:hover { background:var(--teal);color:#fff; }

/* ─── MOBILE NAV ─── */
.navbar-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--studio-dark);
    padding: 0;
}

.navbar-mobile {
    display: none;
    flex-direction: column;
    padding: 0.75rem 0;
    border-top: 1px solid var(--sand);
    gap: 2px;
}

.navbar-mobile.open { display: flex; }

.nav-link-mobile {
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    transition: all 0.2s;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-link-mobile:hover { color: var(--teal); }
.nav-link-mobile.active { color: var(--teal); font-weight: 500; }

.navbar-mobile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0.25rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--sand);
}

@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-right { display: none; }
    .navbar-hamburger { display: flex; }
}

/* ══ RESPONSIVE ══ */
@media (max-width:900px) {
    .pub-nav { padding:1.2rem 1.5rem; }
    .nav-links { display:none; }
    .hero { grid-template-columns:1fr;padding:6rem 1.5rem 3rem;gap:2.5rem; }
    .hero-right { order:-1; }
    .proj-preview,.svc-section,.client-teaser,.contact-section { padding:5rem 1.5rem; }
    .proj-grid-3,.svc-grid { grid-template-columns:1fr; }
    .client-inner { grid-template-columns:1fr;gap:3rem; }
    .contact-inner { grid-template-columns:1fr;gap:3rem; }
    .form-row { grid-template-columns:1fr; }
    .form-field.full { grid-column:span 1; }
    .about-hero { grid-template-columns:1fr;gap:2.5rem;padding:3rem 1.5rem 4rem; }
    .skills-section,.exp-section { padding:4rem 1.5rem; }
    .skills-grid { grid-template-columns:1fr; }
    .projects-hero,.filter-wrap,.all-projects { padding-left:1.5rem;padding-right:1.5rem; }
    .all-grid { grid-template-columns:1fr 1fr; }
    .detail-hero { grid-template-columns:1fr;gap:2rem;padding:1.5rem 1.5rem 2.5rem; }
    .detail-body { grid-template-columns:1fr;gap:1.5rem;padding:0 1.5rem 3rem; }
    .detail-back-bar { padding:1rem 1.5rem 0; }
    .dash-proj-cards { grid-template-columns:1fr; }
    .dash-stats { grid-template-columns:1fr 1fr; }
    .client-detail-grid { grid-template-columns:1fr; }
    .client-detail-card.full { grid-column:span 1; }
    .page-footer { padding:2rem 1.5rem;flex-direction:column;text-align:center; }
    .about-deco {
        bottom: 16px;
        right: 16px;
    }
    .pub-nav {
        flex-wrap: wrap;
        padding: 1rem 1.5rem;
        background: rgba(240,246,249,0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--sand);
    }

    .navbar-mobile {
        width: 100%;
        background: rgba(240,246,249,0.98);
    }

    /* Nav logo dan hamburger di satu baris */
    .pub-nav > .nav-logo { flex: 1; }
    .pub-nav > .navbar-hamburger { order: 2; }
    .pub-nav > .navbar-mobile { order: 3; width: 100%; }
}

/* WhatsApp Bubble */
.wa-bubble {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    z-index: 999;
    transition: all 0.3s;
    text-decoration: none;
}

.wa-bubble:hover {
    background: #20ba5a;
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,0.5);
}

@media (max-width: 900px) {
    .wa-bubble { bottom: 20px; right: 16px; width: 46px; height: 46px; }
}