/* Basic styling (no external deps) */

:root{
    --bg:#0b0f14; --card:#101826; --txt:#eaf0ff; --muted:#b7c3dd;
    --accent:#3aa0ff; --accent2:#22c55e; --warn:#fbbf24;
    --border:rgba(255,255,255,.10);
    --shadow: 0 12px 35px rgba(0,0,0,.35);
    --r:16px;
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}
*{box-sizing:border-box}
body{
    margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 600px at 20% 0%, rgba(58,160,255,.18), transparent 60%),
                radial-gradient(900px 500px at 90% 10%, rgba(34,197,94,.14), transparent 55%),
                var(--bg);
    color:var(--txt);
    line-height:1.45;
}
a{color:inherit}
.container{max-width:1080px; margin:0 auto; padding:20px}
header{
    position:sticky; top:0; z-index:10;
    backdrop-filter: blur(10px);
    background: rgba(11,15,20,.65);
    border-bottom:1px solid var(--border);
}
.topbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 20px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.logo{
    width:36px; height:36px; border-radius:10px;
    background: linear-gradient(135deg, rgba(58,160,255,.9), rgba(34,197,94,.8));
    box-shadow: var(--shadow);
}
.pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    color:var(--muted);
    font-size:14px;
    white-space:nowrap;
}
.cta{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 16px; border-radius:12px;
    background: #997660;
    border: 1px solid #997660;
    color:white; font-weight:800;
    text-decoration:none;
    box-shadow: 0 10px 25px rgba(58,160,255,.22);
    transition: transform .12s ease, filter .12s ease;
}
.cta:hover{transform: translateY(-1px); filter: brightness(1.05)}
.cta.secondary{
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    box-shadow:none;
    font-weight:700;
    color:var(--txt);
}
.hero{
    padding:34px 20px 10px;
}
.grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:20px;
    align-items:stretch;
}
@media (max-width: 900px){
    .grid{grid-template-columns:1fr}
    .topbar{flex-wrap:wrap}
}
.card{
    background: rgba(16,24,38,.72);
    border:1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding:22px;
}
h1{font-size: clamp(28px, 3.6vw, 44px); line-height:1.1; margin:0 0 12px}
.sub{color:var(--muted); font-size: clamp(16px, 1.6vw, 18px); margin:0 0 18px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px}
.badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:12px;
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    color:var(--txt);
    font-size:14px;
}
.badge strong{color: #ffffff}
.highlight{color:var(--warn); font-weight:800}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.phoneBox{
    display:flex; flex-direction:column; gap:10px;
    height:100%;
}
.phoneBig{
    font-size: 28px; font-weight:900; letter-spacing:.2px;
    padding:14px 16px; border-radius:14px;
    background: rgba(255,255,255,.06);
    border:1px dashed rgba(255,255,255,.22);
}
.note{color:var(--muted); font-size:14px}
.section{padding:18px 20px}
h2{font-size: clamp(20px, 2.2vw, 28px); margin:0 0 10px}
.cols3{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
@media (max-width: 900px){.cols3{grid-template-columns:1fr}}
.mini{
    margin-top:6px;
    padding:16px; border-radius:14px;
    background: rgba(255,255,255,.05);
    border:1px solid var(--border);
}
.mini .t{font-weight:850; margin-bottom:6px}
.mini .d{color:var(--muted); font-size:14px; margin:0}
.gallery{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
    margin-top:12px;
}
@media (max-width: 900px){.gallery{grid-template-columns:1fr}}
.ph{
    aspect-ratio: 4/3;
    border-radius:14px;
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--border);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.45);
    font-weight:700;
    padding:0;
    cursor:pointer;
}
.ph:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.ph img{width:100%; height:100%; object-fit:cover; display:block}
.lightbox{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
    padding:24px;
}
.lightbox.open{display:flex}
.lightbox-image{
    max-width:min(92vw, 1100px);
    max-height:86vh;
    border-radius:12px;
    box-shadow: var(--shadow);
    opacity:0;
    transition: opacity .35s ease;
    will-change: opacity;
}
.lightbox-image.is-loaded{opacity:1}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position:fixed;
    background: rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    font-size:26px;
    cursor:pointer;
}
.lightbox-close{top:20px; right:20px}
.lightbox-prev{left:20px; top:50%; transform:translateY(-50%); z-index: 10;}
.lightbox-next{right:20px; top:50%; transform:translateY(-50%); z-index: 10;}
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.testi{
    display:grid; grid-template-columns: 1fr 1fr; gap:12px;
    margin-top:12px;
}
@media (max-width: 900px){.testi{grid-template-columns:1fr}}
blockquote{
    margin:0;
    padding:16px;
    border-radius:14px;
    background: rgba(34,197,94,.08);
    border:1px solid rgba(34,197,94,.22);
}
blockquote p{margin:0 0 10px; color:var(--txt)}
blockquote footer{color:var(--muted); font-size:14px}
.footer{
    padding:26px 20px 40px;
    color:var(--muted);
    border-top:1px solid var(--border);
    background: rgba(0,0,0,.15);
}
.small{font-size:13px}