/* ═══════════════════════════════════════════
   CLARIO DIGITALS — Global Stylesheet
   ═══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --navy:     #0B1D3A;
  --blue:     #2563EB;
  --slate:    #64748B;
  --lav:      #C4B5FD;
  --icy:      #E6F0FF;
  --lavbg:    #F3F0FF;
  --white:    #FFFFFF;
  --offwhite: #F8F9FB;
  --border:   rgba(11,29,58,.09);
  --r:        14px;
  --rl:       22px;
  --sh:       0 4px 24px rgba(11,29,58,.08);
  --shm:      0 10px 44px rgba(11,29,58,.13);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5 { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.2; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── LAYOUT ── */
.container { width: 92%; max-width: 1100px; margin: 0 auto; }
.section    { padding: 88px 0; }
.section--sm { padding: 60px 0; }
.section--dark   { background: var(--navy); }
.section--icy    { background: var(--icy); }
.section--lavbg  { background: var(--lavbg); }
.section--offwhite { background: var(--offwhite); }

/* ── TYPOGRAPHY ── */
.section-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.section-label--light { color: var(--lav); }

.section-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800; color: var(--navy); margin-bottom: 16px;
}
.section-title--light { color: var(--white); }

.section-sub {
  font-size: 17px; color: var(--slate);
  max-width: 600px; line-height: 1.7;
}
.section-sub--light { color: rgba(255,255,255,.65); }

.text-center { text-align: center; }
.text-center .section-sub { margin: 0 auto; }

/* ── BADGES ── */
.badge {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px;
  background: var(--icy); color: var(--blue);
}
.badge--lav   { background: var(--lavbg); color: #6D28D9; }
.badge--green { background: #DCFCE7; color: #166534; }
.badge--navy  { background: rgba(255,255,255,.12); color: var(--lav); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  padding: 14px 30px; border-radius: 100px;
  cursor: pointer; border: none;
  transition: transform .18s, box-shadow .18s, opacity .18s;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { box-shadow: 0 8px 28px rgba(37,99,235,.35); }
.btn--outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn--outline:hover { box-shadow: 0 8px 28px rgba(11,29,58,.15); }
.btn--outline-light { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.4); }
.btn--outline-light:hover { background: rgba(255,255,255,.08); box-shadow: none; }
.btn--ghost { background: rgba(255,255,255,.1); color: var(--white); border: 2px solid rgba(255,255,255,.3); }
.btn--ghost:hover { background: rgba(255,255,255,.18); box-shadow: none; }
.btn--sm { font-size: 13px; padding: 10px 22px; }
.btn--lg { font-size: 17px; padding: 16px 36px; }
.btn--full { width: 100%; justify-content: center; }

/* ── NAV ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(11,29,58,.07);
  padding: 12px 0;
  transition: box-shadow .2s, padding .2s;
}
.site-nav.scrolled { box-shadow: 0 4px 24px rgba(11,29,58,.09); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 94%; max-width: 1240px; margin: 0 auto;
  gap: 20px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-logo img { height: 48px; width: auto; object-fit: contain; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.02; }
.nav-logo-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; }
.nav-logo-subtitle { font-size: 9px; font-weight: 800; color: var(--blue); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; white-space: nowrap; }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: 14px; font-weight: 600; color: var(--slate);
  padding: 8px 12px; border-radius: 8px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--navy); background: var(--icy); }
.nav-cta { margin-left: 8px; min-width: 206px; justify-content: center; padding: 14px 24px; white-space: nowrap; flex-shrink: 0; }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: var(--icy); border: 1px solid rgba(37,99,235,.12); cursor: pointer; padding: 10px;
  border-radius: 12px; box-shadow: 0 4px 14px rgba(11,29,58,.06);
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; flex-direction: column; gap: 6px;
  width: 92%; max-width: 1100px; margin: 10px auto 0;
  padding: 14px;
  border: 1px solid rgba(11,29,58,.08);
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(11,29,58,.14);
}
.nav-mobile a {
  font-size: 15px; font-weight: 600; color: var(--slate);
  padding: 12px 14px; border-radius: 10px;
  transition: color .15s, background .15s;
}
.nav-mobile a:hover, .nav-mobile a.active { color: var(--navy); background: var(--icy); }
.nav-mobile .btn { margin-top: 8px; justify-content: center; }

@media (max-width: 820px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile.open { display: flex; }
}

/* ── PAGE HERO ── */
.page-hero {
  padding: 130px 0 80px;
  background: linear-gradient(150deg, var(--navy) 0%, #122d5c 65%, #1a3d7a 100%);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -140px; right: -140px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,181,253,.16) 0%, transparent 68%);
  pointer-events: none;
}
.page-hero::after {
  content: ''; position: absolute; bottom: -80px; left: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.14) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 1; max-width: 680px; }
.page-hero-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lav); margin-bottom: 18px;
}
.page-hero h1 {
  font-size: clamp(34px, 5.5vw, 58px); font-weight: 800;
  color: var(--white); margin-bottom: 18px; line-height: 1.1;
}
.page-hero h1 span {
  background: linear-gradient(90deg, var(--lav), #93C5FD);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-hero p { font-size: 18px; color: rgba(255,255,255,.72); line-height: 1.7; margin-bottom: 32px; }
.page-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── CARDS ── */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--rl); padding: 32px 28px;
  box-shadow: var(--sh);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shm); transform: translateY(-3px); }

.card--dark {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1);
}
.card--dark:hover { background: rgba(255,255,255,.09); border-color: rgba(196,181,253,.3); }

/* ── SERVICE CARDS ── */
.service-icon {
  width: 50px; height: 50px; border-radius: 15px;
  background: linear-gradient(135deg, var(--blue), #6366F1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; flex-shrink: 0;
}
.service-icon svg { color: white; }

/* ── PORTFOLIO CARD ── */
.pf-shot {
  border-radius: 12px; overflow: hidden;
  background: var(--icy);
  margin-bottom: 20px;
  height: 220px;
}
.pf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── CHIP ── */
.chip {
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 100px; background: var(--icy); color: var(--navy);
}
.chip--lav { background: var(--lavbg); color: #6D28D9; }

/* ── FEATURE CHECK LIST ── */
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--slate); line-height: 1.5; }
.check-item::before {
  content: '';
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: var(--icy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563EB'%3E%3Cpath d='M7 10.4l2.1 2.1 4.4-4.4'/%3E%3C/svg%3E") center/cover;
}

/* ── STEP FLOW ── */
.steps-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
  margin-top: 52px; position: relative;
}
.steps-row::before {
  content: ''; position: absolute;
  top: 26px; left: 60px; right: 60px; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--lav));
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step-num {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--blue); color: white;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: 0 0 0 6px white;
}
.step h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--slate); line-height: 1.5; }

/* ── GRID HELPERS ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 24px; }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 20px; }

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--border); margin: 0; }

/* ── FOOTER ── */
.site-footer {
  background: var(--navy);
  padding: 60px 0 32px;
}
.footer-top {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-brand img { height: 70px; width: auto; object-fit: contain; margin-bottom: 18px; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; max-width: 240px; }
.footer-col h5 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 10px; transition: color .15s; }
.footer-col a:hover { color: var(--lav); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,.3); }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a { font-size: 13px; color: rgba(255,255,255,.35); transition: color .15s; }
.footer-socials a:hover { color: var(--lav); }

/* ── MESSENGER FLOAT ── */
.msg-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 6px 28px rgba(37,99,235,.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s, box-shadow .18s;
}
.msg-float:hover { transform: scale(1.1); box-shadow: 0 10px 36px rgba(37,99,235,.55); }

/* ── LIGHTBOX ── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.86); align-items: center; justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; top: 20px; right: 24px; font-size: 30px; color: white; cursor: pointer; opacity: .65; line-height: 1; }
.lightbox-close:hover { opacity: 1; }

/* ── SCREENSHOT GALLERY ── */
.ss-main { border-radius: 14px; overflow: hidden; box-shadow: var(--shm); }
.ss-main img { width: 100%; height: 340px; object-fit: contain; object-position: center; background: #fff; cursor: zoom-in; transition: opacity .15s; }
.ss-main img:hover { opacity: .9; }
.ss-strip { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.ss-strip::-webkit-scrollbar { height: 3px; }
.ss-strip::-webkit-scrollbar-thumb { background: rgba(11,29,58,.15); border-radius: 10px; }
.ss-thumb { flex-shrink: 0; width: 80px; height: 58px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color .15s; }
.ss-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #fff; }
.ss-thumb:hover { border-color: var(--blue); }

/* ── PRICING CARD ── */
.price-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 32px 28px; box-shadow: var(--sh); position: relative; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12), var(--shm); }
.price-card.featured::before { content: 'Most Popular'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--blue); color: var(--white); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 16px; border-radius: 100px; white-space: nowrap; }
.price-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.price-card .price-amount { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 4px; line-height: 1.1; }
.price-card .price-note { font-size: 12px; color: var(--slate); margin-bottom: 16px; }
.price-card .price-desc { font-size: 13px; color: var(--slate); margin-bottom: 20px; line-height: 1.55; }
.price-card .price-list { display: flex; flex-direction: column; gap: 9px; flex: 1; margin-bottom: 24px; }
.price-card .price-list li { font-size: 13px; color: var(--slate); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.price-card .price-list li::before { content: '✓'; color: var(--blue); font-weight: 700; flex-shrink: 0; font-size: 12px; }

/* ── FORM ── */
.form-group { margin-bottom: 20px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; display: block; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 14px; color: var(--navy);
  background: var(--white); font-family: 'Inter', sans-serif;
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-textarea { min-height: 110px; resize: vertical; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.form-hint { font-size: 12px; color: var(--slate); margin-top: 5px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .steps-row { grid-template-columns: 1fr 1fr; }
  .steps-row::before { display: none; }
}
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .page-hero { padding: 110px 0 60px; }
  .btn { font-size: 14px; padding: 13px 24px; }
  .steps-row { grid-template-columns: 1fr; }
}


/* ── FINAL PREMIUM + MOBILE POLISH ── */
.card, .price-card, .ss-main { border-color: rgba(11,29,58,.07); }
.page-hero { padding-top: 145px; }
.nav-inner { gap: 18px; }

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile.open { display: flex; }
}

@media (max-width: 700px) {
  .container, .nav-inner { width: 92%; }
  .site-nav { padding: 10px 0; }
  .nav-inner { gap: 12px; }
  .nav-logo { gap: 10px; min-width: 0; }
  .nav-logo img { height: 44px; }
  .nav-logo-title { font-size: 18px; }
  .nav-logo-subtitle { display: none; }
  .page-hero { padding: 128px 0 56px; }
  .page-hero h1 { font-size: clamp(34px, 10vw, 48px); }
  .page-hero p { font-size: 16px; }
  .page-hero-btns, .cta-btns { flex-direction: column; align-items: stretch; }
  .page-hero-btns .btn, .cta-btns .btn, .btn--lg { width: 100%; justify-content: center; }
  .section-title { font-size: clamp(24px, 8vw, 34px); }
  .section-sub { font-size: 15px; }
  .ss-main img { height: 280px; }
  .footer-brand img { height: 58px; }
  .footer-brand p { max-width: none; }
  .msg-float { right: 16px; bottom: 16px; }
}

@media (max-width: 420px) {
  .nav-logo img { height: 42px; }
  .nav-logo-title { font-size: 18px; }
  .nav-hamburger { padding: 9px; }
  .page-hero { padding-top: 124px; }
  .btn { width: 100%; justify-content: center; }
  .ss-main img { height: 235px; }
  .footer-brand img { height: 52px; }
}


/* ===== CLARIO PORTFOLIO PREMIUM POLISH — AUG 2026 ===== */
.nav-logo img{background:transparent!important;object-fit:contain;filter:none!important}
.svc-card-icon,.why-item-icon{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 30px rgba(37,99,235,.18),inset 0 1px 0 rgba(255,255,255,.35)}
.svc-card-icon:after,.why-item-icon:after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.svc-card,.proj-card,.faq-card{border:1px solid rgba(148,163,184,.18);box-shadow:0 22px 55px rgba(11,29,58,.08);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.svc-card:hover,.proj-card:hover,.faq-card:hover{transform:translateY(-5px);box-shadow:0 30px 70px rgba(11,29,58,.13);border-color:rgba(37,99,235,.22)}
.premium-project-card .proj-shot{background:radial-gradient(circle at top right,#e9efff,#f8fbff 55%,#eef2ff);padding:18px;min-height:260px;display:flex;align-items:center;justify-content:center}
.video-cover video{width:100%;height:100%;max-height:360px;object-fit:cover;border-radius:18px;box-shadow:0 24px 60px rgba(11,29,58,.18)}
.motion-label{position:absolute;left:28px;bottom:28px;background:rgba(11,29,58,.78);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 11px;border-radius:999px;backdrop-filter:blur(10px)}
.video-cover{position:relative}
.portfolio-premium{background:linear-gradient(180deg,#fff 0%,#f7f9ff 45%,#fff 100%)}
.premium-case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:72px;align-items:center;padding:88px 0;border-bottom:1px solid rgba(148,163,184,.22)}
.premium-case.reverse{grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr)}
.premium-case.reverse .case-media{order:2}.premium-case.reverse .case-copy{order:1}
.case-copy h2{font:800 clamp(28px,3vw,44px)/1.12 'Plus Jakarta Sans',sans-serif;color:var(--navy);margin:14px 0 10px}
.case-copy p{color:var(--slate);line-height:1.75}.case-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.device-stage{position:relative;background:radial-gradient(circle at 30% 15%,rgba(196,181,253,.35),transparent 36%),linear-gradient(145deg,#edf3ff,#fff);border:1px solid rgba(148,163,184,.18);border-radius:32px;padding:38px;box-shadow:0 35px 90px rgba(11,29,58,.13);overflow:hidden}
.device-stage:before{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(37,99,235,.15);border-radius:50%;right:-70px;top:-70px;box-shadow:0 0 0 28px rgba(37,99,235,.04),0 0 0 58px rgba(124,58,237,.035)}
.browser-shell{position:relative;background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(15,23,42,.12);box-shadow:0 28px 60px rgba(15,23,42,.18)}
.browser-top{height:42px;background:#f5f7fb;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #e5eaf1}.browser-top>span{width:10px;height:10px;border-radius:50%;background:#cbd5e1}.browser-address{margin-left:10px;flex:1;background:#fff;border:1px solid #e5eaf1;border-radius:999px;padding:6px 14px;font-size:11px;color:#64748b}
.case-video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#eef2f7}
.desktop-shell{position:relative;background:#09152f;border-radius:18px 18px 8px 8px;padding:12px 12px 14px;box-shadow:0 28px 65px rgba(11,29,58,.25)}.desktop-camera{width:6px;height:6px;background:#64748b;border-radius:50%;margin:0 auto 9px}.desktop-shell .case-video{border-radius:8px}.desktop-base{width:65%;height:16px;margin:0 auto;background:linear-gradient(180deg,#d7deea,#9aa7ba);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);border-radius:0 0 18px 18px}
.phone-shell{position:relative;width:min(310px,76%);margin:auto;background:#0b1530;border-radius:42px;padding:14px;box-shadow:0 32px 70px rgba(11,29,58,.27);transform:rotate(-2deg)}.phone-speaker{width:68px;height:7px;background:#273552;border-radius:999px;margin:2px auto 10px}.phone-shell img{display:block;width:100%;border-radius:30px;aspect-ratio:9/17;object-fit:cover;object-position:top}
.demo-note{font-size:13px!important;background:#f7f9fd;border:1px solid #e5eaf2;border-left:4px solid #2563eb;border-radius:12px;padding:14px 16px;color:#526079!important}
.video-modal{position:fixed;inset:0;z-index:9999;display:none}.video-modal.is-open{display:block}.video-modal-backdrop{position:absolute;inset:0;background:rgba(5,13,32,.78);backdrop-filter:blur(8px)}.video-modal-dialog{position:relative;width:min(1100px,92vw);margin:5vh auto;background:#08142c;border-radius:20px;padding:16px;box-shadow:0 40px 100px rgba(0,0,0,.45)}.video-modal-dialog video{display:block;width:100%;max-height:82vh;border-radius:12px;background:#000}.video-modal-close{position:absolute;right:-12px;top:-12px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#0b1d3a;font-size:28px;cursor:pointer;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.premium-faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.premium-faq .faq-card{padding:28px;border-radius:18px;background:linear-gradient(145deg,#fff,#f9fbff)}
@media(max-width:900px){.premium-case,.premium-case.reverse{grid-template-columns:1fr;gap:36px;padding:60px 0}.premium-case.reverse .case-media,.premium-case.reverse .case-copy{order:initial}.device-stage{padding:22px}.premium-faq{grid-template-columns:1fr}.browser-address{display:none}}

/* V2 portfolio media controls */
.case-media{position:relative}
.browser-shell,.desktop-shell{position:relative;overflow:hidden}
.mockup-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(11,29,58,.78);color:#fff;font-size:22px;display:grid;place-items:center;cursor:pointer;box-shadow:0 16px 36px rgba(11,29,58,.28);backdrop-filter:blur(10px);opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:4}
.case-media:hover .mockup-play,.mockup-play:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
.case-video{cursor:pointer}
.video-modal{align-items:center;justify-content:center;padding:24px}
.video-modal.is-open{display:flex}
.video-modal-dialog{margin:0;max-height:92vh}
.video-modal-dialog video{max-height:78vh}
body.modal-open{overflow:hidden}
@media (max-width:820px){.mockup-play{opacity:1;width:50px;height:50px}.video-modal{padding:12px}.video-modal-close{right:2px;top:2px}}


/* FINAL CLIENT-READY POLISH */
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.success-page{min-height:100vh;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 75% 15%,rgba(37,99,235,.12),transparent 34%),linear-gradient(180deg,#f8fbff,#eef4ff)}
.success-card{width:min(680px,100%);background:#fff;border:1px solid rgba(37,99,235,.14);border-radius:28px;padding:56px;text-align:center;box-shadow:0 32px 80px rgba(11,29,58,.14)}
.success-card h1{font:800 clamp(32px,5vw,52px)/1.08 'Plus Jakarta Sans',sans-serif;color:var(--navy);margin:12px 0 18px}.success-card p{color:var(--slate);line-height:1.75}.success-icon{width:64px;height:64px;border-radius:20px;margin:0 auto 20px;display:grid;place-items:center;font-size:30px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue),#6d5dfc);box-shadow:0 16px 36px rgba(37,99,235,.26)}.success-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}

/* More refined service/card icon holders */
.svc-icon,.service-icon,.why-icon,.step-num,.channel-icon{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(230,240,255,.78))!important;border:1px solid rgba(37,99,235,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px rgba(11,29,58,.10)!important;backdrop-filter:blur(10px)}
.service-card,.why-card,.process-card,.form-card,.channel-btn{border:1px solid rgba(148,163,184,.20)!important;box-shadow:0 20px 55px rgba(11,29,58,.08)!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.service-card:hover,.why-card:hover,.channel-btn:hover{transform:translateY(-5px);box-shadow:0 28px 70px rgba(11,29,58,.13)!important;border-color:rgba(37,99,235,.26)!important}

/* Reliable project previews */
.browser-shell--wide .case-video{aspect-ratio:16/9;object-fit:contain;background:#f7f9fd}
.case-video{object-position:center;max-height:560px}
.case-video::-webkit-media-controls-panel{background:linear-gradient(transparent,rgba(5,13,32,.68))}
.mockup-play{opacity:1;width:62px;height:62px}
.video-modal{visibility:hidden;opacity:0;display:flex!important;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.video-modal.is-open{visibility:visible;opacity:1;pointer-events:auto}
.video-modal-dialog{z-index:2;width:min(1180px,94vw);padding:18px;background:#07132b;border:1px solid rgba(255,255,255,.14)}
.video-modal-title{color:#fff;font:700 14px 'Plus Jakarta Sans',sans-serif;margin:0 52px 12px 4px;letter-spacing:.02em}
.video-modal-backdrop{z-index:1}.video-modal-close{z-index:3}
body.modal-open{overflow:hidden}

/* Cleaner transparent nav logo */
.nav-logo img{background:transparent!important;box-shadow:none!important;object-fit:contain}

@media(max-width:820px){.success-card{padding:36px 24px}.premium-case{padding:52px 0}.case-video{max-height:420px}.mockup-play{width:52px;height:52px}}

/* CLARIO MOBILE + PROCESS FIXES */
.nav-mobile .btn,
.nav-mobile .btn--primary{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-weight:800!important;
  background:linear-gradient(135deg,#2563EB,#3B82F6)!important;
  border-color:transparent!important;
  opacity:1!important;
}
.step-num,.process-number,.how-step-number{
  color:#fff!important;
  background:linear-gradient(135deg,#2563EB,#7C3AED)!important;
  border:2px solid rgba(255,255,255,.6)!important;
  box-shadow:0 14px 34px rgba(37,99,235,.22)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.2)!important;
}


/* CASE STUDY + BREADCRUMB LAYER */
.breadcrumb-wrap{padding:104px 0 0;background:#fff}
.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--slate)}
.breadcrumbs a{color:var(--blue);font-weight:700}.breadcrumbs span[aria-current="page"]{color:var(--navy);font-weight:700}
.case-study-hero{padding:42px 0 72px;background:linear-gradient(180deg,#fff,#f8fbff)}
.case-study-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:54px;align-items:center}
.case-study-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.case-study-hero h1{font-size:clamp(34px,5vw,58px);font-weight:800;color:var(--navy);line-height:1.08;margin-bottom:18px}
.case-study-hero .lead{font-size:17px;color:var(--slate);line-height:1.75;margin-bottom:24px}
.case-study-meta{display:flex;flex-wrap:wrap;gap:8px}.case-study-meta .chip{font-size:12px}
.case-study-stage{background:radial-gradient(circle at 30% 15%,rgba(196,181,253,.33),transparent 36%),linear-gradient(145deg,#edf3ff,#fff);border:1px solid rgba(148,163,184,.18);border-radius:30px;padding:28px;box-shadow:0 30px 80px rgba(11,29,58,.12)}
.case-study-stage .browser-shell{box-shadow:0 24px 58px rgba(11,29,58,.16)}
.case-study-stage .case-video{aspect-ratio:16/9;object-fit:contain;background:#f7f9fd}
.case-study-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px}
.case-study-fact{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 12px 30px rgba(11,29,58,.05)}
.case-study-fact strong{display:block;font:700 13px 'Plus Jakarta Sans',sans-serif;color:var(--navy);margin-bottom:5px}.case-study-fact span{font-size:12px;color:var(--slate);line-height:1.5}
.case-study-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.case-study-story h2{font-size:clamp(26px,3.8vw,40px);font-weight:800;margin-bottom:14px}.case-study-story p{color:var(--slate);line-height:1.78}
.story-stack{display:flex;flex-direction:column;gap:16px}.story-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:var(--sh)}.story-card h3{font-size:16px;margin-bottom:8px}.story-card p{font-size:14px}
.case-study-built{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}.case-study-built .card{padding:24px}.case-study-built h3{font-size:15px;margin-bottom:8px}.case-study-built p{font-size:13px;color:var(--slate);line-height:1.6}
.case-study-status{background:linear-gradient(145deg,var(--icy),#fff);border:1px solid rgba(37,99,235,.14);border-radius:22px;padding:30px;box-shadow:var(--sh)}.case-study-status h3{font-size:18px;margin-bottom:10px}.case-study-status p{font-size:14px;color:var(--slate);line-height:1.7}
@media(max-width:900px){.case-study-grid,.case-study-story{grid-template-columns:1fr}.case-study-facts{grid-template-columns:repeat(2,1fr)}.case-study-built{grid-template-columns:1fr 1fr}.breadcrumb-wrap{padding-top:96px}}
@media(max-width:600px){.case-study-hero{padding-top:30px}.case-study-stage{padding:16px;border-radius:22px}.case-study-facts{grid-template-columns:1fr 1fr;gap:10px}.case-study-built{grid-template-columns:1fr}.breadcrumbs{font-size:11px}.case-study-fact{padding:14px}}

.breadcrumb-wrap + .page-hero{padding-top:56px}
@media(max-width:700px){.breadcrumb-wrap + .page-hero{padding-top:44px}}