/* RESET & BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #fff; color: #1a1a1a; line-height: 1.5; }

/* HEADER */
.header { width:100%; background:#fff; padding:1vh 16vw; height:68px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.header-left { display:flex; align-items:center; gap:12px; }
.logo { font-size:1.8em; background:#fff3e0; border-radius:50%; padding:4px; }
.brand { font-size:1.3em; color:#333; font-weight:bold; letter-spacing:1.5px; }
.drawer-btn { display:none; align-items:center; justify-content:center; width:42px; height:42px; background:#fff; color:#fd7e14; border:none; border-radius:10px; font-size:1.45em; cursor:pointer; }
.header-nav { display:flex; align-items:center; gap:22px; }
.nav-link { text-decoration:none; color:#1a1a1a; font-weight:500; transition:color .2s; }
.nav-link:hover { color:#ff8800; }
.calc-btn { padding:8px 20px; background:#fd7e14; color:#fff; border:none; border-radius:16px; font-weight:bold; cursor:pointer; transition:background .2s; }
.calc-btn:hover { background:#fd7e14; }

/* DRAWER */
.drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.2); backdrop-filter:blur(4px); z-index:110; }
.drawer-overlay.open { display:block; }
.drawer-menu { position:fixed; top:0; right:-100%; width:60vw; max-width:300px; height:100vh; background:#fff; padding:40px 20px; display:flex; flex-direction:column; gap:16px; transition:right .3s ease; box-shadow:-4px 0 20px rgba(0,0,0,0.1); }
.drawer-overlay.open .drawer-menu { right:0; }
.drawer-close { position:absolute; top:12px; right:16px; font-size:2em; background:none; border:none; cursor:pointer; color:#ff8800; }
.nav-calc-btn { padding:8px 0; background:#ff8800; color:#fff; border:none; border-radius:12px; font-weight:bold; display:flex; align-items:center; justify-content:center; gap:8px; }
.nav-calc-btn:hover { background:#fd7e14; }

/* RESPONSIVE */
@media(max-width:750px) { .header-nav{display:none;} .drawer-btn{display:flex!important;} }
@media(max-width:600px) { .header{padding:1vh 4vw;height:auto;gap:8px;} }

/* MAIN UNDER-CONSTRUCTION */
.main-construct-vertical { display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; max-width:420px; margin:80px auto; padding:0 4vw; }
.construct-img img { max-width:320px; width:100%; }
.uc-title { font-size:2em; font-weight:700; color: #333;}
.uc-desc { font-size:1em; color:#555; }
.tiktok-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; background:#000000; color:#fff; border:none; border-radius:12px; font-weight:bold; text-decoration:none; }
.tiktok-btn:hover { background:#ffab40; }

/* FOOTER */
.footer { background:#333; color:#ccc; padding:40px 6vw; display:flex; gap:32px; flex-wrap:wrap; }
.footer-col { flex:1 1 200px; min-width:180px; }
.footer-col h3 { color:#fff; margin-bottom:16px; font-size:1.1em; }
.footer-col p, .footer-col a { color:#ccc; text-decoration:none; margin-bottom:8px; display:block; font-size:.95em; }
.footer-col a:hover { color:#fff; }
.socmed { display:flex; gap:12px; margin-top:12px; }
.socmed img { width:24px; height:24px; filter:invert(1); }