:root{
  --bg:#F7F5F0; --cream:#F7F5F0;
  --ink:#15161C; --ink-soft:#494B57;
  --card:#FFFFFF; --muted:#EDE9E0; --muted-fg:#6B6D78;
  --accent:#FF5B2E; --accent-fg:#FFFFFF;
  --border:#E4DFD3;
  --code-bg:#1A1B22; --code-fg:#E9E5D8; --code-mut:#7A7C88; --code-acc:#F4A15C; --code-str:#8ED4A3;
  --radius:.75rem;
  --shadow-ed: 0 1px 0 rgba(21,22,28,.06), 0 20px 40px -20px rgba(21,22,28,.18);
  --shadow-soft: 0 1px 0 rgba(21,22,28,.05);
  --f-display:"Fraunces", ui-serif, Georgia, serif;
  --f-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-family:var(--f-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{background:var(--bg); color:var(--ink); font-feature-settings:"ss01","cv11"; line-height:1.5}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:var(--accent-fg)}

.container{width:100%; max-width:1180px; margin-inline:auto; padding-inline:1.5rem}
.hairline{border-top:1px solid var(--border)}
.pad-xl{padding-block:6rem}
.pad-xxl{padding-block:7rem}
.center{text-align:center}
.narrow{max-width:42rem; margin-inline:auto}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted-fg)}
.small{font-size:.75rem}
.w-fit{width:fit-content}
.hide-sm{display:none}
@media(min-width:640px){.hide-sm{display:inline-flex}}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.25rem; border-radius:.6rem; font-weight:500; font-size:.95rem; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{transform:translateY(-1px); background:#22222c}
.btn-accent{background:var(--accent); color:var(--accent-fg)}
.btn-accent:hover{transform:translateY(-1px); filter:brightness(.95)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--ink)}

/* chips */
.chip{display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border:1px solid var(--border); border-radius:999px; font-size:.75rem; letter-spacing:.02em; color:var(--ink-soft); background:color-mix(in oklab, var(--bg) 60%, white)}
.chip-dot{width:.4rem; height:.4rem; border-radius:999px; background:var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem}
.eyebrow{font-family:var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); margin:0}
.section-title{font-family:var(--f-display); font-size:clamp(2rem, 3vw + 1rem, 3rem); line-height:1.1; letter-spacing:-.02em; margin:.75rem 0 0; font-weight:600}
.section-title.light{color:#F7F5F0}
.section-lead{color:var(--ink-soft); margin-top:1rem; max-width:34rem}

/* nav */
.nav{position:sticky; top:0; z-index:40; background:color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter:blur(10px)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:4rem}
.logo{display:flex; align-items:center; gap:.5rem}
.logo-dot{width:.625rem; height:.625rem; border-radius:999px; background:var(--accent); display:inline-block}
.logo-word{font-family:var(--f-display); font-size:1.25rem; font-weight:600; letter-spacing:-.02em}
.nav-links{display:none; gap:2rem; font-size:.875rem; color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
@media(min-width:768px){.nav-links{display:flex}}
.nav-cta{display:flex; align-items:center; gap:.5rem}

/* hero */
.hero{position:relative; overflow:hidden}
.hero-grid{display:grid; gap:3rem; padding-block:5rem}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr 1fr; align-items:center; padding-block:7rem}}
.hero-title{font-family:var(--f-display); font-weight:600; font-size:clamp(2.75rem, 5vw + 1rem, 4.5rem); line-height:1.02; letter-spacing:-.02em; margin:1.5rem 0 0}
.hero-title em{font-style:italic; color:var(--accent); font-family:var(--f-display)}
.hero-sub{font-size:1.125rem; color:var(--ink-soft); margin-top:1.5rem; max-width:34rem; line-height:1.6}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.hero-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; max-width:28rem; margin:2.5rem 0 0; padding:0}
.hero-stats dt{color:var(--muted-fg); font-size:.875rem; margin:0}
.hero-stats dd{margin:.25rem 0 0; font-family:var(--f-display); font-size:1.5rem; letter-spacing:-.02em}

.hero-preview{position:relative}
.hero-preview-glow{position:absolute; inset:-1rem; z-index:-1; border-radius:1.5rem; background:rgba(255,91,46,.10); filter:blur(40px)}
.browser{border:1px solid var(--border); border-radius:1rem; background:var(--card); box-shadow:var(--shadow-ed); overflow:hidden}
.browser-bar{display:flex; align-items:center; gap:.375rem; border-bottom:1px solid var(--border); padding:.6rem 1rem}
.browser-bar .dot{width:.625rem; height:.625rem; border-radius:999px; background:var(--border); display:inline-block}
.browser-url{margin-left:.75rem; font-family:var(--f-mono); font-size:.75rem; color:var(--muted-fg)}
.browser-body{padding:2rem}
.post-title{font-family:var(--f-display); font-size:2rem; line-height:1.05; letter-spacing:-.02em; margin:.75rem 0 0; font-weight:600}
.post-lead{color:var(--ink-soft); margin-top:1rem; font-size:.9375rem; line-height:1.7}
.post-meta{display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; color:var(--muted-fg); font-size:.75rem}
.avatar{width:1.5rem; height:1.5rem; border-radius:999px; background:var(--ink); display:inline-block}

/* band */
.band{border-block:1px solid var(--border); background:var(--card)}

/* integration */
.integ-grid{display:grid; gap:2.5rem; padding-block:5rem}
@media(min-width:1024px){.integ-grid{grid-template-columns:1fr 1.4fr; align-items:center}}
.code-card{background:var(--code-bg); border-radius:.85rem; padding:.25rem; box-shadow:var(--shadow-ed)}
.code-head{display:flex; align-items:center; justify-content:space-between; padding:.5rem 1rem; font-family:var(--f-mono); font-size:.75rem; color:var(--code-mut)}
.copy-btn{background:transparent; border:0; color:var(--code-mut); font-family:var(--f-mono); font-size:.75rem; cursor:pointer}
.copy-btn:hover{color:var(--code-fg)}
.code{margin:0; overflow-x:auto; padding:.25rem 1.25rem 1.25rem; font-family:var(--f-mono); font-size:.8125rem; line-height:1.7; color:var(--code-fg)}
.code .cm{color:var(--code-mut)}
.code .tag{color:var(--code-acc)}

/* pain */
.pain-grid{list-style:none; padding:0; margin:3rem auto 0; max-width:56rem; display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:1rem; overflow:hidden}
@media(min-width:768px){.pain-grid{grid-template-columns:1fr 1fr}}
.pain-grid li{background:var(--card); padding:1.5rem; font-size:1.125rem; line-height:1.35}
.x{font-family:var(--f-display); font-style:italic; color:var(--accent); margin-right:.75rem}

/* features */
.features-grid{margin-top:3.5rem; display:grid; gap:3rem 2.5rem; grid-template-columns:1fr}
@media(min-width:768px){.features-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feat-num{font-family:var(--f-mono); font-size:.75rem; color:var(--muted-fg)}
.feat-h{font-family:var(--f-display); font-size:1.5rem; letter-spacing:-.02em; margin:.5rem 0 0; font-weight:600}
.feat-p{margin-top:.5rem; color:var(--ink-soft)}

/* design showcase */
.design-grid{display:grid; gap:3rem}
@media(min-width:1024px){.design-grid{grid-template-columns:1fr 1.2fr; align-items:center}}
.dot-list{margin:1.5rem 0 0; padding:0; list-style:none; color:var(--ink-soft); font-size:.875rem}
.dot-list li{margin-top:.5rem}
.mock-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.mock{border-radius:.85rem; border:1px solid var(--border); padding:1.25rem; box-shadow:var(--shadow-soft)}
.mock-light{background:var(--card)}
.mock-dark{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.mock-eye{font-family:var(--f-mono); font-size:.625rem; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); margin:0}
.mock-title{font-family:var(--f-display); font-size:1.125rem; line-height:1.15; margin:.25rem 0 0}
.mock-body{margin-top:.5rem; font-size:.75rem; line-height:1.6; color:var(--ink-soft)}
.mock-dark .mock-body{color:rgba(247,245,240,.7)}
.mock-cover{grid-column:span 2; padding:0; overflow:hidden}
.cover-img{height:8rem; background:linear-gradient(135deg, rgba(255,91,46,.8), rgba(255,91,46,.4), rgba(21,22,28,.6))}
.cover-body{padding:1.25rem}
.cover-body .mock-title{font-size:1.25rem}

/* compare */
.table-wrap{margin-top:2.5rem; overflow-x:auto}
.compare{width:100%; min-width:720px; border-collapse:separate; border-spacing:0; font-size:.875rem}
.compare th{text-align:left; font-weight:500; color:var(--muted-fg); padding:.75rem 0; border-bottom:1px solid var(--border)}
.compare th.th-brand{color:var(--accent)}
.compare td{padding:1rem 1rem 1rem 0; border-bottom:1px solid var(--border); color:var(--ink-soft)}
.compare td:first-child{font-weight:500; color:var(--ink)}
.compare td:last-child{font-family:var(--f-display); font-size:1rem; color:var(--ink)}

/* live demo */
.demo-card{border-radius:1.5rem; border:1px solid var(--border); background:var(--ink); color:var(--cream); padding:2.5rem}
@media(min-width:768px){.demo-card{padding:4rem}}
.demo-head{margin-top:.75rem; display:grid; gap:2rem}
@media(min-width:768px){.demo-head{grid-template-columns:1.2fr 1fr; align-items:end}}
.demo-grid{margin-top:2.5rem; display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:768px){.demo-grid{grid-template-columns:repeat(3,1fr)}}
.demo-post{border:1px solid rgba(247,245,240,.10); background:rgba(247,245,240,.05); border-radius:.85rem; padding:1.5rem; transition:border-color .15s ease}
.demo-post:hover{border-color:rgba(247,245,240,.25)}
.demo-post h3{font-family:var(--f-display); font-size:1.25rem; line-height:1.15; margin:.75rem 0 0; font-weight:600}
.demo-post .meta{margin-top:.75rem; font-size:.75rem; color:rgba(247,245,240,.6)}

/* pricing */
.plans{margin-top:3rem; display:grid; gap:1.5rem; grid-template-columns:1fr}
@media(min-width:1024px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{display:flex; flex-direction:column; border-radius:1rem; border:1px solid var(--border); padding:2rem; background:var(--bg)}
.plan.featured{background:var(--ink); color:var(--cream); border-color:var(--ink); box-shadow:var(--shadow-ed)}
.plan-head{display:flex; align-items:baseline; justify-content:space-between}
.plan-head h3{font-family:var(--f-display); font-size:1.5rem; margin:0; font-weight:600}
.badge{background:var(--accent); color:var(--accent-fg); border-radius:999px; padding:.15rem .625rem; font-size:.625rem; text-transform:uppercase; letter-spacing:.12em; font-weight:500}
.price{margin-top:1.5rem; display:flex; align-items:baseline; gap:.5rem}
.price .amount{font-family:var(--f-display); font-size:3rem; letter-spacing:-.02em}
.price .tag{font-size:.875rem; color:var(--muted-fg)}
.plan.featured .price .tag{color:rgba(247,245,240,.6)}
.plan ul{margin:2rem 0 0; padding:0; list-style:none; font-size:.875rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:.75rem}
.plan.featured ul{color:rgba(247,245,240,.85)}
.plan li{display:flex; gap:.5rem}
.plan li .arr{color:var(--accent)}
.plan .btn{margin-top:2rem; width:100%}

/* cases */
.cases{margin-top:3rem; display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:1rem; overflow:hidden; grid-template-columns:1fr}
@media(min-width:768px){.cases{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.cases{grid-template-columns:repeat(4,1fr)}}
.case{background:var(--card); padding:1.5rem}
.case .site{font-family:var(--f-mono); font-size:.875rem; color:var(--accent); margin:0}
.case p{margin-top:.75rem; font-size:.875rem; line-height:1.6; color:var(--ink-soft)}

/* faq */
.faq-grid{display:grid; gap:3rem}
@media(min-width:1024px){.faq-grid{grid-template-columns:1fr 1.5fr}}
.faq-list details{border-top:1px solid var(--border); padding:1.25rem 0}
.faq-list details:first-child{border-top:0}
.faq-list summary{display:flex; justify-content:space-between; gap:1.5rem; cursor:pointer; list-style:none; font-family:var(--f-display); font-size:1.25rem; letter-spacing:-.02em; font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .plus{color:var(--accent); font-size:1.5rem; transition:transform .2s ease; margin-top:.15rem}
.faq-list details[open] .plus{transform:rotate(45deg)}
.faq-list p{margin:.75rem 0 0; color:var(--ink-soft); max-width:44rem}

/* cta */
.cta-title{font-family:var(--f-display); font-size:clamp(2.5rem, 5vw + 1rem, 4rem); line-height:1.05; letter-spacing:-.02em; margin:0}
.cta-title em{font-style:italic; color:var(--accent)}
.signup{margin:2.5rem auto 0; max-width:28rem; display:flex; flex-direction:column; gap:.75rem}
@media(min-width:640px){.signup{flex-direction:row}}
.signup input{flex:1; border:1px solid var(--border); border-radius:.5rem; padding:.85rem 1rem; font-size:.875rem; background:var(--card); outline:none}
.signup input:focus{border-color:var(--ink)}
.signup .btn{white-space:nowrap}
#signup .section-lead{margin:1.5rem auto 0}
#signup .mono{margin-top:1rem}

/* footer */
footer.band{margin-top:0}
.footer-grid{display:grid; gap:2.5rem; padding-block:3.5rem; grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-tag{margin-top:1rem; max-width:20rem; color:var(--ink-soft); font-size:.875rem}
.footer-grid h4{font-family:var(--f-display); font-size:.875rem; text-transform:uppercase; letter-spacing:.15em; color:var(--muted-fg); margin:0}
.footer-grid ul{margin:1rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem; font-size:.875rem}
.footer-grid ul a{color:var(--ink-soft)}
.footer-grid ul a:hover{color:var(--ink)}
.footer-bottom{display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; padding-block:1.5rem; font-size:.75rem; color:var(--muted-fg)}
.footer-bottom div{display:flex; gap:1rem}
.footer-bottom a:hover{color:var(--ink)}
@media(min-width:768px){.footer-bottom{flex-direction:row; align-items:center; justify-content:space-between}}

/* Sello "By Axobit" junto a los logos */
.logo .by-axobit{
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.55;
  white-space:nowrap;
  color:inherit;
  text-decoration:none;
}