/* ================== CARDYVO – BRAND LAYOUT (no phone CSS) ================== */
:root{
  --cv-brand: #f2686a;            /* coral */
  --cv-accent: #ffae00;           /* amber */
  --cv-ink: #0b1220;              /* deep navy text */
  --cv-muted: #667085;
  --cv-bg: #0b1220;               /* midnight for dark areas */
  --cv-paper: #ffffff;
  --cv-line: rgba(12,18,32,.10);
  --cv-grad: linear-gradient(135deg, var(--cv-brand), var(--cv-accent));
}

body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--cv-ink); }
.fw-900{ font-weight:900; }

/* ================== HEADER ================== */
.cv-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(15,23,42,.06);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.cv-header.is-scrolled{ box-shadow:0 8px 30px rgba(2,6,23,.12); background:rgba(255,255,255,.85); }

.cv-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.cv-brand .wordmark{ font-weight:900; font-size:1.45rem; letter-spacing:.2px; color:var(--cv-ink); }
.cv-badge{ background:var(--cv-grad); color:#fff; font-weight:800; font-size:.7rem; padding:.2rem .5rem; border-radius:999px; }

.cv-nav .nav-link{ font-weight:700; color:#111827; opacity:.85; padding:.5rem .9rem; position:relative; }
.cv-nav .nav-link:hover{ opacity:1; }
.cv-nav .nav-link.active::after,
.cv-nav .nav-link:hover::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.2rem; height:3px;
  border-radius:6px; background:var(--cv-brand);
}

/* Decorative bubbles behind header */
.cv-header-decor{ pointer-events:none; position:absolute; inset:0; overflow:hidden; }
.bubble{ position:absolute; border-radius:50%; filter:blur(22px); opacity:.35; }
.bubble.b1{ width:180px;height:180px;background:#ffd166; top:-60px; left:-40px; }
.bubble.b2{ width:220px;height:220px;background:#ff6b6b; top:-80px; right:10%; }
.bubble.b3{ width:200px;height:200px;background:#60a5fa; top:-100px; left:45%; opacity:.25; }

/* Buttons */
.btn{ border-radius:12px; font-weight:700; }
.btn-primary{ color:#fff; background:var(--cv-grad); border:none; box-shadow:0 12px 24px rgba(242,104,106,.28); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ border:1px solid var(--cv-line); background:#fff; color:#111827; }
.btn-ghost:hover{ background:#f9fafb; }
.btn-outline{ border:1px solid var(--cv-line); background:transparent; }
.rounded-14{ border-radius:14px; }

/* ================== HERO (FULL-WIDTH helper) ================== */
.container-bleed{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }
@media (max-width:1199.98px){ .container-bleed{ left:0; right:0; margin:0; width:auto; } }

.hero{ position:relative; overflow:clip; color:#fff; }
.hero--art{
  background:
    radial-gradient(1200px 700px at 85% 30%, rgba(242,104,106,.12), transparent 70%),
    radial-gradient(1000px 700px at 20% 80%, rgba(51,163,221,.12), transparent 70%),
    #0b1220;
}
.hero--art::before{
  content:""; position:absolute; inset:0; opacity:.35;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
  animation:heroLines 14s linear infinite;
  mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 100%);
}
@keyframes heroLines{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-60px,0,0)} }
.eyebrow{ color:#a7b0c8; font-weight:800; letter-spacing:.22em; text-transform:uppercase; font-size:.84rem; }
.hero h1 span{ color:var(--cv-brand); }

/* ================== DEMO PHONE MOCKUP ================== */
.demo-phone{
  width:280px;
  border-radius:40px;
  background:#111;
  padding:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  position:relative;
}
.demo-screen{
  background:#fff;
  border-radius:28px;
  overflow-y:auto;
  height:500px;
  -ms-overflow-style:none;  /* IE/Edge */
  scrollbar-width:none;     /* Firefox */
}
.demo-screen::-webkit-scrollbar{ display:none; }

.pp-hero{ height:187px; background:linear-gradient(135deg,#f2686a,#ffae00); border-radius:28px 28px 0 0; }

.pp-card{ padding:1rem; }
.pp-avatar{ width:60px; height:60px; border-radius:50%; background-size:cover; background-position:center; }
.pp-row{ display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border:1px solid var(--cv-line); border-radius:12px; background:#fff; }
.pp-row + .pp-row{ margin-top:.5rem; }
.pp-ico{ flex:0 0 36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--cv-brand); color:#fff; box-shadow:0 4px 12px var(--cv-brand-weak,#f2686a44); }

.pp-socials .pp-ico{ width:40px; height:40px; border-radius:12px; font-size:1.1rem; }
.pp-socials{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ================== FOOTER ================== */
.cv-footer{ color:#e5e7eb; background:linear-gradient(to bottom, #0d1428, #0b1220); }
.footer-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:18px;
}
.footer-card .headline{ font-weight:900; font-size:1.05rem; color:#fff; }
.form-soft .form-control{ background:rgba(255,255,255,.08); color:#fff; border:none; border-radius:12px; }
.form-soft .form-control::placeholder{ color:#cbd5e1; }
.cv-social a{ width:38px;height:38px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.06); color:#fff; }
.cv-social a:hover{ background:rgba(255,255,255,.12); }

/* ================== UTILITIES ================== */
.border-soft{ border:1px solid var(--cv-line) !important; }
.text-secondary{ color:#a3aed0 !important; }

/* HERO SLIDER */
.cv-hero-slider{ width:100%; height:100vh; position:relative; }
.cv-hero-slider .swiper-slide{ width:100%; height:100%; position:relative; display:flex; align-items:center; }
.hero-bg{ background-size:cover; background-position:center; }
.hero-bg .overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.hero-bg .container{ position:relative; z-index:2; }