@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root{
  --black:#0b0c0c;
  --ink:#151512;
  --cream:#eee8dd;
  --sand:#d8cdbd;
  --blue:#2a6fff;
  --acid:#eaff4f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;background:var(--black);color:#fff;font-family:"DM Sans",Arial,sans-serif;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.page-progress{position:fixed;z-index:1000;inset:0 0 auto;height:3px}
.page-progress span{display:block;width:0;height:100%;background:var(--acid)}

.site-header{
  position:fixed;z-index:100;top:0;left:0;width:100%;height:82px;
  padding:0 clamp(20px,4vw,64px);display:grid;grid-template-columns:1fr auto;align-items:center;
  transition:background .3s,backdrop-filter .3s
}
.site-header.scrolled{background:#0b0c0cdd;backdrop-filter:blur(18px)}
.site-logo{width:min(220px,44vw)}
.site-logo img{width:auto;max-height:44px}
.site-header nav{display:flex;gap:24px}
.site-header nav a,.eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase}
.menu-button,.mobile-menu{display:none}

.hero{
  position:relative;min-height:100svh;padding:145px clamp(22px,5vw,78px) 85px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(42px,6vw,95px);align-items:center;
  overflow:hidden;background:
  radial-gradient(circle at 79% 22%,rgba(42,111,255,.28),transparent 27%),
  linear-gradient(125deg,#141513,#090a0b 62%)
}
.hero-grid{position:absolute;inset:0;opacity:.15;background:
  linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/100% 80px,
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/80px 100%;
  mask-image:linear-gradient(90deg,#000,transparent 58%)
}
.hero-copy,.hero-visual{position:relative;z-index:2}
.eyebrow{margin:0 0 18px;color:#9da19f}
.hero h1,.section-heading h2,.showcase-copy h2,.comparison-heading h2,.pricing-copy h2,.contact h2{
  margin:0;font-family:"Archivo Black",Arial,sans-serif;text-transform:uppercase;
  font-size:clamp(54px,7.5vw,118px);line-height:.88;letter-spacing:-.065em
}
.hero-intro{max-width:660px;margin:28px 0 0;color:#c6c8c5;font-size:clamp(17px,1.45vw,21px);line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.button{padding:15px 19px;border:1px solid #525653;font-family:"DM Mono";font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.button.primary{background:var(--acid);border-color:var(--acid);color:#090a0b}
.hero-price{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:46px;background:#383a37;border:1px solid #383a37}
.hero-price>div{padding:18px;background:#101211}
.hero-price span{display:block;color:#8f9390;font-family:"DM Mono";font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.hero-price strong{display:block;margin-top:6px;font-size:28px}
.hero-price small{font-size:12px;font-weight:500;color:#a9adaa}

.hero-visual{min-height:680px}
.browser-mockup{
  position:absolute;left:0;top:3%;width:92%;height:82%;overflow:hidden;
  border:1px solid #303331;border-radius:20px;background:#121412;box-shadow:0 40px 100px #0009;
  transform:rotate(-2deg)
}
.browser-top{height:46px;padding:0 16px;display:flex;align-items:center;gap:16px;background:#121412;color:#8f9490;font-family:"DM Mono";font-size:10px;letter-spacing:.08em}
.dots{display:flex;gap:8px}.dots i{width:10px;height:10px;border-radius:50%;background:#5d625e}
.browser-viewport{height:calc(100% - 46px);overflow:hidden;background:#eee8dd}
.browser-viewport img{width:100%;height:auto;transform:translate3d(0,0,0);will-change:transform}
.browser-viewport img.is-preview-scrolling{transform:translate3d(0,var(--preview-distance,0),0);transition:transform var(--preview-duration,18s) linear}
.phone-mockup{
  position:absolute;right:0;bottom:0;width:31%;height:61%;overflow:hidden;
  border:9px solid #101211;border-radius:34px;background:#111;box-shadow:0 30px 70px #000b;
  transform:rotate(5deg)
}
.phone-mockup img{height:100%;object-fit:cover;object-position:top}
.phone-speaker{position:absolute;z-index:2;top:8px;left:50%;width:36%;height:5px;border-radius:10px;background:#171817;transform:translateX(-50%)}
.scroll-cue{position:absolute;z-index:3;left:clamp(22px,5vw,78px);bottom:28px;font-family:"DM Mono";font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#9ca09d}

.overview{padding:125px clamp(22px,5vw,78px);background:var(--cream);color:var(--ink)}
.section-heading{display:grid;grid-template-columns:.55fr 1.45fr;gap:50px;align-items:start}
.section-heading .eyebrow{color:#68675f}
.section-heading h2{font-size:clamp(48px,6.8vw,105px)}
.overview-copy{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:60px 0 80px;padding-left:35%}
.overview-copy p{margin:0;font-size:clamp(18px,1.7vw,25px);line-height:1.6}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #bdb5a8;border-bottom:1px solid #bdb5a8}
.feature-grid article{padding:34px 28px 38px;border-right:1px solid #bdb5a8}.feature-grid article:last-child{border-right:0}
.feature-grid span,.process-grid span{font-family:"DM Mono";font-size:9px;letter-spacing:.15em;color:#77736b}
.feature-grid h3,.process-grid h3{margin:38px 0 12px;font-size:25px}
.feature-grid p,.process-grid p{margin:0;color:#585650;line-height:1.65}

.showcase{padding:125px clamp(22px,5vw,78px);display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(45px,7vw,105px);align-items:center;background:#111210}
.showcase-copy h2{font-size:clamp(47px,6.2vw,95px)}
.showcase-copy>p:not(.eyebrow){color:#b5b9b5;line-height:1.7;font-size:18px}
.showcase-copy>a{display:inline-block;margin-top:18px;padding-bottom:5px;border-bottom:1px solid #fff;font-family:"DM Mono";font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.showcase-browser{overflow:hidden;border:1px solid #303431;border-radius:18px;background:#121412;box-shadow:0 30px 80px #0007}
.showcase-window{height:620px;overflow:hidden;background:#eee8dd}
.showcase-window img{width:100%;height:auto;transform:translateY(0);transition:transform 16s linear}
.showcase-browser:hover .showcase-window img{transform:translateY(calc(-100% + 620px))}

.page-gallery{padding:125px clamp(22px,5vw,78px);background:var(--cream);color:var(--ink)}
.gallery-card{display:grid;grid-template-columns:.42fr .58fr;gap:55px;align-items:start;margin-bottom:110px}
.gallery-card.reverse{grid-template-columns:.58fr .42fr}.gallery-card.reverse .gallery-label{order:2}.gallery-card.reverse .showcase-browser{order:1}
.gallery-label{position:sticky;top:120px}
.gallery-label span{font-family:"DM Mono";font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#6c6962}
.gallery-label strong{display:block;margin-top:20px;font-family:"Archivo Black";font-size:clamp(36px,4.6vw,72px);line-height:.95;letter-spacing:-.05em;text-transform:uppercase}
.page-gallery .showcase-window{height:680px}
.page-gallery .showcase-browser:hover .showcase-window img{transform:translateY(calc(-100% + 680px))}

.comparison{padding:125px clamp(22px,5vw,78px);background:#161714}
.comparison-heading{display:grid;grid-template-columns:.5fr 1.5fr;gap:50px;margin-bottom:75px}
.comparison-heading h2{font-size:clamp(48px,6.7vw,104px)}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.comparison-grid article{padding:42px;background:#20211e;border:1px solid #363833}
.comparison-grid .included{background:var(--acid);color:#0b0c0c}
.card-label{font-family:"DM Mono";font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.comparison-grid h3{margin:22px 0;font-size:clamp(28px,3vw,45px);line-height:1}
.comparison-grid ul{margin:0;padding-left:19px}.comparison-grid li,.comparison-grid article>p:not(.card-label){margin:0 0 13px;line-height:1.65}
.separate p{color:#bdc0bc}

.process{padding:125px clamp(22px,5vw,78px);background:#0b0c0c}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:75px;border-top:1px solid #333633;border-bottom:1px solid #333633}
.process-grid article{padding:32px 24px 42px;border-right:1px solid #333633}.process-grid article:last-child{border-right:0}
.process-grid h3{color:#fff}.process-grid p{color:#aeb2ae}

.pricing{padding:125px clamp(22px,5vw,78px);display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;background:#2a6fff}
.pricing-copy h2{font-size:clamp(46px,6vw,92px)}
.pricing-copy>p:not(.eyebrow){font-size:18px;line-height:1.65;max-width:620px}
.price-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price-cards article{padding:32px;background:#0c0d0d;min-height:390px;display:flex;flex-direction:column}
.price-cards article>span{font-family:"DM Mono";font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#aeb2af}
.price-cards strong{display:block;margin:30px 0 18px;font-family:"Archivo Black";font-size:clamp(70px,7vw,105px);line-height:.8;letter-spacing:-.07em}
.price-cards sup{font-size:.35em;vertical-align:top;position:relative;top:.18em}
.price-cards small{font-family:"DM Sans";font-size:.18em;letter-spacing:0}
.price-cards p{color:#bec1be;line-height:1.6}
.clarification{margin-top:auto;padding-top:22px;border-top:1px solid #343735;color:#8f9490;font-size:12px;line-height:1.55}

.faq{padding:125px clamp(22px,5vw,78px);background:var(--cream);color:var(--ink)}
.faq-list{max-width:980px;margin:75px 0 0 auto;border-top:1px solid #ada69b}
details{border-bottom:1px solid #ada69b}
summary{cursor:pointer;list-style:none;padding:25px 0;font-size:clamp(20px,2vw,28px);font-weight:600;display:flex;justify-content:space-between;gap:25px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"DM Mono";font-weight:400}
details[open] summary::after{content:"−"}
details p{max-width:780px;margin:0 0 28px;color:#595750;line-height:1.7}

.contact{padding:130px clamp(22px,5vw,78px);background:var(--acid);color:#0b0c0c}
.contact .eyebrow{color:#5b6019}
.contact h2{font-size:clamp(58px,9vw,145px)}
.contact>p:not(.eyebrow){max-width:720px;font-size:19px;line-height:1.65}
.contact-actions{display:flex;gap:28px;flex-wrap:wrap;margin-top:35px;font-family:"DM Mono";font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.contact-actions a{padding-bottom:5px;border-bottom:1px solid #0b0c0c}

footer{padding:34px clamp(22px,5vw,78px);display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;background:#090a0b;color:#8e928e;font-family:"DM Mono";font-size:9px;letter-spacing:.14em;text-transform:uppercase}
footer>a:first-child{width:180px}footer>a:last-child{text-align:right}footer div{display:flex;gap:22px}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:130px}.hero-visual{min-height:650px}
  .section-heading,.comparison-heading{grid-template-columns:1fr}
  .overview-copy{padding-left:0}
  .showcase{grid-template-columns:1fr}
  .gallery-card,.gallery-card.reverse{grid-template-columns:1fr}.gallery-card.reverse .gallery-label,.gallery-card.reverse .showcase-browser{order:initial}.gallery-label{position:static}
  .pricing{grid-template-columns:1fr}
}
@media(max-width:780px){
  .site-header{height:70px}.site-header nav{display:none}
  .menu-button{display:block;justify-self:end;width:42px;height:42px;border:0;background:none;position:relative}
  .menu-button span:not(.sr-only){position:absolute;left:9px;width:24px;height:2px;background:#fff}.menu-button span:first-child{top:16px}.menu-button span:nth-child(2){top:24px}
  .menu-button[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}.menu-button[aria-expanded=true] span:nth-child(2){top:20px;transform:rotate(-45deg)}
  .mobile-menu{position:fixed;z-index:90;inset:0;padding:95px 22px 45px;background:#090a0b;flex-direction:column;justify-content:center}
  .mobile-menu.open{display:flex}.mobile-menu a{padding:10px 0;border-bottom:1px solid #303330;font-family:"Archivo Black";font-size:clamp(34px,10vw,58px);line-height:1;text-transform:uppercase}
  .hero,.overview,.showcase,.page-gallery,.comparison,.process,.pricing,.faq,.contact{padding-left:18px;padding-right:18px}
  .hero h1,.section-heading h2,.showcase-copy h2,.comparison-heading h2,.pricing-copy h2,.contact h2{overflow-wrap:anywhere;font-size:clamp(42px,13vw,72px);line-height:.9}
  .hero-price,.overview-copy,.comparison-grid,.price-cards{grid-template-columns:1fr}
  .feature-grid,.process-grid{grid-template-columns:1fr}.feature-grid article,.process-grid article{border-right:0;border-bottom:1px solid #bdb5a8}.process-grid article{border-bottom-color:#333633}
  .browser-mockup{width:93%;height:76%}.phone-mockup{width:39%;height:57%}.hero-visual{min-height:560px}
  .showcase-window,.page-gallery .showcase-window{height:510px}
  .showcase-browser:hover .showcase-window img,.page-gallery .showcase-browser:hover .showcase-window img{transform:none}
  footer{grid-template-columns:1fr;text-align:center}footer>a:first-child{margin:auto}footer>a:last-child{text-align:center}footer div{justify-content:center;flex-wrap:wrap}
}
@media(max-width:520px){
  .hero{padding-top:110px}.hero-visual{min-height:480px}.browser-mockup{height:72%;border-radius:14px}.browser-top{height:38px;font-size:8px}.browser-viewport{height:calc(100% - 38px)}.phone-mockup{width:41%;height:59%;border-width:6px;border-radius:24px}
  .hero-actions .button{width:100%;text-align:center}.overview-copy{grid-template-columns:1fr}.gallery-card{margin-bottom:75px}
}


/* v39 — tighter editorial rhythm */
.overview-copy{margin-top:45px;margin-bottom:62px}
.feature-grid article{padding-top:28px;padding-bottom:32px}
.showcase-copy>p:not(.eyebrow){max-width:600px}
.comparison-heading{margin-bottom:58px}
.process-grid{margin-top:58px}
.faq-list{margin-top:58px}
@media(max-width:780px){
  .overview-copy{margin-top:34px;margin-bottom:48px}
  .comparison-heading,.process-grid,.faq-list{margin-top:42px}
}


/* v53 — annual hosting option + stronger brief CTAs */
.hero-price em{display:block;margin-top:7px;color:#eaff4f;font-family:"DM Mono";font-size:8px;font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.hosting-options{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:24px 0 18px}
.hosting-option{padding:18px 14px;border:1px solid #343735;background:#111312;text-align:center}
.hosting-option strong{margin:0!important;font-size:clamp(43px,4.5vw,68px)!important;white-space:nowrap}
.hosting-option>span{display:block;margin-top:10px;color:#9ca19d;font-family:"DM Mono";font-size:8px;letter-spacing:.11em;text-transform:uppercase}
.hosting-option.annual{border-color:#eaff4f;background:#eaff4f;color:#090a0b}
.hosting-option.annual>span{color:#40450e;font-weight:600}
.hosting-or{font-family:"DM Mono";font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8d928f}
.pricing-cta{grid-column:1/-1;margin-top:22px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#0b0c0c;color:#fff}
.pricing-cta span{display:block;font-family:"DM Mono";font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#969b98}
.pricing-cta strong{display:block;margin-top:7px;font-size:22px}
.pricing-cta a{flex:0 0 auto;padding:15px 18px;background:#eaff4f;color:#090a0b;font-family:"DM Mono";font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
@media(max-width:780px){
  .hosting-options{grid-template-columns:1fr}
  .hosting-or{padding:0;text-align:center}
  .pricing-cta{align-items:stretch;flex-direction:column}
  .pricing-cta a{text-align:center}
}