:root{ scroll-behavior:smooth; }
html{ scroll-padding-top: 92px; }
body{ background:#FFFFFF; }

::selection{ background:#8c60f5; color:#fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid #8c60f5; outline-offset: 2px; border-radius: 4px;
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- signature "artboard deck" motif ---------- */
.artboard{ transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; will-change: transform; }
.deck-tilt-1{ transform: rotate(-6deg) translateY(6px); }
.deck-tilt-2{ transform: rotate(4deg) translateY(-4px); }
.deck-tilt-3{ transform: rotate(-2deg) translateY(10px); }

.portfolio-card .artboard-face{ transition: transform .45s cubic-bezier(.16,1,.3,1); }
.portfolio-card:hover .artboard-face{ transform: rotate(0deg) scale(1.015); }
.portfolio-card:nth-child(3n+1) .artboard-face{ transform: rotate(-1.6deg); }
.portfolio-card:nth-child(3n+2) .artboard-face{ transform: rotate(1.4deg); }
.portfolio-card:nth-child(3n+3) .artboard-face{ transform: rotate(-0.8deg); }

.washi{ position:absolute; width:46px; height:16px; background:rgba(140,96,245,.35); border:1px solid rgba(140,96,245,.5); top:-8px; left:50%; transform: translateX(-50%) rotate(-3deg); border-radius:2px; }

/* ---------- sidebar ---------- */
#dash-sidebar{ transition: width .3s cubic-bezier(.16,1,.3,1); }
.sb-label{ opacity:0; max-width:0; overflow:hidden; white-space:nowrap; transition: opacity .25s ease, max-width .3s ease; }
#dash-sidebar.expanded .sb-label{ opacity:1; max-width:180px; }
.sb-group-label{ opacity:0; max-width:0; overflow:hidden; white-space:nowrap; transition: opacity .2s ease .05s, max-width .25s ease; }
#dash-sidebar.expanded .sb-group-label{ opacity:1; max-width:200px; }

@media (max-width: 1023px){
  #dash-sidebar{ position:fixed; inset:0 auto 0 0; z-index:60; width:280px; transform: translateX(-100%); }
  #dash-sidebar.mobile-open{ transform: translateX(0); }
  #dash-sidebar.expanded{ width:280px; }
  #dash-sidebar .sb-label, #dash-sidebar .sb-group-label{ opacity:1; max-width:200px; }
}

.sb-scrim{ position:fixed; inset:0; background:rgba(11,31,23,.45); backdrop-filter: blur(2px); z-index:55; opacity:0; pointer-events:none; transition: opacity .25s ease; }
.sb-scrim.show{ opacity:1; pointer-events:auto; }

.sb-link.active{ background:#e7fbf3; color:#0e9a68; }
.sb-link.active .sb-icon{ color:#0e9a68; }

/* ---------- faq ---------- */
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a{ max-height: 400px; }
.faq-item.open .faq-plus{ transform: rotate(45deg); }
.faq-plus{ transition: transform .3s ease; }

/* ---------- misc ---------- */
.grain{ background-image: radial-gradient(rgba(11,31,23,.05) 1px, transparent 1px); background-size: 14px 14px; }
.num-tick{ font-variant-numeric: tabular-nums; }

.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{
  content:''; position:absolute; inset:0; translate: -120% 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 70%);
}
.btn-shine:hover::after{ translate: 120% 0; transition: translate .7s cubic-bezier(.16,1,.3,1); }

.custom-scroll::-webkit-scrollbar{ height:6px; width:6px; }
.custom-scroll::-webkit-scrollbar-thumb{ background:#d8e2de; border-radius:8px; }

/* ---------- order form ---------- */
.rd-field label{ display:block; font-size:13.5px; font-weight:700; color:#0b1f17; margin-bottom:6px; }
.rd-field input, .rd-field select, .rd-field textarea{
  width:100%; background:#fff; border:1.5px solid #e7ece9; border-radius:14px;
  padding:12px 14px; font-size:14.5px; color:#0b1f17; transition: border-color .2s ease, box-shadow .2s ease;
}
.rd-field input::placeholder, .rd-field textarea::placeholder{ color:#9aa5a0; }
.rd-field input:focus, .rd-field select:focus, .rd-field textarea:focus{
  border-color:#15bb81; outline:none; box-shadow: 0 0 0 4px rgba(21,187,129,.12);
}
.rd-field textarea{ resize: vertical; min-height: 110px; }
.rd-field .rd-hint{ font-size:12px; color:#56645f; margin-top:5px; }
.rd-field.rd-hidden{ display:none; }

.rd-pill-check{ transition: all .18s ease; }
.rd-pill-check input:checked + span{ background:#15bb81; color:#fff; border-color:#15bb81; }

/* ---------- portfolio modal ---------- */
#portfolio-modal.flex{ display:flex; }
.portfolio-card{ transition: transform .2s ease; }
.portfolio-card:active{ transform: scale(.98); }

/* ---------- pricing pills / tabs ---------- */
.price-tab{ transition: all .18s ease; }
.price-tab.active{ background:#0b1f17; color:#fff; }

/* filter pill active paint (used by JS, but keep default hover ok via tailwind) */