:root {
  --bg: #f4f8ff;
  --glass: rgba(255,255,255,.72);
  --panel: #ffffff;
  --panel-2: #eef4ff;
  --text: #0f172a;
  --muted: #475569;
  --line: #dbe7ff;
  --accent: #ff6a00;
  --blue: #1f6bff;
  --max: 1160px;
  --r: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:
  linear-gradient(rgba(248,251,255,.92), rgba(244,248,255,.96)),
  url('assets/photos/dashboard.jpg') center/cover fixed no-repeat; color: var(--text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--max), 92%); margin: 0 auto; }
.badge { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 12px; color: var(--muted); background:#fff; }

header.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 108px; gap: 14px; }
.brand { display:inline-flex; align-items:center; padding:2px 4px; border-radius:12px; background:transparent; border:none; }
.brand img { height: 168px; width: auto; display:block; mix-blend-mode:multiply; }
nav.menu { display: flex; gap: 22px; font-size: 17px; font-weight: 600; color: var(--muted); }
nav.menu a:hover { color: var(--text); }
nav.menu a{position:relative;padding:4px 0}
nav.menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:linear-gradient(120deg,var(--blue),var(--accent));transition:width .2s ease}
nav.menu a:hover::after{width:100%}
.mobile-menu-btn{display:none}
.cta { background: linear-gradient(120deg,var(--blue),var(--accent)); color: #fff; border: none; border-radius: 12px; padding: 11px 14px; font-weight: 700; cursor: pointer; box-shadow:0 8px 20px rgba(31,107,255,.18); transition:.2s ease; }
.cta:hover { transform: translateY(-1px); box-shadow:0 10px 22px rgba(255,106,0,.28); }
.cta.secondary { background: #fff; border: 1px solid #c8dafd; color: var(--blue); }

section { padding: 56px 0; }
.hero { padding-top: 70px; }
.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; align-items: center; }
h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.03; margin: 10px 0 14px; letter-spacing: -.02em; color:#0b2c72; }
h2 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 14px; letter-spacing:-.01em; }
.lead { color: var(--muted); font-size: 18px; max-width: 64ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 16px; }
.trust { display: flex; gap: 10px; flex-wrap: wrap; }
.video-mock { background: transparent; border: none; border-radius: 0; min-height: 0; padding: 0; position: relative; overflow: visible; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:10px; }
.hero-watermark{position:absolute;left:-30px;bottom:-30px;opacity:.08;width:320px;pointer-events:none}
body.theme-dark{--bg:#080b12;--panel:#101726;--panel-2:#131b2d;--text:#f7faff;--muted:#c6d1e4;--line:#27344d;background:linear-gradient(rgba(8,11,18,.9),rgba(8,11,18,.94)),url('assets/photos/dashboard.jpg') center/cover fixed no-repeat}
body.theme-dark header.nav{background:rgba(8,11,18,.75)}
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark summary{color:#f7faff}
body.theme-dark .cta.secondary{background:transparent;color:#d7e5ff;border-color:#4c6da5}
body.theme-dark .logo-item, body.theme-dark .kpi > div, body.theme-dark .v-card, body.theme-dark .metric div{background:#0f1726;border-color:#2b3d5b}
body.theme-dark .brand img{filter:brightness(1.18) contrast(1.05)}
body.theme-dark .card, body.theme-dark .form, body.theme-dark details, body.theme-dark .step{background:var(--panel);border-color:var(--line)}
body.theme-dark .badge{background:transparent}
.video-col { position: absolute; right: 14px; top: 14px; width: 44%; display: grid; gap: 10px; }
.v-card { border: 1px solid #bfd4ff; border-radius: 14px; padding: 8px; background: #fff; }
.v-box { height: 110px; border-radius: 10px; background: linear-gradient(120deg,#4a87ff,#2563eb); }
.kpi { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.kpi > div { border: 1px solid #cfe0ff; border-radius: 12px; padding: 10px; background: #fff; }

.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.card { border: 1px solid var(--line); border-radius: calc(var(--r) + 2px); background: var(--panel); padding: 22px; box-shadow:0 14px 34px rgba(31,107,255,.10); }
.card .cta{display:inline-flex;margin-top:8px}
.card h3 { margin: 8px 0 8px; }
.muted { color: var(--muted); }

.timeline { display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 14px; }
.num { width: 30px; height: 30px; border-radius: 999px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }

.case-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.metric { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.metric div { border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 13px; background: #f7fbff; }

.packages { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.package ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.package-logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#e8f0ff,#fff3e8);border:1px solid var(--line);margin-right:8px;font-size:17px;vertical-align:middle}
.pick-badge{display:inline-block;margin-bottom:10px;padding:6px 10px;border-radius:999px;background:linear-gradient(120deg,var(--blue),var(--accent));color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em}
.package.featured{position:relative;border-color:#a9c8ff;box-shadow:0 16px 36px rgba(31,107,255,.18)}

.faq { display: grid; gap: 10px; }
details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 14px; }
summary { cursor: pointer; font-weight: 600; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form input, .form textarea, .form select { width: 100%; background: #fff; color: var(--text); border: 1px solid #cfe0ff; border-radius: 10px; padding: 10px; font: inherit; }
.form textarea { min-height: 110px; }
.full { grid-column: 1 / -1; }

footer { padding: 36px 0 56px; border-top: 1px solid var(--line); color: var(--muted); background:#fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.photo-strip img{width:100%;height:240px;object-fit:cover;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 26px rgba(31,107,255,.12)}
.hero-photo{width:100%;height:280px;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.logo-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.logo-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;display:grid;place-items:center;min-height:72px}
.logo-item img{max-height:56px;width:auto;object-fit:contain}
.mobile-sticky { display:none; }

@media (max-width: 980px) {
  nav.menu { display:none; }
  nav.menu.mobile-open{display:flex !important;position:absolute;top:88px;left:3%;right:3%;z-index:90;flex-direction:column;gap:8px;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 14px 30px rgba(15,23,42,.12)}
  nav.menu.mobile-open a{padding:10px 8px;border-radius:10px}
  nav.menu.mobile-open a:hover{background:#f3f7ff}
  .nav-inner{position:relative;min-height:84px}
  header.nav .nav-inner > a.cta{display:none}
  header.nav .nav-inner > div[style*='gap:8px']{display:none !important}
  .mobile-menu-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#0f172a;font-size:20px;font-weight:800;cursor:pointer;position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:95}
  .brand img { height: 104px; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .case-grid, .packages { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .mobile-sticky { position: fixed; left: 10px; right: 10px; bottom: 10px; display:flex; justify-content:center; z-index:60; }
}

.contact-actions{display:flex;flex-direction:column;gap:10px}
.contact-actions .cta{width:100%;justify-content:center}
.value-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.value-point{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.value-point strong{font-size:15px}
.calendly-wrap{margin-top:12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.hidden{display:none}
.gated{border-style:dashed;background:linear-gradient(180deg,#fff,#f8fbff)}


/* --- PRO ROUND (fast premium polish) --- */
:root{ --shadow-soft: 0 12px 30px rgba(15,23,42,.08); --shadow-strong: 0 20px 48px rgba(15,23,42,.12); }
html{scroll-behavior:smooth}
body{letter-spacing:.01em}
main{position:relative}
main section{position:relative}
main section::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(31,107,255,.16),transparent)}

h1,h2,h3{font-weight:800}
.lead{font-size:clamp(18px,2.2vw,22px);line-height:1.6}

.cta{padding:12px 18px;border-radius:14px;box-shadow:var(--shadow-soft)}
.cta:hover{box-shadow:var(--shadow-strong);transform:translateY(-2px)}

.card,.step,.form,details,.video-mock{backdrop-filter:blur(6px)}
.card:hover{transform:translateY(-2px);transition:.22s ease;box-shadow:var(--shadow-strong)}

.logo-item{min-height:88px;border-radius:14px}
.logo-item img{max-height:62px}

.hero{padding-top:56px}
.hero-grid{gap:32px}
.trust .badge{font-weight:600}

.form input,.form textarea,.form select{padding:12px;border-radius:12px}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:#7aa8ff;box-shadow:0 0 0 3px rgba(31,107,255,.14)}

footer{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.95));backdrop-filter:blur(4px)}

@media (max-width:980px){
  .container{width:min(var(--max),94%)}
  .cards{grid-template-columns:1fr}
  .value-points{grid-template-columns:1fr}
  .hero{padding-top:36px}
  .lead{font-size:17px}
  nav.menu a{font-size:18px}
  .mobile-sticky .cta{width:100%;max-width:560px}
}


.video-label{display:flex;align-items:center;gap:10px;font-weight:700;color:#0f172a;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:12px;padding:10px 12px;backdrop-filter:blur(4px)}
.video-brand-logo{display:inline-flex;align-items:center}
.video-brand-logo img{height:34px;width:auto;object-fit:contain;display:block}
.hero-video-wrap{width:100%;max-width:100%;margin:0;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 16px 32px rgba(2,8,23,.28);border:none}
.hero-video{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;background:#000}
@media (max-width:980px){
  .hero-video-wrap{max-width:100%}
  .video-mock{padding:0}
  .video-label{font-size:13px;padding:8px 10px}
  .video-brand-logo img{height:26px}
}

.card p{line-height:1.65}
.menu a{letter-spacing:.01em}

.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:95;width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,#25D366,#1ebe5a);border:3px solid #fff;box-shadow:0 18px 38px rgba(0,0,0,.22),0 0 0 6px rgba(37,211,102,.18);display:grid;place-items:center;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.whatsapp-float::before{content:"";width:32px;height:32px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M19.11 17.34c-.27-.14-1.6-.79-1.84-.88-.25-.09-.43-.14-.61.14-.18.27-.7.88-.86 1.06-.16.18-.31.2-.58.07-.27-.14-1.14-.42-2.16-1.34-.8-.71-1.34-1.59-1.5-1.86-.16-.27-.02-.41.12-.55.13-.13.27-.34.41-.52.14-.18.18-.31.27-.52.09-.2.05-.38-.02-.52-.07-.14-.61-1.47-.84-2.02-.22-.53-.45-.46-.61-.46h-.52c-.18 0-.47.07-.72.34-.25.27-.95.93-.95 2.27s.97 2.64 1.11 2.82c.14.18 1.9 2.9 4.6 4.07.64.28 1.15.45 1.54.58.65.21 1.25.18 1.72.11.52-.08 1.6-.65 1.82-1.28.22-.63.22-1.17.16-1.28-.07-.11-.25-.18-.52-.31z'/%3E%3Cpath fill='%23fff' d='M16.02 3.2c-7.08 0-12.8 5.72-12.8 12.8 0 2.25.59 4.45 1.71 6.38L3 29l6.83-1.78a12.73 12.73 0 0 0 6.19 1.59h.01c7.07 0 12.8-5.73 12.8-12.8 0-3.43-1.34-6.66-3.77-9.08A12.7 12.7 0 0 0 16.02 3.2zm0 23.5h-.01a10.9 10.9 0 0 1-5.56-1.52l-.4-.24-4.05 1.06 1.08-3.95-.26-.41a10.93 10.93 0 0 1-1.68-5.82c0-6.03 4.9-10.93 10.93-10.93 2.92 0 5.66 1.14 7.72 3.2a10.85 10.85 0 0 1 3.21 7.73c0 6.03-4.91 10.93-10.94 10.93z'/%3E%3C/svg%3E");}
.whatsapp-float:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 24px 44px rgba(0,0,0,.28),0 0 0 8px rgba(37,211,102,.24);filter:saturate(1.12)}
@media (max-width:980px){.whatsapp-float{bottom:94px;right:14px;width:60px;height:60px}}

/* === MOBILE UX OVERHAUL (March 2026) === */
@media (max-width: 980px){
  :root{ --r: 14px; }

  /* Header/nav */
  header.nav{backdrop-filter: blur(10px);}
  .nav-inner{min-height:72px;padding:6px 0;}
  .brand{max-width:72%;}
  .brand img{height:68px !important; width:auto; object-fit:contain;}

  .mobile-menu-btn{
    width:44px;height:44px;border-radius:12px;
    right:6px;top:50%;transform:translateY(-50%);
    box-shadow:0 8px 18px rgba(15,23,42,.14);
  }

  nav.menu.mobile-open{
    top:74px !important;
    left:10px !important;
    right:10px !important;
    border-radius:14px;
    padding:10px;
    gap:6px;
  }
  nav.menu.mobile-open a{
    display:block;
    padding:12px 10px !important;
    font-size:16px !important;
    font-weight:650;
    border:1px solid transparent;
  }
  nav.menu.mobile-open a:active{background:#edf4ff;border-color:#d7e6ff;}

  /* Global spacing & readability */
  .container{width:min(var(--max),94%);}
  section{padding:30px 0;}
  h1{font-size:clamp(30px,8vw,42px);line-height:1.08;margin:8px 0 10px;}
  h2{font-size:clamp(24px,6.8vw,32px);line-height:1.16;margin:0 0 10px;}
  h3{font-size:19px;line-height:1.24;}
  .lead{font-size:16px !important;line-height:1.6;}
  .muted{font-size:15px;line-height:1.6;}

  /* Hero */
  .hero{padding-top:16px !important;}
  .hero-grid{grid-template-columns:1fr !important;gap:16px !important;}
  .hero-actions{margin:14px 0 8px;gap:10px;}
  .hero-actions .cta{width:100%;justify-content:center;text-align:center;}

  /* Video */
  .video-label{font-size:12px !important;padding:7px 9px !important;gap:8px;}
  .video-brand-logo img{height:22px !important;}
  .hero-video-wrap{border-radius:12px;}

  /* Cards/grids */
  .cards,.case-grid,.packages,.split,.form-grid,.footer-grid,.logo-strip,.value-points{
    grid-template-columns:1fr !important;
  }
  .card,.step,.form,details{padding:14px !important;border-radius:14px;}
  .logo-item{min-height:78px;}

  /* Package emphasis */
  .package-logo{width:28px;height:28px;font-size:16px;}
  .pick-badge{font-size:10px;padding:5px 9px;}

  /* Forms */
  .form input,.form textarea,.form select{
    min-height:46px;
    font-size:16px; /* prevent iOS zoom */
    padding:11px 12px;
  }
  .form textarea{min-height:120px;}
  .form .cta.full{min-height:48px;}

  /* Footer */
  footer{padding:24px 0 90px;}

  /* Floating actions collision handling */
  .mobile-sticky{bottom:10px;left:10px;right:10px;z-index:80;}
  .mobile-sticky .cta{min-height:48px;}
  .whatsapp-float{bottom:72px !important;right:12px !important;width:56px !important;height:56px !important;z-index:90;}
}

/* Very small phones */
@media (max-width: 390px){
  .brand img{height:52px !important;}
  .mobile-menu-btn{width:40px;height:40px;font-size:18px;}
  .whatsapp-float{width:52px !important;height:52px !important;}
}

/* Ultra iPhone viewport pass */
@media (max-width: 430px){
  .container{width:min(var(--max),95%)}
  .nav-inner{min-height:68px;padding:4px 0}
  .brand{max-width:68%}
  .brand img{height:58px !important}
  .mobile-menu-btn{right:4px}

  h1{font-size:clamp(28px,9vw,36px);line-height:1.1}
  h2{font-size:clamp(22px,7vw,28px)}
  .lead,.muted{font-size:15px !important}

  .hero-actions{gap:8px}
  .hero-actions .cta{font-size:15px;padding:11px 14px}
  .video-label{font-size:11px !important;line-height:1.25}

  .card,.step,.form,details{padding:12px !important}
  .package ul li{margin-bottom:4px}

  .form input,.form textarea,.form select{min-height:44px;font-size:16px}

  .mobile-sticky{left:8px;right:8px;bottom:8px}
  .mobile-sticky .cta{font-size:15px}
  .whatsapp-float{right:10px !important;bottom:66px !important;width:54px !important;height:54px !important}
}