@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap";:root{--color-bg-primary:#0a1628;--color-bg-secondary:#0d2137;--color-bg-tertiary:#112240;--color-accent:#0ea5e9;--color-accent-hover:#0284c7;--color-accent-light:#bae6fd;--color-text-primary:#fff;--color-text-secondary:#cbd5e1;--color-text-muted:#64748b;--color-border:#1e3a5f;--color-border-accent:#0ea5e9;--color-success:#22c55e;--color-error:#ef4444;--color-warning:#f59e0b;--navbar-bg:#0a1628f7;--card-hover-bg:#ffffff08;--text-hero:3rem;--text-h1:2.25rem;--text-h2:1.875rem;--text-h3:1.5rem;--text-h4:1.25rem;--text-body-lg:1.125rem;--text-body:1rem;--text-sm:.875rem;--text-xs:.75rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 24px #00000080;--shadow-accent:0 4px 20px #0ea5e940;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}[data-theme=light]{--color-bg-primary:#fff;--color-bg-secondary:#f3f4f6;--color-bg-tertiary:#e5e7eb;--color-accent:#0ea5e9;--color-accent-hover:#0284c7;--color-accent-light:#bae6fd;--color-text-primary:#1f2937;--color-text-secondary:#4b5563;--color-text-muted:#9ca3af;--color-border:#d1d5db;--color-border-accent:#0ea5e9;--color-success:#16a34a;--color-error:#dc2626;--color-warning:#d97706;--navbar-bg:#fffffff7;--card-hover-bg:#00000005;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 12px #0000001a;--shadow-lg:0 8px 24px #0000001f;--shadow-accent:0 4px 20px #0ea5e933}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Inter,sans-serif;font-size:var(--text-body);line-height:1.65}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}img{max-width:100%;display:block}.container{max-width:1280px;padding:0 var(--space-6);margin:0 auto}.btn{align-items:center;gap:var(--space-2);font-size:var(--text-body);border-radius:var(--radius-md);cursor:pointer;border:none;padding:12px 24px;font-family:inherit;font-weight:600;line-height:1;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-accent);color:#fff}.btn-secondary{color:var(--color-accent);border:1px solid var(--color-accent);background:0 0}.btn-secondary:hover{background:var(--color-accent);color:#fff}.btn-ghost{color:var(--color-text-secondary);border:1px solid var(--color-border);background:0 0}.btn-ghost:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.btn-sm{font-size:var(--text-sm);padding:8px 16px}.btn-lg{font-size:var(--text-body-lg);padding:16px 32px}.btn-wa{color:#fff;background:#25d366}.btn-wa:hover{color:#fff;background:#1ebe5d;box-shadow:0 4px 20px #25d3664d}.section{padding:var(--space-16) 0}.section--alt{background:var(--color-bg-secondary)}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.grid-2{gap:var(--space-6);grid-template-columns:repeat(2,1fr);display:grid}.grid-3{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.grid-4{gap:var(--space-6);grid-template-columns:repeat(4,1fr);display:grid}.section-title{text-align:center;margin-bottom:var(--space-12)}.section-title h2{font-size:var(--text-h2);color:var(--color-text-primary);margin-bottom:var(--space-4);font-weight:700;line-height:1.25}.section-title p{font-size:var(--text-body-lg);color:var(--color-text-secondary);max-width:600px;margin:0 auto}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:all .2s}.card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-accent)}.icon-box{background:var(--color-bg-tertiary);width:52px;height:52px;color:var(--color-accent);margin-bottom:var(--space-4);border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.badge{font-size:var(--text-xs);border-radius:var(--radius-full);color:var(--color-accent);letter-spacing:.5px;text-transform:uppercase;background:#0ea5e926;padding:4px 10px;font-weight:600;display:inline-block}.badge-green{color:var(--color-success);background:#22c55e26}.badge-gray{background:var(--color-bg-tertiary);color:var(--color-text-muted)}.hero{background:linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 60%, var(--color-accent) 100%);padding:var(--space-24) 0 var(--space-20);text-align:center}.hero__title{font-size:var(--text-hero);color:var(--color-text-primary);margin-bottom:var(--space-6);font-weight:700;line-height:1.15}.hero__subtitle{font-size:var(--text-body-lg);color:var(--color-text-secondary);max-width:640px;margin:0 auto var(--space-8);line-height:1.6}.hero__buttons{gap:var(--space-4);flex-wrap:wrap;justify-content:center;display:flex}.navbar{z-index:100;background:var(--navbar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);align-items:center;height:64px;display:flex;position:sticky;top:0}.navbar__logo{align-items:center;gap:10px;text-decoration:none;display:flex}.navbar__logo img{width:auto;height:36px}.navbar__logo-text{font-size:var(--text-body);color:var(--color-text-primary);font-weight:700;line-height:1.2}.navbar__logo-tagline{font-size:var(--text-xs);color:var(--color-accent);font-weight:400;display:block}.navbar__links{align-items:center;gap:var(--space-8);margin:0;padding:0;list-style:none;display:flex}.navbar__links a{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;transition:color .2s}.navbar__links a:hover,.navbar__links a.active{color:var(--color-accent)}.navbar__hamburger{color:var(--color-text-primary);cursor:pointer;padding:var(--space-2);background:0 0;border:none;display:none}.navbar__mobile{background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);padding:var(--space-6);gap:var(--space-3);z-index:99;flex-direction:column;display:none;position:absolute;top:64px;left:0;right:0}.navbar__mobile.open{display:flex}.navbar__mobile a{color:var(--color-text-secondary);font-size:var(--text-body);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}.navbar__mobile a:hover{color:var(--color-accent)}.footer{background:var(--color-bg-secondary);border-top:1px solid var(--color-border);padding:var(--space-16) 0 var(--space-8)}.footer__grid{gap:var(--space-8);padding-bottom:var(--space-8);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-8);grid-template-columns:2fr 1fr 1fr 1fr;display:grid}.footer__col h4{font-size:var(--text-sm);color:var(--color-text-primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-4);font-weight:700}.footer__col ul{margin:0;padding:0;list-style:none}.footer__col ul li{margin-bottom:var(--space-2)}.footer__col ul li a{color:var(--color-text-muted);font-size:var(--text-sm);transition:color .2s}.footer__col ul li a:hover{color:var(--color-accent)}.footer__brand-name{font-size:var(--text-body);color:var(--color-text-primary);margin-bottom:var(--space-2);font-weight:700}.footer__brand-tag{font-size:var(--text-sm);color:var(--color-accent);margin-bottom:var(--space-4)}.footer__brand-desc{font-size:var(--text-sm);color:var(--color-text-muted);max-width:260px;margin-bottom:var(--space-4);line-height:1.6}.footer__bottom{text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}.contact-item{align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4);color:var(--color-text-secondary);font-size:var(--text-body);display:flex}.contact-item svg{color:var(--color-accent);flex-shrink:0;margin-top:3px}.form-group{margin-bottom:var(--space-4)}.form-label{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);font-weight:600;display:block}.form-input,.form-textarea{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text-primary);font-size:var(--text-body);outline:none;padding:12px 16px;font-family:inherit;transition:border-color .2s}.form-input:focus,.form-textarea:focus{border-color:var(--color-accent)}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-muted)}.form-textarea{resize:vertical;min-height:140px}.form-success{border:1px solid var(--color-success);color:var(--color-success);padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);background:#22c55e1a}.filter-bar{gap:var(--space-3);margin-bottom:var(--space-10);flex-wrap:wrap;display:flex}.filter-btn{border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;background:0 0;padding:8px 20px;font-family:inherit;font-weight:500;transition:all .2s}.filter-btn.active,.filter-btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.portfolio-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;overflow:hidden}.portfolio-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-accent);transform:translateY(-2px)}.portfolio-card__img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block}.portfolio-card__img-wrap{position:relative;overflow:hidden}.live-preview-btn{color:#fff;font-size:var(--text-sm);cursor:pointer;background:#6366f1eb;border:none;justify-content:center;align-items:center;gap:6px;padding:10px;font-family:inherit;font-weight:600;transition:transform .25s;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.portfolio-card:hover .live-preview-btn{transform:translateY(0)}.live-preview-btn:hover{background:#6366f1}.portfolio-card__body{padding:var(--space-5)}.tech-tags{gap:var(--space-2);margin:var(--space-3) 0;flex-wrap:wrap;display:flex}.tech-tag{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text-secondary);padding:3px 10px}.blog-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all .2s;overflow:hidden}.blog-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-accent);transform:translateY(-2px)}.blog-card__img{aspect-ratio:16/9;object-fit:cover;background:var(--color-bg-tertiary);width:100%;display:block}.blog-card__body{padding:var(--space-5)}.blog-card__meta{gap:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3);display:flex}.service-detail{background:var(--color-bg-tertiary);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-4)}.showcase-tabs{gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.showcase-tab{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text-muted);cursor:pointer;padding:6px 14px;font-family:inherit;font-weight:600;transition:all .2s}.showcase-tab.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.modal-overlay{z-index:200;padding:var(--space-6);background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:700px;max-height:90vh;position:relative;overflow-y:auto}.modal__close{top:var(--space-4);right:var(--space-4);background:var(--color-bg-tertiary);color:var(--color-text-primary);border-radius:var(--radius-full);cursor:pointer;border:none;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex;position:absolute}.admin-layout{min-height:100vh;display:flex}.admin-sidebar{background:var(--color-bg-secondary);border-right:1px solid var(--color-border);width:240px;padding:var(--space-6);flex-shrink:0}.admin-sidebar__logo{font-size:var(--text-body);color:var(--color-text-primary);margin-bottom:var(--space-8);font-weight:700}.admin-sidebar__nav{padding:0;list-style:none}.admin-sidebar__nav li{margin-bottom:var(--space-1)}.admin-sidebar__nav a{align-items:center;gap:var(--space-3);color:var(--color-text-secondary);font-size:var(--text-sm);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);transition:all .2s;display:flex}.admin-sidebar__nav a:hover,.admin-sidebar__nav a.active{background:var(--color-bg-tertiary);color:var(--color-accent)}.admin-main{padding:var(--space-8);flex:1}.admin-stat{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}.admin-stat__num{font-size:var(--text-h1);color:var(--color-accent);font-weight:700}.admin-stat__label{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.empty-state{text-align:center;padding:var(--space-16);color:var(--color-text-muted)}.empty-state svg{margin:0 auto var(--space-4);opacity:.4}.wa-float{bottom:var(--space-6);right:var(--space-6);z-index:90;border-radius:var(--radius-full);background:#25d366;justify-content:center;align-items:center;width:56px;height:56px;transition:transform .2s;display:flex;position:fixed;box-shadow:0 4px 16px #25d36666}.wa-float:hover{background:#1ebe5d;transform:scale(1.1)}.cta-strip{background:var(--color-bg-secondary);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:var(--space-16) 0;text-align:center}.cta-strip h2{font-size:var(--text-h2);margin-bottom:var(--space-4);font-weight:700}.cta-strip p{font-size:var(--text-body-lg);color:var(--color-text-secondary);margin-bottom:var(--space-8)}.cta-strip__buttons{gap:var(--space-4);flex-wrap:wrap;justify-content:center;display:flex}@media (width<=1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.footer__grid{grid-template-columns:1fr 1fr}}@media (width<=768px){.hero{padding:var(--space-16) 0 var(--space-12)}.hero__title{font-size:var(--text-h1)}.section{padding:var(--space-12) 0}.grid-2,.grid-3,.grid-4,.footer__grid{grid-template-columns:1fr}.navbar__links,.navbar__links+.btn{display:none}.navbar__hamburger{display:block}.admin-layout{flex-direction:column}.admin-sidebar{border-right:none;border-bottom:1px solid var(--color-border);width:100%}}.admin-table-wrap{overflow-x:auto}.admin-table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.admin-table th,.admin-table td{text-align:left;border-bottom:1px solid var(--color-border);padding:12px 16px}.admin-table th{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.admin-table tbody tr:hover{background:var(--card-hover-bg)}.admin-alert{font-size:var(--text-sm);border-radius:8px;margin-bottom:20px;padding:12px 16px}.admin-alert--error{color:#f87171;background:#ef44441a;border:1px solid #ef44444d}.admin-alert--success{color:#4ade80;background:#22c55e1a;border:1px solid #22c55e4d}.theme-toggle{background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--radius-full);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}