:root{
  --blue:#1E6AFF;
  --blue2:#6FA3FF;
  --orange:#FF6B00;
  --orange2:#FF9A52;
  --dark:#0A1530;
  --dark2:#071126;
  --ink:#17213A;
  --text:#4A5570;
  --muted:#758099;
  --paper:#F6F8FC;
  --white:#fff;
  --line:#E3E8F1;
  --green:#18A866;
  --shadow:0 24px 70px rgba(15,33,72,.11);
  --radius:26px;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Manrope",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}

body.lumi-open{
  overflow:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

button{
  font:inherit;
  border:0;
  cursor:pointer;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

.section{
  padding:105px 0;
}

h1,h2,h3,h4{
  font-family:"Fraunces",serif;
  line-height:1.06;
  letter-spacing:-.035em;
}

h1{
  font-size:clamp(46px,6vw,76px);
}

h2{
  font-size:clamp(38px,5vw,60px);
}

h3{
  font-size:24px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:11px;
  font-weight:800;
  color:var(--blue);
  margin-bottom:17px;
}

.kicker:before{
  content:"";
  width:27px;
  height:2px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--orange));
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:0 21px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  transition:.3s ease;
}

.btn-blue{
  color:#fff;
  background:var(--blue);
  box-shadow:0 12px 28px rgba(30,106,255,.22);
}

.btn-blue:hover{
  transform:translateY(-3px);
  box-shadow:0 17px 34px rgba(30,106,255,.3);
}

.btn-orange{
  color:#fff;
  background:var(--orange);
  box-shadow:0 12px 28px rgba(255,107,0,.24);
}

.btn-orange:hover{
  transform:translateY(-3px);
  box-shadow:0 17px 34px rgba(255,107,0,.34);
}

/* =========================
   HERO
========================= */

.page-hero{
  padding:145px 0 65px;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 45%,rgba(30,106,255,.08),transparent 24%),
    radial-gradient(circle at 82% 42%,rgba(255,107,0,.07),transparent 22%),
    var(--paper);
}

.page-hero:before{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  border:1px solid rgba(30,106,255,.08);
  border-radius:50%;
  right:-170px;
  top:40px;
}

.page-hero:after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border:1px solid rgba(255,107,0,.08);
  border-radius:50%;
  left:-150px;
  bottom:-170px;
}

.hero-inner{
  position:relative;
  z-index:2;
}

.page-hero h1{
  max-width:850px;
  margin:auto;
  color:var(--dark);
}

.page-hero h1 span{
  background:linear-gradient(90deg,var(--blue),var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-sub{
  max-width:650px;
  margin:20px auto 22px;
  color:var(--text);
  font-size:16px;
}

.launch-note{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border:1px solid #DCE5F4;
  background:#fff;
  border-radius:999px;
  color:#52617C;
  font-size:11px;
  font-weight:700;
  box-shadow:0 8px 25px rgba(30,55,100,.05);
}

.launch-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(255,107,0,.1);
}

/* =========================
   TABS
========================= */

.pricing-area{
  padding:20px 0 105px;
  background:var(--paper);
}

.tabs-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:43px;
}

.tabs{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 12px 35px rgba(20,40,80,.07);
}

.tab{
  border:0;
  background:transparent;
  color:#748099;
  padding:11px 23px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  transition:.25s;
}

.tab:hover{
  color:var(--blue);
}

.tab.active{
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 20px rgba(30,106,255,.2);
}

/* =========================
   TAB PANELS
========================= */

.tab-panel{
  display:none;
  animation:panelIn .35s ease;
}

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

@keyframes panelIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   PRICING CARDS
========================= */

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:stretch;
}

.price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:27px;
  padding:31px 28px 28px;
  min-height:735px;
  transition:.35s;
}

.price-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow);
}

.price-card.recommended{
  border:1.5px solid var(--blue);
  box-shadow:
    0 25px 70px rgba(30,106,255,.15),
    0 0 0 5px rgba(30,106,255,.035);
  transform:translateY(-10px);
}

.price-card.recommended:hover{
  transform:translateY(-14px);
}

.recommended-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 15px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(30,106,255,.25);
}

.plan-label{
  color:var(--blue);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  margin-bottom:11px;
}

.price-card h2{
  font-size:34px;
  color:var(--dark);
  margin-bottom:13px;
}

.price{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:18px;
}

.old-price{
  color:#929BAE;
  font-size:14px;
  font-weight:700;
  text-decoration:line-through;
}

.current-price{
  display:flex;
  align-items:baseline;
  gap:5px;
  color:var(--orange);
  font-size:39px;
  font-weight:900;
  letter-spacing:-.04em;
}

.current-price small{
  font-size:12px;
  color:#78849B;
  font-weight:700;
  letter-spacing:0;
}

.plan-description{
  color:var(--text);
  font-size:12.5px;
  line-height:1.7;
  padding-bottom:23px;
  border-bottom:1px solid var(--line);
}

.feature-title{
  margin:20px 0 12px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#8A94A8;
  font-weight:900;
}

.features{
  list-style:none;
  display:grid;
  gap:9px;
}

.features li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#4C5870;
  font-size:11.5px;
  line-height:1.4;
}

.check{
  flex:0 0 17px;
  width:17px;
  height:17px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#EAF2FF;
  color:var(--blue);
  margin-top:1px;
}

.check svg{
  width:10px;
}

.card-bottom{
  margin-top:auto;
  padding-top:24px;
}

.card-bottom .btn{
  width:100%;
}

.inline-info{
  margin-top:31px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:15px;
}

.hosting-note,
.lumi-nudge{
  min-height:85px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  padding:18px 20px;
}

.hosting-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.info-icon{
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:10px;
  background:#EAF1FF;
  color:var(--blue);
  display:grid;
  place-items:center;
}

.info-icon svg{
  width:16px;
}

.inline-info strong{
  display:block;
  color:var(--dark);
  font-size:11px;
  margin-bottom:3px;
}

.inline-info p{
  color:#78849A;
  font-size:10.5px;
  line-height:1.55;
}

/* =========================
   AI TAB
========================= */

.ai-panel{
  background:
    radial-gradient(circle at 85% 20%,rgba(30,106,255,.25),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(255,107,0,.14),transparent 25%),
    linear-gradient(135deg,#061027,#0A1838);
  border-radius:32px;
  padding:62px;
  color:#fff;
  overflow:hidden;
  position:relative;
}

.ai-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr .85fr;
  align-items:center;
  gap:80px;
}

.ai-panel .kicker{
  color:#91B4FF;
}

.ai-panel h2{
  color:#fff;
  max-width:650px;
}

.ai-price{
  color:#FF9A52;
  font-size:25px;
  font-weight:900;
  margin:20px 0 16px;
}

.ai-description{
  color:#AAB6CC;
  max-width:580px;
  font-size:14px;
}

.ai-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin:27px 0;
}

.ai-features li{
  color:#DDE6F7;
}

.ai-features .check{
  background:rgba(30,106,255,.18);
  color:#8FB6FF;
}

.ai-note{
  color:#7888A5;
  font-size:10px;
  margin-top:13px;
}

.chat-preview{
  position:relative;
  width:min(330px,100%);
  margin:auto;
  padding:11px;
  border-radius:29px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:rotate(2deg);
  transition:.4s;
}

.chat-preview:hover{
  transform:rotate(0) translateY(-7px);
}

.chat-window{
  overflow:hidden;
  border-radius:21px;
  background:#F8FAFD;
  color:var(--ink);
}

.chat-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 17px;
  background:#fff;
  border-bottom:1px solid #E8EDF4;
}

.lumi-avatar{
  width:35px;
  height:35px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--orange));
  color:#fff;
  font-weight:900;
}

.chat-title{
  font-size:12px;
  font-weight:800;
}

.chat-status{
  display:block;
  color:var(--green);
  font-size:9px;
  margin-top:1px;
}

.chat-body{
  min-height:290px;
  padding:18px;
}

.bubble{
  max-width:80%;
  padding:10px 12px;
  border-radius:15px;
  font-size:10px;
  line-height:1.5;
  margin:10px 0;
}

.bubble.ai{
  background:#EAF1FF;
  color:#21448A;
  border-top-left-radius:5px;
}

.bubble.user{
  margin-left:auto;
  background:var(--blue);
  color:#fff;
  border-top-right-radius:5px;
}

.chat-input{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 12px 12px;
  padding:10px 11px;
  border:1px solid #E1E7F0;
  border-radius:13px;
  color:#A0AABE;
  background:#fff;
  font-size:9px;
}

.send{
  width:23px;
  height:23px;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--orange);
}

.send svg{
  width:11px;
}

/* =========================
   LOGO TAB
========================= */

.logo-panel{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:30px;
  align-items:stretch;
}

.logo-visual{
  min-height:450px;
  border-radius:30px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(30,106,255,.3),transparent 35%),
    linear-gradient(145deg,#071126,#102A61);
  display:grid;
  place-items:center;
}

.logo-orb{
  width:220px;
  height:220px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--blue),var(--orange));
  display:grid;
  place-items:center;
  box-shadow:
    0 30px 80px rgba(30,106,255,.3),
    inset -20px -20px 50px rgba(0,0,0,.15);
}

.logo-orb span{
  color:#fff;
  font-family:Fraunces,serif;
  font-size:90px;
  font-weight:700;
}

.logo-panel-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:43px;
}

.logo-panel-card h2{
  font-size:45px;
  color:var(--dark);
}

.logo-big-price{
  color:var(--orange);
  font-size:36px;
  font-weight:900;
  margin:19px 0;
}

.logo-panel-card p{
  color:var(--text);
  font-size:13px;
  line-height:1.7;
  max-width:600px;
}

.logo-panel-card .features{
  margin:25px 0 30px;
}

/* =========================
   MAINTENANCE
========================= */

.maintenance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.maintenance-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:27px;
  padding:31px;
  display:flex;
  flex-direction:column;
  min-height:390px;
}

.maintenance-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(135deg,#EAF1FF,#FFF0E8);
  color:var(--blue);
  margin-bottom:24px;
}

.maintenance-icon svg{
  width:24px;
}

.maintenance-card h2{
  font-size:33px;
  color:var(--dark);
}

.maintenance-price{
  color:var(--orange);
  font-size:25px;
  font-weight:900;
  margin:12px 0 15px;
}

.maintenance-card p{
  color:var(--text);
  font-size:12.5px;
  max-width:520px;
}

.maintenance-card .features{
  margin:20px 0;
}

.maintenance-card .card-bottom{
  padding-top:10px;
}

.bundle{
  margin-top:18px;
  padding:24px 29px;
  border-radius:23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  background:linear-gradient(100deg,#EAF1FF,#FFF1E7);
  border:1px solid #DDE5F2;
}

.bundle strong{
  display:block;
  color:var(--dark);
  font-size:15px;
}

.bundle span{
  display:block;
  color:#69758D;
  font-size:11px;
  margin-top:4px;
}

/* =========================
   LUMI NUDGE
========================= */

.lumi-small{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 21px;
  border-radius:19px;
  background:#fff;
  border:1px solid var(--line);
}

.lumi-small-content{
  display:flex;
  align-items:center;
  gap:12px;
}

.lumi-small-avatar{
  width:37px;
  height:37px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:13px;
  font-weight:900;
  background:linear-gradient(135deg,var(--blue),var(--orange));
}

.lumi-small strong{
  display:block;
  color:var(--dark);
  font-size:12px;
}

.lumi-small p{
  color:#78849A;
  font-size:10.5px;
}

/* =========================
   PROCESS
========================= */

.process{
  background:#fff;
  padding:82px 0;
}

.process-head{
  text-align:center;
  margin-bottom:39px;
}

.process-head h2{
  color:var(--dark);
  margin-top:5px;
}

.process-head p{
  color:var(--text);
  font-size:13px;
  max-width:600px;
  margin:13px auto 0;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  position:relative;
}

.steps:before{
  content:"";
  position:absolute;
  top:25px;
  left:12%;
  right:12%;
  border-top:2px dotted #CFD7E5;
}

.step{
  position:relative;
  z-index:1;
  text-align:center;
}

.step-number{
  width:51px;
  height:51px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 16px;
  background:#fff;
  border:4px solid #fff;
  box-shadow:0 0 0 1px #DCE3EF;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
}

.step:nth-child(2) .step-number{
  color:var(--orange);
}

.step h3{
  font-size:20px;
  color:var(--dark);
}

.step p{
  max-width:180px;
  margin:7px auto 0;
  color:#7A8498;
  font-size:10.5px;
}

/* =========================
   FINAL CTA
========================= */

.final-cta{
  padding:90px 0;
  color:#fff;
  text-align:center;
  background:
    radial-gradient(circle at 15% 50%,rgba(255,255,255,.12),transparent 25%),
    radial-gradient(circle at 85% 50%,rgba(255,255,255,.1),transparent 25%),
    linear-gradient(100deg,var(--blue),#5268E8 50%,var(--orange));
}

.final-cta h2{
  color:#fff;
  max-width:800px;
  margin:auto;
}

.final-cta p{
  max-width:620px;
  margin:18px auto 27px;
  color:rgba(255,255,255,.85);
  font-size:14px;
}

.final-cta .btn{
  background:#25D366;
  color:#fff;
  box-shadow:0 15px 35px rgba(37,211,102,.25);
}

.final-cta .btn:hover{
  transform:translateY(-3px) scale(1.02);
  background:#1EBE57;
}

/* =========================
   MOBILE
========================= */

@media(max-width:1000px){







  .pricing-grid{
    grid-template-columns:1fr;
    max-width:620px;
    margin:auto;
  }

  .price-card{
    min-height:auto;
  }

  .price-card.recommended{
    transform:none;
  }

  .price-card.recommended:hover{
    transform:translateY(-7px);
  }

  .ai-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .ai-panel{
    padding:45px 30px;
  }

  .logo-panel{
    grid-template-columns:1fr;
  }

  .logo-visual{
    min-height:330px;
  }

  .maintenance-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:700px){

  .container{
    width:min(100% - 28px,1180px);
  }

  .section{
    padding:75px 0;
  }

  .page-hero{
    padding:125px 0 45px;
  }

  .page-hero h1{
    font-size:43px;
  }

  .hero-sub{
    font-size:13px;
  }

  .tabs-wrap{
    overflow-x:auto;
    justify-content:flex-start;
    padding:0 2px 8px;
  }

  .tabs{
    margin:auto;
    flex-shrink:0;
  }

  .tab{
    padding:10px 14px;
    font-size:10px;
  }

  .inline-info{
    grid-template-columns:1fr;
  }

  .ai-panel{
    border-radius:23px;
    padding:35px 21px;
  }

  .ai-panel h2{
    font-size:39px;
  }

  .ai-price{
    font-size:20px;
  }

  .ai-features{
    grid-template-columns:1fr;
  }

  .logo-panel-card{
    padding:28px 23px;
  }

  .logo-panel-card h2{
    font-size:38px;
  }

  .bundle{
    flex-direction:column;
    align-items:flex-start;
  }

  .lumi-small{
    align-items:flex-start;
    flex-direction:column;
  }

  .lumi-small .btn{
    width:100%;
  }

  .steps{
    grid-template-columns:1fr 1fr;
    gap:30px 15px;
  }

  .steps:before{
    display:none;
  }

  .process{
    padding:70px 0;
  }


  }

@media(max-width:430px){


  .logo{
    width:115px;
    height:32px;
    background-position:-54px -36px;
    background-size:221px 110px;
  }

  .page-hero h1{
    font-size:39px;
  }

  .price-card{
    padding:27px 21px 23px;
  }

  .current-price{
    font-size:35px;
  }

  .steps{
    grid-template-columns:1fr;
  }

  .step p{
    max-width:240px;
  }
}

/* ── Mobile tab responsiveness (2026-09-08) ─────────────────────── */
@media (max-width: 768px) {
  .tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 0 0 10px;
    margin-bottom: 28px;
  }
  .tabs {
    flex-shrink: 0;
  }
  .tab {
    padding: 9px 16px;
    font-size: 11px;
    white-space: nowrap;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: auto;
  }
  .price-card {
    min-height: auto;
  }
  /* Non-websites tab panels: collapse 2-col grids to single column */
  .ai-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .logo-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .logo-visual {
    min-height: 280px;
  }
  .maintenance-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .maintenance-card {
    min-height: auto;
    padding: 24px;
  }
  /* Grid-blowout hardening: grid items must be allowed to shrink */
  .ai-grid > *,
  .logo-panel > *,
  .maintenance-grid > * {
    min-width: 0;
  }
  .tab-panel.active {
    width: 100%;
    max-width: 100%;
  }
  /* Chat preview: no tilt on mobile, full width */
  .chat-preview {
    transform: none;
    width: 100%;
    max-width: 340px;
  }
  /* Logo orb: scale down so it fits narrow columns */
  .logo-orb {
    width: 150px;
    height: 150px;
  }
  .logo-orb span {
    font-size: 60px;
  }
  /* Safety net: never let a panel force horizontal scroll */
  .pricing-area {
    overflow-x: clip;
  }
}
@media (max-width: 480px) {
  .tab {
    padding: 8px 12px;
    font-size: 10px;
  }
  .price-card {
    padding: 24px 18px 20px;
  }
  .current-price {
    font-size: 32px;
  }
  .logo-visual {
    min-height: 200px;
  }
  .maintenance-card {
    padding: 20px 16px;
  }
  /* Heading scale: desktop sizes are huge on phones */
  .ai-panel h2 {
    font-size: 28px;
  }
  .logo-panel-card h2 {
    font-size: 30px;
  }
  .maintenance-card h2 {
    font-size: 26px;
  }
  .ai-panel {
    padding: 32px 20px;
  }
  .logo-panel-card {
    padding: 24px 20px;
  }
}