/* CORE THEME: black/white/red + variants */
:root{
  --bg:#0b0b0d; --bg-soft:#121214; --card:#141418;
  --text:#f9fafb; --muted:#a1a1aa;
  --brand:var(--color-brand); --brand-2:#ffffff;
  --border:rgba(255,255,255,.08);
  --container:1200px; --radius:16px; --radius-lg:22px; --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:
  radial-gradient(900px 500px at 100% -10%, rgba(200,29,37,.12), transparent 60%),
  radial-gradient(800px 400px at -10% 0%, rgba(255,255,255,.08), transparent 55%),
  linear-gradient(180deg, #0b0b0d, #0a0a0c 40%, #0b0b0d);
  color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; letter-spacing:.01em;
}
a{color:inherit;text-decoration:none}
.container{width:min(100%, var(--container)); margin-inline:auto; padding-inline:24px}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.15rem;border-radius:12px;font-weight:800;letter-spacing:.02em;border:1px solid transparent;transition:.2s; cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--brand),#a11319 70%); color:#fff; box-shadow:0 6px 24px rgba(200,29,37,.35)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(200,29,37,.45)}
.btn-outline{border-color:var(--border); background:rgba(255,255,255,.02); color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.06)}
.badge{display:inline-flex;gap:.5rem;align-items:center;border:1px solid var(--border);border-radius:999px;padding:.35rem .7rem;color:var(--muted);background:rgba(255,255,255,.03)}

.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px); background:rgba(12,12,14,.7); border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between; padding:14px 0}
.logo{display:flex;align-items:center;gap:.7rem;font-weight:900;font-family:Manrope,Inter,sans-serif}

nav ul{display:flex;gap:1.15rem;list-style:none;margin:0;padding:0}
nav a{color:var(--muted);font-weight:700}
nav a:hover{color:#fff}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.hamb{display:none}

/* Hero */
.hero{padding:86px 0 70px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center}
.title{font-size:clamp(2rem, 3.2vw + 1rem, 58px); line-height:1.05; font-weight:900; font-family:Manrope,Inter,sans-serif; letter-spacing:-.02em}
.subtitle{color:var(--muted); font-size:1.1rem; margin:.9rem 0 1.4rem; max-width:64ch}
.frame{aspect-ratio:4/5; border-radius:22px; background:linear-gradient(160deg,#131316,#121214 40%,#101014); border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow)}
.frame .mock{height:100%; display:grid; gap:14px; padding:26px}

/* Sections */
section{padding:72px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px}
.sec-title{font-size:clamp(1.4rem, 1.4vw + 1rem, 34px); font-weight:900; font-family:Manrope}
.sec-note{color:var(--muted)}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--border); border-radius:18px; padding:18px; display:grid; gap:10px; transition:transform .15s ease, box-shadow .15s ease}
.service:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.25)}
.service h3{margin:0; font-size:1.12rem}
.service p{margin:0; color:var(--muted); font-size:.98rem}
.service ul{margin:6px 0 0; padding-left:18px; color:var(--muted)}

/* Portfolio */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.work{position:relative; border-radius:16px; overflow:hidden; background:linear-gradient(135deg, rgba(200,29,37,.18), rgba(255,255,255,.1)); border:1px solid var(--border)}
.work .thumb{aspect-ratio:16/10; background:repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 10px, rgba(255,255,255,.06) 10px, rgba(255,255,255,.06) 20px)}
.work .meta{position:absolute; inset:auto 10px 10px 10px; background:rgba(6,6,8,.72); border:1px solid var(--border); padding:10px 12px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:8px}

/* Testimonials */
.testi{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.quote{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:18px; padding:18px; display:grid; gap:10px}
.stars{letter-spacing:2px;color:#fff}

/* Blog */
.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.post{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015))}
.post .thumb{aspect-ratio:16/9; background:linear-gradient(135deg, rgba(200,29,37,.2), rgba(255,255,255,.08))}
.post .body{padding:14px; display:grid; gap:8px}
.post .tag{display:inline-block; font-size:.8rem; color:#fff; background:var(--brand); padding:.2rem .5rem; border-radius:999px}

.list-clean{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.center{text-align:center}
.muted{color:var(--muted)}
.pill{padding:.25rem .6rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); font-size:.85rem; color:var(--muted)}

/* Contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.form{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:18px; padding:18px; display:grid; gap:12px}
.form label{font-weight:700; color:#fff}
.form input,.form textarea, .form select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #2a2a2f; background:#0f0f12; color:#fff}
.form small{color:var(--muted)}

/* Footer */
.site-footer{padding:40px 0; color:var(--muted); border-top:1px solid var(--border); background:#0a0a0c}
.footer-grid{display:grid; grid-template-columns:1.2fr .6fr 1fr; gap:18px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--border)}
.newsletter{display:grid; grid-template-columns:auto 140px; gap:8px; align-items:center}
.newsletter input{padding:.9rem 1rem; border-radius:12px; border:1px solid #2a2a2f; background:#0f0f12; color:#fff}
.newsletter button{height:100%}

/* Icons + animations */
.svc-ico{width:22px;height:22px;vertical-align:middle;margin:-2px 6px 0 0;filter:drop-shadow(0 3px 8px rgba(200,29,37,.35)); animation:breathe 2.6s ease-in-out infinite}
.service:hover .svc-ico{animation-duration:1.8s}
@keyframes breathe { 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-2px) scale(1.02);} }
@keyframes pulseGlow {
  0%,100%{ box-shadow:0 0 0 0 rgba(200,29,37,.0); }
  50%{ box-shadow:0 0 0 8px rgba(200,29,37,.08); }
}
.work .meta{animation:pulseGlow 2.8s ease-in-out infinite}
.hero .frame img{will-change:transform; transition:transform .2s ease}

/* Reveal */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* Themes */
:root.theme-light{--bg:#ffffff;--bg-soft:#f7f7f8;--card:#ffffff;--text:#0a0a0c;--muted:#4b5563;--brand:var(--color-brand);--brand-2:#0a0a0c;--border:rgba(0,0,0,.12)}
:root.theme-glass{--bg:#0a0a0c;--bg-soft:rgba(18,18,20,.5);--card:rgba(18,18,20,.5);--text:#f9fafb;--muted:#c7c7cf;--brand:var(--color-brand);--brand-2:#ffffff;--border:rgba(255,255,255,.16)}
.theme-glass body, .theme-light body{background:none;background-color:var(--bg)}
.theme-glass .service, .theme-glass .form, .theme-glass .work, .theme-glass .quote{backdrop-filter:saturate(140%) blur(10px)}
.theme-light body{background:linear-gradient(180deg,#ffffff,#fafafa)}
.theme-light .site-header{background:rgba(255,255,255,.95)}
.theme-light nav a{color:#475569}
.theme-light .btn-outline{color:#0a0a0c}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .svc-ico, .work .meta, .hero .frame img, .reveal{animation:none !important; transition:none !important}
}

/* Responsive */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testi{grid-template-columns:1fr}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  nav ul{display:none}
  .hamb{display:block}
  .services{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr}
}


/* PARALLAX TRANSFORMS */
.parallax::before{transform:var(--para-transform-1, translate3d(0,0,0)); will-change:transform}
.parallax::after{transform:var(--para-transform-2, translate3d(0,0,0)); will-change:transform}

@media (max-width:640px){}

/* Logo: show at intrinsic PNG/SVG size (no squeeze) */
.logo img{
  height:auto !important;
  width:auto !important;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 10px rgba(200,29,37,.3));
}
/* Header padding to accommodate taller logos */
.site-header .nav{ padding:10px 0; }
@media (max-width:640px){
  .site-header .nav{ padding:8px 0; }
}

/* Footer logo intrinsic sizing */
.site-footer .brand .logo img{
  height:auto !important;
  width:auto !important;
  max-width:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 14px rgba(200,29,37,.35));
}

.site-footer .brand .logo{gap:0}

/* Topic hero */
.topic-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border); background:var(--bg-soft); margin-bottom:22px}
.topic-hero picture{display:block; width:100%}
.topic-hero img{display:block; width:100%; height:auto}
main > section:last-of-type{margin-bottom:32px}


/* Pricing */
.pricing{position:relative; display:grid; gap:12px; padding:22px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:18px; transition:transform .15s ease, box-shadow .15s ease}
.pricing:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.25)}
.pricing .pricing-head{display:flex; gap:12px; align-items:center}
.pricing .pricing-ico{filter: drop-shadow(0 6px 14px rgba(200,29,37,.35))}
.pricing-title{margin:0; font-size:1.2rem; font-weight:900; font-family:Manrope}
.pricing-sub{margin:0; color:var(--muted)}
.pricing-price{display:grid; gap:4px; margin:8px 0 8px}
.pricing .price{font-size:1.6rem; font-weight:900}
.pricing-list{margin:6px 0 0; color:var(--muted)}
.pricing-cta{margin-top:10px; display:flex; gap:8px}
.pricing .badge{margin-top:8px}
.pricing.featured{background:linear-gradient(180deg, rgba(200,29,37,.18), rgba(255,255,255,.04)); border-color:var(--color-brand)}
.pricing .ribbon{position:absolute; top:12px; right:-8px; background:var(--color-brand); color:#fff; padding:6px 10px; font-weight:800; transform:skew(-10deg); border-radius:8px}

/* Billing toggle visual */
#billing-toggle .pill{cursor:pointer}
#billing-toggle .pill:hover{background:rgba(255,255,255,.08)}

/* Responsive */
@media (max-width:1024px){
  #pricing .grid{grid-template-columns:1fr}
  .pricing{padding:18px}
}


/* Pricing comparison & timer */
.deal-timer{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--color-border); border-radius:14px; padding:12px}
#countdown{font-variant-numeric: tabular-nums; letter-spacing:.04em}
.pricing .save-badge{margin-left:8px; background:rgba(200,29,37,.18); color:#fff; border:1px solid var(--color-brand); padding:2px 8px; border-radius:999px; font-weight:800; font-size:.8rem}
#pricing-compare .card{padding:0 18px}
#pricing-compare .u-grid-4 > div{padding:6px 4px}

/* === Dark-only lock === */
:root, body { background: var(--color-bg); color: var(--color-text); }
.theme-toggle, .theme-menu, .theme-dropdown, [data-theme-switcher]{ display:none !important; }
body[data-theme], html[data-theme] { background: var(--color-bg) !important; color: var(--color-text) !important; }

/* Typography polish */
body { font-feature-settings: "ss01","ss02","liga","calt"; }
h1,h2,h3,h4,.display,.h1,.h2 { letter-spacing: -0.02em; }
.muted, .caption { color: var(--color-muted); }

/* Buttons — darker red gradient & focus states */
.btn-primary{ background: linear-gradient(135deg, var(--color-brand), #a11319 70%); box-shadow: 0 10px 30px rgba(200,29,37,.35); }
.btn-primary:focus-visible{ outline:3px solid rgba(200,29,37,.5); outline-offset:2px }
.btn-outline:hover{ border-color: var(--color-brand); color: #fff; box-shadow: 0 8px 20px rgba(200,29,37,.25)}

/* Header/Sections */
.site-header{ background: rgba(10,11,12,.78); border-bottom:1px solid var(--color-border) }
section .sec-title{ font-size: clamp(1.6rem, 1.4vw + 1rem, 2rem); }
.badge, .chip{ border-color: var(--color-border) }

/* Comparison table — professional look */
#pricing-compare .card{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--color-border); border-radius: 16px; overflow:hidden }
#pricing-compare .u-grid-4 > div{ padding:12px 10px }
#pricing-compare .u-grid-4:nth-child(3n) > div{ background: rgba(255,255,255, .01) }
#pricing-compare .header-row{ position: sticky; top: 64px; background: rgba(10,11,12,.92); backdrop-filter: blur(6px); border-bottom:1px solid var(--color-border) }
#pricing-compare .ok{ color:#b794f4; font-weight:900 } /* lavender check */
#pricing-compare .maybe{ color:#fbbf24 } /* amber dot */
#pricing-compare .dash{ color:#5b5e66 }

/* Pricing cards spacing & readability */
.pricing .price{ font-size: 1.7rem }
.pricing .pricing-sub{ color: var(--color-muted) }
.pricing .pricing-list li{ padding: 4px 0 }

/* Footer spacing fix vs. compare section */
#pricing-compare{ margin-bottom: 36px; }

/* Mobile polish */
@media (max-width: 768px){
  .nav{ padding:12px 0 }
  #pricing .grid, #pricing-compare .u-grid-4{ grid-template-columns: 1fr !important }
  #pricing-compare .header-row{ top: 56px }
  .display{ font-size: clamp(1.8rem, 6vw, 2.4rem) }
}


/* Link palette reset */
a{ color: var(--color-text); text-decoration: none }
a:hover{ color: var(--color-brand) }
a:focus-visible{ outline: 2px solid var(--color-brand); outline-offset: 2px }
.nav a{ color: var(--color-text) }
.nav a:hover{ color: var(--color-brand) }


/* --- V5.6.3 Button hover/focus normalization --- */
/* Remove default blue focus highlight on webkit */
:root { -webkit-tap-highlight-color: transparent; }

/* Ensure button text is always white on hover */
.btn-primary:hover,
.btn-outline:hover { color:#fff !important; }

/* White contour on hover (outer ring) and gentle elevation */
.btn:hover { 
  box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 10px 24px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.25);
}

/* Accessibility: white focus ring */
.btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff inset, 0 8px 20px rgba(0,0,0,.3);
}

/* Header CTA specific normalization */
.nav .btn-primary:hover { 
  color:#fff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 12px 26px rgba(200,29,37,.28);
}


/* --- V5.6.4 Red glow hover for buttons (no hard lines) --- */
.btn:hover{
  color:#fff !important;
  border-color: rgba(200,29,37,.35);
  /* soft glow using multiple outer shadows, no solid ring */
  box-shadow:
    0 6px 22px rgba(0,0,0,.35),
    0 0 24px rgba(200,29,37,.35),
    0 0 48px rgba(200,29,37,.22);
}

.nav .btn-primary:hover{
  color:#fff !important;
  border-color: rgba(200,29,37,.45);
  box-shadow:
    0 8px 26px rgba(0,0,0,.35),
    0 0 28px rgba(200,29,37,.45),
    0 0 56px rgba(200,29,37,.25);
}

/* Improve pricing text legibility on dark background */
.pricing-title,
.pricing .price{
  color:#ffffff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.pricing-sub,
.pricing-list{
  color:rgba(255,255,255,0.8) !important;
}