/* =============================================================
   Content Solution — design tokens
   ============================================================= */
:root{
  --cs-blue: #0073E6;
  --cs-blue-dark: #0058B3;
  --cs-navy: #0B1F3A;
  --cs-navy-soft: #12294A;
  --cs-bg: #EFF5FC;
  --cs-white: #FFFFFF;
  --cs-ink: #0F1B2D;
  --cs-muted: #5B6B82;
  --cs-border: #DCE7F5;
  --cs-whatsapp: #25D366;
  --cs-radius: 14px;
  --cs-shadow: 0 10px 30px rgba(11,31,58,.08);
  --cs-container: 1180px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--cs-ink);
  background:var(--cs-bg);
  line-height:1.6;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.2; font-weight:700; }
p{ margin:0 0 1em; color:var(--cs-muted); }
.cs-container{ max-width:var(--cs-container); margin:0 auto; padding:0 24px; }

/* Buttons ------------------------------------------------------ */
.cs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:10px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cs-btn:hover{ transform:translateY(-2px); }
.cs-btn-primary{ background:var(--cs-blue); color:#fff; box-shadow:0 8px 20px rgba(0,115,230,.28); }
.cs-btn-primary:hover{ background:var(--cs-blue-dark); }
.cs-btn-outline{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.cs-btn-dark-outline{ background:transparent; border-color:var(--cs-navy); color:var(--cs-navy); }
.cs-btn-whatsapp{ background:var(--cs-whatsapp); color:#fff; }

/* =============================================================
   Header
   ============================================================= */
.cs-header{ background:var(--cs-navy); position:sticky; top:0; z-index:40; }
.cs-header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.cs-logo-text{ color:#fff; font-size:1.25rem; }
.cs-logo-text strong{ color:var(--cs-blue); }
.cs-nav-list{ list-style:none; display:flex; gap:30px; margin:0; padding:0; }
.cs-nav-list a{ color:rgba(255,255,255,.85); font-weight:500; font-size:.95rem; transition:color .15s; }
.cs-nav-list a:hover, .cs-nav-list .current-menu-item a{ color:#fff; }
.cs-nav-list a::after{ content:''; }
.cs-header-actions{ display:flex; align-items:center; gap:16px; }
.cs-nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.cs-nav-toggle span{ width:24px; height:2px; background:#fff; display:block; }

/* =============================================================
   Hero
   ============================================================= */
.cs-hero{ background:linear-gradient(180deg,var(--cs-navy) 0%, var(--cs-navy-soft) 100%); padding:80px 0 100px; }
.cs-hero-inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.cs-hero h1{ color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); }
.cs-hero h1 em{ font-style:normal; color:var(--cs-blue); background:linear-gradient(90deg,#2F9BFF,#0073E6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cs-hero p{ color:rgba(255,255,255,.72); font-size:1.05rem; max-width:46ch; }
.cs-hero-actions{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.cs-hero-media{ position:relative; border-radius:var(--cs-radius); overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.35); aspect-ratio:16/10; background:#08182C; }
.cs-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
/* .cs-play-btn is set as the "Additional CSS Class" on a native Button
   block whose text is just "▶" — these rules override the theme's
   default button look so it renders as a circular play icon instead. */
.cs-play-btn{ position:absolute !important; inset:0; margin:auto; width:74px !important; height:74px !important; border-radius:50% !important; background:rgba(255,255,255,.15) !important; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4) !important; display:flex !important; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s; padding:0 !important; font-size:1.3rem; color:#fff !important; text-decoration:none; line-height:1; }
.cs-play-btn:hover{ transform:scale(1.08); background:rgba(255,255,255,.28) !important; }
.cs-portfolio-thumb .cs-play-btn, .cs-testimonial-video .cs-play-btn{ width:52px !important; height:52px !important; font-size:1rem; }

/* =============================================================
   Section shell
   ============================================================= */
.cs-section{ padding:84px 0; }
.cs-section-head{ max-width:640px; margin:0 0 40px; }
.cs-section-head h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); }
.cs-eyebrow{ color:var(--cs-blue); font-weight:600; font-size:.85rem; }

/* Services grid -------------------------------------------------*/
.cs-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cs-card{ background:var(--cs-white); border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:26px; transition:box-shadow .2s, transform .2s; }
.cs-card:hover{ box-shadow:var(--cs-shadow); transform:translateY(-4px); }
.cs-card-icon{ width:44px; height:44px; border-radius:10px; background:#E7F1FD; color:var(--cs-blue); display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.3rem; }
.cs-card h4{ font-size:1.02rem; margin-bottom:6px; }
.cs-card p{ font-size:.9rem; margin:0; }

/* Portfolio / tabs ------------------------------------------------*/
.cs-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
/* .cs-tab = Additional CSS Class on native Button blocks used as filters */
.cs-tab{ padding:9px 18px !important; border-radius:999px !important; border:1px solid var(--cs-border) !important; background:#fff !important; font-size:.88rem; font-weight:600; color:var(--cs-muted) !important; cursor:pointer; transition:.15s; text-decoration:none; }
.cs-tab:hover{ border-color:var(--cs-blue) !important; color:var(--cs-blue) !important; }
.cs-tab.is-active{ background:var(--cs-blue) !important; color:#fff !important; border-color:var(--cs-blue) !important; }
.cs-portfolio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cs-portfolio-item{ display:none; }
.cs-portfolio-item.is-visible{ display:block; }
.cs-portfolio-card{ border-radius:var(--cs-radius); overflow:hidden; background:#fff; border:1px solid var(--cs-border); }
.cs-portfolio-thumb{ position:relative; aspect-ratio:16/10; background:#0B1F3A; cursor:pointer; }
.cs-portfolio-thumb img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.cs-portfolio-thumb .cs-play-btn{ width:52px; height:52px; }
.cs-portfolio-card .cs-portfolio-meta{ padding:14px 16px; }
.cs-portfolio-card h5{ margin:0 0 2px; font-size:.95rem; }
.cs-portfolio-card span{ font-size:.8rem; color:var(--cs-blue); font-weight:600; }

/* Pricing --------------------------------------------------------*/
.cs-pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cs-price-card{ background:#fff; border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:32px 28px; }
.cs-price-card.is-featured{ border-color:var(--cs-blue); box-shadow:0 16px 36px rgba(0,115,230,.14); position:relative; }
.cs-price-card.is-featured::before{ content:'Most Popular'; position:absolute; top:-13px; left:28px; background:var(--cs-blue); color:#fff; font-size:.72rem; font-weight:700; padding:4px 12px; border-radius:999px; }
.cs-price-plan{ font-size:.85rem; font-weight:700; color:var(--cs-blue); text-transform:uppercase; letter-spacing:.04em; }
.cs-price-amount{ font-size:2.4rem; font-weight:800; margin:10px 0 20px; }
.cs-price-amount span{ font-size:1rem; color:var(--cs-muted); font-weight:500; }
.cs-price-features{ list-style:none; margin:0 0 26px; padding:0; }
.cs-price-features li{ padding:9px 0; border-bottom:1px dashed var(--cs-border); font-size:.92rem; color:var(--cs-ink); }
.cs-price-features li:last-child{ border-bottom:0; }

/* CTA banner -------------------------------------------------------*/
.cs-cta-banner{ background:var(--cs-navy); border-radius:var(--cs-radius); padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cs-cta-banner h3{ color:#fff; margin:0 0 4px; font-size:1.2rem; }
.cs-cta-banner p{ color:rgba(255,255,255,.65); margin:0; }

/* Testimonials -----------------------------------------------------*/
.cs-testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cs-testimonial-card{ background:#fff; border:1px solid var(--cs-border); border-radius:var(--cs-radius); overflow:hidden; }
.cs-testimonial-video{ position:relative; aspect-ratio:16/10; background:#0B1F3A; cursor:pointer; }
.cs-testimonial-video img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.cs-testimonial-body{ padding:16px 18px; }
.cs-testimonial-body p{ font-style:italic; color:var(--cs-ink); margin:0 0 8px; font-size:.92rem; }
.cs-testimonial-body span{ font-size:.82rem; color:var(--cs-muted); }

/* Text review cards --------------------------------------------------*/
.cs-review-card{ background:#fff; border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:22px; }
.cs-review-stars{ color:#FFB400; font-size:.9rem; margin-bottom:10px; }
.cs-review-card h5{ margin:0; font-size:.92rem; }
.cs-review-card span{ font-size:.8rem; color:var(--cs-muted); }

/* Footer --------------------------------------------------------*/
.cs-footer{ background:var(--cs-navy); padding:56px 0 0; margin-top:40px; }
.cs-footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:28px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1); }
.cs-footer-brand p{ color:rgba(255,255,255,.55); margin-top:10px; font-size:.88rem; }
.cs-footer-nav-list{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.cs-footer-nav-list a{ color:rgba(255,255,255,.7); font-size:.9rem; }
.cs-footer-social{ display:flex; gap:12px; }
.cs-footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.75rem; }
.cs-footer-bottom{ text-align:center; padding:18px 0; }
.cs-footer-bottom p{ color:rgba(255,255,255,.45); font-size:.82rem; margin:0; }

/* WhatsApp float + modal ------------------------------------------*/
.cs-whatsapp-float{ position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%; background:var(--cs-whatsapp); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(37,211,102,.4); z-index:50; animation:cs-pulse 2.4s infinite; }
@keyframes cs-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.45);} 50%{ box-shadow:0 0 0 12px rgba(37,211,102,0);} }

.cs-modal-overlay{ position:fixed; inset:0; background:rgba(11,31,58,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100; opacity:0; visibility:hidden; transition:opacity .2s ease; }
.cs-modal-overlay.is-open{ opacity:1; visibility:visible; }
.cs-modal{ background:#fff; border-radius:16px; padding:32px; max-width:480px; width:100%; max-height:88vh; overflow-y:auto; position:relative; transform:translateY(12px); transition:transform .2s ease; }
.cs-modal-overlay.is-open .cs-modal{ transform:translateY(0); }
.cs-modal-close{ position:absolute; top:14px; right:16px; background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--cs-muted); }
.cs-modal-sub{ margin-top:-6px; font-size:.9rem; }
.cs-form label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:14px; color:var(--cs-ink); }
.cs-form input, .cs-form select, .cs-form textarea{ width:100%; margin-top:6px; padding:11px 13px; border:1px solid var(--cs-border); border-radius:9px; font-family:inherit; font-size:.92rem; background:#F7FAFE; }
.cs-form input:focus, .cs-form select:focus, .cs-form textarea:focus{ outline:2px solid var(--cs-blue); outline-offset:1px; }
.cs-form button{ width:100%; margin-top:6px; }
.cs-form-status{ text-align:center; font-size:.85rem; min-height:1.2em; margin-top:10px !important; }

/* Video lightbox ---------------------------------------------------*/
.cs-video-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:24px; z-index:120; opacity:0; visibility:hidden; transition:opacity .2s; }
.cs-video-overlay.is-open{ opacity:1; visibility:visible; }
.cs-video-overlay .cs-video-frame{ width:100%; max-width:860px; aspect-ratio:16/9; position:relative; }
.cs-video-overlay iframe{ width:100%; height:100%; border-radius:10px; border:0; }
.cs-video-close{ position:absolute; top:-40px; right:0; background:none; border:0; color:#fff; font-size:1.8rem; cursor:pointer; }

/* Scroll-reveal (single orchestrated entrance per section) --------*/
.cs-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.cs-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .cs-reveal{ opacity:1; transform:none; transition:none; } .cs-whatsapp-float{ animation:none; } }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width:960px){
  .cs-hero-inner{ grid-template-columns:1fr; }
  .cs-grid-4{ grid-template-columns:repeat(2,1fr); }
  .cs-portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .cs-pricing-grid, .cs-testimonial-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .cs-nav{ position:fixed; top:76px; left:0; right:0; background:var(--cs-navy); max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .cs-nav.is-open{ max-height:400px; }
  .cs-nav-list{ flex-direction:column; padding:16px 24px; gap:0; }
  .cs-nav-list li{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .cs-nav-toggle{ display:flex; }
  .cs-header-actions .cs-btn-primary{ display:none; }
}
@media (max-width:600px){
  .cs-grid-4, .cs-portfolio-grid{ grid-template-columns:1fr; }
  .cs-section{ padding:56px 0; }
  .cs-cta-banner{ flex-direction:column; align-items:flex-start; }
}