/* ─── Variables ─────────────────────────────────────────── */
:root {
  --primary:  #D35B6A;
  --secondary:#F4EAE6;
  --bg:       #FFFFFF;
  --accent:   #3E3E3E;
  --fg:       #3E3E3E;
  --fg70:     rgba(62,62,62,0.70);
  --fg60:     rgba(62,62,62,0.60);
  --fg40:     rgba(62,62,62,0.40);
  --border:   rgba(62,62,62,0.12);
  --nav-h:    68px;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a   { text-decoration: none; color: inherit; }
img, svg { display: block; }
button  { cursor: pointer; font-family: inherit; border: none; background: none; }
address { font-style: normal; }

/* ─── Container ─────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 3rem; }
@media (max-width: 768px) { .wrap { padding: 0 1.25rem; } }

/* ─── NAVBAR ────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 200;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.nav-logo-mark {
  width: 2rem; height: 2rem;
  border-radius: 5px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.nav-logo-mark::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(244,234,230,0.25);
  transform: rotate(45deg) scale(1.5) translateX(40%);
}
.nav-logo-mark span { color:#fff; font-weight:700; font-size:0.68rem; position:relative; z-index:1; }

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  justify-content: center;
}
.nav-tab {
  padding: 0.45rem 1.05rem;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--fg60);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-tab:hover  { color: var(--fg);      background: rgba(62,62,62,0.06); }
.nav-tab.active { color: var(--primary); background: rgba(211,91,106,0.1); }

.nav-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nav-cta {
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  padding: 0.55rem 1.3rem;
  border-radius: 9999px;
  transition: background 0.3s;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.nav-cta:hover { background: var(--primary); }

.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.4rem;
  z-index: 210;
}
.ham span {
  display: block; width: 22px; height: 2px;
  background: var(--fg); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.mob-menu {
  position: fixed; inset: 0;
  background: #fff;
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.mob-menu::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--secondary) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35; pointer-events: none;
}
.mob-menu.open { transform: translateX(0); }
.mob-menu nav {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.75rem;
  position: relative; z-index: 1;
}
.mob-menu nav button {
  font-size: 1.7rem; font-weight: 600;
  color: var(--fg); background: none; border: none;
  transition: color 0.2s; cursor: pointer;
}
.mob-menu nav button:hover { color: var(--primary); }

@media (max-width: 900px) {
  .nav-tabs, .nav-cta { display: none; }
  .ham { display: flex; }
}

/* ─── SLIDES SHELL ──────────────────────────────────────── */
.viewport {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 100%;
  bottom: 0;
  overflow: hidden;
}
.track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.s-dots {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.45rem;
  z-index: 200;
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(62,62,62,0.2);
  cursor: pointer;
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
}
.dot.active {
  background: var(--primary);
  width: 20px; border-radius: 3px;
}

/* ─── Entrance animations ───────────────────────────────── */
.a {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.a.left  { transform: translateX(-22px); }
.a.right { transform: translateX(22px); }
.a.in    { opacity: 1; transform: none; }
.a.d1 { transition-delay:0.07s; }
.a.d2 { transition-delay:0.14s; }
.a.d3 { transition-delay:0.21s; }
.a.d4 { transition-delay:0.28s; }
.a.d5 { transition-delay:0.35s; }
.a.d6 { transition-delay:0.42s; }
.a.d7 { transition-delay:0.49s; }

.slabel {
  display: inline-block;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 0.875rem;
}
.sh2 {
  font-size: clamp(1.75rem,3.5vw,2.65rem);
  font-weight: 500; letter-spacing:-0.02em; line-height:1.15;
}
.sh2 em { color:var(--primary); font-style:italic; font-weight:300; }
.sp {
  font-size: 1rem; color:var(--fg60); font-weight:300;
  line-height:1.8; max-width:560px;
}

/* ════════════════════════════════════════════════════════
   HOME SLIDE
════════════════════════════════════════════════════════ */
#s-home { background:var(--bg); position:relative; }
.home-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb1 {
  position:absolute; top:-20%; right:-10%;
  width:70vw; height:70vw; border-radius:50%;
  background:var(--secondary); opacity:0.45; filter:blur(80px);
}
.orb2 {
  position:absolute; top:40%; left:-10%;
  width:50vw; height:50vw; border-radius:50%;
  background:var(--primary); opacity:0.04; filter:blur(80px);
}
.grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right,rgba(128,128,128,0.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(128,128,128,0.07) 1px,transparent 1px);
  background-size:40px 40px;
}

.home-body {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  min-height:100%;
  padding: 3.5rem 1.5rem 5rem;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.4rem 1rem; border-radius:9999px;
  background:var(--secondary);
  font-size:0.68rem; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  margin-bottom:1.75rem;
}
.pulse { width:7px; height:7px; border-radius:50%; background:var(--primary); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.hero-h1 {
  font-size:clamp(2.4rem,6.5vw,5.2rem);
  font-weight:500; letter-spacing:-0.028em; line-height:1.07;
  max-width:900px;
}
.hero-h1 em { color:var(--primary); font-style:italic; font-weight:300; }
.hero-sub {
  margin-top:1.75rem;
  font-size:clamp(0.95rem,1.8vw,1.15rem);
  color:var(--fg60); font-weight:300; max-width:590px; line-height:1.8;
}
.hero-btns {
  margin-top:2.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
.btn-fill {
  padding:0.875rem 2rem; background:var(--primary); color:#fff;
  border-radius:9999px; font-weight:500; font-size:0.95rem;
  border:none; cursor:pointer;
  transition:background .3s, box-shadow .3s, transform .2s;
}
.btn-fill:hover { background:#c04e5c; box-shadow:0 8px 22px rgba(211,91,106,.28); transform:translateY(-2px); }
.btn-out {
  padding:0.875rem 2rem; border:1.5px solid var(--border);
  color:var(--fg); border-radius:9999px; font-weight:500;
  font-size:0.95rem; cursor:pointer;
  transition:background .3s, transform .2s; background:transparent;
}
.btn-out:hover { background:var(--secondary); transform:translateY(-2px); }

.chips {
  margin-top:3rem;
  display:flex; flex-wrap:wrap; gap:0.875rem; justify-content:center;
}
.chip {
  display:flex; align-items:center; gap:0.55rem;
  padding:0.55rem 1.15rem;
  background:#fff; border:1px solid var(--border);
  border-radius:9999px;
  font-size:0.8rem; font-weight:500; color:var(--fg60);
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.chip svg { color:var(--primary); flex-shrink:0; }

.scroll-cue {
  position:absolute; bottom:2.5rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  pointer-events:none;
}
.scroll-cue span {
  font-size:0.58rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--fg40); font-weight:500;
}
.scroll-line { width:1px; height:44px; background:var(--border); overflow:hidden; position:relative; }
.scroll-line::after {
  content:''; position:absolute; left:0; width:100%; height:33%;
  background:var(--primary); animation:drop 1.6s linear infinite;
}
@keyframes drop { 0%{top:-33%} 100%{top:133%} }

/* ════════════════════════════════════════════════════════
   ABOUT SLIDE
════════════════════════════════════════════════════════ */
#s-about { background:var(--bg); }
.about-wrap { padding:3.5rem 0 5rem; }

.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:start;
}
@media (max-width:900px) { .about-grid { grid-template-columns:1fr; gap:2.5rem; } }

.atext .sh2 { margin-bottom:1.5rem; }
.atext p { color:var(--fg60); font-weight:300; line-height:1.85; font-size:1rem; margin-bottom:1.2rem; }

.a-tagline {
  margin-top:1.75rem; padding-top:1.75rem;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:0.875rem;
}
.tl { width:2.25rem; height:1px; background:var(--primary); flex-shrink:0; }
.tl-t { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg40); font-weight:500; }

.a-right { display:flex; flex-direction:column; gap:1.75rem; }
.a-visual {
  position:relative; aspect-ratio:1;
  max-width:340px; display:flex;
  align-items:center; justify-content:center;
}
.av-bg  { position:absolute; inset:0; background:var(--secondary); border-radius:32px; transform:rotate(3deg); transition:transform .7s; }
.av-bor { position:absolute; inset:0; border:1.5px solid rgba(211,91,106,.22); border-radius:32px; transform:rotate(-3deg); transition:transform .7s; }
.a-visual:hover .av-bg  { transform:rotate(6deg); }
.a-visual:hover .av-bor { transform:rotate(-6deg); }
.av-img { position:relative; z-index:2; width:63%; filter:drop-shadow(0 8px 20px rgba(0,0,0,.1)); }

.h-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.h-card {
  background:var(--secondary); border-radius:1rem;
  padding:1.1rem 1.25rem;
  border:1px solid rgba(211,91,106,.1);
}
.h-card h4 { font-size:0.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); margin-bottom:.35rem; }
.h-card p  { font-size:0.87rem; color:var(--fg60); font-weight:300; line-height:1.55; }

.values-row {
  margin-top:3rem; padding-top:3rem; border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
@media (max-width:640px) { .values-row { grid-template-columns:1fr; gap:1.5rem; } }
.val { display:flex; flex-direction:column; gap:.45rem; }
.val-ico {
  width:2.4rem; height:2.4rem; border-radius:.7rem;
  background:rgba(211,91,106,.1);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); margin-bottom:.2rem;
}
.val h4 { font-size:1rem; font-weight:600; }
.val p  { font-size:0.87rem; color:var(--fg60); font-weight:300; line-height:1.65; }

.culture-strip {
  margin-top:3rem;
  background:linear-gradient(135deg,var(--secondary) 0%,rgba(244,234,230,.4) 100%);
  border-radius:1.25rem; padding:2rem 2.25rem;
  border:1px solid rgba(211,91,106,.12);
  display:flex; gap:1.5rem; align-items:flex-start;
}
.culture-icon {
  width:3rem; height:3rem; border-radius:.875rem;
  background:rgba(211,91,106,.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); flex-shrink:0; margin-top:.15rem;
}
.culture-text h4 { font-size:1rem; font-weight:600; margin-bottom:.5rem; }
.culture-text p  { font-size:0.9rem; color:var(--fg60); font-weight:300; line-height:1.75; }

/* ════════════════════════════════════════════════════════
   SERVICES SLIDE
════════════════════════════════════════════════════════ */
#s-services { background:var(--secondary); }
.svc-wrap { padding:3.5rem 0 5rem; }

.svc-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.5rem; margin-bottom:3rem;
}
@media (max-width:640px) { .svc-grid { grid-template-columns:1fr; } }

.sc {
  background:var(--bg); border:1.5px solid rgba(255,255,255,.9);
  border-radius:1.25rem; padding:2rem;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.sc:hover {
  border-color:rgba(211,91,106,.22);
  box-shadow:0 16px 48px rgba(211,91,106,.07);
  transform:translateY(-3px);
}
.sc-ico {
  width:3rem; height:3rem; border-radius:.75rem;
  background:var(--secondary); display:flex; align-items:center;
  justify-content:center; color:var(--primary);
  margin-bottom:1.5rem;
  transition:background .3s, color .3s, transform .3s;
}
.sc:hover .sc-ico { background:var(--primary); color:#fff; transform:scale(1.08); }
.sc h3 { font-size:1.15rem; font-weight:600; margin-bottom:.65rem; transition:color .3s; }
.sc:hover h3 { color:var(--primary); }
.sc p  { font-size:0.88rem; color:var(--fg60); font-weight:300; line-height:1.75; }
.sc-tag {
  display:inline-block; margin-top:1.1rem;
  font-size:0.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary); background:rgba(211,91,106,.1);
  padding:.25rem .65rem; border-radius:9999px;
}

.process {
  background:var(--bg); border-radius:1.5rem; padding:2.25rem 2.5rem;
  margin-bottom:2rem;
}
.pro-head { margin-bottom:1.75rem; }
.pro-steps {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
@media (max-width:768px) { .pro-steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .pro-steps { grid-template-columns:1fr; } }

.pstep { display:flex; flex-direction:column; gap:.65rem; }
.pnum {
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:rgba(211,91,106,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:700; color:var(--primary);
}
.pstep h4 { font-size:0.92rem; font-weight:600; }
.pstep p  { font-size:0.84rem; color:var(--fg60); font-weight:300; line-height:1.65; }

.cap-row {
  display:flex; flex-wrap:wrap; gap:.75rem;
}
.cap {
  display:flex; align-items:center; gap:.45rem;
  padding:.45rem .9rem;
  background:rgba(211,91,106,.08); border:1px solid rgba(211,91,106,.15);
  border-radius:9999px; font-size:0.8rem; color:var(--fg70); font-weight:500;
}
.cap::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--primary); flex-shrink:0;
}

/* ════════════════════════════════════════════════════════
   WHY US SLIDE
════════════════════════════════════════════════════════ */
#s-whyus { background:var(--bg); border-top:1px solid var(--border); position:relative; }
.dots-bg {
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 2px 2px,var(--fg) 1px,transparent 0);
  background-size:30px 30px; opacity:.03; pointer-events:none;
}
.why-wrap { padding:3.5rem 0 5rem; position:relative; z-index:1; }
.why-header { text-align:center; max-width:640px; margin:0 auto 3.5rem; }

.pillars {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; margin-bottom:3rem;
}
@media (max-width:900px) { .pillars { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .pillars { grid-template-columns:1fr; } }

.pillar { display:flex; flex-direction:column; align-items:center; text-align:center; }
.p-shape-w { width:5.5rem; height:5.5rem; position:relative; margin-bottom:1.4rem; }
.p-shadow  { position:absolute; inset:0; background:var(--secondary); border-radius:50%; transform:translate(-.7rem,.7rem); opacity:.6; }
.p-shape   { position:relative; z-index:1; width:100%; height:100%; transition:transform .5s; }
.pillar:hover .p-shape { transform:scale(1.08) rotate(5deg); }
.pillar h3 { font-size:0.97rem; font-weight:600; margin-bottom:.5rem; }
.pillar p  { font-size:0.84rem; color:var(--fg60); font-weight:300; line-height:1.65; max-width:210px; }

.promise {
  background:var(--accent); color:#fff; border-radius:1.5rem;
  padding:2.75rem 3rem;
  display:grid; grid-template-columns:1fr auto;
  gap:2rem; align-items:center;
  margin-bottom:2.25rem;
}
@media (max-width:640px) { .promise { grid-template-columns:1fr; } }
.promise h3 { font-size:1.4rem; font-weight:500; margin-bottom:.75rem; }
.promise p  { font-size:0.93rem; color:rgba(255,255,255,.62); font-weight:300; line-height:1.8; max-width:480px; }
.p-deco { width:7rem; height:7rem; opacity:.2; flex-shrink:0; }
@media (max-width:640px) { .p-deco { display:none; } }

.commits {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
@media (max-width:640px) { .commits { grid-template-columns:1fr; } }
.cmt {
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.2rem 1.35rem;
  background:rgba(211,91,106,.05);
  border:1px solid rgba(211,91,106,.1);
  border-radius:.875rem;
}
.cmt-dot { width:7px; height:7px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:.45rem; }
.cmt p { font-size:0.88rem; color:var(--fg); font-weight:400; line-height:1.65; }

.studio-note {
  margin-top:2rem; padding:1.5rem 2rem;
  background:var(--secondary); border-radius:1rem;
  border-left:3px solid var(--primary);
  font-size:0.93rem; color:var(--fg60); font-weight:300; line-height:1.75;
}

/* ════════════════════════════════════════════════════════
   CONTACT SLIDE
════════════════════════════════════════════════════════ */
#s-contact { background:var(--accent); color:#fff; position:relative; }
.c-orb {
  position:absolute; top:0; right:0;
  width:700px; height:700px; background:var(--primary);
  border-radius:50%; filter:blur(100px); opacity:.14;
  transform:translate(30%,-40%); pointer-events:none;
}
.c-wrap { padding:3.5rem 0 5rem; position:relative; z-index:1; }

.c-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:start;
}
@media (max-width:900px) { .c-grid { grid-template-columns:1fr; gap:2.5rem; } }

.c-h { font-size:clamp(1.9rem,4vw,2.9rem); font-weight:500; letter-spacing:-.025em; line-height:1.1; margin-bottom:1.1rem; }
.c-h em { color:var(--primary); font-style:italic; font-weight:300; }
.c-sub { color:rgba(255,255,255,.55); font-size:1rem; font-weight:300; line-height:1.8; max-width:380px; margin-bottom:2rem; }

.cd { margin-bottom:1.75rem; }
.cd-lbl { font-size:0.63rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.45rem; }
.cd a   { font-size:1.05rem; font-weight:500; color:#fff; transition:color .2s; }
.cd a:hover { color:var(--primary); }
.cd address { color:rgba(255,255,255,.7); font-weight:300; line-height:1.85; font-size:0.9rem; }

.faq { margin-top:2rem; }
.faq-lbl { font-size:0.63rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:.875rem; }
.fi { border-bottom:1px solid rgba(255,255,255,.1); padding:.9rem 0; }
.fq {
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; font-size:0.9rem; font-weight:500;
  color:rgba(255,255,255,.82); gap:1rem; user-select:none;
}
.fq:hover { color:#fff; }
.fchev { width:1.15rem; height:1.15rem; flex-shrink:0; transition:transform .3s; color:var(--primary); }
.fi.open .fchev { transform:rotate(180deg); }
.fa {
  max-height:0; overflow:hidden; padding-top:0;
  transition:max-height .4s ease, padding .3s;
  font-size:0.86rem; color:rgba(255,255,255,.48);
  font-weight:300; line-height:1.75;
}
.fi.open .fa { max-height:200px; padding-top:.7rem; }

.fc {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:1.25rem; padding:2.25rem;
}
.fc-title { font-size:1.2rem; font-weight:500; margin-bottom:1.5rem; }
.fg { margin-bottom:1.15rem; }
.fl { display:block; font-size:0.79rem; font-weight:500; color:rgba(255,255,255,.5); margin-bottom:.4rem; }
.fi2 {
  width:100%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:.625rem; padding:.78rem 1rem;
  color:#fff; font-family:inherit; font-size:0.92rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.fi2::placeholder { color:rgba(255,255,255,.18); }
.fi2:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(211,91,106,.15); }
textarea.fi2 { resize:none; }
.fsub {
  width:100%; padding:.88rem;
  background:var(--primary); color:#fff;
  border-radius:.625rem; font-size:.92rem; font-weight:500;
  border:none; cursor:pointer;
  transition:background .3s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.fsub:hover:not(:disabled) { background:#c04e5c; }
.fsub:disabled { opacity:.7; cursor:not-allowed; }
.spin { width:15px; height:15px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.fsucc { display:none; flex-direction:column; align-items:center; text-align:center; min-height:280px; justify-content:center; }
.fsucc.on { display:flex; }
.fsucc-ico {
  width:3.25rem; height:3.25rem; border-radius:50%;
  background:rgba(211,91,106,.18);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem; color:var(--primary);
}
.fsucc h3 { font-size:1.2rem; font-weight:500; margin-bottom:.5rem; }
.fsucc p  { font-size:.85rem; color:rgba(255,255,255,.5); margin-bottom:1.25rem; font-weight:300; }
.frst { font-size:.8rem; color:var(--primary); text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:none; }
.frst:hover { color:#fff; }

.r-hint {
  margin-top:1.25rem; padding:.875rem 1.1rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:.75rem; font-size:.8rem; color:rgba(255,255,255,.38);
  display:flex; align-items:center; gap:.6rem;
}
.r-hint svg { color:var(--primary); flex-shrink:0; }

.copyright {
  margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center; font-size:.75rem;
  color:rgba(255,255,255,.28); font-weight:300;
}