/* =============================================================================
   Shakebug 2.0 — marketing home page redesign
   Loaded by application/views/homepage.php (with ?v=filemtime cache-busting).
   Scope: hero, feature showcase, the Features nav dropdown, and scroll reveals.
   Everything is mobile-first responsive; reveal styles only apply once the
   home.js opts in (.reveal-init), so content is always visible without JS.
   ============================================================================= */

/* ===== Hero — center-stage launch layout (big, clearly-visible product shot) ===== */
.topmain .hero2-center { max-width:1080px; margin:0 auto; padding-top:48px; text-align:center; }
.hero2-badge { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#0b5560; background:rgba(29,211,227,.12); border:1px solid rgba(29,211,227,.4); padding:7px 16px 7px 7px; border-radius:999px; margin-bottom:24px; text-decoration:none; transition:background .2s ease; }
.hero2-badge:hover { background:rgba(29,211,227,.22); color:#0b5560; }
.hero2-badge-tag { font-size:11px; font-weight:800; letter-spacing:.06em; color:#fff; background:#1dd3e3; padding:3px 9px; border-radius:999px; }
.topmain .hero2-center h3 { font-size:54px; line-height:1.12; max-width:760px; margin:0 auto; }
.topmain .hero2-center h3 span { color:#1dd3e3; }
.hero2-sub { font-size:20px; line-height:1.6; color:#5f6464; max-width:680px; margin:18px auto 0; }
.hero2-center .hero2-cta { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:28px 0 0; float:none; }
.hero2-center .installation-count-homepage { justify-content:center; max-width:780px; margin:34px auto 4px; }
/* hero is text + KPIs only (the product shot lives in the Features section to avoid duplication) */
.topmain .hero2-center .installation-count-homepage { margin-bottom:30px; }

/* ===== Hero — darker, on-brand band (teal + deep slate) for the 2.0 launch feel ===== */
.topmain.bganimation { background:radial-gradient(1100px 560px at 50% -8%, #114049 0%, #0c2c33 48%, #0a2127 100%) !important; }
.topmain .hero2-center h3 { color:#ffffff; }
.topmain .hero2-center h3 span { color:#36dcec; }
.topmain .hero2-sub { color:#b7c6cb; }
.topmain .hero2-badge { color:#cdeff3; background:rgba(54,220,236,.14); border-color:rgba(54,220,236,.45); }
.topmain .hero2-badge:hover { background:rgba(54,220,236,.24); color:#ffffff; }
/* KPI stat cards — glassy cards on the dark hero (5 across: installs, bugs, crashes, sessions, events) */
/* same max-width as the shot below so their edges line up; high specificity to beat the legacy inline rule */
.topmain .rowbtns.installation-count-homepage { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; max-width:1040px; margin:36px auto 8px; float:none; }
.topmain .stat-box { flex:1 1 150px; max-width:200px; display:flex; justify-content:center; align-items:center; background:transparent; border:none; border-radius:16px; padding:12px 10px; transition:transform .2s ease, background .2s ease; }
.topmain .stat-box:hover { background:rgba(255,255,255,.05); transform:translateY(-3px); }
.topmain .stat-content { width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.topmain .stat-content .icon { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; font-size:20px; color:#36dcec; background:rgba(54,220,236,.13); margin:0 0 14px; }
.topmain .stat-content .count { font-size:28px; font-weight:800; color:#ffffff; line-height:1; }
.topmain .stat-content p { font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#7fe3ef; margin:9px 0 0 !important; }
.topmain .bbtn { color:#eafcff; border-color:rgba(255,255,255,.55); }
.topmain .bbtn:hover { background:rgba(255,255,255,.10); color:#ffffff; }

/* ===== Click-to-zoom lightbox for product screenshots ===== */
.hero2-browser img { cursor:zoom-in; }
.feat-lightbox { position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(8,20,26,.88); }
.feat-lightbox.open { display:flex; }
.feat-lightbox img { max-width:96vw; max-height:92vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.55); cursor:zoom-out; }
.feat-lightbox-close { position:absolute; top:16px; right:24px; width:44px; height:44px; background:rgba(255,255,255,.12); border:none; border-radius:50%; color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.feat-lightbox-close:hover { background:rgba(255,255,255,.22); }
.hero2-browser { position:relative; background:#fff; border:1px solid #e6eaee; border-radius:14px; box-shadow:0 30px 60px -20px rgba(16,42,67,.35), 0 10px 24px -12px rgba(16,42,67,.2); overflow:hidden; }
.hero2-browser-bar { display:flex; align-items:center; gap:7px; padding:12px 14px; background:#f5f7f9; border-bottom:1px solid #eceff2; }
.hero2-browser-bar span { width:11px; height:11px; border-radius:50%; background:#d7dde3; }
.hero2-browser-bar span:nth-child(1) { background:#ff5f56; }
.hero2-browser-bar span:nth-child(2) { background:#ffbd2e; }
.hero2-browser-bar span:nth-child(3) { background:#27c93f; }
.hero2-browser img { display:block; width:100%; height:auto; }

/* ===== Feature showcase ===== */
.features2 { padding:70px 0; }
.features2-head { max-width:760px; margin:0 auto 56px; text-align:center; }
.features2-head .ctitle { margin-bottom:14px; }
.features2-head p { font-size:18px; color:#5f6464; }
.feat-row { display:flex; align-items:center; gap:54px; margin-bottom:80px; }
.feat-row:last-child { margin-bottom:0; }
.feat-row.reverse { flex-direction:row-reverse; }
.feat-row .feat-text, .feat-row .feat-media { flex:1 1 0; min-width:0; }
.feat-kicker { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#0b8a96; margin-bottom:12px; }
.feat-text h3 { font-size:30px; line-height:1.25; color:#1f2c35; margin-bottom:14px; }
.feat-text p { font-size:17px; line-height:1.7; color:#5f6464; }
.feat-text a { color:#0b8a96; font-weight:600; }
.feat-illus { text-align:center; padding:56px 24px; border-radius:14px; background:linear-gradient(135deg,#e8fcff,#d2f6fb); border:1px solid rgba(29,211,227,.35); }
.feat-illus i { font-size:40px; color:#1dd3e3; margin:0 3px; }
.feat-illus p { font-weight:600; color:#0b8a96; margin-top:16px; font-size:16px; }

/* reveal-on-scroll: visible by default; only hidden once home.js adds .reveal-init */
.reveal-init .feat-row { opacity:0; transform:translateY(38px); transition:opacity .7s ease, transform .7s ease; }
.reveal-init .feat-row.in-view { opacity:1; transform:none; }

/* ===== "What is Shakebug? / Every Platform" section (2.0 restyle) ===== */
.ourplatform-2o .op2-top { display:flex; align-items:center; gap:54px; }
.ourplatform-2o .op2-video { flex:1 1 0; min-width:0; }
.ourplatform-2o .op2-video .videobox { width:100%; margin:0; }
.ourplatform-2o .op2-video .videobox .videoimage { width:100%; height:auto; border-radius:14px; box-shadow:0 30px 60px -22px rgba(16,42,67,.4); }
.ourplatform-2o .op2-intro { flex:1 1 0; min-width:0; text-align:left; }
.ourplatform-2o .op2-intro .ctitle { text-align:left; margin:6px 0 16px; }
.ourplatform-2o .op2-intro p { font-size:17px; line-height:1.75; color:#5f6464; margin:0; }
.ourplatform-2o .op2-intro p a { color:#0b8a96; font-weight:600; }

.ourplatform-2o .op2-platforms { margin-top:64px; text-align:center; float:none; width:100%; }
.ourplatform-2o .op2-platforms .ctitle { text-align:center; }
.ourplatform-2o .op2-platforms .ctitle span { color:#1dd3e3; }
.ourplatform-2o .op2-platforms-sub { font-size:17px; color:#5f6464; margin:12px auto 0; max-width:620px; }
.ourplatform-2o .op2-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:34px; }
.ourplatform-2o .op2-grid .plogopart { float:none; width:168px; margin:0; padding:0; border:none; background:none; }
/* neutralise the legacy animated corner-sweep (pla–pld :after) that only existed on pl1–pl4, not Flutter (pl5) — keeps all 5 cards uniform */
.ourplatform-2o .op2-grid .plogopart:after { display:none !important; content:none !important; animation:none !important; }
.ourplatform-2o .op2-grid .plogopart a { display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 16px; background:#fff; border:1px solid #e9edf1; border-radius:16px; box-shadow:0 10px 24px -16px rgba(16,42,67,.25); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration:none; }
.ourplatform-2o .op2-grid .plogopart a:hover { transform:translateY(-5px); border-color:rgba(29,211,227,.55); box-shadow:0 18px 36px -16px rgba(16,42,67,.35); }
.ourplatform-2o .op2-grid .plogopart .plogo { height:56px; display:flex; align-items:center; justify-content:center; margin:0; }
.ourplatform-2o .op2-grid .plogopart .plogo img { max-height:56px; width:auto; }
.ourplatform-2o .op2-grid .plogopart span { font-size:16px; font-weight:600; color:#1f2c35; }

@media (max-width: 991px) {
    .ourplatform-2o .op2-top { flex-direction:column; gap:30px; }
    .ourplatform-2o .op2-intro { text-align:center; }
    .ourplatform-2o .op2-intro .ctitle { text-align:center; }
    .ourplatform-2o .op2-platforms { margin-top:48px; }
}
@media (max-width: 575px) {
    .ourplatform-2o .op2-grid .plogopart { width:132px; }
    .ourplatform-2o .op2-grid .plogopart a { padding:20px 12px; }
}

/* ===== Integrated with / Trusted By / Reviewed In — logo wall (2.0 restyle) ===== */
.shakebuglove { padding:66px 0; background:#f7fafb; }
.shakebuglove .suplovelogos { margin-bottom:46px; }
.shakebuglove .suplovelogos:last-child { margin-bottom:0; }
.shakebuglove .logosrow h2 { float:none; width:100%; text-align:center; font-size:24px; font-weight:700; color:#1f2c35; margin:0 0 26px; padding:0; }
.shakebuglove .logosrow #trustedby, .shakebuglove .logosrow #reviewdby { padding:0; }
.shakebuglove .logosrow ul { float:none; width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; list-style:none; margin:0; padding:0; }
.shakebuglove .logosrow ul br { display:none; }
.shakebuglove .logosrow ul li { float:none; margin:0; padding:0; list-style:none; width:auto; }
.shakebuglove .logoimg { margin:0 !important; width:152px; height:74px; background:#fff; border:1px solid #e9edf1; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:14px; box-shadow:0 6px 16px -12px rgba(16,42,67,.3); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.shakebuglove .logoimg:hover { transform:translateY(-4px); border-color:rgba(29,211,227,.5); box-shadow:0 14px 26px -14px rgba(16,42,67,.4); }
.shakebuglove .logoimg a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.shakebuglove .logoimg img { max-width:100%; max-height:42px; width:auto; height:auto; object-fit:contain; }
@media (max-width: 575px) {
    .shakebuglove { padding:48px 0; }
    .shakebuglove .logosrow ul { gap:12px; }
    .shakebuglove .logoimg { width:132px; height:64px; padding:11px; }
    .shakebuglove .logoimg img { max-height:36px; }
}

/* ===== Logo wall — single-row marquee (enabled by home.js: .marquee-on; clones items for a seamless loop) ===== */
.shakebuglove.marquee-on .logosrow { display:block; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.shakebuglove.marquee-on .logosrow ul { flex-wrap:nowrap; justify-content:flex-start; width:max-content; padding:14px 0; gap:18px; animation:skb-marquee 48s linear infinite; will-change:transform; }
.shakebuglove.marquee-on .logosrow ul:hover { animation-play-state:paused; }
.shakebuglove.marquee-on #logosrow-trustedby ul { animation-name:skb-marquee-rev; animation-duration:56s; }
.shakebuglove.marquee-on .slogorow3 ul { animation-duration:52s; }
.shakebuglove.marquee-on .logoimg { flex:0 0 auto; }
.shakebuglove.marquee-on .logoimg:hover { transform:none; }
@keyframes skb-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes skb-marquee-rev { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    .shakebuglove.marquee-on .logosrow ul { animation:none; }
}

/* ===== Our Clients — testimonials (2.0 restyle) ===== */
.clients.commonslider { background:linear-gradient(180deg,#ffffff 0%, #eafafc 100%); padding:78px 0 64px; margin-top:0; }
.clients .ctitle { color:#1f2c35; text-align:center; margin-bottom:46px; }
.clients .item { padding:62px 14px 16px; }
.clients .clientinfo { width:100%; text-align:center; background:#fff; border:1px solid #e9edf1; border-radius:20px; padding:0 30px 32px; box-shadow:0 20px 44px -24px rgba(16,42,67,.34); }
.clients .clientinfo .clientimg { width:96px; height:96px; margin:-48px auto 18px; display:block; border-radius:50%; border:4px solid #fff; box-shadow:0 8px 20px -8px rgba(16,42,67,.4); overflow:hidden; }
.clients .clientinfo .clientimg img { width:100%; height:100%; object-fit:cover; }
.clients .clientinfo .ctext { width:100%; padding-top:8px; background-image:none; }
.clients .clientinfo .ctext::before { content:"\201C"; display:block; font-family:Georgia,"Times New Roman",serif; font-size:56px; line-height:.5; color:#1dd3e3; margin-bottom:10px; }
.clients .clientinfo .ctext p { font-size:16.5px; line-height:1.7; color:#42504f; margin:0; }
.clients .clientinfo .client { margin-top:18px; }
.clients .clientinfo .client span:not(:first-child) { color:#7a8587; font-size:15px; font-weight:500; }
.clients .clientinfo .client .linked { display:inline-block; opacity:.7; transition:opacity .2s ease; }
.clients .clientinfo .client .linked:hover { opacity:1; }
.clients .owl-dots { margin-top:34px; }
.clients .owl-dots .owl-dot span { width:9px; height:9px; background-color:rgba(29,211,227,.3); transition:background .2s ease, width .2s ease; }
.clients .owl-dots .owl-dot.active span { width:26px; border-radius:6px; background-color:#1dd3e3; }

/* ===== How Shakebug Works — 3-step cards (2.0 restyle) ===== */
.howitwork-2o { background:#ffffff !important; background-image:none !important; padding:74px 0 !important; }
.howitwork-2o .features2-head { margin-bottom:18px; }
.howitwork-2o .how2-grid { display:flex; gap:28px; padding:0; margin-top:46px; align-items:stretch; }
.howitwork-2o .howstep { flex:1 1 0; min-width:0; position:relative; background:#fff; border:1px solid #e9edf1; border-radius:18px; padding:30px 26px 28px; text-align:center; box-shadow:0 18px 40px -26px rgba(16,42,67,.34); transition:transform .2s ease, box-shadow .2s ease; }
.howitwork-2o .howstep:hover { transform:translateY(-5px); box-shadow:0 26px 50px -26px rgba(16,42,67,.4); }
.howitwork-2o .howstep-num { position:absolute; top:-19px; left:50%; transform:translateX(-50%); width:42px; height:42px; border-radius:50%; background:#1dd3e3; color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -6px rgba(29,211,227,.7); }
.howitwork-2o .howstep-media { height:262px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eafcff,#f4feff); border:1px solid rgba(29,211,227,.18); border-radius:13px; margin:18px 0 20px; padding:16px; overflow:hidden; }
.howitwork-2o .howstep-media img { max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }
.howitwork-2o .howstep-title { font-size:21px; color:#1f2c35; font-weight:700; margin:0 0 10px; }
.howitwork-2o .howstep p { font-size:15.5px; line-height:1.7; color:#5f6464; margin:0; }
@media (max-width: 991px) {
    .howitwork-2o .how2-grid { flex-direction:column; gap:34px; margin-top:40px; }
    .howitwork-2o .howstep-media { height:300px; }
}

/* ===== Final CTA "Report bugs, feel the difference" (2.0 restyle) ===== */
.startpart.bganimation { background:radial-gradient(1000px 460px at 50% -20%, #15505b 0%, #0c2c33 52%, #0a2127 100%) !important; background-image:radial-gradient(1000px 460px at 50% -20%, #15505b 0%, #0c2c33 52%, #0a2127 100%) !important; padding:88px 0 !important; }
.startpart .ctitle { color:#ffffff !important; font-weight:800; }
/* keep the site's standard .cbtn pill (height/line-height/radius) for consistent typography + vertical-centred text; just add a subtle glow + hover lift */
.startpart .cbtn { box-shadow:0 14px 32px -10px rgba(29,211,227,.55); transition:transform .2s ease, box-shadow .2s ease; }
.startpart .cbtn:hover { transform:translateY(-2px); box-shadow:0 20px 40px -10px rgba(54,220,236,.65); }
.startpart p { color:#9fb3b9 !important; font-size:14px; }

/* ===== Features dropdown in the top nav ===== */
.menus li.has-mega { position:relative; }
.menus li.has-mega > .mega { position:absolute; top:100%; left:0; min-width:230px; background:#fff; border:1px solid #eceff2; border-radius:10px; box-shadow:0 16px 40px -12px rgba(16,42,67,.28); padding:8px; margin:0; list-style:none; display:none; z-index:1001; }
.menus li.has-mega:hover > .mega { display:block; }
.menus li.has-mega .mega li { display:block; margin:0; float:none; }
.menus li.has-mega .mega li a { display:block; padding:9px 12px; border-radius:7px; font-size:15px; color:#2e2e2e; white-space:nowrap; }
.menus li.has-mega .mega li a:hover { background:#f1fdff; color:#0b8a96; }

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .topmain .hero2-center { padding-top:24px; }
    .topmain .hero2-center h3 { font-size:38px; }
    .hero2-sub { font-size:18px; }
    .topmain .rowbtns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

    .feat-row, .feat-row.reverse { flex-direction:column; gap:26px; margin-bottom:54px; }
    .feat-text { text-align:center; }
    .feat-text h3 { font-size:24px; }
    .features2 { padding:50px 0; }

    /* dropdown collapses inline within the mobile menu */
    .menus li.has-mega > .mega { position:static; display:block; box-shadow:none; border:none; padding:0 0 0 12px; min-width:0; }
}

@media (max-width: 575px) {
    .topmain .hero2-center h3 { font-size:30px; }
    .hero2-badge { font-size:12px; }
    .hero2-sub { font-size:16px; }
    .features2-head .ctitle { font-size:28px; }
    .features2-head p { font-size:16px; }
    .feat-text h3 { font-size:22px; }
    .feat-text p { font-size:16px; }
    .feat-row, .feat-row.reverse { gap:18px; margin-bottom:40px; }
    .feat-illus { padding:40px 18px; }
    .hero2-browser-bar { padding:9px 11px; }
    .hero2-browser-bar span { width:9px; height:9px; }
}