*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

:root {
   --bg: hsl(210, 40%, 98%);
   --fg: hsl(210, 45%, 15%);
   --card: hsl(0, 0%, 100%);
   --primary: hsl(205, 85%, 50%);
   --primary-fg: hsl(0, 0%, 100%);
   --muted: hsl(210, 30%, 94%);
   --muted-fg: hsl(210, 20%, 45%);
   --border: hsl(210, 25%, 88%);
   --turquoise: hsl(185, 80%, 50%);
   --navy: hsl(210, 60%, 18%);
   --radius: 0.75rem;
   --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.08), 0 5px 20px rgba(0, 0, 0, 0.05);
   --shadow-soft: 0 4px 20px -4px hsl(210 60% 18% / 0.15);
   --gradient-ocean: linear-gradient(135deg, hsl(210, 60%, 18%) 0%, hsl(205, 85%, 50%) 50%, hsl(190, 85%, 50%) 100%);
   --gradient-sky: linear-gradient(180deg, hsl(200, 60%, 92%) 0%, hsl(195, 50%, 96%) 100%);
   --gradient-hero: linear-gradient(135deg, hsl(210 60% 15% / 0.9) 0%, hsl(205 75% 25% / 0.7) 100%);
   --shadow-glow: 0 0 40px hsl(190 85% 50% / 0.3);
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Outfit', sans-serif;
   background: var(--bg);
   color: var(--fg);
   min-height: 100vh;
   overflow-x: hidden;
}

/* ---- HERO ---- */
#hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

#hero-bg {
   position: absolute;
   inset: 0;
   background: url('../img/hero.jpg') center/cover no-repeat;
}

#hero-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--gradient-hero);
}

.hero-content {
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 0 2rem;
   max-width: 900px;
   margin: 0 auto;
   animation: fadeUp .8s ease both;
}

.hero-logo {
   height: clamp(80px, 12vw, 140px);
   width: auto;
   margin-bottom: 2rem;
   drop-shadow: 0 4px 12px rgba(0, 0, 0, .4);
   animation: fadeUp .6s .2s ease both;
   opacity: 0;
}

.hero-tagline {
   font-family: 'Montserrat', sans-serif;
   font-weight: 300;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .9);
   font-size: 1.875rem;
   font-weight: 300 !important;
   margin-bottom: 1rem;
   animation: fadeUp .6s .4s ease both;
   opacity: 0;
}

.hero-h1 {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
   font-size: clamp(32px, 6vw, 72px);
   color: white;
   line-height: 1.1;
   margin-bottom: 1rem;
   animation: fadeUp .6s .6s ease both;
   opacity: 0;
}

.hero-h1 span {
   color: var(--turquoise);
}

.hero-sub {
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   color: rgba(255, 255, 255, .88);
   font-size: clamp(15px, 1.8vw, 20px);
   max-width: 600px;
   margin: 0 auto 2.5rem;
   line-height: 1.6;
   animation: fadeUp .6s .8s ease both;
   opacity: 0;
}

.hero-cta {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   background: var(--gradient-ocean);
   color: white;
   padding: 1rem 2.5rem;
   border-radius: 0.75rem;
   border: none;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   font-size: 1rem;
   letter-spacing: inherit;
   cursor: pointer;
   box-shadow: 0 8px 32px hsl(205 85% 50% / 0.4);
   transition: transform .2s, box-shadow .2s;
   animation: fadeUp .6s 1s ease both;
   opacity: 0;
}

.hero-cta:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 40px hsl(205 85% 50% / 0.5);
}

.hero-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   justify-content: center;
   margin-top: 6rem;
   color: rgba(255, 255, 255, .7);
   font-family: 'Montserrat', sans-serif;
   font-size: .875rem;
   animation: fadeIn .6s 1.4s ease both;
   opacity: 0;
}

.hero-badge {
   display: flex;
   align-items: center;
   gap: .5rem;
}

.hero-badge-icon {
   font-size: 1.5rem;
   line-height: 2rem;
}

.scroll-indicator {
   position: absolute;
   bottom: 1rem;
   left: 50%;
   transform: translateX(-50%);
   width: 1.5rem;
   height: 2.5rem;
   border: 2px solid rgba(255, 255, 255, .3);
   border-radius: 1rem;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: .375rem;
   animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-dot {
   width: 4px;
   height: 8px;
   background: rgba(255, 255, 255, .5);
   border-radius: 2px;
}

/* ---- UPLOAD AREA ---- */

.upload-area-container {
   max-width: 700px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.upload-area-title {
   font-weight: 600;
   margin-bottom: .5rem;
   font-size: .9rem;
}

.upload-area-subtitle {
   margin-bottom: 10px;
   font-size: .875rem;
   color: var(--muted-fg);
}

.upload-label {
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: .75rem;
   margin-top: 10px;
   padding: 2.5rem;
   border: 2px dashed var(--border);
   border-radius: var(--radius);
   cursor: pointer;
   transition: border-color .2s;
   background-color: #FFFFFF;
   text-align: center;
   justify-content: center;
}

.upload-label .opt-icon {
   width: 3em;
   height: 3em;
   background-color: var(--muted);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   color: var(--muted-fg);
   margin-bottom: 10px;
}

/* ---- PROJECT TYPE ---- */

.project-type h3 {
   font-weight: 600 !important;
   line-height: 2rem !important;
   margin-bottom: 10px !important;
}

.project-type p {
   line-height: 1.625 !important;
}

.project-type .opt-icon {
   width: 2.5em;
   height: 2.5em;
   background-color: var(--muted);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   color: var(--muted-fg);
}

/* ---- WIZARD OVERLAY ---- */
#wizard {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 50;
   background: var(--gradient-sky);
   overflow-y: auto;
   font-family: 'Montserrat', sans-serif;
}

#wizard.active {
   display: block;
   animation: fadeIn .3s ease both;
}

/* Header */
.wiz-header {
   position: sticky;
   top: 0;
   z-index: 10;
   background: white;
   padding: 1.25rem 2rem 1rem;
}

.wiz-header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.wiz-logo {
   height: 40px;
   width: auto;
}

.wiz-close {
   background: transparent;
   border: none;
   cursor: pointer;
   color: var(--fg);
   font-size: 1.25rem;
   line-height: 1;
   padding: .25rem;
   opacity: .6;
   transition: opacity .15s;
}

.wiz-close:hover {
   opacity: 1;
}

.wiz-progress-row {
   display: flex;
   justify-content: space-between;
   font-size: .75rem;
   color: var(--muted-fg);
   margin: .75rem 0 .4rem;
}

.wiz-progress-bar {
   height: 6px;
   background: var(--muted);
   border-radius: 3px;
   overflow: hidden;
}

.wiz-progress-fill {
   height: 100%;
   background: var(--gradient-ocean);
   border-radius: 3px;
   transition: width .4s ease;
}

/* Step indicator */
.step-indicator {
   display: none;
   margin: 2rem 0 0;
   padding: 0 2rem;
   align-items: center;
   justify-content: center;
   gap: .5rem;
}

@media(min-width:768px) {
   .step-indicator {
      display: flex;
   }
}

.step-dot {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .8rem;
   font-weight: 600;
   transition: all .3s;
   flex-shrink: 0;
   position: relative;
}

.step-dot .step-lbl {
   position: absolute;
   bottom: -1.5rem;
   left: 50%;
   transform: translateX(-50%);
   font-size: .6rem;
   white-space: nowrap;
   font-weight: 500;
}

.step-dot.done {
   background: var(--primary);
   color: white;
}

.step-dot.active {
   background: var(--turquoise);
   color: white;
   transform: scale(1.1);
}

.step-dot.pending {
   background: var(--muted);
   color: var(--muted-fg);
}

.step-dot.pending .step-lbl {
   color: var(--muted-fg);
}

.step-dot.done .step-lbl,
.step-dot.active .step-lbl {
   color: var(--fg);
   font-weight: 600;
}

.step-line {
   flex: 1;
   max-width: 2rem;
   height: 2px;
   background: var(--muted);
   border-radius: 1px;
   overflow: hidden;
}

.step-line-fill {
   height: 100%;
   background: var(--gradient-ocean);
   border-radius: 1px;
   transition: transform .3s;
   transform-origin: left;
}

/* Main content area */
.wiz-main {
   padding: 3rem 2rem 8rem;
}

.step-panel {
   display: none;
   animation: fadeUp .3s ease both;
}

.step-panel.active {
   display: block;
}

/* Step heading */
.step-h2 {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: clamp(1.5rem, 4vw, 2.25rem);
   color: var(--fg);
   text-align: center;
   margin-bottom: .75rem;
}

.step-sub {
   font-size: 1rem;
   color: var(--muted-fg);
   text-align: center;
   margin-bottom: 2rem;
   line-height: 1.6;
}

.step-sub2 {
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--fg);
   text-align: center;
   margin-bottom: 1rem;
}

/* Cards grid */
.cards-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.25rem;
   max-width: 700px;
   margin: 0 auto;
}

.cards-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.25rem;
   max-width: 900px;
   margin: 0 auto;
}

.cards-4 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   max-width: 700px;
   margin: 0 auto;
}

@media(min-width:768px) {
   .cards-4 {
      grid-template-columns: repeat(4, 1fr);
   }
}

@media(max-width:600px) {

   .cards-2,
   .cards-3 {
      grid-template-columns: 1fr;
   }
}

/* Option card */
.opt-card {
   position: relative;
   background: var(--card);
   border: 2px solid var(--card);
   border-radius: var(--radius);
   padding: 1.25rem;
   cursor: pointer;
   transition: all .2s;
   box-shadow: var(--shadow-card);
   text-align: center;
}

.opt-card:hover {
   border-color: hsl(205, 85%, 70%);
   box-shadow: var(--shadow-soft);
}

.opt-card.selected {
   border-color: var(--primary);
   background: linear-gradient(145deg, white, hsl(205, 85%, 98%));
}

.opt-card .check {
   position: absolute;
   top: .75rem;
   right: .75rem;
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
   background: var(--gradient-ocean);
   display: none;
   align-items: center;
   justify-content: center;
}

.opt-card.selected .check {
   display: flex;
}

.opt-card .check svg {
   width: .875rem;
   height: .875rem;
   stroke: white;
   stroke-width: 2.5;
   fill: none;
}

.opt-card h3 {
   font-weight: 600;
   font-size: 1rem;
   color: var(--fg);
   margin-bottom: .25rem;
}

.opt-card p {
   font-size: .8rem;
   color: var(--muted-fg);
   line-height: 1.4;
}

.opt-card .opt-icon {
   font-size: 2rem;
   margin-bottom: .75rem;
}

/* Pool style card with image */
.style-card {
   position: relative;
   background: var(--card);
   border: 2px solid var(--card);
   border-radius: var(--radius);
   overflow: hidden;
   cursor: pointer;
   transition: all .2s;
   box-shadow: var(--shadow-card);
}

.style-card:hover {
   border-color: hsl(205, 85%, 70%);
   transform: translateY(-2px);
}

.style-card.selected {
   border-color: var(--primary);
}

.style-card .style-img {
   width: 100%;
   height: 160px;
   object-fit: cover;
   transition: transform .5s;
}

.style-card:hover .style-img {
   transform: scale(1.08);
}

.style-card .style-img-wrap {
   overflow: hidden;
   position: relative;
}

.style-card .style-img-wrap::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .15) 50%, transparent 100%);
}

.style-card .style-body {
   padding: 1rem;
}

.style-card .style-body h3 {
   font-weight: 600;
   font-size: 1rem;
   color: var(--fg);
   margin-bottom: .25rem;
}

.style-card .style-body p {
   font-size: .8rem;
   color: var(--muted-fg);
}

.style-card .check {
   position: absolute;
   top: .75rem;
   right: .75rem;
   z-index: 2;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   background: var(--gradient-ocean);
   display: none;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.style-card.selected .check {
   display: flex;
}

.style-card .check svg {
   width: 1rem;
   height: 1rem;
   stroke: white;
   stroke-width: 2.5;
   fill: none;
}

.style-card .sel-border {
   display: none;
   position: absolute;
   inset: 0;
   border-radius: var(--radius);
   pointer-events: none;
}

.style-card.selected .sel-border {
   display: block;
}

/* Feature chips */
.chips-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: .75rem;
   max-width: 800px;
   margin: 0 auto;
}

.chip {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .625rem 1rem;
   border-radius: .75rem;
   border: 2px solid var(--border);
   background: var(--card);
   cursor: pointer;
   transition: all .2s;
   font-family: 'Montserrat', sans-serif;
   font-size: .875rem;
   font-weight: 500;
}

.chip-icon {
   font-size: 1.25rem;
   line-height: 1.75rem;
}

.chip:hover {
   border-color: hsl(205, 85%, 70%);
   box-shadow: var(--shadow-soft);
}

.chip.selected {
   border-color: var(--primary);
   background: hsl(205, 85%, 97%);
   color: var(--primary);
}

.chip .chip-check {
   width: 1.2rem;
   height: 1.2rem;
   border-radius: 50%;
   background: var(--gradient-ocean);
   display: none;
   align-items: center;
   justify-content: center;
}

.chip.selected .chip-check {
   display: flex;
}

.chip .chip-check svg {
   width: .65rem;
   height: .65rem;
   stroke: white;
   stroke-width: 3;
   fill: none;
}

/* Section sub-heading inside step */
.section-sub {
   margin-top: 2.5rem;
   margin-bottom: 1rem;
}

/* Floating input */
.float-field {
   position: relative;
}

.float-field input,
.float-field textarea {
   width: 100%;
   padding: 1.25rem 1rem .5rem;
   border: 2px solid var(--border);
   border-radius: var(--radius);
   background: var(--card);
   color: var(--fg);
   font-family: 'Outfit', sans-serif;
   font-size: 1rem;
   transition: border-color .2s, box-shadow .2s;
   outline: none;
   resize: vertical;
}

.float-field input:hover,
.float-field textarea:hover {
   border-color: hsl(210, 20%, 65%);
}

.float-field input:focus,
.float-field textarea:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 4px hsl(205, 85%, 50%, .1);
}

.float-field label {
   position: absolute;
   left: 1rem;
   pointer-events: none;
   font-family: 'Montserrat', sans-serif;
   color: var(--muted-fg);
   transition: all .2s ease;
   font-size: 1rem;
   top: 50%;
   transform: translateY(-50%);
}

.float-field textarea~label {
   top: 1.1rem;
   transform: none;
}

.float-field input:focus~label,
.float-field input:not(:placeholder-shown)~label,
.float-field textarea:focus~label,
.float-field textarea:not(:placeholder-shown)~label {
   top: .5rem;
   transform: none;
   font-size: .7rem;
   color: var(--primary);
   font-weight: 500;
}

.plain-select {
   width: 100%;
   padding: 0.9rem 1rem;
   border: 2px solid var(--border);
   border-radius: var(--radius);
   background: var(--card);
   color: var(--muted-fg);
   font-family: 'Outfit', sans-serif;
   font-size: 1rem;
   transition: border-color .2s, box-shadow .2s;
   outline: none;
   appearance: none;
   cursor: pointer;
   font-weight: 400;
}

.plain-select option {
   font-weight: 400;
}

.plain-select:hover {
   border-color: hsl(210, 20%, 65%);
}

.plain-select:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 4px hsl(205, 85%, 50%, .1);
}

.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.25rem;
   margin-bottom: 1.25rem;
}

@media(max-width:540px) {
   .contact-grid {
      grid-template-columns: 1fr;
   }
}

/* Summary */
.summary-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
   max-width: 720px;
   margin: 0 auto 1rem;
}

@media(max-width:540px) {
   .summary-grid {
      grid-template-columns: 1fr;
   }
}

.sum-card {
   background: rgba(255, 255, 255, .7);
   backdrop-filter: blur(8px);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1rem;
   display: flex;
   align-items: center;
   gap: .75rem;
   box-shadow: var(--shadow-soft);
}

.sum-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   background: hsl(205, 85%, 50%, .1);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary);
}

.sum-label {
   font-size: .75rem;
   color: var(--muted-fg);
}

.sum-value {
   font-weight: 600;
   font-size: .9rem;
   color: var(--fg);
}

.tag-list {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   margin-top: .5rem;
}

.tag {
   padding: .25rem .75rem;
   border-radius: 1rem;
   background: hsl(205, 85%, 50%, .1);
   color: var(--primary);
   font-size: .8rem;
   font-weight: 500;
}

.sum-full {
   max-width: 720px;
   margin: 0 auto 1rem;
}

/* Footer nav */
.wiz-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(255, 255, 255, .95);
   backdrop-filter: blur(12px);
   border-top: 1px solid var(--border);
   padding: 1rem 1.5rem;
   z-index: 10;
}

.wiz-footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.btn-back {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .625rem 1.25rem;
   border-radius: var(--radius);
   border: 1.5px solid var(--border);
   background: transparent;
   font-family: 'Montserrat', sans-serif;
   font-weight: 500;
   color: var(--fg);
   cursor: pointer;
   transition: background .15s;
}

.btn-back:hover {
   background: var(--muted);
}

.btn-back:disabled {
   opacity: .4;
   cursor: not-allowed;
}

.btn-next {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .625rem 1.5rem;
   border-radius: var(--radius);
   background: var(--gradient-ocean);
   border: none;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   color: white;
   cursor: pointer;
   transition: opacity .15s, transform .15s;
}

.btn-next:hover:not(:disabled) {
   transform: translateY(-1px);
   opacity: .9;
}

.btn-next:disabled {
   opacity: .4;
   cursor: not-allowed;
}

.btn-submit {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .625rem 1.5rem;
   border-radius: var(--radius);
   background: linear-gradient(135deg, hsl(38, 75%, 55%), hsl(35, 80%, 45%));
   border: none;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   color: white;
   cursor: pointer;
   transition: opacity .15s, transform .15s;
   box-shadow: 0 4px 16px hsl(38, 75%, 55%, .35);
}

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

.btn-submit:disabled {
   opacity: .6;
   cursor: not-allowed;
}

/* Success screen */
#success {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 60;
   background: var(--gradient-sky);
   overflow-y: auto;
   font-family: 'Montserrat', sans-serif;
}

#success.active {
   display: block;
   animation: fadeIn .4s ease both;
}

.success-inner {
   max-width: 720px;
   margin: 0 auto;
   padding: 3rem 1.5rem;
   text-align: center;
}

.success-circle {
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
   background: var(--gradient-ocean);
   margin: 0 auto 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-glow);
   animation: popIn .5s .2s ease both;
   opacity: 0;
}

.success-circle svg {
   width: 3rem;
   height: 3rem;
   stroke: white;
   stroke-width: 2.5;
   fill: none;
}

.success-h1 {
   font-size: clamp(1.75rem, 4vw, 2.5rem);
   font-weight: 700;
   color: var(--fg);
   margin-bottom: 1rem;
}

.success-p {
   color: var(--muted-fg);
   line-height: 1.6;
   margin-bottom: .5rem;
}

.reviews-section {
   margin: 3rem 0;
   text-align: left;
}

.reviews-h2 {
   font-size: 1.5rem;
   font-weight: 600;
   text-align: center;
   color: var(--fg);
   margin-bottom: .5rem;
}

.stars {
   display: flex;
   gap: .2rem;
   justify-content: center;
   margin-bottom: 2rem;
}

.star {
   color: #FBBF24;
   font-size: 1.25rem;
}

.review-card {
   background: rgba(255, 255, 255, .7);
   backdrop-filter: blur(8px);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1.5rem;
   margin-bottom: 1rem;
}

.review-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: .75rem;
}

.review-rating {
   display: flex;
   align-items: center;
   gap: .5rem;
}

.review-num {
   font-size: 1.5rem;
   font-weight: 700;
   color: #22C55E;
}

.review-mini-stars {
   display: flex;
   gap: .15rem;
}

.review-mini-star {
   color: #FBBF24;
   font-size: .875rem;
}

.review-date {
   font-size: .8rem;
   color: var(--muted-fg);
}

.review-text {
   color: var(--fg);
   line-height: 1.6;
   margin-bottom: 1rem;
   font-size: .95rem;
}

.review-author {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.review-avatar {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   background: var(--muted);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: .8rem;
   color: var(--muted-fg);
   margin-right: .75rem;
}

.review-name {
   font-weight: 500;
   color: var(--fg);
}

.success-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
   margin-top: 2rem;
}

.btn-website {
   padding: .75rem 2rem;
   border-radius: 3rem;
   background: var(--gradient-ocean);
   color: white;
   border: none;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   cursor: pointer;
   transition: transform .15s;
}

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

/* Spinner */
.spinner {
   width: 1rem;
   height: 1rem;
   border: 2px solid rgba(255, 255, 255, .3);
   border-top-color: white;
   border-radius: 50%;
   animation: spin .7s linear infinite;
}

/* JT hidden form */
.jtwf {
   display: none !important;
   position: absolute !important;
   left: -9999px !important;
}

/* Animations */
@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(20px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes popIn {
   0% {
      opacity: 0;
      transform: scale(0)
   }

   60% {
      transform: scale(1.15)
   }

   100% {
      opacity: 1;
      transform: scale(1)
   }
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes scrollBounce {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(6px)
   }
}
/* ---- UPLOAD THUMBNAILS ---- */
.thumb-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
   margin-top: .75rem;
}

.thumb-wrap {
   position: relative;
   width: 100%;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 1px 6px rgba(0,0,0,.08);
   overflow: hidden;
   cursor: default;
}

.thumb-wrap:hover .thumb-delete {
   opacity: 1;
}

.thumb-media {
   width: 100%;
   height: 130px;
   overflow: hidden;
   background: #e8edf2;
   position: relative;
}

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

.thumb-doc {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #8a9bb0;
   background: #e8edf2;
}

.thumb-name {
   font-size: .8rem;
   padding: .5rem .75rem .6rem;
   color: var(--fg);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   background: #fff;
}

.thumb-delete {
   position: absolute;
   top: 6px;
   right: 6px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: #ef4444;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity .15s;
   padding: 0;
   z-index: 2;
}

.thumb-delete:hover {
   background: #dc2626;
}
/* ---- FIELD VALIDATION ERRORS ---- */
.field-wrap {
   display: flex;
   flex-direction: column;
}

.field-error {
   font-size: .75rem;
   color: #ef4444;
   margin-top: .3rem;
}

.input-error {
   border-color: #ef4444 !important;
   box-shadow: 0 0 0 2px rgba(239,68,68,.15) !important;
}

.tag-reno {
   background: rgba(234, 88, 12, 0.1);
   color: #ea580c;
   border: 1px solid rgba(234, 88, 12, 0.2);
}