:root{
  --bg:#FFFFFF;

  --funix-blue:#0A1F44;
  --funix-blue-2:#0D2857;

  --funix-orange:#FF6A00;
  --funix-orange-dark:#F45F00;

  --text:#334155;
  --text-soft:#475569;
  --text-muted:#64748B;

  --surface:#F7F9FC;
  --surface-2:#F3F6FA;

  --border:#E5E7EB;
  --border-soft:rgba(229,231,235,.8);

  --accent-soft:#FFF3EA;

  --shadow:0 12px 30px rgba(15,23,42,.08);
  --shadow-soft:0 8px 20px rgba(15,23,42,.05);

  --radius:20px;
  --radius-sm:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2{
  font-family:Manrope,sans-serif;
  color:var(--funix-blue);
  margin:0 0 12px;
  letter-spacing:-.04em;
}
h2{
  font-size:24px;
  line-height:1.12;
}
p{
  margin:0 0 12px;
  line-height:1.68;
}
img{
  max-width:100%;
  display:block;
}

.wrap{
  width:100%;
  background:var(--bg);
}

.section{
  padding:28px 0;
}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}



.muted{
  background:
    linear-gradient(180deg, rgba(247,249,252,.92), rgba(247,249,252,1));
}

.logo{
  margin-bottom:12px;
}
.logo img{
  height:42px;
  width:auto;
  display:block;
}

.hero h1{
  font-size:34px;
  line-height:1.04;
}

.sub{
  font-size:17px;
  line-height:1.55;
  color:var(--text-soft);
}

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 12px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--border);
  color:#0F172A;
  font-size:12px;
  font-weight:600;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}

.chip span{
  color:var(--funix-orange);
  font-weight:800;
}

.trustline{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.trustline-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}

.trustline-copy strong{
  font-size:14px;
  font-weight:600;
  color:var(--text-muted);
}

.trustline-copy span{
  font-size:12px;
  font-weight:500;
  color:var(--text-muted);
}

.heroimg{
  margin:14px 0 12px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--surface-2);
  aspect-ratio:5.6/3;
  border:1px solid var(--border-soft);
}
.heroimg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  position:relative;
  overflow:hidden;

  background:#FF6A00;

  color:#fff;
  text-decoration:none;
  text-align:center;

  padding:18px 20px;
  min-height:62px;

  border-radius:18px;

  font-weight:800;
  font-size:17px;

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      transparent 38%
    );
  pointer-events:none;
}

.cta:active{
  transform:translateY(2px) scale(.995);
  filter:brightness(.98);
}

.cta:hover{box-shadow:0 12px 22px rgba(255,106,0,.26)}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.cardimg{
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  background:var(--bg);
  border:1px solid var(--border-soft);
}

.trust-card{
  background:var(--bg);
  border:1px solid rgba(229,231,235,.85);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

.trust-copy{
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.trust-copy strong{
  color:var(--funix-blue);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}

.trust-copy span{
  color:var(--text-soft);
  font-size:13px;
  line-height:1.45;
}

.cardimg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* lighter, more human checklist */
.checklist{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  line-height:1.4;
  color:#0F172A;
}
.check .dot{
  width:9px;
  height:9px;
  border-radius:999px;
  margin-top:7px;
  flex:0 0 auto;
  background:var(--funix-orange);
  box-shadow:0 0 0 4px rgba(255,106,0,.10);
}
.check span{
  font-weight:500;
  color:#0F172A;
  font-size:15px;
}
.check b{
  color:var(--funix-blue);
  font-weight:700;
}

.steps{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:14px;
}

.step-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.step-title{
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  color:var(--bg);
}

.step-sub{
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
  font-weight:500;
}

.steps::before{
  content:"";
  position:absolute;
  left:13px;
  top:14px;
  bottom:58px;   /* <-- era 18 */
  width:2px;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.32),
    rgba(255,255,255,.10)
  );
}

.steps .step{
  position:relative;
  display:flex;
  align-items:flex-start;
  min-height:72px;
  padding-left:44px;
  margin:0;
}

.step .num{
  position:absolute;
  left:0;
  top:2px;

  width:28px;
  height:28px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--bg);
  border:1px solid var(--border);
  color:var(--funix-blue);
  font-size:13px;
  font-weight:800;
}
.step .num.done{
  background:var(--funix-orange);
  border-color:var(--funix-orange);
  color:var(--bg);
  box-shadow:0 4px 10px rgba(255,106,0,.22);
}

.ba-section{
  margin-top:8px;
}
.results-showcase{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.results-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.ba{
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--bg);
  border:1px solid var(--border-soft);
}
.ba img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ba-hero{
  aspect-ratio:16/9;
}
.ba-mini{
  aspect-ratio:1/1;
  border-radius:16px;
}

.map{
  height:220px;
  border-radius:18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,106,0,.10), transparent 30%),
    linear-gradient(135deg,var(--surface-2),#e2e8f0);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:var(--text-soft);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:var(--shadow-soft);
  line-height:1.5;
}

.faq-item{
  background:var(--bg);
  border:1px solid rgba(229,231,235,.9);
  border-radius:18px;
  padding:18px;
  margin-bottom:14px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.faq-item.open{
  border-color:rgba(255,106,0,.18);
  box-shadow:0 14px 28px rgba(15,23,42,.07);
}
.faq-q{
  width:100%;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;

  background:none;
  border:none;
  padding:0;
  margin:0;

  font:inherit;
  color:#0F172A;
  text-align:left;
  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  font-weight:600;
}
.faq-q span:first-child{
  padding-right:8px;
}
.faq-q span:last-child{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft);
  color:var(--funix-orange);
  font-size:18px;
  flex:0 0 auto;
}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;

  opacity:0;
  margin-top:0;

  transition:
    grid-template-rows .28s ease,
    opacity .22s ease,
    margin-top .22s ease;

  color:var(--text-soft);
  line-height:1.6;
}

.faq-answer > div{
  overflow:hidden;
}

.faq-q[aria-expanded="true"] + .faq-answer{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:14px;
}

.footer{
  background:var(--funix-blue);
  color:var(--bg);
  padding:30px 18px 100px;
}

.footer-tagline{
  color:rgba(255,255,255,.72);
  line-height:1.55;
  font-size:15px;
  margin-bottom:18px;
}
.footer-info{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-row{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.88);
  line-height:1.55;
  font-size:15px;
}
.footer-row strong{
  color:var(--bg);
  font-weight:600;
}

.sticky{
  position:fixed;
  bottom:0;
  left:50%;
  width:calc(100% - 24px);
  max-width:420px;

  transform:translateX(-50%) translateY(120%);
  transition:transform .25s ease;

  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);

  padding:
    10px
    14px
    calc(10px + env(safe-area-inset-bottom));

  border-top:1px solid var(--border);
  border-radius:18px 18px 0 0;
  z-index:100;
  box-shadow:0 -8px 24px rgba(15,23,42,.06);
}

.sticky .cta{
  border-radius:14px;
}

.maps-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  text-align:center;
  text-decoration:none;
  margin-top:16px;
  padding:15px 16px;
  border-radius:16px;
  border:2px solid rgba(255,106,0,.28);
  background:#FFF8F2;
  color:var(--funix-orange);
  font-weight:700;
  font-size:15px;
  box-shadow:0 4px 14px rgba(255,106,0,.08);
  transition:all .15s ease;
}

.maps-btn:active{
  transform:translateY(1px);
}

.location-section{
  padding-top:34px;
  padding-bottom:34px;
}

.location-sub{
  font-size:16px;
  line-height:1.55;
  color:var(--text-soft);
  margin:0 0 18px;
}

.map-card{
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border-soft);
  background:var(--bg);
}

.map-card img{
  width:100%;
  display:block;
}

.section-faq{
  padding-top:34px;
}

.process-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,var(--funix-blue) 0%, var(--funix-blue-2) 100%);
  color:var(--bg);
  padding-top:36px;
  padding-bottom:42px;
}

.process-bg{
  position:absolute;
  right:-72px;
  top:50%;
  transform:translateY(-50%);
  width:240px;
  height:240px;
  opacity:.06;
  pointer-events:none;
  z-index:0;
}

.process-bg img{
  width:100%;
  height:100%;
  display:block;
  filter:brightness(0) invert(1);
}

.process-section h2,
.process-section .steps{
  position:relative;
  z-index:1;
}

.process-section h2{
  color:var(--bg);
}

.process-section .steps::before{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.32),
    rgba(255,255,255,.10)
  );
}

.process-section .step{
  color:var(--bg);
}

.process-section .step .num{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:var(--bg);
  box-shadow:none;
  backdrop-filter:blur(8px);
}

.process-section .step .num.done{
  background:var(--funix-orange);
  border-color:var(--funix-orange);
  color:var(--bg);
  box-shadow:0 6px 14px rgba(255,106,0,.28);
}

.icon-inline{
  width:16px;
  height:16px;
  flex:0 0 auto;
  display:block;
  color:var(--funix-orange);
}
.icon-inline svg,
.icon-inline img{
  width:100%;
  height:100%;
  display:block;
}

.icon-nav{
  width:15px;
  height:15px;
  filter:brightness(0) saturate(100%)
    invert(48%) sepia(92%)
    saturate(2694%)
    hue-rotate(1deg)
    brightness(103%)
    contrast(104%);
}

.footer-svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
  filter:brightness(0) invert(1);
  margin-top:2px;
}

.hero-pin{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
}

.results-switcher{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.results-main{
  border-radius:20px;
  overflow:hidden;

  border:2px solid var(--funix-blue);

  background:var(--bg);

  box-shadow:
    0 12px 28px rgba(10,31,68,.08),
  0 0 0 1px rgba(10,31,68,.04);
    transition:opacity .22s ease;
  position:relative;
  
}

.results-main.is-switching{
  opacity:.52;
}

.results-main-image{
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.results-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .18s ease;
}

.footer-logo{
  height:30px;
  width:auto;
  display:block;
  margin-bottom:1px;
}

.results-thumbs{
  position:relative;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;

  scrollbar-width:none;
  -ms-overflow-style:none;
}

.results-thumbs::-webkit-scrollbar{
  display:none;
}

.result-thumb{
  flex:0 0 110px;
  border:none;
  background:var(--bg);
  padding:0;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  scroll-snap-align:start;
  border:2px solid transparent;
  transition:all .18s ease;
  box-shadow:0 4px 10px rgba(15,23,42,.05);
}

.thumb-label{
  padding:10px 10px 11px;
  background:var(--bg);
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  color:var(--funix-blue);
  text-align:left;
  border-top:1px solid var(--border-soft);
}

.thumb-image{
  height:82px;
  overflow:hidden;
}

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

.result-thumb.active{
  border-color:rgba(10,31,68,.22);
  box-shadow:
    0 0 0 2px rgba(10,31,68,.08),
    0 8px 18px rgba(10,31,68,.10);
}

.price-reframe{
  padding-top:28px;
  padding-bottom:8px;
}

.price-card{
  background:linear-gradient(
    180deg,
    #FFF8F2 0%,
    #FFFFFF 100%
  );

  border:1px solid rgba(255,106,0,.14);
  border-radius:22px;

  padding:24px 20px;

  box-shadow:
    0 10px 24px rgba(255,106,0,.06),
    0 1px 0 rgba(255,255,255,.8);
}

.phone-card{
  margin-top:14px;

  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 16px;

  border-radius:16px;

  background:var(--surface);
  border:1px solid var(--border);

  text-decoration:none;

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease;
}

.phone-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(10,31,68,.12);
}

.phone-card:active{
  transform:translateY(1px);
}

.phone-card-icon{
  width:20px;
  height:20px;
  flex:0 0 auto;

  filter:
    brightness(0)
    saturate(100%)
    invert(16%)
    sepia(24%)
    saturate(1692%)
    hue-rotate(191deg)
    brightness(94%)
    contrast(95%);
}

.phone-card-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}

.phone-card-eyebrow{
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
}

.phone-card-copy strong{
  font-size:15px;
  font-weight:700;
  color:var(--funix-blue);
}

.phone-card-number{
  font-size:13px;
  font-weight:600;
  color:var(--text-soft);
}

.price-card h2{
  font-size:28px;
  line-height:1.08;
  margin-bottom:12px;
}

.price-copy{
  font-size:16px;
  line-height:1.55;
  color:var(--text-soft);
  margin-bottom:18px;
}

.price-badges{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}

.price-badge{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.45;
  color:#0F172A;
  font-weight:600;
}

.price-badge .dot{
  width:9px;
  height:9px;
  border-radius:999px;
  margin-top:6px;
  flex:0 0 auto;

  background:var(--funix-orange);

  box-shadow:0 0 0 4px rgba(255,106,0,.10);
}

.footer-phone-link{
  color:var(--bg);
  text-decoration:none;
  font-weight:700;
  transition:opacity .15s ease;
}

.footer-phone-link:hover,
.footer-phone-link:focus{
  opacity:.8;
  text-decoration:underline;
}

.differentiation-section{
  padding-top:38px;
  padding-bottom:42px;
}

.differentiation-section h2{
  margin-bottom:22px;
}

.differentiation-section .checklist{
  gap:16px;
}

.case-meta{
  padding:16px 16px 17px;
  background:linear-gradient(180deg,var(--funix-blue) 0%, var(--funix-blue-2) 100%);
}

.case-meta strong{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  color:var(--bg);
  margin-bottom:4px;
}

.footer-legal{
  margin-top:22px;
  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.12);

  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.58);
}

.case-meta span{
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:rgba(255,255,255,.78);
}

.cta-results{
  margin-top:20px;
}

.swipe-hint{
  position:absolute;
  top:50%;
  right:10px;
  z-index:8;

  width:34px;
  height:34px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,.92);
  border:1px solid var(--border);

  box-shadow:0 6px 14px rgba(15,23,42,.08);

  color:var(--funix-blue);
  font-size:16px;
  font-weight:700;

  pointer-events:none;

  opacity:.85;
animation:swipePulse 1.8s ease-in-out infinite;
  transform:translateY(-50%);
  

  transition:
    opacity .45s ease,
    transform .45s ease;
}

.cta-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
  filter:brightness(0) invert(1);
}

@keyframes swipePulse{
  0%{
    margin-right:0;
    opacity:.78;
  }

  30%{
    margin-right:6px;
    opacity:1;
  }

  60%{
    margin-right:0;
    opacity:.9;
  }

  100%{
    margin-right:0;
    opacity:.78;
  }
}

@media(min-width:900px){
  .section{
    padding:42px 28px;
  }

  .heroimg{
    margin:0 0 16px;
    aspect-ratio:5/4;
  }
  .grid2{
    grid-template-columns:repeat(4,1fr);
  }
  .results-showcase{
    max-width:900px;
  }
  .results-grid{
    gap:14px;
  }
  
  .section-trust{
  padding-top:34px;
  padding-bottom:34px;
}

.section-results{
  padding-top:34px;
  padding-bottom:36px;
}



}