:root{
  --bg:#f8fafc;
  --text:#0b1726;
  --muted:#5b718b;
  --brand:#00bcd4; /* turkuaz */
  --brand-dark:#009fb5;
  --white:#ffffff;
  --card:#ffffff;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:24px}
.container.narrow{max-width:900px}

.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--white);box-shadow:var(--shadow)}
.topbar .brand{font-weight:800;font-size:20px}
.topbar .brand span{color:var(--brand)}
.menu-btn,.call-top{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid #e5e8ee}
.menu-btn i,.call-top i{font-size:18px}
.call-top span{display:none}
@media(min-width:768px){.call-top span{display:inline}}

.drawer{position:fixed;top:0;left:-320px;height:100%;width:320px;background:var(--white);box-shadow:var(--shadow);z-index:60;transition:.3s}
.drawer.open{left:0}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #eef2f7}
.drawer-nav{display:flex;flex-direction:column;padding:8px}
.drawer-nav a{padding:12px 16px;border-radius:12px}
.drawer-nav a:hover{background:#f0fbfd}
.divider{height:1px;background:#eef2f7;margin:8px 0}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:.3s;z-index:55}
.overlay.show{opacity:1;visibility:visible}

.hero{margin-top:8px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.slider{position:relative;height:420px}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center}
.slide-content{background:rgba(11,23,38,.60);color:#fff;margin-left:24px;padding:24px;border-radius:16px;backdrop-filter:blur(2px)}
.slide-content h1{font-size:32px;margin:0 0 10px}
.slide-content h1 span{color:var(--brand)}
.slide-content p{margin:0 0 16px}
.cta{display:flex;gap:12px}
.btn{padding:12px 16px;border-radius:12px;border:2px solid transparent;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.ghost{background:transparent;border-color:#e5e8ee;color:#fff}
.btn.ghost2{background:transparent;border-color:#e5e8ee;color:#000}
.btn.ghost:hover{border-color:#fff}

.highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card i{color:var(--brand);font-size:22px}
.card h3{margin:8px 0 6px}

.grid h2{margin:16px 0}
.grid-6{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.svc{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px;text-align:center}
.svc span{display:block;margin-top:8px;font-weight:600}

.device{margin:28px 0}
.device .tips{display:grid;grid-template-columns:1fr;gap:12px}
.device .tips > div{background:var(--card);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.device h3{margin-bottom:12px}

@media(min-width:900px){
  .highlights{grid-template-columns:repeat(4,1fr)}
  .grid-6{grid-template-columns:repeat(6,1fr)}
  .device .tips{grid-template-columns:repeat(3,1fr)}
  .slide-content h1{font-size:40px}
}

.brands{margin:28px 0;text-align:center}
.brands p{color:var(--muted)}

.footer{margin-top:32px;background:#061f2b;color:#e7f6fa}
.footer a{color:#e7f6fa}
.footer .footer-grid{display:grid;gap:20px;grid-template-columns:1fr;max-width:1200px;margin:0 auto;padding:24px}
.footer .footnote{border-top:1px solid rgba(255,255,255,.1);padding:12px;text-align:center;color:#bfeaf2}
@media(min-width:900px){.footer .footer-grid{grid-template-columns:2fr 1fr 1fr}}

.fixed-actions{position:fixed;bottom:14px;right:14px;display:flex;gap:10px;z-index:70}
.fab{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:100px;box-shadow:var(--shadow);background:#fff;border:1px solid #e5e8ee;font-weight:700}
.fab.call{background:var(--brand);color:#fff;border-color:transparent}
.fab.wa{background:#25D366;color:#fff;border-color:transparent}

.brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.brand-card{background:var(--card);border-radius:14px;padding:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}
.brand-card i{color:var(--brand)}
.note{color:var(--muted);margin-top:16px}
@media(min-width:900px){.brand-grid{grid-template-columns:repeat(4,1fr)}}

.bullets{padding-left:18px}
.bullets li{margin:6px 0}
.contact-list{list-style:none;padding:0}
.contact-list li{margin:8px 0}

.contact-form{margin-top:16px;background:var(--card);padding:16px;border-radius:14px;box-shadow:var(--shadow);display:grid;gap:12px}
.contact-form label{display:grid;gap:6px}
.contact-form input,.contact-form select,.contact-form textarea{padding:12px;border:1px solid #dfe5ec;border-radius:10px;font:inherit}
.contact-form button{justify-self:start}

.brand-hero{background:#f0fbfd;border:1px solid #dff5f9;border-radius:14px;box-shadow:var(--shadow);padding:16px;margin:20px 0}
.cta-wide{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#061f2b;color:#e7f6fa;padding:18px;border-radius:14px;box-shadow:var(--shadow);margin:20px 0}
.cta-wide .btn.primary{background:#00bcd4}


.price{margin:24px 0;background:#f8feff;border:1px solid #e3f6fa;border-radius:14px;box-shadow:var(--shadow);padding:16px}
.price .pricing{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.price .pricing th, .price .pricing td{padding:12px 14px;border-bottom:1px solid #eef2f7;text-align:left}
.price .pricing thead th{background:#ecfbfe;font-weight:700}
.price .note{margin-top:10px;color:var(--muted)}
.device.why h2{margin-bottom:10px}


.faq{margin:28px 0}
.accordion{display:grid;gap:8px}
.acc-btn{width:100%;text-align:left;padding:14px;border-radius:12px;border:1px solid #dfe5ec;background:#fff;box-shadow:var(--shadow);font-weight:700;cursor:pointer}
.acc-btn.active{background:#ecfbfe;border-color:#cbeff7}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:0 14px}
.acc-panel.open{padding:14px}