:root {
--accent: #6C63FF;
--accent2: #48cfad;
--dark: #0f0f14;
--card: #1a1a24;
--text: #e2e2e8;
--muted: #888;
--radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background:var(--dark); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; line-height:1.6; }
a { color:var(--accent); text-decoration:none; }

/* NAV */
nav { position:sticky; top:0; z-index:99; background:rgba(15,15,20,.85); backdrop-filter:blur(10px);
    display:flex; justify-content:space-between; align-items:center; padding:1rem 5%; border-bottom:1px solid #222; }
.logo { font-weight:700; font-size:1.1rem; color:#fff; }
nav ul { list-style:none; display:flex; gap:1.8rem; }
nav ul a { color:var(--muted); font-size:.9rem; transition:color .2s; }
nav ul a:hover { color:#fff; }

/* HERO */
.hero { text-align:center; padding:5rem 5% 4rem; }
.badge { display:inline-block; background:#1e1e30; border:1px solid var(--accent); color:var(--accent);
        font-size:.78rem; padding:.3rem .9rem; border-radius:999px; margin-bottom:1.2rem; letter-spacing:.05em; text-transform:uppercase; }
.hero h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:800; color:#fff; max-width:750px; margin:0 auto .8rem; }
.hero h1 span { color:var(--accent); }
.hero p { color:var(--muted); max-width:560px; margin:0 auto 2rem; font-size:1.05rem; }
.btn { display:inline-block; padding:.8rem 1.8rem; border-radius:var(--radius); font-weight:600; font-size:.95rem; transition:opacity .2s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-outline { border:1.5px solid var(--accent); color:var(--accent); margin-left:.6rem; }
.btn:hover { opacity:.85; }

/* SECTIONS */
section { padding:4rem 5%; }
.section-label { font-size:2rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; }
.section-title { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; color:#fff; margin-bottom:.5rem; }
.section-sub { color:var(--muted); margin-bottom:2.5rem; max-width:550px; }
.divider { border:none; border-top:1px solid #222; margin:0; }

/* PORTFOLIO */
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.portfolio-card { background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid #222; }
.portfolio-card img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.portfolio-card .info { padding:1rem; }
.portfolio-card .info h3 { font-size:.95rem; color:#fff; margin-bottom:.3rem; }
.portfolio-card .info p { font-size:.83rem; color:var(--muted); }

/* PRICING */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; }
.plan { background:var(--card); border:1px solid #222; border-radius:var(--radius); padding:1.8rem; display:flex; flex-direction:column; }
.plan.featured { border-color:var(--accent); position:relative; }
.plan.featured::before { content:'Most Popular'; position:absolute; top:-1px; right:1.2rem;
background:var(--accent); color:#fff; font-size:.72rem; padding:.2rem .7rem; border-radius:0 0 8px 8px; font-weight:600; letter-spacing:.04em; }
.plan-name { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.5rem; }
.plan-price { font-size:2rem; font-weight:800; color:#fff; margin-bottom:.3rem; }
.plan-price span { font-size:1rem; font-weight:400; color:var(--muted); }
.plan-desc { color:var(--muted); font-size:.88rem; margin-bottom:1.2rem; }
.plan ul { list-style:none; flex:1; margin-bottom:1.5rem; }
.plan ul li { font-size:.88rem; color:var(--text); padding:.35rem 0; border-bottom:1px solid #222; display:flex; gap:.5rem; }
.plan ul li::before { content:'✓'; color:var(--accent2); flex-shrink:0; }
.plan .btn { text-align:center; width:100%; }

/* PAYMENT */
.payment-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.pay-card { background:var(--card); border:1px solid #222; border-radius:var(--radius); padding:1.8rem; }
.pay-card .icon { font-size:2rem; margin-bottom:1rem; }
.pay-card h3 { color:#fff; font-size:1rem; margin-bottom:.5rem; }
.pay-card p { color:var(--muted); font-size:.88rem; line-height:1.6; }
.pay-card .btn { display:inline-block; margin-top:1rem; padding:.6rem 1.2rem; font-size:.88rem; }

/* CONTACT */
#contact { text-align:center; }
.contact-box { background:var(--card); border:1px solid #222; border-radius:var(--radius); max-width:550px;
                margin:0 auto; padding:2.5rem; }
.contact-box p { color:var(--muted); margin-bottom:1.5rem; }
.contact-links { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* MODAL */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:999;
                align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal { background:var(--card); border:1px solid #333; border-radius:var(--radius); max-width:780px;
        width:100%; max-height:90vh; overflow-y:auto; position:relative; }
.modal-close { position:sticky; top:.8rem; float:right; margin:.8rem; background:#333; border:none;
                color:#fff; width:32px; height:32px; border-radius:50%; font-size:1.1rem; cursor:pointer;
                display:flex; align-items:center; justify-content:center; z-index:10; }
.modal-close:hover { background:#555; }
/* Carousel */
.carousel { position:relative; background:#000; aspect-ratio:16/10; overflow:hidden; }
.carousel-track { display:flex; height:100%; transition:transform .35s ease; }
.carousel-track img { min-width:100%; height:100%; object-fit:contain; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.6);
                border:none; color:#fff; font-size:1.4rem; padding:.4rem .8rem; cursor:pointer;
                border-radius:6px; z-index:5; }
.carousel-btn:hover { background:rgba(0,0,0,.9); }
.carousel-prev { left:.6rem; }
.carousel-next { right:.6rem; }
.carousel-dots { display:flex; justify-content:center; gap:.4rem; padding:.7rem 0 0; }
.carousel-dots span { width:8px; height:8px; border-radius:50%; background:#444; cursor:pointer; transition:background .2s; }
.carousel-dots span.active { background:var(--accent); }
/* Modal body */
.modal-body { padding:1.5rem 1.8rem 2rem; }
.modal-body h2 { color:#fff; font-size:1.3rem; margin-bottom:.4rem; }
.modal-body .modal-tag { font-size:.78rem; color:var(--accent); text-transform:uppercase;
                        letter-spacing:.07em; margin-bottom:1rem; }
.modal-body p { color:var(--muted); font-size:.92rem; line-height:1.7; }
.img-caption { background:#12121a; border-left:3px solid var(--accent); padding:.6rem 1rem;
                color:var(--muted); font-size:.85rem; margin-top:.8rem; border-radius:0 6px 6px 0;
                min-height:2.4rem; transition:opacity .2s; }

/* FOOTER */
footer { text-align:center; padding:2rem 5%; color:var(--muted); font-size:.83rem; border-top:1px solid #222; }
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}
.site-nav a { margin-left: 1.5rem; text-decoration: none; }
.site-nav a.active { font-weight: 900; }

.product-card {
  display: inline-block;              /* makes padding/margin/border behave */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px 16px;
  margin-right: 16px;
  margin-bottom: 12px;         /* the gap */
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.product-card:last-child { margin-bottom: 0; }
.product-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); border-color: #999; background: #1e1515; }
.product-card:active {
  transform: translateY(-1px) scale(1.0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition-duration: 0.05s;
}
.product-card:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
}
.product-card:last-of-type { margin-right: 0; }