/* =====================================================
   CELEBRATODO — LANDING PAGE PROFESIONAL
   Carga después de tokens.css
   ===================================================== */

:root{
  --bg:#fcfaf7;
  --white:#ffffff;
  --cream:#f8f3ec;
  --cream-mid:#f4ede4;
  --navy:#1d2433;
  --navy-2:#263048;
  --gold:#b8955e;
  --gold-soft:#d7c09a;
  --gold-light:#ebdcc4;
  --rose:#b47e86;
  --sage:#8c9b8a;
  --text:#2d3442;
  --text-soft:#5e6675;
  --line:rgba(29,36,51,.10);
  --line-soft:rgba(29,36,51,.07);
  --shadow-sm:0 10px 30px rgba(26,31,44,.08);
  --shadow-md:0 18px 45px rgba(26,31,44,.12);
  --shadow-lg:0 30px 70px rgba(26,31,44,.15);
  --radius-sm:14px;
  --radius-md:22px;
  --radius-lg:30px;
  --font-display:"Cormorant Garamond", serif;
  --font-body:"DM Sans", sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(215,192,154,.16), transparent 28%),
    linear-gradient(180deg, #fcfaf7 0%, #f9f6f1 100%);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.menu-open{
  overflow:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

.wrap{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}

/* =========================
   HEADER
   ========================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(252,250,247,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.scrolled{
  background:rgba(252,250,247,.94);
  border-bottom-color:var(--line-soft);
  box-shadow:var(--shadow-sm);
}

.site-header .hinner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:28px;
  font-weight:600;
  letter-spacing:.01em;
  flex-shrink:0;
}

.site-logo svg{
  width:34px;
  height:34px;
  color:var(--gold);
  flex-shrink:0;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:24px;
}

.site-nav a{
  font-size:14px;
  font-weight:500;
  color:var(--text-soft);
  transition:color .22s ease;
}

.site-nav a:hover{
  color:var(--navy);
}

.site-nav .nav-login{
  color:var(--navy);
  font-weight:600;
}

.site-nav .nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 22px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-weight:600;
  box-shadow:var(--shadow-sm);
}

.site-nav .nav-cta:hover{
  background:#141b28;
}

.hamburger{
  display:none;
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:0;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  box-shadow:var(--shadow-sm);
}

.hamburger span{
  width:18px;
  height:2px;
  background:var(--navy);
  border-radius:999px;
  transition:transform .22s ease, opacity .22s ease;
}

.hamburger.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2){
  opacity:0;
}
.hamburger.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobile-nav{
  position:fixed;
  top:80px;
  left:20px;
  right:20px;
  z-index:95;
  display:none;
  flex-direction:column;
  gap:8px;
  padding:18px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line-soft);
  border-radius:22px;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.mobile-nav a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  color:var(--navy);
  font-weight:600;
}

.mobile-nav a:hover{
  background:var(--cream);
}

.mobile-nav .nav-cta{
  margin-top:4px;
  background:var(--navy);
  color:#fff;
  text-align:center;
}

.mobile-nav.open{
  display:flex;
}

/* =========================
   HERO
   ========================= */

.hero{
  position:relative;
  overflow:hidden;
  padding:142px 0 56px;
}

.hero-canvas{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.blob{
  position:absolute;
  border-radius:999px;
  filter:blur(20px);
  opacity:.55;
}

.blob-1{
  width:360px;
  height:360px;
  top:80px;
  left:-80px;
  background:radial-gradient(circle at 30% 30%, rgba(212,188,145,.65), rgba(212,188,145,0));
}

.blob-2{
  width:380px;
  height:380px;
  top:120px;
  right:-80px;
  background:radial-gradient(circle at 50% 50%, rgba(180,126,134,.24), rgba(180,126,134,0));
}

.blob-3{
  width:280px;
  height:280px;
  bottom:20px;
  left:45%;
  background:radial-gradient(circle at 50% 50%, rgba(140,155,138,.20), rgba(140,155,138,0));
}

.grid-glow{
  position:absolute;
  inset:auto 0 -120px 0;
  height:320px;
  background:
    linear-gradient(to right, rgba(29,36,51,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29,36,51,.03) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 75%);
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(430px, .9fr);
  align-items:center;
  gap:54px;
}

.hero-text{
  max-width:620px;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px;
  border:1px solid rgba(184,149,94,.22);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hero-title{
  margin:22px 0 18px;
  font-family:var(--font-display);
  font-size:clamp(54px, 7vw, 86px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.035em;
  color:var(--navy);
}

.hero-title em{
  display:block;
  font-style:italic;
  color:var(--gold);
  font-weight:500;
}

.hero-desc{
  max-width:560px;
  margin:0;
  font-size:18px;
  line-height:1.8;
  color:var(--text-soft);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.hero-points span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid var(--line-soft);
  color:var(--text-soft);
  font-size:13px;
  font-weight:600;
}

.hero-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}

.dashboard-mock{
  position:relative;
  width:min(100%, 510px);
  padding:18px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.66));
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.dash-top{
  display:flex;
  gap:8px;
  padding:0 0 14px;
}

.dash-top .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#dbc39f;
}

.dash-body{
  position:relative;
  min-height:520px;
  border-radius:26px;
  background:linear-gradient(180deg, #fff 0%, #fbf8f3 100%);
  border:1px solid var(--line-soft);
  overflow:hidden;
  padding:34px;
}

.phone-preview{
  position:relative;
  width:280px;
  margin:0 auto;
  border-radius:34px;
  padding:14px;
  background:#151b28;
  box-shadow:0 25px 60px rgba(17,22,35,.24);
}

.phone-notch{
  width:108px;
  height:18px;
  border-radius:0 0 14px 14px;
  background:#151b28;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
}

.phone-cover{
  height:150px;
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(180,126,134,.55), rgba(212,188,145,.60)),
    linear-gradient(180deg, #d9c1a4, #b68e6a);
}

.phone-content{
  padding:16px 10px 10px;
  background:#fff;
  border-radius:0 0 24px 24px;
}

.mini-tag{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:#f2ede4;
  color:var(--navy);
  font-size:12px;
  font-weight:700;
}

.mini-title{
  height:20px;
  width:78%;
  background:#ece7de;
  border-radius:999px;
  margin:16px 0 12px;
}

.mini-text{
  height:12px;
  width:100%;
  background:#f1ece6;
  border-radius:999px;
  margin-bottom:10px;
}

.mini-text.short{
  width:68%;
}

.mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:18px;
}

.mini-stats span{
  height:54px;
  border-radius:16px;
  background:#f8f4ee;
  border:1px solid #eee5da;
}

.stats-card{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:170px;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(29,36,51,.08);
  box-shadow:var(--shadow-md);
}

.stats-card small{
  color:var(--text-soft);
  font-size:12px;
  font-weight:600;
}

.stats-card strong{
  font-size:28px;
  color:var(--navy);
  font-weight:700;
}

.card-a{
  top:58px;
  left:8px;
}

.card-b{
  right:2px;
  bottom:88px;
}

.float-note{
  position:absolute;
  left:24px;
  bottom:24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(29,36,51,.92);
  color:#fff;
  box-shadow:var(--shadow-md);
  font-weight:600;
}

.float-note .heart{
  color:#f2d0d4;
  font-size:18px;
}

/* =========================
   BUTTONS
   ========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  cursor:pointer;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-lg{
  min-height:56px;
  padding:0 26px;
}

.btn-primary{
  background:var(--navy);
  color:#fff;
  box-shadow:var(--shadow-sm);
}

.btn-primary:hover{
  background:#141b28;
}

.btn-ghost{
  background:rgba(255,255,255,.78);
  color:var(--navy);
  border-color:var(--line);
}

.btn-ghost:hover{
  background:#fff;
}

.btn-outline-white{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.28);
}

.btn-outline-white:hover{
  background:rgba(255,255,255,.08);
}

/* =========================
   SEARCH STRIP
   ========================= */

/* =========================
   GENERIC SECTIONS
   ========================= */

.sec{
  padding:104px 0;
}

.sec.bg-white{
  background:#fff;
}

.sec.bg-cream{
  background:var(--cream-mid);
}

.sec.bg-dark{
  background:linear-gradient(180deg, #1c2332 0%, #151b28 100%);
  color:#fff;
}

.sec-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 64px;
}

.sec-tag{
  display:inline-block;
  margin-bottom:14px;
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.sec-tag.light{
  color:var(--gold-light);
}

.sec-head h2{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(40px, 5vw, 64px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:500;
  color:var(--navy);
}

.sec-head p{
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:var(--text-soft);
}

.sec.bg-dark .sec-head h2{
  color:#fff;
}

.sec.bg-dark .sec-head p{
  color:rgba(255,255,255,.72);
}

/* =========================
   FEATURES
   ========================= */

.feat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.feat-card{
  padding:28px;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.feat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(184,149,94,.20);
}

.feat-ico{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
}

.feat-ico svg{
  width:26px;
  height:26px;
}

.fi-rose{ background:#f5e6e8; color:#a36c75; }
.fi-gold{ background:#f5eee2; color:#a07a43; }
.fi-sage{ background:#eaf0ea; color:#718170; }
.fi-navy{ background:#e8edf7; color:#2e4164; }
.fi-cream{ background:#f5f0ea; color:#8e785d; }
.fi-blush{ background:#f7eaee; color:#a56f79; }

.feat-card h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.3;
  color:var(--navy);
}

.feat-card p{
  margin:0;
  color:var(--text-soft);
  line-height:1.75;
  font-size:15px;
}

/* =========================
   ORNAMENT
   ========================= */

.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:10px 0;
  color:var(--gold);
}

.orn-line{
  flex:1;
  max-width:160px;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(184,149,94,.45), transparent);
}

.orn-heart{
  font-family:var(--font-display);
  font-size:24px;
  color:var(--rose);
}

/* =========================
   HOW IT WORKS
   ========================= */

.tab-group{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:34px;
}

.tab-btn{
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text-soft);
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}

.tab-btn.active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
  box-shadow:var(--shadow-sm);
}

.tab-panel{
  display:block;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
}

.steps-grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.step-card{
  position:relative;
  padding:28px;
  border-radius:26px;
  background:#fff;
  border:1px solid rgba(29,36,51,.08);
  box-shadow:var(--shadow-sm);
}

.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background:#f4ede2;
  color:var(--gold);
  font-weight:800;
  font-size:13px;
  letter-spacing:.08em;
  margin-bottom:16px;
}

.step-ico{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#f7f3ec;
  color:var(--navy);
  margin-bottom:18px;
}

.step-ico svg{
  width:24px;
  height:24px;
}

.step-card h3{
  margin:0 0 10px;
  color:var(--navy);
  font-size:20px;
}

.step-card p{
  margin:0;
  color:var(--text-soft);
  line-height:1.75;
  font-size:15px;
}

/* =========================
   FAQ
   ========================= */

.faq-list{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.faq-item{
  border:1px solid var(--line-soft);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.faq-q{
  position:relative;
  padding:22px 60px 22px 24px;
  font-size:17px;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
}

.faq-icon{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  font-size:24px;
  color:var(--gold);
  line-height:1;
}

.faq-a{
  display:none;
  padding:0 24px 22px;
  color:var(--text-soft);
  line-height:1.8;
  font-size:15px;
}

.faq-item.open .faq-a{
  display:block;
}

.faq-item.open .faq-icon{
  transform:translateY(-50%) rotate(45deg);
}

/* =========================
   ABOUT
   ========================= */

.about-card{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:110px 1fr;
  gap:26px;
  align-items:start;
  padding:34px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-md);
}

.about-mark{
  width:92px;
  height:92px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #f4eadc, #efe2cf);
  color:var(--gold);
  font-size:34px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.about-content h3{
  margin:0 0 14px;
  font-size:28px;
  line-height:1.25;
  color:var(--navy);
}

.about-content p{
  margin:0 0 14px;
  color:var(--text-soft);
  line-height:1.85;
  font-size:16px;
}

.about-content p:last-child{
  margin-bottom:0;
}

/* =========================
   PRICING
   ========================= */

.pricing-grid{
  display:grid;
  gap:24px;
}

.pricing-grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:920px;
  margin:0 auto;
}

.price-card{
  position:relative;
  padding:32px 28px 28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  box-shadow:var(--shadow-sm);
}

.price-card.hot{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border-color:rgba(215,192,154,.34);
  transform:translateY(-4px);
}

.price-badge{
  position:absolute;
  top:-12px;
  right:20px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:var(--gold);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.price-plan{
  display:block;
  margin-bottom:14px;
  color:var(--gold-light);
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.price-amount{
  margin-bottom:10px;
  color:#fff;
  font-size:50px;
  line-height:1;
  font-weight:700;
}

.price-amount small{
  font-size:18px;
  font-weight:600;
  opacity:.8;
}

.price-desc{
  margin:0 0 24px;
  color:rgba(255,255,255,.72);
  line-height:1.7;
}

.price-feats{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.price-feats li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#fff;
  line-height:1.6;
}

.price-feats .ck{
  color:var(--gold-light);
  font-weight:700;
}

.price-feats li.off{
  color:rgba(255,255,255,.45);
}

.pricing-note{
  max-width:920px;
  margin:26px auto 0;
  color:rgba(255,255,255,.88);
  line-height:1.9;
  font-size:16px;
  text-align:left;
}

/* =========================
   CONTACT
   ========================= */

.contact-grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:24px;
  align-items:start;
}

.contact-info{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.c-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 18px;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:22px;
  box-shadow:var(--shadow-sm);
}

.c-ico{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#f5eee4;
  color:var(--navy);
  font-weight:800;
  flex-shrink:0;
}

.c-item strong{
  display:block;
  margin-bottom:4px;
  color:var(--navy);
}

.c-item p{
  margin:0;
  color:var(--text-soft);
  line-height:1.7;
}

.contact-form{
  padding:26px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-md);
}

.cf-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.field label{
  font-size:14px;
  font-weight:700;
  color:var(--navy);
}

.field input,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:14px 15px;
  outline:none;
  color:var(--text);
  transition:border-color .18s ease, box-shadow .18s ease;
}

.field textarea{
  min-height:140px;
  resize:vertical;
}

.field input:focus,
.field textarea:focus{
  border-color:rgba(184,149,94,.55);
  box-shadow:0 0 0 4px rgba(184,149,94,.12);
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
  background:#121826;
  color:rgba(255,255,255,.78);
  padding:70px 0 26px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr .8fr;
  gap:28px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.site-logo.light{
  color:#fff;
}

.footer-brand p{
  max-width:340px;
  margin:16px 0 18px;
  line-height:1.8;
  color:rgba(255,255,255,.66);
}

.footer-social{
  display:flex;
  gap:10px;
}

.footer-social a{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  color:#fff;
}

.footer-col h4{
  margin:6px 0 14px;
  color:#fff;
  font-size:15px;
}

.footer-col a{
  display:block;
  margin:0 0 10px;
  color:rgba(255,255,255,.68);
}

.footer-col a:hover{
  color:#fff;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:22px;
  font-size:14px;
  color:rgba(255,255,255,.56);
}

/* =========================
   REVEAL
   ========================= */

.anim-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:calc(var(--i, 0) * 70ms);
}

.anim-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width:1100px){
  .site-nav{
    display:none;
  }

  .hamburger{
    display:flex;
  }

  .hero-inner{
    grid-template-columns:1fr;
    gap:34px;
  }

  .hero-text{
    max-width:100%;
    text-align:center;
    margin:0 auto;
  }

  .hero-actions,
  .hero-points{
    justify-content:center;
  }

  .feat-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .steps-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .steps-grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .contact-grid{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:768px){
  .wrap{
    width:min(100% - 28px, 1180px);
  }

  .hero{
    padding:122px 0 40px;
  }

  .hero-title{
    font-size:clamp(42px, 13vw, 64px);
  }

  .hero-desc{
    font-size:16px;
  }

  .dashboard-mock{
    padding:14px;
    border-radius:24px;
  }

  .dash-body{
    min-height:auto;
    padding:18px;
  }

  .phone-preview{
    width:100%;
    max-width:270px;
  }

  .card-a,
  .card-b,
  .float-note{
    position:static;
    margin-top:14px;
  }

  .faq-q{
    font-size:16px;
  }

  .sec{
    padding:82px 0;
  }

  .feat-grid,
  .steps-grid,
  .steps-grid-3,
  .pricing-grid-2,
  .cf-row,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .about-card{
    grid-template-columns:1fr;
    padding:24px;
  }

  .about-mark{
    width:74px;
    height:74px;
    border-radius:20px;
  }

  .contact-form{
    padding:20px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:560px){
  .site-header .hinner{
    min-height:72px;
  }

  .site-logo{
    font-size:24px;
  }

  .hero-eyebrow{
    font-size:10px;
    letter-spacing:.12em;
  }

  .btn,
  .btn-lg{
    width:100%;
  }

  .hero-actions{
    flex-direction:column;
  }

  .sec-head h2{
    font-size:38px;
  }

  .price-amount{
    font-size:40px;
  }
}