/* Hello Celeste v3 — cheerful flowers & brighter pop */
:root{
  --coral:#ff7167;
  --peach:#ffd6c8;
  --mint:#7ed4b7;
  --sky:#7ac8ff;
  --sun:#ffd95e;
  --ink:#1f1f1f;
  --muted:#596170;
  --bg:#fffdfb;
  --soft:#fff6f2;
  --card:#ffffff;
  --line:#ebe8ea;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 400px at -10% -10%, #ffece6, transparent 60%),
    radial-gradient(700px 380px at 110% 120%, #e9fff6, transparent 60%),
    linear-gradient(180deg,#fff9f7, #ffffff 40%, #fefeff 100%);
  line-height:1.7;
  font-weight:400;
  font-size:18px;
}
h1,h2,h3{font-weight:100;letter-spacing:.2px}
h1{
  font-size:clamp(2.6rem,5vw,3.8rem);   /* slightly larger */
  line-height:1.12;
  margin:1rem 0;
  color:#6a6a6a;                        /* soft medium grey */
  font-weight:300;                      /* thinner weight */
  letter-spacing:0.3px;                 /* optional — crispens look */
}

h2{font-size:clamp(1.7rem,3.3vw,2.3rem);margin:0 0 .6rem}
h3{margin:.2rem 0 .5rem}
a{color:var(--ink);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section.soft{background:linear-gradient(180deg,#fff7f4,#fff)}
.muted{color:var(--muted)}
.badge{display:inline-block;border:1px solid var(--line);background:#fff;backdrop-filter:saturate(180%) blur(4px);padding:.42rem .75rem;border-radius:999px;font-size:.95rem;color:#444;box-shadow:0 4px 16px rgba(0,0,0,.05)}

.btn{display:inline-block;padding:.95rem 1.15rem;border-radius:999px;border:1px solid var(--line);background:#fff}
.btn.block{display:block;width:100%;text-align:center}
.btn.primary{background:linear-gradient(180deg,var(--coral),#ff5a4e);color:#fff;border-color:transparent;box-shadow:0 16px 36px rgba(255,113,103,.28)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost:hover{background:#fafafa}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.hero-meta{display:flex;gap:1rem;color:#7a8596;font-size:.95rem;margin-top:.8rem;flex-wrap:wrap}

.grid-2{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:860px){.grid-2{grid-template-columns:1.1fr .9fr}}

/* NAV + Brand */
.nav{position:sticky;top:0;background:#ffffffcc;border-bottom:1px solid var(--line);backdrop-filter:blur(10px);z-index:50}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.links{display:none;gap:22px;align-items:center}
.links .cta{background:#111;color:#fff;padding:.6rem 1rem;border-radius:999px}
@media(min-width:860px){.links{display:flex}}

/* Speech-bubble logo */
.brand-logo{display:flex;align-items:center;gap:10px}
.bubble{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative; padding:12px 20px 14px; border-radius:20px; border:2px solid var(--coral);
  background:linear-gradient(180deg,#fff,#fff5f3);
  box-shadow:0 8px 22px rgba(255,113,103,.12);
}
.bubble:after{
  content:""; position:absolute; left:14px; bottom:-9px; width:18px; height:18px;
  background:linear-gradient(180deg,#fff,#fff5f3); border-left:2px solid var(--coral); border-bottom:2px solid var(--coral);
  transform:rotate(45deg); border-bottom-left-radius:4px;
}
.hello{font-family:'Dancing Script', cursive;font-size:24px; line-height:1; color:var(--coral); transform:translateY(2px)}
.celeste{font-family:Manrope, sans-serif;font-size:12px; letter-spacing:3.2px; color:#111; margin-top:4px}

/* Flower belts (repeat pattern) */
.flower-belt{height:50px;background-image:url('img/flower-sprite.svg');background-size:100px auto;background-repeat:repeat-x;opacity:.75}
.top-belt{margin-top:0}
.bottom-belt{transform:scaleY(-1)}

/* HERO visual */
.hero{position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:-60px -60px auto -60px;height:280px;
  background:radial-gradient(300px 120px at 10% 50%, var(--mint), transparent 60%),
             radial-gradient(280px 120px at 80% 40%, var(--sky), transparent 60%),
             radial-gradient(220px 120px at 50% 80%, var(--peach), transparent 60%);
  filter:blur(48px);opacity:.35;z-index:-1;
}
.hero-card{position:relative;height:320px;border:1px solid var(--line);border-radius:26px;
  background:linear-gradient(#fff,#fff5f5);
  box-shadow:0 10px 30px rgba(0,0,0,.05)}
@media(min-width:860px){.hero-card{height:420px}}
.cards{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;opacity:.95}
/* Grid inside the hero card */
.cards{
  position:absolute;
  inset:16px;                  /* inner padding for the frame */
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:12px;
  opacity:.95;
}

/* Each tile is a fixed-ratio frame */
.cards div{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
  background:#fff;
  aspect-ratio:4 / 3;          /* <- keeps the original card shape */
}

/* The 2-wide tile keeps the same height but spans two columns */
.cards .wide{
  grid-column:span 2;
  aspect-ratio:8 / 3;          /* 2x width, same height */
}

/* Make the image cover the frame */
.cards img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cards img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.cards .wide{grid-column:span 2}
.float-tag{position:absolute;right:14px;bottom:14px;background:#fff;border:1px solid var(--line);padding:.35rem .7rem;border-radius:999px;font-size:.82rem;box-shadow:0 4px 10px rgba(0,0,0,.06)}

/* Floating petals */
.petal{position:absolute;width:54px;opacity:.9;animation:petal 16s linear infinite}
.petal.p1{top:-10px;left:16px;animation-delay:0s}
.petal.p2{top:-14px;left:40%;animation-delay:3s}
.petal.p3{top:-12px;right:16px;animation-delay:6s}
@keyframes petal{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(180px) rotate(120deg)}
  100%{transform:translateY(360px) rotate(240deg)}
}

/* Features */
.features{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
@media(min-width:820px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{border:1px solid var(--line);padding:20px;border-radius:18px;background:var(--card);
  box-shadow:0 8px 16px rgba(0,0,0,.03); position:relative; overflow:hidden}
.feature:after{content:""; position:absolute; right:-20px; bottom:-20px; width:140px; height:140px;
  background:url('img/flower-sprite.svg') no-repeat center/contain; opacity:.15; transform:rotate(-10deg)}

/* Flower row divider */
.flower-row{height:36px;background-image:url('img/flower-sprite.svg');background-size:80px auto;background-repeat:repeat-x;opacity:.6;margin-top:26px}
.flower-row.soft{opacity:.5}

/* Pricing */
.pricing{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
@media(min-width:980px){.pricing{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:20px;box-shadow:0 8px 16px rgba(0,0,0,.04)}
.card.highlight{border-color:#ffd5cf;box-shadow:0 22px 36px rgba(255,113,103,.16)}
.card-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.card-title{font-weight:500}
.pill{justify-self:start;background:var(--peach);color:#a13a2c;border-radius:999px;padding:.22rem .55rem;font-size:.78rem;font-weight:600}
.price{justify-self:end;font-size:1.35rem;font-weight:600;color:#0f1216}
.list{padding-left:1.1rem;line-height:1.8}
.list li{margin:.1rem 0}

/* About card */
.about{align-items:center}
.about-card{position:relative;border:1px solid #ffdada;border-radius:24px;background:linear-gradient(#fff,#fff5f5);height:260px;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.badge-box{border:1px solid #ffe1e1;border-radius:16px;background:#fff;padding:16px 24px;text-align:center;box-shadow:0 8px 16px rgba(0,0,0,.04)}
.badge-box .b1{color:var(--coral);font-weight:600}
.badge-box .b2{color:#7a8596;font-size:.9rem}
.corner-flower{position:absolute;width:64px;opacity:.6}
.cf1{top:-12px;left:-12px;transform:rotate(-15deg)}
.cf2{bottom:-12px;right:-12px;transform:rotate(10deg)}

/* Contact */
.contact{display:grid;grid-template-columns:1fr;gap:24px;border:1px solid #ffdede;background:#fff;border-radius:20px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
@media(min-width:900px){.contact{grid-template-columns:1fr 1fr}}
.form label{display:block;font-size:.95rem;margin:6px 0}
.form input,.form textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:16px;outline:none}
.form input:focus,.form textarea:focus{border-color:#ffc0c0;box-shadow:0 0 0 3px #ffe7e7}
.fine{color:#7a8596;text-align:center;font-size:.85rem;margin:6px 0 0}

/* Footer */
.footer{border-top:1px solid var(--line);background:#fff;padding:28px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-links a{margin-left:14px;color:#666}

/* --- Brands Gallery --- */
.brands-gallery {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg,#fff,#fff6f5);
  padding: 36px 24px 48px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  text-align: center;
}

.brands-heading {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--coral);
  margin-bottom: 28px;
  letter-spacing: 0.4px;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  justify-items: center;
  align-items: center;
}

.brands-grid div {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}

.brands-grid div:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.brands-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- Brands Gallery (right column in hero grid) --- */
.hero-card.brands-gallery {
  position: relative;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(#fff,#fff5f5);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  padding: 24px 20px 32px;
  text-align: center;
  justify-self: end;          /* aligns right in grid-2 */
  align-self: start;          /* aligns top of text block */
  width: 100%;
}

@media(min-width:860px){
  .hero-card.brands-gallery{
    max-width: 440px;         /* controls width on large screens */
  }
}

.brands-heading {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--coral);
  margin-bottom: 20px;
  letter-spacing: 0.4px;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 14px;
  justify-items: center;
  align-items: center;
}

.brands-grid div {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.brands-grid div:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.brands-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* for logos */
}