:root{
  --bg:#010101;
  --surface:#111310;
  --text:#FEFEFE;
  --muted:#b4b7ae;
  --accent:#6A8B23;
  --accent-highlight:#6A8B23;
  --line:#ffffff16;
  --font:'Segoe UI',Arial,sans-serif;
  color-scheme:dark
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:84px
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 var(--font);
  -webkit-font-smoothing:antialiased
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  cursor:pointer
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button:disabled{
  cursor:wait
}
svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
img{
  max-width:100%
}
[hidden]{
  display:none!important
}
.icon-library{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.container{
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}
.section{
  padding-block:110px
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  line-height:1.12
}
h1{
  font-size:clamp(44px,4.5vw,65px);
  font-weight:650;
  letter-spacing:-2.8px;
  max-width:630px
}
h2{
  font-size:clamp(34px,3.2vw,46px);
  font-weight:620;
  letter-spacing:-1.7px
}
h3{
  font-size:21px;
  font-weight:600;
  letter-spacing:-.5px
}
p{
  color:var(--muted)
}
:focus-visible{
  outline:3px solid var(--accent-highlight);
  outline-offset:6px
}
.skip-link{
  position:fixed;
  z-index:100;
  top:12px;
  left:12px;
  padding:12px 20px;
  background:white;
  color:#111;
  transform:translateY(-150%)
}
.skip-link:focus{
  transform:translateY(0)
}
.eyebrow{
  font-size:11px;
  letter-spacing:2px;
  font-weight:700;
  color:var(--accent-highlight);
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:10px
}
.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:54px;
  padding:14px 22px;
  border-radius:7px;
  background:var(--accent);
  color:white;
  border:1px solid #ffffff12;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  transition:background .2s,transform .2s,box-shadow .2s
}
.button:hover{
  background:#6A8B23;
  transform:translateY(-2px);
  box-shadow:0 8px 32px #6A8B2335
}
.button:active{
  transform:translateY(0)
}
.button svg{
  width:19px;
  height:19px
}
.button-small{
  min-height:44px;
  padding:10px 17px;
  font-size:13px
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:600
}
.text-link:hover{
  color:var(--accent-highlight)
}
.text-link svg{
  width:19px
}
.muted{
  color:#939393
}
.gradient-text{
  background:linear-gradient(100deg,#6A8B23,#6A8B23);
  color:transparent;
  background-clip:text
}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#010101f0;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}
.nav-row{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.6px;
  line-height:1.2;
  overflow-wrap:anywhere
}
.brand-symbol{
  display:grid;
  place-items:center;
  background:linear-gradient(140deg,#6A8B23,#425716);
  width:33px;
  height:33px;
  border-radius:10px;
  flex-shrink:0
}
.brand-symbol svg{
  width:23px;
  height:23px
}
.brand-dot{
  color:var(--accent-highlight);
  margin-left:-8px
}
.brand-logo{
  width:34px;
  height:34px;
  object-fit:contain
}
.nav-row nav{
  display:flex;
  align-items:center;
  gap:30px
}
.nav-row nav>a:not(.button){
  font-size:13px;
  color:#c7c7c7;
  transition:color .2s
}
.nav-row nav>a:hover{
  color:white
}
.menu-toggle{
  display:none
}
.hero{
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  min-height:630px;
  padding-block:20px 40px;
  gap:15px
}
.hero-copy{
  position:relative;
  z-index:2
}
.hero h1 span{
  display:block;
  color:#6A8B23
}
.hero .lead{
  max-width:450px;
  font-size:17px;
  margin-top:25px;
  line-height:1.8
}
.actions{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:32px
}
.play-icon{
  font-size:9px;
  border:1px solid #ffffff40;
  border-radius:50%;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  padding-left:2px
}
.hero-notes{
  display:flex;
  gap:25px;
  margin-top:26px;
  font-size:12px;
  color:#b4b4b4
}
.hero-notes span{
  display:flex;
  align-items:center;
  gap:7px
}
.hero-notes svg{
  width:15px;
  height:15px;
  color:#6A8B23
}
.tiny-orbit{
  width:7px;
  height:7px;
  background:var(--accent-highlight);
  border-radius:50%;
  box-shadow:0 0 13px #6A8B2380
}
.hero-art{
  height:570px;
  position:relative;
  min-width:0;
  isolation:isolate
}
.hero-art:before{
  content:'';
  position:absolute;
  inset:7% -8% 0 -5%;
  background:radial-gradient(ellipse,#6A8B234d,transparent 66%);
  z-index:-1
}
.orbit{
  position:absolute;
  border:1px solid #6A8B2312;
  border-radius:50%;
  width:475px;
  height:475px;
  top:35px;
  left:0;
  transform:rotate(-30deg) scaleY(.85)
}
.orbit-two{
  width:570px;
  height:570px;
  top:-10px;
  left:-45px
}
.art-cross{
  position:absolute;
  color:#6A8B23;
  font-size:21px;
  font-weight:200
}
.cross-one{
  top:62px;
  left:50px
}
.cross-two{
  bottom:110px;
  right:12px
}
.phone{
  width:244px;
  height:472px;
  border:5px solid #454545;
  border-radius:39px;
  background:#FEFEFE;
  box-shadow:inset 0 0 0 2px #151515,10px 30px 55px #0008;
  color:#202020;
  position:absolute;
  padding:19px 17px
}
.hero-phone{
  right:34px;
  top:25px;
  transform:rotate(9deg)
}
.phone-island{
  position:absolute;
  top:12px;
  width:80px;
  height:21px;
  left:calc(50% - 40px);
  border-radius:20px;
  background:#0f0f0f
}
.phone-top{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:700
}
.phone-content{
  display:flex;
  align-items:center;
  flex-direction:column;
  padding-top:28px
}
.google-word{
  font-size:23px;
  letter-spacing:-1px;
  font-family:Arial,sans-serif
}
.google-word b{
  font-weight:500
}
.google-word b:nth-child(1),.google-word b:nth-child(4){
  color:#4285f4
}
.google-word b:nth-child(2),.google-word b:nth-child(6){
  color:#ea4335
}
.google-word b:nth-child(3){
  color:#c39506
}
.google-word b:nth-child(5){
  color:#248345
}
.business-avatar{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#f0f2eb;
  color:#6A8B23;
  margin-top:23px;
  margin-bottom:10px
}
.business-avatar svg{
  width:25px
}
.phone-content>strong{
  font-size:18px
}
.phone-subtitle{
  font-size:10px;
  color:#6f6f6f;
  margin-top:4px
}
.outline-stars{
  color:#9b7100;
  font-size:26px;
  white-space:nowrap;
  margin:14px 0
}
.mock-write{
  background:#f0f2eb;
  border:1px solid #f0f2eb;
  padding:8px 10px;
  font-size:10px;
  color:#6A8B23;
  width:100%;
  border-radius:5px;
  display:flex;
  justify-content:space-between
}
.phone-lines{
  width:100%;
  margin-top:23px
}
.phone-lines i{
  display:block;
  height:5px;
  background:#f0f2eb;
  border-radius:4px;
  margin-bottom:9px
}
.phone-lines i:nth-child(2){
  width:85%
}
.phone-lines i:nth-child(3){
  width:60%
}
.phone-bottom{
  position:absolute;
  width:75px;
  height:4px;
  background:#1c1c1c;
  border-radius:4px;
  bottom:9px;
  left:calc(50% - 37px)
}
.nfc-card{
  background:linear-gradient(125deg,#30391c 0%,#171c0e 40%,#010101 100%);
  border-radius:16px;
  border:1px solid #6A8B2388;
  box-shadow:0 30px 50px #0008,inset 0 1px 0 #cccccc88;
  overflow:hidden;
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.nfc-card:before{
  content:'';
  position:absolute;
  width:350px;
  height:350px;
  border:1px solid #c5c5c524;
  border-radius:50%;
  right:-150px;
  top:-75px;
  box-shadow:0 0 0 30px #ffffff04,0 0 0 60px #ffffff03
}
.hero-card{
  position:absolute;
  width:323px;
  height:202px;
  left:0;
  bottom:105px;
  transform:rotate(-12deg);
  padding:23px;
  animation:card-approach 6s ease-in-out infinite
}
.card-top,.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  gap:10px
}
.card-top{
  font-size:12px;
  font-weight:600
}
.card-top svg{
  width:25px;
  height:25px
}
.card-main{
  font-size:23px;
  line-height:1.17;
  letter-spacing:-.7px;
  font-weight:600;
  position:relative
}
.card-main>span{
  color:#6A8B23
}
.card-bottom>span:first-child{
  font-size:7px;
  letter-spacing:1.2px;
  color:#f0f2eb
}
.card-g{
  font:bold 23px Arial
}
.nfc-waves{
  position:absolute;
  left:43%;
  top:44%;
  width:48px;
  height:48px;
  transform:rotate(-20deg);
  pointer-events:none
}
.nfc-waves i{
  position:absolute;
  inset:0;
  border:1px solid #6A8B23;
  border-radius:50%;
  animation:wave 3s ease-out infinite
}
.nfc-waves i:nth-child(2){
  animation-delay:.6s
}
.nfc-waves i:nth-child(3){
  animation-delay:1.2s
}
.tap-label{
  position:absolute;
  right:18px;
  bottom:82px;
  display:flex;
  gap:9px;
  align-items:center;
  background:#212121df;
  border:1px solid #6A8B234a;
  border-radius:8px;
  padding:11px 14px;
  font-size:11px;
  box-shadow:0 12px 35px #0004;
  transform:rotate(3deg)
}
.tap-label svg{
  width:17px;
  height:17px;
  color:var(--accent-highlight)
}
.art-caption{
  position:absolute;
  bottom:21px;
  left:0;
  right:0;
  text-align:center;
  font-size:8px;
  letter-spacing:1.5px;
  color:#7f7f7f
}
@keyframes card-approach{
  0%,100%{
    transform:translate(-3px,6px) rotate(-12deg)
  }
  50%{
    transform:translate(12px,-5px) rotate(-9deg)
  }
}
@keyframes wave{
  0%{
    transform:scale(.4);
    opacity:0
  }
  30%{
    opacity:.5
  }
  100%{
    transform:scale(2.1);
    opacity:0
  }
}
.intro-strip{
  border-block:1px solid var(--line);
  background:#141414
}
.intro-strip>.container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:30px;
  gap:25px
}
.intro-strip span{
  font-size:19px;
  line-height:1.4;
  color:#bebebe;
  letter-spacing:-.5px
}
.intro-strip strong{
  color:white;
  font-weight:500
}
.intro-strip p{
  font-size:14px
}
.intro-strip svg{
  width:37px;
  height:37px;
  color:#6A8B23;
  margin-right:20px
}
.demo-section{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:85px;
  align-items:center
}
.demo-intro>p:not(.eyebrow){
  margin-block:22px;
  max-width:340px
}
.demo-intro .simulation-note{
  font-size:12px;
  color:#989898;
  max-width:310px!important;
  line-height:1.8
}
.simulation-note>span{
  display:block;
  color:#cacaca;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.4px;
  margin-bottom:6px
}
.demo-panel{
  background:radial-gradient(ellipse at 50% 35%,#36451d40,transparent 70%),#141414;
  border:1px solid #ffffff13;
  border-radius:17px;
  padding:25px 26px 20px;
  min-width:0
}
.demo-stage{
  position:relative;
  height:280px;
  width:100%;
  max-width:420px;
  margin:auto
}
.demo-phone{
  position:absolute;
  left:calc(50% - 30px);
  top:0;
  width:155px;
  height:275px;
  border:3px solid #545454;
  border-radius:24px;
  background:#1e1e1e;
  box-shadow:0 15px 35px #0004;
  padding:28px 10px 12px;
  overflow:hidden
}
.mini-island{
  width:45px;
  height:12px;
  background:#090909;
  position:absolute;
  top:7px;
  left:calc(50% - 22px);
  border-radius:15px
}
.demo-screen{
  display:flex;
  flex-direction:column;
  gap:13px;
  align-items:center;
  text-align:center;
  padding-top:31px
}
.demo-screen>svg{
  width:31px;
  height:31px;
  color:#6A8B23
}
.demo-screen strong{
  font-size:16px;
  line-height:1.3
}
.demo-screen>span{
  font-size:9px;
  color:#a8a8a8
}
.demo-card{
  position:absolute;
  left:18px;
  top:122px;
  width:154px;
  height:95px;
  background:linear-gradient(120deg,#6A8B23,#344710);
  border:1px solid #6A8B2380;
  border-radius:9px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:rotate(-13deg);
  box-shadow:0 15px 35px #0006;
  transition:transform 1s ease;
  z-index:2
}
.demo-card svg{
  width:22px;
  height:22px;
  align-self:flex-end
}
.demo-card span{
  font-size:10px
}
.demo-panel[data-step="1"] .demo-card,.demo-panel[data-step="2"] .demo-card{
  transform:translate(45px,-48px) rotate(-5deg)
}
.demo-panel[data-step="3"] .demo-card{
  transform:translate(-15px,15px) rotate(-15deg)
}
.demo-notification{
  position:absolute;
  inset:42px 7px auto;
  border:1px solid #f0f2eb;
  background:#f0f2eb;
  color:#202020;
  border-radius:7px;
  padding:8px 5px;
  display:flex;
  gap:5px;
  align-items:center;
  text-align:left;
  z-index:3;
  box-shadow:0 4px 20px #0004
}
.demo-notification strong{
  font-size:9px;
  line-height:1.3;
  display:block
}
.demo-notification small{
  font-size:8px;
  display:block;
  line-height:1.5;
  margin-top:3px
}
.demo-notification>span:last-child{
  font-size:11px
}
.notification-icon svg{
  width:15px;
  height:15px
}
.demo-notification:hover{
  background:#fff
}
.demo-notification:focus-visible{
  outline-offset:-3px;
  outline-color:#6A8B23
}
.demo-review{
  padding:12px 1px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.review-business{
  font-size:10px;
  color:#c0c0c0
}
.demo-review strong{
  font-size:14px;
  line-height:1.4
}
.review-stars{
  color:#ffd06b;
  font-size:19px;
  white-space:nowrap
}
.review-placeholder{
  font-size:9px;
  line-height:1.6;
  border:1px solid #757575;
  border-radius:5px;
  padding:8px;
  color:#f0f2eb
}
.demo-review small{
  font-size:8px;
  line-height:1.5;
  color:#b9b9b9
}
.demo-progress{
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:0;
  margin:15px 0 0
}
.demo-progress li{
  color:#969696;
  font-size:11px;
  display:flex;
  gap:6px;
  align-items:center
}
.demo-progress li>span{
  font-size:9px;
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border:1px solid #ffffff20;
  border-radius:50%
}
.demo-progress li.active{
  color:#d5d5d5
}
.demo-progress li.active>span{
  background:#6A8B23;
  border-color:#6A8B23
}
.demo-panel>p{
  font-size:11px;
  text-align:center;
  line-height:1.7;
  margin-top:15px;
  min-height:38px;
  color:#b9b9b9
}
.how-section{
  background:#FEFEFE;
  color:#181818;
  color-scheme:light
}
.how-section .eyebrow{
  color:#6A8B23
}
.how-section p{
  color:#616161
}
.section-heading{
  display:flex;
  justify-content:space-between;
  gap:55px;
  align-items:flex-end
}
.section-heading>p{
  max-width:320px;
  font-size:15px;
  padding-bottom:5px
}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:65px
}
.step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #f0f2eb;
  padding-top:20px;
  margin-bottom:27px
}
.step-top>span{
  font-size:14px;
  letter-spacing:1px;
  color:#6A8B23
}
.step-top svg{
  color:#6A8B23;
  width:27px;
  height:27px
}
.step h3{
  font-size:21px;
  margin-bottom:14px
}
.step p{
  font-size:14px;
  line-height:1.85
}
.compatibility{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top:42px;
  padding:19px 22px;
  border:1px solid #f0f2eb;
  border-radius:8px;
  background:#f0f2eb
}
.info-icon{
  border:1px solid #8f8f8f;
  color:#6A8B23;
  border-radius:50%;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  font-size:11px;
  flex-shrink:0;
  margin-top:3px
}
.compatibility p{
  font-size:12px;
  line-height:1.8
}
.compatibility strong{
  color:#36451d
}
.benefits-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.benefit-heading>p:not(.eyebrow){
  margin-top:26px;
  max-width:390px;
  font-size:15px
}
.benefit-heading>.text-link{
  margin-top:28px;
  color:#6A8B23
}
.benefit-list article{
  display:flex;
  gap:21px;
  padding-block:26px;
  border-bottom:1px solid var(--line)
}
.benefit-list article:first-child{
  padding-top:0
}
.benefit-list article>svg{
  width:25px;
  height:25px;
  color:#6A8B23;
  margin-top:2px
}
.benefit-list h3{
  font-size:19px;
  margin-bottom:9px
}
.benefit-list p{
  font-size:14px
}
.business-section{
  padding-bottom:15px
}
.business-heading{
  text-align:center
}
.business-heading .eyebrow{
  justify-content:center
}
.business-heading h2{
  font-size:31px
}
.business-types{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:15px;
  margin-top:40px;
  border-block:1px solid var(--line);
  padding-block:34px
}
.business-types>div{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:15px;
  text-align:center;
  color:#b9b9b9;
  font-size:12px
}
.business-types svg{
  color:#9f9f9f;
  width:28px;
  height:28px
}
.product-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #ffffff1a;
  border-radius:18px;
  overflow:hidden;
  background:#181818
}
.product-art{
  position:relative;
  min-height:410px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 30% 80%,#6A8B2356,transparent 65%),linear-gradient(130deg,#36451d,#1a1a1a);
  overflow:hidden
}
.product-card{
  position:relative;
  width:340px;
  height:214px;
  transform:rotate(-14deg);
  padding:24px
}
.product-card .card-main{
  font-size:26px
}
.product-ring{
  position:absolute;
  width:370px;
  height:370px;
  border:1px solid #6A8B2328;
  border-radius:50%;
  box-shadow:0 0 0 40px #6A8B2304,0 0 0 80px #6A8B2303
}
.product-art-caption{
  position:absolute;
  bottom:30px;
  color:#b0b0b0;
  font-size:9px;
  letter-spacing:1.7px
}
.product-copy{
  padding:55px 45px
}
.product-copy h2{
  font-size:36px
}
.product-copy>p:not(.eyebrow){
  font-size:14px;
  margin-top:22px
}
.product-copy .button{
  margin-top:27px
}
.product-copy .eyebrow{
  font-size:10px
}
.faq-section{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:75px;
  padding-top:15px
}
.faq-section h2{
  font-size:36px
}
.faq-section>div>p:not(.eyebrow){
  margin-top:24px;
  font-size:15px
}
.faq-list details{
  border-bottom:1px solid #ffffff20
}
.faq-list details:first-child{
  border-top:1px solid #ffffff20
}
.faq-list summary{
  padding:22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  list-style:none;
  font-size:14px;
  font-weight:500
}
.faq-list summary::-webkit-details-marker{
  display:none
}
.faq-list summary>span{
  font-size:22px;
  font-weight:300;
  color:#6A8B23;
  transition:transform .2s
}
.faq-list details[open] summary>span{
  transform:rotate(45deg)
}
.faq-list details[open] summary{
  color:#6A8B23
}
.faq-list summary { transition: color .2s ease; }
.faq-list details[open] summary[aria-expanded="false"] { color: inherit; }
.faq-list details[open] summary[aria-expanded="false"] > span { transform: rotate(0); }
.faq-list details>p{
  font-size:14px;
  line-height:1.85;
  padding:0 25px 23px 0
}
.contact-section{
  position:relative;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0,#6A8B234a,transparent 65%),#1c1c1c;
  border-block:1px solid #6A8B2326;
  padding-block:80px
}
.contact-section .container{
  max-width:800px
}
.contact-symbol{
  display:grid;
  place-items:center;
  margin:0 auto 25px;
  width:51px;
  height:51px;
  border:1px solid #6A8B2345;
  border-radius:14px;
  background:#6A8B232b;
  color:#6A8B23
}
.contact-symbol svg{
  width:30px;
  height:30px
}
.contact-section .eyebrow{
  justify-content:center;
  font-size:10px
}
.contact-section h2{
  font-size:clamp(34px,3.6vw,49px)
}
.contact-section p:not(.eyebrow){
  margin-top:22px;
  font-size:14px
}
.button-light{
  margin-top:29px;
  background:#FEFEFE;
  color:#36451d
}
.button-light:hover{
  background:white;
  color:#36451d;
  box-shadow:0 8px 30px #6A8B2325
}
.contact-section .contact-pending{
  font-size:11px;
  color:#b5b5b5;
  margin-top:19px
}
footer{
  padding-block:35px 23px
}
.footer-top,.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.footer-top>span{
  color:#999999;
  font-size:12px
}
.back-top{
  font-size:12px;
  color:#c3c3c3
}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:27px;
  font-size:10px;
  color:#8a8a8a
}
.footer-bottom p{
  font-size:10px
}
.noscript-note{
  padding:16px;
  background:#36451d;
  text-align:center;
  font-size:14px
}
.reveal{
  opacity:1
}
.motion-enabled .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s,transform .65s
}
.motion-enabled .reveal.visible{
  opacity:1;
  transform:none
}
/* Evita que el tamaño intrínseco del mockup ensanche la cuadrícula. */
.hero{
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)
}
.hero-copy{
  min-width:0
}
.hero-art{
  overflow:clip
}
.button{
  background:#6A8B23
}
.button:hover{
  background:#85aa32
}
.button-light{
  background:#FEFEFE
}
.button-light:hover{
  background:#fff
}
@media(min-width:1500px){
  .hero{
    min-height:660px
  }
  .hero-art{
    transform:scale(1.06)
  }
}
@media(max-width:1100px){
  .container{
    width:calc(100% - 64px)
  }
  .nav-row nav{
    gap:20px
  }
  .hero{
    min-height:620px
  }
  .hero-art{
    transform:scale(.87);
    transform-origin:center right;
    margin-left:-50px
  }
  .hero h1{
    font-size:52px
  }
  .demo-section{
    gap:45px
  }
  .benefits-section{
    gap:55px
  }
  .product-copy{
    padding:45px 30px
  }
  .product-card{
    width:295px;
    height:190px
  }
  .product-card .card-main{
    font-size:23px
  }
  .faq-section{
    gap:45px
  }
}
@media(max-width:800px){
  html{
    scroll-padding-top:78px
  }
  .container{
    width:calc(100% - 40px)
  }
  .section{
    padding-block:75px
  }
  .nav-row{
    height:65px
  }
  .brand{
    font-size:20px
  }
  .menu-toggle{
    display:flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    background:none;
    border:1px solid #ffffff26;
    border-radius:6px;
    color:white
  }
  .menu-toggle span{
    width:18px;
    height:1px;
    background:currentColor;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded="true"] span:first-child{
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] span:last-child{
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .nav-row nav{
    display:flex;
    flex-direction:column;
    visibility:hidden;
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
    max-height:calc(100dvh - 65px);
    overflow-y:auto;
    position:absolute;
    top:65px;
    left:0;
    right:0;
    padding:23px 25px 26px;
    background:#161616;
    border-bottom:1px solid #ffffff24;
    box-shadow:0 20px 25px #0004;
    align-items:stretch;
    gap:8px
  }
  .nav-row nav.is-open{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:0s
  }
  .nav-row nav>a:not(.button){
    padding:10px 0;
    font-size:15px
  }
  .nav-row nav .button{
    margin-top:10px
  }
  .hero{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding-top:30px;
    padding-bottom:15px;
    min-height:auto
  }
  .hero-copy{
    max-width:590px
  }
  .hero h1{
    font-size:clamp(43px,7.7vw,61px);
    letter-spacing:-2px
  }
  .hero .lead{
    font-size:16px;
    max-width:480px
  }
  .hero-art{
    width:490px;
    max-width:100%;
    height:540px;
    transform:none;
    margin:20px auto 0
  }
  .hero-phone{
    right:36px;
    top:30px
  }
  .hero-card{
    left:12px;
    bottom:95px
  }
  .orbit-one{
    width:100%;
    height:450px
  }
  .orbit-two{
    width:100%;
    height:490px;
    left:0;
    top:12px
  }
  .hero-art:before{
    inset:0
  }
  .art-caption{
    bottom:12px
  }
  .intro-strip>.container{
    padding-block:25px
  }
  .intro-strip p{
    font-size:12px
  }
  .intro-strip span{
    font-size:17px
  }
  .intro-strip svg{
    margin:0
  }
  .demo-section{
    grid-template-columns:1fr;
    gap:30px
  }
  .demo-intro>p:not(.eyebrow){
    max-width:460px
  }
  .demo-intro .simulation-note{
    max-width:none!important
  }
  .demo-panel{
    max-width:540px;
    width:100%;
    margin:auto
  }
  .section-heading{
    display:block
  }
  .section-heading>p{
    margin-top:25px;
    max-width:450px
  }
  .steps{
    gap:25px;
    margin-top:40px
  }
  .step h3{
    font-size:19px
  }
  .benefits-section{
    grid-template-columns:1fr;
    gap:40px
  }
  .benefit-heading>p:not(.eyebrow){
    max-width:500px
  }
  .business-types{
    grid-template-columns:repeat(3,1fr);
    row-gap:33px
  }
  .business-section{
    padding-bottom:0
  }
  .product-panel{
    grid-template-columns:1fr
  }
  .product-art{
    min-height:360px
  }
  .product-card{
    width:320px;
    height:205px
  }
  .product-copy{
    padding:38px
  }
  .product-copy h2{
    max-width:500px
  }
  .faq-section{
    grid-template-columns:1fr;
    gap:35px;
    padding-top:0
  }
  .footer-top>span{
    display:none
  }
  .footer-bottom{
    align-items:flex-start
  }
  .footer-bottom p{
    max-width:280px;
    text-align:right
  }
  .eyebrow{
    font-size:10px
  }
}
@media(max-width:480px){
  .hero h1{
    font-size:44px;
    line-height:1.1
  }
  .hero .eyebrow{
    font-size:9px;
    letter-spacing:1.6px
  }
  .actions{
    gap:20px
  }
  .actions .button{
    font-size:13px;
    padding-inline:16px;
    gap:14px
  }
  .actions .text-link{
    font-size:12px;
    gap:7px
  }
  .hero-notes{
    gap:18px;
    font-size:11px
  }
  .hero-art{
    height:445px;
    margin-top:30px
  }
  .hero-phone{
    width:198px;
    height:383px;
    right:15px;
    top:8px;
    padding:16px 12px;
    border-radius:32px;
    border-width:4px
  }
  .phone-top{
    font-size:8px
  }
  .phone-island{
    width:62px;
    height:17px;
    left:calc(50% - 31px);
    top:9px
  }
  .phone-content{
    padding-top:22px
  }
  .google-word{
    font-size:21px
  }
  .business-avatar{
    width:39px;
    height:39px;
    margin-top:14px;
    margin-bottom:8px
  }
  .phone-content>strong{
    font-size:16px
  }
  .phone-subtitle{
    font-size:9px
  }
  .outline-stars{
    font-size:24px;
    margin:12px 0
  }
  .phone-lines{
    margin-top:15px
  }
  .phone-lines i{
    height:4px;
    margin-bottom:7px
  }
  .mock-write{
    font-size:9px;
    padding:7px
  }
  .hero-card{
    width:255px;
    height:160px;
    left:4px;
    bottom:72px;
    padding:18px;
    border-radius:12px
  }
  .hero-card .card-main{
    font-size:20px
  }
  .hero-card .card-top{
    font-size:10px
  }
  .hero-card .card-bottom>span:first-child{
    font-size:6px;
    letter-spacing:.8px
  }
  .hero-card .card-g{
    font-size:20px
  }
  .hero-card .card-top svg{
    width:21px;
    height:21px
  }
  .orbit-one{
    height:330px;
    top:45px
  }
  .orbit-two{
    height:405px;
    top:5px
  }
  .tap-label{
    right:0;
    bottom:45px;
    font-size:9px;
    padding:8px 10px
  }
  .art-caption{
    font-size:7px;
    bottom:5px;
    letter-spacing:1.1px
  }
  .nfc-waves{
    top:43%;
    width:32px;
    height:32px
  }
  .cross-one{
    left:14px;
    top:30px
  }
  .cross-two{
    display:none
  }
  .intro-strip p{
    max-width:155px;
    font-size:11px
  }
  .intro-strip p br{
    display:none
  }
  .intro-strip svg{
    display:none
  }
  .intro-strip span{
    font-size:16px
  }
  .section{
    padding-block:65px
  }
  h2{
    font-size:34px
  }
  .demo-panel{
    padding:20px 14px 16px
  }
  .demo-card{
    left:3px;
    width:138px;
    height:87px
  }
  .demo-phone{
    left:calc(50% - 38px)
  }
  .demo-progress{
    gap:5px
  }
  .demo-progress li{
    font-size:10px;
    gap:5px
  }
  .demo-progress li>span{
    width:20px;
    height:20px
  }
  .demo-panel>p{
    font-size:10px
  }
  .steps{
    grid-template-columns:1fr;
    gap:33px
  }
  .step-top{
    margin-bottom:17px;
    padding-top:15px
  }
  .step h3{
    font-size:21px
  }
  .compatibility{
    padding:17px 15px
  }
  .business-heading .eyebrow{
    font-size:9px;
    letter-spacing:1.4px
  }
  .business-heading h2{
    font-size:28px
  }
  .business-types{
    gap:28px 10px
  }
  .business-types>div{
    font-size:11px
  }
  .product-art{
    min-height:310px
  }
  .product-card{
    width:270px;
    height:174px;
    padding:19px
  }
  .product-card .card-main{
    font-size:22px
  }
  .product-card .card-top{
    font-size:10px
  }
  .product-card .card-bottom>span:first-child{
    font-size:6px
  }
  .product-art-caption{
    font-size:8px;
    bottom:22px
  }
  .product-copy{
    padding:30px 24px
  }
  .product-copy h2{
    font-size:32px
  }
  .product-copy .eyebrow{
    font-size:9px;
    letter-spacing:1.2px
  }
  .faq-section{
    padding-top:0
  }
  .faq-section h2{
    font-size:33px
  }
  .faq-list summary{
    font-size:14px
  }
  .contact-section{
    padding-block:65px
  }
  .contact-section .eyebrow{
    font-size:8px;
    letter-spacing:1.3px
  }
  .contact-section p:not(.eyebrow){
    font-size:13px
  }
  .contact-section .contact-pending{
    font-size:10px
  }
  .footer-bottom{
    flex-direction:column;
    gap:10px
  }
  .footer-bottom p{
    text-align:left;
    max-width:none
  }
}
@media(max-width:350px){
  .container{
    width:calc(100% - 32px)
  }
  .hero h1{
    font-size:38px
  }
  .hero-card{
    width:228px;
    height:149px
  }
  .hero-card .card-main{
    font-size:18px
  }
  .hero-phone{
    right:3px
  }
  .product-card{
    width:245px;
    height:160px
  }
  .product-card .card-main{
    font-size:20px
  }
  .demo-progress li{
    font-size:9px
  }
  .demo-card{
    width:122px
  }
  .demo-panel[data-step="1"] .demo-card,.demo-panel[data-step="2"] .demo-card{
    transform:translate(25px,-48px) rotate(-5deg)
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .motion-enabled .reveal{
    opacity:1;
    transform:none
  }
  .nfc-waves i{
    opacity:.3
  }
  .nfc-waves i:nth-child(2){
    transform:scale(1.4)
  }
  .nfc-waves i:nth-child(3){
    transform:scale(1.8)
  }
}

/* Palette de marque : blanc, vert olive et noir. */
.button { color: #010101; }
.button-light { color: #010101; }
.button-light:hover { color: #010101; }
.gradient-text { background-image: linear-gradient(100deg, #6A8B23, #a4bf69); }
.how-section .eyebrow, .step-top svg { color: #506a19; }
.brand-symbol { color: #FEFEFE; }

/* Pulso de llamada a la acción, sin mover el texto ni alterar el diseño. */
.button-pulse {
  position: relative;
}
.button-pulse::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 2px solid #6A8B23;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: cta-pulse 2.6s ease-out infinite;
}
.button-pulse:hover::after,
.button-pulse:focus-visible::after {
  animation: none;
}
@keyframes cta-pulse {
  0% { transform: scale(1); opacity: .65; }
  65%, 100% { transform: scale(1.12, 1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .button-pulse::after { animation: none; }
}

/* Tarjeta vertical basada en la referencia del producto. */
.nfc-card, .demo-card {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 17px;
}
.nfc-card::before { display: none; }
.nfc-card > img, .demo-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-card {
  width: 198px;
  height: 311px;
  left: 55px;
  bottom: 90px;
}
.product-card {
  width: 190px;
  height: 299px;
  transform: rotate(-12deg);
}
.demo-card {
  width: 89px;
  height: 140px;
  left: 45px;
  top: 110px;
  border-radius: 8px;
}
@media (max-width: 800px) {
  .hero-card { left: 45px; bottom: 80px; }
  .product-art { min-height: 405px; }
}
@media (max-width: 480px) {
  .hero-card {
    width: 153px;
    height: 240px;
    left: 30px;
    bottom: 60px;
    border-radius: 13px;
  }
  .product-card { width: 165px; height: 259px; }
  .product-art { min-height: 350px; }
  .demo-card { left: 20px; }
}
@media (max-width: 350px) {
  .hero-card { left: 20px; width: 140px; height: 220px; }
  .demo-card { left: 8px; }
}

/* Redes sociales: perfiles configurables, sin contenido externo incrustado. */
.social-section {
  padding-block: 10px 100px;
}
.social-heading {
  text-align: center;
  margin-bottom: 40px;
}
.social-heading .eyebrow { justify-content: center; }
.social-heading h2 > span { color: var(--accent); }
.social-heading > p:last-child { margin-top: 18px; }
.social-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.social-profile {
  padding: 30px;
  border: 1px solid #6A8B2338;
  border-radius: 14px;
  background: radial-gradient(ellipse at top right, #6A8B2314, transparent 65%), #10110e;
  min-width: 0;
}
.social-platform { display: flex; align-items: center; gap: 18px; }
.social-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 1px solid #6A8B234a;
  border-radius: 14px;
  background: #6A8B2314;
  color: #a4bf69;
}
.social-icon svg { width: 28px; height: 28px; }
.social-handle { margin-top: 5px; font-size: 14px; overflow-wrap: anywhere; }
.social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 25px;
  padding-block: 14px 2px;
  min-height: 44px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
}
.social-link:hover { color: #a4bf69; }
.social-link svg { width: 20px; height: 20px; }
.social-pending { margin-top: 23px; font-size: 12px; color: #a6ad9b; }
@media (max-width: 600px) {
  .footer-top { flex-wrap: wrap; gap: 18px 24px; }
  .social-section { padding-block: 0 65px; }
  .social-profiles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .social-profile { padding: 24px; }
  .social-heading > p:last-child { font-size: 14px; }
}

/* Reputación: contenido editorial sin cifras ni testimonios ficticios. */
.reviews-section {
  margin-bottom: 90px;
  background: linear-gradient(110deg, #11150b, #070805 65%);
  border-block: 1px solid #6A8B2330;
}
.reviews-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 80px; }
.reviews-intro h2 { font-size: clamp(32px, 3.1vw, 44px); }
.reviews-intro > p:not(.eyebrow) { margin-top: 25px; font-size: 16px; }
.review-principle { display: flex; gap: 16px; margin-top: 34px; padding-left: 20px; border-left: 2px solid var(--accent); }
.review-principle > svg { color: #a4bf69; margin-top: 4px; }
.review-principle p { font-size: 14px; }
.review-principle strong { color: #FEFEFE; font-weight: 600; }
.reviews-reasons article { display: flex; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.reviews-reasons article:first-child { padding-top: 0; }
.reason-number { font-size: 12px; letter-spacing: 1px; color: #a4bf69; padding-top: 4px; }
.reviews-reasons h3 { font-size: 21px; margin-bottom: 12px; }
.reviews-reasons p { font-size: 15px; }
.reviews-source { grid-column: 1 / -1; display: flex; gap: 40px; justify-content: space-between; align-items: center; }
.reviews-source p { font-size: 12px; max-width: 640px; }
.reviews-source a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #6A8B2355;
  border-radius: 8px;
  background: #6A8B2312;
  color: #c9d9ac;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.reviews-source a:hover { background: #6A8B2328; border-color: #6A8B23; color: #FEFEFE; }
.reviews-source a svg { width: 18px; height: 18px; }

/* Acción principal de contacto con el color reconocible de WhatsApp. */
.contact-section .button-whatsapp {
  margin-top: 29px;
  min-height: 60px;
  padding: 15px 25px;
  gap: 15px;
  background: #25D366;
  color: #010101;
  border: 1px solid #65e695;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 30px #25D36630;
}
.contact-section .button-whatsapp:hover {
  background: #40e37d;
  box-shadow: 0 10px 38px #25D36650;
}
.contact-section .button-whatsapp:focus-visible { outline-color: #FEFEFE; }
.button-whatsapp .whatsapp-icon {
  width: 27px;
  height: 27px;
  fill: currentColor;
  stroke: none;
}
@media (max-width: 400px) {
  .contact-section .button-whatsapp { padding-inline: 16px; gap: 10px; font-size: 13px; }
}

/* Pie de página Fabz+ */
.site-footer { padding-block: 65px 25px; background: #060704; }
.footer-main { display: grid; grid-template-columns: 1.25fr .8fr .85fr 1.1fr; gap: 38px; }
.footer-identity .brand { font-size: 28px; }
.footer-identity > p { margin-top: 22px; color: #FEFEFE; font-size: 23px; line-height: 1.3; letter-spacing: -.6px; }
.footer-description { display: block; max-width: 250px; margin-top: 15px; color: #9da590; font-size: 13px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.footer-column h3 { font-size: 13px; font-weight: 600; margin-bottom: 9px; color: #FEFEFE; letter-spacing: 0; }
.footer-column > a { color: #adb5a0; font-size: 13px; line-height: 1.7; }
.footer-column > a:hover, .footer-legal > a:hover { color: #FEFEFE; }
.footer-column > a:focus-visible { outline-offset: 4px; }
.footer-column > a > span[aria-hidden] { margin-left: 20px; color: #8ea74e; }
.footer-social-name { color: #8ea74e; font-size: 12px; margin-top: 5px; }
.footer-contact > p { font-size: 12px; max-width: 240px; }
.footer-contact .footer-phone { display: flex; align-items: center; gap: 9px; color: #FEFEFE; font-size: 16px; white-space: nowrap; }
.footer-phone svg { width: 20px; height: 20px; color: #a4bf69; }
.footer-contact .footer-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #6A8B23; padding-block: 10px; margin-top: 5px; color: #FEFEFE; }
.footer-cta svg { width: 18px; height: 18px; color: #a4bf69; }
.footer-signature { display: flex; align-items: center; gap: 35px; margin-top: 55px; padding-block: 25px 35px; border-top: 1px solid #6A8B232a; }
.footer-signature > [data-brand] { font-size: clamp(75px, 12vw, 165px); font-weight: 700; letter-spacing: -8px; line-height: 1; color: #6A8B23; overflow-wrap: anywhere; }
.footer-signature > svg { width: 70px; height: 70px; color: #6A8B23; margin-left: auto; stroke-width: .8; }
.footer-signature-caption { color: #8f9b7b; font-size: 11px; letter-spacing: 2px; line-height: 2; }
.footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-top: 23px; border-top: 1px solid var(--line); font-size: 11px; color: #919b84; }
.footer-legal p { max-width: 530px; font-size: 11px; text-align: center; }
.footer-legal > a { white-space: nowrap; }
@media (max-width: 1000px) {
  .reviews-layout { gap: 35px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 40px 50px; }
}
@media (max-width: 700px) {
  .reviews-layout { grid-template-columns: minmax(0, 1fr); }
  .reviews-source { flex-direction: column; align-items: flex-start; gap: 15px; }
  .reviews-source a { max-width: none; }
  .reviews-section { margin-bottom: 60px; }
  .site-footer { padding-top: 45px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 35px 20px; }
  .footer-identity, .footer-contact { grid-column: 1 / -1; }
  .footer-identity > p { font-size: 25px; }
  .footer-description { max-width: 330px; }
  .footer-signature { gap: 18px; margin-top: 35px; }
  .footer-signature > [data-brand] { font-size: clamp(70px, 17vw, 118px); letter-spacing: -4px; }
  .footer-signature > svg { width: 40px; height: 40px; }
  .footer-signature-caption { display: none; }
  .footer-legal { flex-wrap: wrap; gap: 14px; }
  .footer-legal p { order: 3; flex-basis: 100%; text-align: left; }
}