:root{--font-text:Arial,Helvetica,sans-serif;--bg:#f8faf7;--ink:#202c27;--muted:#717972;--green:#316b50;--line:#dde3da}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:15px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #80ae84;outline-offset:5px}button{color:inherit}h1,h2,h3,h4,p{margin:0}button{border:0}.container{max-width:1160px;width:calc(100% - 96px);margin-inline:auto}.site-header{height:96px;max-width:1260px;padding:0 50px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:34px;font-weight:800;letter-spacing:-3px;line-height:1}.brand span{color:var(--green)}nav{display:flex;gap:36px;font-size:13px}nav a{position:relative;padding:10px 0;color:var(--muted)}nav a:hover,nav a.active{color:var(--green)}nav a.active:after{content:'';position:absolute;height:4px;width:4px;border-radius:50%;background:var(--green);bottom:0;left:50%}.menu-toggle{display:none;background:none;font-size:25px}.hero{display:grid;grid-template-columns:1.16fr 1fr;gap:60px;align-items:center;padding-block:90px 86px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;display:flex;gap:10px;align-items:center}.status-dot{width:7px;height:7px;border-radius:50%;background:#6c9878;display:inline-block;box-shadow:0 0 0 4px #6c987810;flex:none}h1{font-size:clamp(40px,4.4vw,60px);font-weight:500;line-height:1.14;letter-spacing:-2.8px;margin:25px 0}.serif{font-family:var(--font-text);font-style:normal;font-weight:400;color:var(--green)}.hero-copy>p{color:var(--muted);font-size:14px;max-width:420px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:27px;padding:15px 23px;border-radius:5px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}.primary{background:var(--green);color:white}.primary:hover{background:#24513c;transform:translateY(-2px)}.text-link{font-size:12px;display:inline-flex;gap:15px;align-items:center}.text-link:hover{color:var(--green)}.hero-note{font-size:10px;color:var(--muted);display:flex;gap:12px;align-items:center;margin-top:39px}.small-line{height:1px;width:25px;background:#8fa496}.hero-art{position:relative;height:365px;background:#eaf0e5;border:1px solid #e0e8da;border-radius:12px;display:flex;align-items:center;justify-content:center}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#cbd7c33b 1px,transparent 1px),linear-gradient(90deg,#cbd7c33b 1px,transparent 1px);background-size:27px 27px;border-radius:12px}.art-label{position:absolute;left:20px;top:17px;font-family:var(--font-text);font-size:9px;letter-spacing:1px;color:#7d8e78}.stack-strip{border-block:1px solid var(--line)}.stack-strip>.container{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px}.stack-strip span:first-child{font-size:9px;color:var(--muted);letter-spacing:1.3px}.stack-strip strong{font-size:17px;font-weight:600;color:#6c786e;letter-spacing:-.5px}.strip-star{font-size:25px;color:#849c80}.section{padding-block:78px}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading h2,h2{font-size:40px;font-weight:500;line-height:1.2;letter-spacing:-1.5px}.section-heading h2{margin:18px 0 12px}.section-heading p{color:var(--muted);font-size:13px}.section-side{font-size:11px;color:var(--muted);display:flex;gap:20px}.section-side span{font-size:26px;color:var(--green)}.project-toolbar{margin:35px 0 24px;display:flex;justify-content:space-between;align-items:center;gap:15px}.filters{display:flex;gap:7px}.filters button{background:transparent;padding:8px 14px;border-radius:5px;color:var(--muted);font-size:11px}.filters .selected{background:#e7eee2;color:#31563b}.filters span{margin-left:7px;font-size:9px;opacity:.6}.sample-note{font-size:9px;color:var(--muted)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 28px}.project[hidden]{display:none}.project-preview{width:100%;height:310px;border-radius:9px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:left;transition:transform .25s}.project-preview:hover{transform:translateY(-4px)}.preview-dashboard{background:#e6ede4;padding:30px 24px}.preview-studio{background:#eeeae4;padding:28px 24px}.preview-open{position:absolute;bottom:14px;right:14px;width:32px;height:32px;background:#ffffffb3;border-radius:50%;display:grid;place-items:center}.mock-dashboard{background:#fff;width:100%;height:245px;border-radius:6px;display:flex;box-shadow:0 15px 20px #2b3d2312;overflow:hidden;transform:rotate(-2deg);font-size:7px}.mock-dashboard aside{width:90px;flex:none;padding:16px 10px;border-right:1px solid #ebeeea;display:flex;flex-direction:column;gap:10px}.mock-dashboard aside b{font-size:18px;letter-spacing:-1px}.mock-dashboard aside b span{font-size:6px;color:#8cab5b}.mock-dashboard aside small{font-size:5px;color:#98a095;margin-top:16px}.mock-dashboard aside i{font-style:normal;padding:5px 4px;color:#8b958b;font-size:6px}.mock-dashboard aside .mock-selected{background:#edf3e7;color:#567440;border-radius:3px}.dashboard-body{padding:15px;flex:1;min-width:0}.mock-top{display:flex;justify-content:space-between;border-bottom:1px solid #eef0eb;padding-bottom:9px;margin-bottom:12px;font-weight:600}.dashboard-body>small{font-size:6px;color:#91998d}.dashboard-body h4{font-size:10px;margin:3px 0 12px}.mock-stats{display:flex;gap:7px}.mock-stats>div{flex:1;border:1px solid #e8ece3;border-radius:4px;padding:7px;font-size:5px;color:#7a8477}.mock-stats b{display:block;font-size:12px;color:#283724;margin:2px 0}.mock-stats em{font-size:5px;color:#75965e;font-style:normal}.chart{margin-top:12px;border:1px solid #e8ece3;border-radius:4px;padding:9px;height:97px}.chart>div:first-child{display:flex;justify-content:space-between;font-size:6px}.chart small{font-size:5px;color:#999}.bars{height:62px;display:flex;gap:9px;align-items:end;padding:7px 10px 0;background:repeating-linear-gradient(0deg,transparent 0 18px,#edf0e9 18px 19px)}.bars i{height:var(--bar);background:#9bb688;width:13%;border-radius:2px 2px 0 0}.bars i:nth-child(even){background:#c8d8bc}.mock-studio{position:relative;width:100%;height:255px;background:#f8f5ef;padding:18px 22px;overflow:hidden;box-shadow:0 15px 20px #625c4310}.studio-nav{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dad5ca;padding-bottom:9px}.studio-nav b{font-size:18px;letter-spacing:-1px}.studio-nav span{font-size:5px;letter-spacing:1px}.mock-studio>small{font-size:5px;letter-spacing:1px;display:block;margin-top:22px}.mock-studio h4{font-size:31px;line-height:1.1;margin-top:9px;font-weight:400;letter-spacing:-1.2px;position:relative;z-index:1}.mock-studio h4 em{font-family:var(--font-text)}.studio-bottom{margin-top:22px;position:relative;z-index:1}.studio-bottom p{font-size:6px;color:#878173}.studio-bottom>span{display:block;font-size:5px;margin-top:16px}.architecture{position:absolute;right:0;bottom:0;width:47%;height:185px;background:#e5decd}.arch{position:absolute;background:linear-gradient(90deg,#c9bd9f,#ece7d9);border-radius:60px 60px 0 0;bottom:0}.arch-one{width:95px;height:165px;right:16px;box-shadow:12px 0 12px #b1a180}.arch-two{width:60px;height:113px;right:65px;background:linear-gradient(90deg,#8d9476,#c5cbb0);box-shadow:9px 0 10px #9d9d82}.arch-ball{position:absolute;bottom:7px;right:12px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#f5f1e5,#a99972);box-shadow:7px 8px 10px #9e947c}.project-info{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px}.project-type{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.project-info h3{font-size:18px;font-weight:500;letter-spacing:-.4px;margin:4px 0}.project-info p{font-size:11px;color:var(--muted)}.project-arrow{background:none;font-size:23px;padding:10px}.project-arrow:hover{color:var(--green)}.tags{display:flex;gap:7px;flex-wrap:wrap}.tags span{border:1px solid var(--line);font-size:9px;padding:3px 9px;border-radius:4px;color:#697366}.project-wide{grid-column:1/-1}.preview-store{background:#e8e3d8;padding:30px 80px;height:330px}.mock-store{height:270px;width:100%;background:#f6f3ea;box-shadow:0 15px 20px #625c4310;padding:20px 35px}.store-nav{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid #e1ddce}.store-nav b{font-family:var(--font-text);font-size:25px;font-weight:400}.store-nav b span{font-size:9px;vertical-align:top}.store-nav>span{font-size:7px}.store-content{display:flex;align-items:center;height:195px}.store-content>div:first-child{width:55%}.store-content small{font-size:6px;letter-spacing:1.5px}.store-content h4{font-size:30px;font-family:var(--font-text);font-weight:400;line-height:1.2;margin:9px 0}.store-content p{font-size:8px;color:#858273}.mock-button{display:inline-block;font-size:7px;margin-top:15px;border-bottom:1px solid #555b48;padding-bottom:4px}.vase-scene{width:45%;height:180px;position:relative;background:radial-gradient(ellipse at center,#e4ddc7,transparent 70%)}.vase{position:absolute;bottom:23px;background:linear-gradient(90deg,#958369,#d7c3a3 50%,#ad9675);box-shadow:12px 10px 10px #8d85612a}.vase-tall{height:145px;width:77px;border-radius:18% 18% 40% 40%;left:27%;transform:rotate(-5deg)}.vase-tall:before{content:'';position:absolute;top:-3px;left:0;width:100%;height:13px;border-radius:50%;background:#746049;border:5px solid #b49d7b}.vase-short{width:94px;height:88px;border-radius:35% 35% 45% 45%;left:53%;background:linear-gradient(90deg,#b2ae91,#e0dcc5 50%,#bdb99a)}.vase-short:before{content:'';position:absolute;top:-5px;left:15%;width:70%;height:15px;border-radius:50%;background:#78775f;border:5px solid #c4c0a6}.scene-caption{position:absolute;bottom:0;left:25%;font-size:5px;letter-spacing:1px}.about{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:80px}.about h2{margin-top:20px;line-height:1.3}.signature{font-family:var(--font-text);font-style:normal;font-size:22px;margin-top:30px}.signature span{margin-left:15px;color:var(--green)}.about-copy{padding-top:30px}.large-copy{font-size:20px;line-height:1.6;letter-spacing:-.4px}.about-copy>p:nth-child(2){font-size:13px;color:var(--muted);margin-top:20px;line-height:1.9}.principles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:17px;margin-top:30px;border-top:1px solid var(--line);padding-top:23px}.principles span{font-size:9px;color:var(--green)}.principles h3{font-size:11px;margin:8px 0;font-weight:600}.principles p{font-size:10px;color:var(--muted)}.contact{background:#eaf0e4;border:1px solid #dce5d5;border-radius:10px;padding:45px 48px;position:relative;overflow:hidden}.contact h2{font-size:44px;line-height:1.2;margin-top:18px}.contact-star{position:absolute;right:65px;top:35px;font-size:110px;font-weight:400;color:#a7ba97}.contact-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:30px;gap:20px}.contact-bottom p{font-size:12px;color:var(--muted)}footer{display:flex;align-items:center;justify-content:space-between;padding-block:40px;gap:20px}footer .brand{font-size:26px}footer>span{font-size:10px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);padding:40px;max-width:550px;width:calc(100% - 40px);max-height:80vh;overflow:auto;box-shadow:0 25px 80px #15261a30}dialog::backdrop{background:#17251e88;backdrop-filter:blur(4px)}dialog h2{font-size:30px;margin:18px 0}dialog h3{font-size:14px;margin-top:20px}dialog p{font-size:14px;color:var(--muted);margin-block:12px}.dialog-close{position:absolute;right:15px;top:10px;font-size:28px;background:none;padding:0 7px}.dialog-note{font-size:12px;background:#eaf0e4;padding:15px;border-radius:5px;margin-top:25px}.dialog-dismiss{margin-top:15px}
@media(min-width:1450px){.hero{padding-block:110px}.hero-art{height:390px}}@media(max-width:1000px){.container{width:calc(100% - 56px)}.hero{gap:35px}.hero-actions{gap:15px}.hero h1{font-size:45px}.code-content{font-size:9px}.stack-strip>.container{gap:15px}.stack-strip strong{font-size:14px}.preview-dashboard,.preview-studio{padding:20px 15px}.mock-dashboard aside{width:70px}.dashboard-body{padding:12px}.preview-store{padding-inline:40px}.about{gap:35px}.section-side{display:none}.contact-star{right:35px}}
@media(max-width:700px){.container{width:calc(100% - 40px)}.site-header{height:76px;padding-inline:20px;position:relative}.menu-toggle{display:block}nav{display:none;position:absolute;top:75px;left:0;right:0;background:var(--bg);padding:20px;z-index:5;border-bottom:1px solid var(--line);gap:23px;justify-content:center}nav.open{display:flex}.hero{grid-template-columns:1fr;padding-block:50px;gap:60px}.hero h1{font-size:47px}.hero-copy>p{max-width:460px}.hero-art{height:330px;margin-inline:10px;max-width:450px;width:calc(100% - 20px);justify-self:center}.code-content{font-size:11px}.tag-top{right:-9px}.tag-bottom{left:-10px}.hero-note{margin-top:26px}.stack-strip>.container{flex-wrap:wrap;justify-content:center;gap:15px 24px;padding-block:20px}.stack-strip span:first-child{width:100%;text-align:center}.strip-star{display:none}.section{padding-block:50px}.section-heading h2,h2{font-size:33px}.project-toolbar{align-items:flex-start;flex-direction:column;margin-top:25px;gap:12px}.project-grid{grid-template-columns:1fr;gap:30px}.project-wide{grid-column:auto}.project-preview{height:285px}.mock-dashboard{max-width:420px}.mock-dashboard aside{width:85px}.mock-studio{max-width:420px}.preview-store{padding:20px 15px;height:275px}.mock-store{height:240px;padding:15px}.store-content{height:170px}.store-content h4{font-size:23px}.store-nav>span{font-size:6px}.vase-tall{width:52px;height:110px;left:15%}.vase-short{width:63px;height:70px;left:48%}.vase-scene{height:155px}.scene-caption{left:12%;font-size:4px}.about{grid-template-columns:1fr;gap:15px}.about-copy{padding-top:10px}.about h2{font-size:37px}.principles{gap:10px}.contact{padding:30px 24px}.contact h2{font-size:34px}.contact-star{font-size:50px;top:24px;right:20px;opacity:.6}.contact-bottom{align-items:flex-start;flex-direction:column;gap:20px}footer{flex-wrap:wrap;padding-block:30px}footer>span{order:3;flex-basis:100%;font-size:9px}footer .text-link{margin-left:auto}.section-heading p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Keep emphasized text consistent with the introduction typography. */
em{font-family:var(--font-text);font-style:normal}

.brand{display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-.8px;white-space:nowrap}
.brand .brand-idris{display:inline-flex;align-items:center;justify-content:center;background:#2456bd;padding:10px 16px;border-radius:2px;transform:skewX(-14deg);color:#fff}
.brand .brand-idris>span{display:block;transform:skewX(14deg);color:#fff}
.brand .brand-maulana{color:#246443}
footer .brand{font-size:20px}
@media(max-width:700px){.brand{font-size:21px;gap:9px}.brand .brand-idris{padding:9px 13px}footer .brand{font-size:19px}}

.brand .brand-maulana{display:inline-flex;align-items:center;justify-content:center;background:#246443;padding:10px 16px;border-radius:2px;transform:skewX(-14deg);color:#fff}
.brand .brand-maulana>span{display:block;transform:skewX(14deg);color:#fff}
@media(max-width:700px){.brand .brand-maulana{padding:9px 13px}}

.brand{gap:3px}

.hero-web{color:#2456bd}
.hero-mobile{color:#246443}

nav{font-size:16px;font-weight:600}
nav a{color:#246443;transition:color .2s}
nav a:hover,nav a.active{color:#2456bd}
nav a.active:after{background:#2456bd;width:6px;height:6px}
@media(max-width:700px){nav{font-size:16px;gap:20px}}
@media(max-width:360px){nav{gap:14px}}

.site-header{position:sticky;top:0;z-index:20;background:var(--bg);box-shadow:0 4px 16px #202c2705}
@media(max-width:700px){.site-header{position:sticky}}

.stack-strip>.container.toolkit{display:block;padding-block:28px 30px}
.toolkit-heading{font-size:10px;font-weight:600;letter-spacing:2px;line-height:1.6;color:var(--muted);text-align:center;margin-bottom:24px}
.technology-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.technology{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px 4px;border:1px solid transparent;border-radius:8px;transition:background .2s,border-color .2s,transform .2s}
.technology:hover{background:#fff;border-color:var(--line);transform:translateY(-3px)}
.technology img{display:block;width:42px;height:42px;object-fit:contain}
.stack-strip .technology span{font-size:11px;letter-spacing:0;font-weight:500;color:var(--ink);white-space:nowrap;text-align:center}
@media(max-width:1000px){.technology-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 16px}}
@media(max-width:700px){.technology-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 4px}.technology{padding:12px 2px}.technology img{width:36px;height:36px}.stack-strip .technology span{font-size:10px}}
@media(max-width:360px){.technology-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.hero-actions .primary:hover{background:#2456bd}

.hero-intro{position:relative}
.intro-layout{display:block;visibility:hidden}
.intro-live{position:absolute;inset:0}
.waving-hand{display:inline-block;font-size:.85em;transform-origin:70% 75%;animation:hand-wave .55s ease-in-out 3;transition:opacity .25s}
.waving-hand.wave-finished{opacity:0}
@keyframes hand-wave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(22deg)}65%{transform:rotate(-12deg)}}
@media(prefers-reduced-motion:reduce){.intro-layout{visibility:visible}.intro-live{display:none}}

.waving-hand[hidden]{display:none}

.intro-running .hero-description{opacity:0;transform:translateX(-30px);visibility:hidden;transition:none}
.intro-running .hero-description.description-visible{opacity:1;transform:translateX(0);visibility:visible;transition:opacity .65s ease,transform .65s ease}
@media(prefers-reduced-motion:reduce){.intro-running .hero-description{opacity:1;transform:none;visibility:visible}}

.intro-running .hero-actions{opacity:0;transform:translateX(-30px);visibility:hidden;transition:none}
.intro-running .hero-actions.actions-visible{opacity:1;transform:translateX(0);visibility:visible;transition:opacity .65s ease,transform .65s ease}
@media(prefers-reduced-motion:reduce){.intro-running .hero-actions{opacity:1;transform:none;visibility:visible}}

.featured-project{padding:22px;background:#edf2eb;border:1px solid #dce5d8;border-radius:12px}
.featured-label{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:1.6px;font-weight:600;margin-bottom:18px;color:#246443}
.live-badge{margin-left:auto;background:#fff;border:1px solid #dce5d8;border-radius:20px;padding:4px 10px;font-size:8px;letter-spacing:1px}
.preview-live{height:auto;padding:20px 28px;background:linear-gradient(135deg,#dce7ed,#e4eddc)}
.browser-frame{width:100%;border-radius:8px;overflow:hidden;box-shadow:0 12px 24px #172b3b18;background:#fff}
.browser-frame-bar{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;background:#f4f6f7;font-size:9px;color:#647477}
.browser-dots{font-size:8px;letter-spacing:3px;color:#aab5b5}
.browser-frame img{display:block;width:100%;height:auto}
.featured-project .project-info{gap:25px}.featured-project .project-info h3{font-size:24px}.featured-project .project-info p{max-width:670px;font-size:13px}
.project-visit{white-space:nowrap;flex-shrink:0}.project-visit:hover{background:#2456bd}
.featured-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px}.featured-details{background:none;color:#2456bd;padding:5px 0}
.concept-label{display:block;font-size:9px;color:var(--muted);margin-bottom:5px}
#dialog-website[hidden]{display:none}
@media(max-width:700px){.featured-project{padding:14px}.preview-live{padding:12px}.browser-frame-bar{height:25px;font-size:8px;padding:0 10px}.featured-project .project-info{align-items:flex-start;flex-direction:column;gap:15px}.featured-project .project-info h3{font-size:21px}.featured-bottom{align-items:flex-start;flex-direction:column;gap:12px}.featured-project .project-info p{font-size:12px}}

.project-grid{align-items:start}
.featured-project{padding:16px}
.featured-project .preview-live{height:280px;padding:14px}
.preview-live .browser-frame{align-self:stretch;display:flex;flex-direction:column}
.preview-live .browser-frame-bar{flex-shrink:0}
.preview-live .browser-frame img{height:calc(100% - 32px);min-height:0;object-fit:cover;object-position:top}
.featured-project .project-info{align-items:flex-start;flex-direction:column;gap:14px}
.featured-project .project-info h3{font-size:20px}
.featured-project .project-info p{font-size:12px}
.featured-project .project-visit{padding:11px 16px;font-size:11px}
.featured-bottom{flex-wrap:wrap}
@media(max-width:700px){.featured-project .preview-live{height:260px}.preview-live .browser-frame img{height:calc(100% - 25px)}}

.featured-project .preview-live{padding:0;background:transparent;isolation:isolate}
.preview-live .browser-frame{border-radius:0;box-shadow:none;transform:rotate(-2deg) scale(1.07);transform-origin:center;transition:transform .3s ease}
.featured-project .preview-live:hover .browser-frame{transform:rotate(-1deg) scale(1.07)}
@media(prefers-reduced-motion:reduce){.preview-live .browser-frame{transition:none}}

/* All project previews share the same edge-to-edge, tilted presentation. */
.project .project-preview{height:280px;padding:0;isolation:isolate}
.project-visual{position:absolute;inset:0;transform:rotate(-2deg) scale(1.07);transform-origin:center;transition:transform .3s ease}
.project-preview:hover .project-visual{transform:rotate(-1deg) scale(1.07)}
.project-visual>.browser-frame,.project-visual>.mock-dashboard,.project-visual>.mock-studio,.project-visual>.mock-store{width:100%;height:100%;max-width:none;border-radius:0;box-shadow:none;transform:none;transition:none}
.project-preview:hover .project-visual>.browser-frame{transform:none}
.project-visual>.browser-frame{display:flex;flex-direction:column}
.project-visual>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.featured-bottom .tags{row-gap:6px}
#dialog-technology-tags{margin-top:12px}
@media(max-width:700px){.project .project-preview{height:260px}}
@media(prefers-reduced-motion:reduce){.project-visual{transition:none}}

.project.featured-project{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}

.project-technologies{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:4px}
.project-technologies img{display:block;width:28px;height:28px;object-fit:contain}
@media(max-width:700px){.project-technologies{gap:14px}.project-technologies img{width:26px;height:26px}}

.project-technology{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:38px}
.project-technology span{font-size:10px;line-height:1.4;color:var(--muted);text-align:center}

.preview-bahasataa .browser-frame img{object-position:center}

.browser-frame-bar>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:12px}

.project-toolbar{flex-direction:column;align-items:center;justify-content:center;gap:12px}
.project-toolbar .filters{justify-content:center;flex-wrap:wrap}
.project-toolbar .sample-note{text-align:center}

.project-toolbar .filters{gap:12px}
.filters button{font-size:15px;font-weight:600;padding:11px 20px;transition:background .2s,color .2s}
.filters span{font-size:12px;margin-left:8px}
.filters button:hover,.filters button:focus-visible{background:#2456bd;color:#fff}
@media(max-width:700px){.project-toolbar .filters{gap:7px}.filters button{font-size:14px;padding:10px 14px}}

.filters button{display:inline-flex;align-items:center;gap:10px;background:#246443;color:#fff}
.filters button.selected,.filters button:hover,.filters button:focus-visible{background:#2456bd;color:#fff}
.filters button span{margin-left:0}
.filters button .filter-arrow{font-size:20px;font-weight:400;line-height:1;opacity:1}

.project-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px}

.contact.contact-location{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#142a23;border-color:#213e32;padding:48px 24px;text-align:center}
.indonesia-flag{display:block;width:42px;height:28px;background:linear-gradient(to bottom,#e32636 0 50%,#fff 50% 100%);border-radius:3px;box-shadow:0 3px 12px #0002}
.contact-location .location-country{margin:0;font-size:36px;letter-spacing:-1px;line-height:1.2}
.country-indo{color:#fff}.country-nesia{color:#ff5361}
.location-region{color:#d4ded8;font-size:14px;letter-spacing:.3px}
@media(max-width:700px){.contact.contact-location{padding:36px 20px}.contact-location .location-country{font-size:30px}.location-region{font-size:13px}}

.contact.contact-location{background:transparent;border:0;box-shadow:none;gap:5px}
.indonesia-flag{width:132px;height:88px;border-radius:3px}
.contact-location .location-country{font-size:29px;width:132px;letter-spacing:-.6px;line-height:1.2;margin:0;text-align:center}
.country-indo{color:#fff;text-shadow:0 1px 2px #20382a99,-.5px 0 #64746b,.5px 0 #64746b}
.country-nesia{color:#e32636}
.location-region{color:var(--muted);margin-top:7px}
@media(max-width:700px){.contact-location .location-country{font-size:29px}}

.contact-location .indonesia-flag{width:96px;height:64px}
.contact-location .location-country{width:96px;font-size:21px;letter-spacing:-.4px}

.about-education{display:flex;align-items:center;gap:18px;margin-top:26px;padding-block:20px;border-block:1px solid var(--line)}
.about-education img{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.education-label{font-size:9px;letter-spacing:1.5px;color:#2456bd;font-weight:600}
.about-education h3{font-size:16px;font-weight:600;line-height:1.4;margin:5px 0}
.about-education p{font-size:12px;color:var(--muted)}
@media(max-width:700px){.about-education{gap:14px}.about-education img{width:56px;height:56px}.about-education h3{font-size:15px}}

footer.container{position:relative;justify-content:center}
footer.container>.brand{position:absolute;left:0}
footer.container>span{text-align:center}
@media(max-width:700px){footer.container{flex-direction:column}footer.container>.brand{position:static}footer.container>span{flex-basis:auto}}

.about-portrait{display:block;width:240px;max-width:100%;height:240px;object-fit:cover;object-position:center top;margin-inline:auto;border-radius:50%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.about-title .signature{text-align:center}
@media(max-width:700px){.about-portrait{width:200px;height:200px}}

.heartbeat-art{overflow:hidden;background:transparent;border:0;border-radius:0;box-shadow:none}
.heartbeat-graphic{position:relative;width:100%;height:auto;overflow:visible;color:var(--green)}
.heartbeat-line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
 .heartbeat-trace{transform-box:view-box;transform-origin:center;animation:heartbeat-pulse 3.6s ease-in-out infinite}
.heartbeat-line{stroke-dasharray:1;stroke-dashoffset:0;animation:heartbeat-draw 3.6s ease-in-out infinite}
@keyframes heartbeat-draw{0%{stroke-dashoffset:1;opacity:1}72%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes heartbeat-pulse{0%,72%,87%,100%{transform:scale(1)}77%{transform:scale(1.025)}82%{transform:scale(1)}85%{transform:scale(1.012)}}
@media(prefers-reduced-motion:reduce){.heartbeat-trace,.heartbeat-line{animation:none}.heartbeat-line{stroke-dashoffset:0;opacity:1}}

@media(max-width:700px){.heartbeat-art{display:none}}

.technology-duplicate{display:none}
@media(max-width:700px){
    .stack-strip>.container.toolkit{width:100%;overflow-x:auto;overscroll-behavior-x:contain}
    .technology-grid{display:flex;flex-wrap:nowrap;width:max-content;gap:16px}
    .technology-grid .technology{flex:0 0 104px;padding:14px 4px}
    .technology-grid .technology img{width:42px;height:42px}
    .stack-strip .technology span{font-size:11px}
    .technology-grid .technology-duplicate{display:flex}
    .technology-marquee{animation:technology-scroll 30s linear infinite}
    .toolkit:hover .technology-marquee,.toolkit:active .technology-marquee{animation-play-state:paused}
}
@keyframes technology-scroll{to{transform:translateX(calc(-50% - 8px))}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
    .technology-marquee{animation:none}
    .technology-grid .technology-duplicate{display:none}
}

.project-pagination{position:static;display:flex;justify-content:center;align-items:center;gap:20px;margin-top:36px;padding:0;background:transparent;border:0}
.project-pagination[hidden],.project-pagination button[hidden]{display:none}
.project-page-status{font-size:12px;color:var(--muted)}
.project-toolbar{scroll-margin-top:100px}

body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body img,body a{-webkit-user-drag:none}

.hero-copy .hero-actions{flex-direction:column;align-items:flex-start;gap:18px}
.hero-socials{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--green);border:1px solid var(--line);border-radius:50%;transition:color .2s,background .2s,transform .2s}
.social-icon svg{display:block;width:23px;height:23px;fill:currentColor}
.social-icon:hover{color:#2456bd;background:#fff;transform:translateY(-2px)}

.intro-running .heartbeat-art:not(.heartbeat-visible){visibility:hidden}
.intro-running .heartbeat-art:not(.heartbeat-visible) .heartbeat-trace,.intro-running .heartbeat-art:not(.heartbeat-visible) .heartbeat-line{animation:none}
.intro-running .heartbeat-art:not(.heartbeat-visible) .heartbeat-line{stroke-dashoffset:1}
@media(prefers-reduced-motion:reduce){.intro-running .heartbeat-art:not(.heartbeat-visible){visibility:visible}.intro-running .heartbeat-art:not(.heartbeat-visible) .heartbeat-line{stroke-dashoffset:0}}