:root {
  --brand: #e62958;
  --brand-2: #932596;
  --aqua: #78c7c4;
  --chocolate: #6f2c13;
  --ink: #3f1d2a;
  --muted: #795f68;
  --surface: rgba(255,255,255,.9);
  --surface-strong: #ffffff;
  --shadow: 0 22px 60px rgba(91,20,52,.2);
  --radius: 1.45rem;
  --ease: 240ms cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(255,246,207,.72), transparent 18rem),
    radial-gradient(circle at 90% 18%, rgba(120,199,196,.58), transparent 25rem),
    radial-gradient(circle at 74% 78%, rgba(111,44,19,.22), transparent 26rem),
    linear-gradient(155deg, #ff9ebc 0%, #ef4d7d 38%, #e62958 66%, #9b2e86 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.72) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,214,44,.72) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(120,199,196,.68) 0 2px, transparent 3px);
  background-size: 90px 90px, 130px 130px, 170px 170px;
  background-position: 10px 20px, 60px 40px, 15px 90px;
  opacity: .32;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.ambient { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .34; pointer-events: none; }
.ambient--one { width: 20rem; height: 20rem; background: #fff4c8; top: -8rem; left: -9rem; }
.ambient--two { width: 24rem; height: 24rem; background: #78c7c4; right: -12rem; bottom: 6%; opacity: .24; }
.smartlinks { position: relative; width: min(100% - 1.25rem, 760px); margin-inline: auto; padding: max(1rem, env(safe-area-inset-top)) 0 max(2rem, env(safe-area-inset-bottom)); }
.profile { text-align: center; padding: .3rem .35rem 1.75rem; }
.profile__actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.45rem; }
.smartlinks-badge, .profile__mini-label { border: 1px solid rgba(255,255,255,.56); background: rgba(255,255,255,.25); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(91,20,52,.1); }
.smartlinks-badge { display: inline-flex; gap: .45rem; align-items: center; padding: .65rem .8rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.profile__mini-label { padding: .65rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: rgba(63,29,42,.76); cursor: pointer; }
.profile__logo-wrap { position: relative; width: 10rem; margin: 0 auto 1rem; }
.profile__logo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 18px 50px rgba(91,20,52,.28); border: .36rem solid rgba(255,255,255,.48); }
.profile__status { position: absolute; right: .75rem; bottom: .75rem; width: 1rem; height: 1rem; border-radius: 50%; background: #21c875; border: .2rem solid #f26791; box-shadow: 0 0 0 .25rem rgba(255,255,255,.3); }
.profile__eyebrow { margin: 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; opacity: .72; }
.profile h1 { margin: .35rem 0 .5rem; font-size: clamp(2rem, 10vw, 3.3rem); line-height: .95; }
.profile__description { margin: 0 auto; max-width: 39rem; font-size: .87rem; line-height: 1.65; font-weight: 600; }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: min(100%, 25rem); margin: 1.3rem auto 0; }
.quick-action { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; background: rgba(255,255,255,.3); backdrop-filter: blur(16px); color: var(--ink); font-size: .72rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(91,20,52,.12); transition: transform var(--ease), background var(--ease); }
.quick-action span { display: grid; place-items: center; width: 1.8rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.66); }
.quick-action:hover, .quick-action:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,.54); }
.links { display: grid; gap: .85rem; }
.link-card { --accent: #21b96f; position: relative; display: grid; grid-template-columns: 3.35rem minmax(0,1fr) 1.25rem; gap: .9rem; align-items: center; min-height: 5.75rem; padding: .85rem .95rem; border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(18px); box-shadow: 0 12px 34px rgba(91,20,52,.12); overflow: hidden; transition: transform var(--ease), box-shadow var(--ease), background var(--ease); }
.link-card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--ease); }
a.link-card:hover, a.link-card:focus-visible { transform: translateY(-4px) scale(1.006); box-shadow: var(--shadow); background: var(--surface-strong); }
a.link-card:hover::after, a.link-card:focus-visible::after { transform: scaleX(1); }
.link-card__icon { width: 3.35rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 1.05rem; color: #fff; background: var(--accent); font-size: 1.45rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent); }
.link-card__copy { min-width: 0; }
.link-card__copy strong { display: block; margin-bottom: .25rem; font-size: 1rem; }
.link-card__copy small { display: block; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.link-card__arrow { color: #a68b94; font-size: .8rem; transition: transform var(--ease); }
a.link-card:hover .link-card__arrow { transform: translateX(3px); }
.link-card--instagram { --accent: #d73b83; }
.link-card--facebook { --accent: #1877f2; }
.link-card--phone { --accent: #f49b35; }
.link-card--email { --accent: #932596; }
.link-card--delivery { --accent: #78bdbb; }
.link-card--hours { --accent: #6f2c13; }
.contact { margin-top: 1rem; padding: 1.1rem; border: 1px solid rgba(255,255,255,.72); border-radius: calc(var(--radius) + .2rem); background: rgba(255,255,255,.93); box-shadow: var(--shadow); }
.contact__heading { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.contact__icon { width: 2.8rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: .95rem; background: var(--chocolate); color: white; }
.contact__heading p { margin: 0 0 .15rem; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.contact__heading h2 { margin: 0; font-size: 1.25rem; }
.contact-form, .field { display: grid; gap: .55rem; }
.field-grid { display: grid; gap: .85rem; }
.field + .field, .field-grid + .field, .field + .field-grid, .field-grid + .field-grid, .field + .submit-button { margin-top: .85rem; }
.field > span { font-size: .73rem; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #ead8df; border-radius: .95rem; background: #fff9fb; padding: .9rem 1rem; color: var(--ink); outline: 0; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { background: white; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(230,41,88,.13); }
.field textarea { resize: vertical; min-height: 7rem; }
.field small { display: none; color: #c43232; font-size: .68rem; }
.field.is-invalid small { display: block; }
.field.is-invalid input, .field.is-invalid select { border-color: #c43232; }
.submit-button { width: 100%; border: 0; border-radius: 1rem; padding: 1rem; display: flex; justify-content: center; align-items: center; gap: .65rem; background: var(--chocolate); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(111,44,19,.22); transition: transform var(--ease), background var(--ease); }
.submit-button:hover { transform: translateY(-2px); background: #8a3719; }
.form-status { min-height: 1.2em; margin: .7rem 0 0; text-align: center; color: var(--muted); font-size: .7rem; }
.footer { display: flex; justify-content: center; align-items: center; gap: .4rem; padding: 1.65rem .5rem .5rem; color: rgba(63,29,42,.62); font-size: .76rem; }
.footer strong { color: rgba(63,29,42,.82); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 1rem; transform: translate(-50%, 140%); padding: .8rem 1rem; border-radius: 999px; background: var(--ink); color: white; font-size: .72rem; box-shadow: var(--shadow); transition: transform var(--ease); }
.toast.is-visible { transform: translate(-50%, 0); }
@media (min-width: 700px) { .smartlinks { width: min(100% - 2rem, 920px); padding-top: 1.5rem; } .profile { padding-bottom: 2rem; } .profile__logo-wrap { width: 11rem; } .links { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; } .link-card { min-height: 7rem; padding: 1rem 1.1rem; } .contact { margin-top: 1.25rem; padding: 1.5rem; } .field-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .smartlinks { width: min(100% - 3rem, 1080px); } .profile { padding-top: .75rem; } .links { grid-template-columns: repeat(3, minmax(0,1fr)); } .contact { width: min(100%, 760px); margin-inline: auto; margin-top: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
a.smartlinks-badge { color: inherit; text-decoration: none; }
button.profile__mini-label { appearance: none; border: 0; font: inherit; cursor: pointer; }
a.smartlinks-badge:focus-visible, button.profile__mini-label:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
