:root {
  --bg: #0a0f14;
  --surface: #0d171b;
  --surface-light: #122126;
  --text: #eef5f3;
  --muted: #a9c0ba;
  --accent: #58e7bd;
  --accent-bright: #82f5ca;
  --accent-deep: #06231f;
  --border: rgba(130, 245, 202, 0.14);
  --max-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.menu-locked { overflow:hidden; height:100%; touch-action:none; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.nav-shell {
  width: min(calc(100% - 48px), var(--max-width));
  height: 84px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 700; letter-spacing: -.65px; }
.brand-mark { width: 32px; height: 32px; }
.brand-logo { display:block;width:170px;height:auto; }
.footer-brand-logo { width:200px; }
.brand-dot { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 38px; color: var(--muted); font-size: 14px; font-weight: 500; }
.site-nav > a:not(.button) { transition: color .2s ease; }
.site-nav > a:not(.button):hover { color: var(--text); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 0 22px; color: var(--accent-deep); background: var(--accent); box-shadow: 0 0 30px rgba(88,231,189,.13); }
.button-primary { min-height: 54px; padding: 0 27px; color: var(--accent-deep); background: linear-gradient(135deg, var(--accent-bright), var(--accent)); box-shadow: 0 13px 45px rgba(50, 210, 172, .17); }
.button-primary:hover, .button-small:hover { box-shadow: 0 15px 50px rgba(50, 210, 172, .25); }
.arrow-icon { position:relative; display:inline-block; flex:0 0 12px; width:12px; height:12px; color:currentColor; }
.arrow-icon::before { content:''; position:absolute; inset:0; background:currentColor; clip-path:polygon(35% 6%,100% 6%,100% 71%,82% 71%,82% 37%,24% 95%,10% 81%,68% 24%,35% 24%); }
.arrow-icon::after { content:none; }
.trend > .arrow-icon { margin-right:2px; color:var(--accent); vertical-align:-1px; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 920px;
  padding: 180px 24px 80px;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 50% 44%, rgba(20, 91, 78, .18), transparent 39%);
}
.hero-inner { position: relative; z-index: 3; max-width: 970px; margin: 0 auto; }
.eyebrow {
  width: fit-content;
  margin: 0 auto 26px;
  padding: 8px 14px;
  border: 1px solid rgba(88,231,189,.21);
  border-radius: 999px;
  background: rgba(55,193,159,.07);
  color: var(--accent-bright);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.eyebrow span { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); vertical-align: 1px; }
h1 { margin: 0; font-size: clamp(48px, 6.1vw, 82px); line-height: 1.02; letter-spacing: -.064em; font-weight: 600; }
h1 span { color: var(--accent-bright); }
.hero-copy { max-width: 680px; margin: 28px auto 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 35px; }
.text-link { color: var(--muted); font-size: 14px; font-weight: 600; transition: color .2s ease; }
.text-link:hover { color: var(--text); }
.social-proof { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; color: var(--muted); font-size: 13px; }
.hero-proof-copy { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.proof-stars { color:#ffc928; font-size:11px; line-height:1; letter-spacing:2px; }
.social-proof p { display: flex; align-items: center; gap: 10px; margin: 0; }
.social-proof strong { color: var(--text); font-weight: 600; }
.social-proof i { width: 3px; height: 3px; border-radius: 50%; background: #58736c; }
.avatars { display: flex; }
.avatars span { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -7px; border: 2px solid var(--bg); border-radius: 50%; color: var(--accent-deep); background: #dffbf3; font-size: 9px; font-style: normal; font-weight: 700; }
.avatars span:first-child { margin-left: 0; background: #82f5ca; }
.avatars span:last-child { background: #a9c0ba; }

.hero-card {
  position: relative;
  z-index: 2;
  width: min(720px, calc(100% - 48px));
  height: 236px;
  margin: 66px auto 0;
  padding: 25px 28px 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(130,245,202,.16);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(150deg, rgba(18,38,41,.93), rgba(9,19,23,.93));
  box-shadow: 0 30px 120px rgba(0,0,0,.55), 0 0 80px rgba(36,178,146,.08);
}
.card-topline { display: flex; justify-content: space-between; color: #829d96; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.metric { margin-top: 12px; font-size: 38px; font-weight: 600; letter-spacing: -.05em; }
.metric > span:first-child { margin-right: 2px; color: var(--accent); font-size: 22px; vertical-align: 8px; }
.metric-cents { font-size: 24px; color: #aac2bc; }
.trend { color: var(--accent); font-size: 12px; font-weight: 600; }
.trend span { margin-left: 5px; color: #6f8b84; font-weight: 400; }
.chart { position: absolute; inset: auto 0 0; height: 125px; }
.chart svg { width: 100%; height: 100%; }
.chart-area { fill: url(#chart-fill); }
.chart-line { fill: none; stroke: #63ecc3; stroke-width: 2; filter: drop-shadow(0 0 7px rgba(99,236,195,.6)); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hero-glow-one { width: 460px; height: 300px; left: -230px; top: 260px; background: rgba(25,149,124,.08); }
.hero-glow-two { width: 430px; height: 300px; right: -230px; top: 180px; background: rgba(60,210,173,.07); }
.grid-fade { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(130,245,202,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(130,245,202,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 48%, black, transparent 64%); }
.platform-strip { min-height: 160px; display: flex; align-items: center; justify-content: center; gap: 32px; border-top: 1px solid var(--border); color: #708b84; background: #091114; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.platform-strip p { display: flex; gap: 8px; align-items: baseline; }
.platform-strip strong { color: #a7bcb7; font-size: 16px; text-transform: none; letter-spacing: -.02em; }
.platform-strip > span { width: 1px; height: 30px; background: var(--border); }

.section { padding: 130px max(24px, calc((100vw - var(--max-width)) / 2)); overflow: hidden; }
.section-heading { max-width: 780px; margin: 0 auto 60px; text-align: center; }
.section-heading .eyebrow { margin-bottom: 22px; }
.section h2, .final-cta h2 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: 1.06; letter-spacing: -.055em; font-weight: 500; }
.section h2 em { color: var(--accent-bright); font-family: Georgia, serif; font-weight: 400; }
.section-heading > p, .final-cta > p { max-width: 650px; margin: 20px auto 0; color: var(--muted); line-height: 1.7; }
.benefits { background: #080e13; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.feature-card { min-height: 258px; padding: 31px; border: 1px solid rgba(130,245,202,.14); border-radius: 24px; background: linear-gradient(145deg, rgba(16,31,35,.96), rgba(10,18,24,.96)); box-shadow: inset 0 0 40px rgba(60,225,185,.025); }
.feature-icon { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 28px; border: 1px solid rgba(130,245,202,.25); border-radius: 12px; color: var(--accent-bright); background: rgba(88,231,189,.07); box-shadow: 0 0 22px rgba(88,231,189,.08); }
.feature-card h3, .design-points h3 { margin: 0 0 13px; font-size: 21px; letter-spacing: -.025em; }
.feature-card p, .design-points p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.designs { padding-inline: 0; background: radial-gradient(circle at 50% 45%,rgba(28,120,101,.15),transparent 38%),#0a1015; }
.designs .section-heading { padding-inline: 24px; }
.swipe-track { cursor: grab; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.swipe-track::-webkit-scrollbar { display: none; }
.swipe-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.design-rail { --email-tile-width:clamp(230px,23vw,310px);display:flex;gap:22px;width:100%;padding:10px calc((100vw - var(--email-tile-width))/2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100vw - var(--email-tile-width))/2); }
.email-tile { flex:0 0 var(--email-tile-width);height:250px;display:grid;place-items:center;padding:16px;overflow:hidden;border:1px solid rgba(130,245,202,.13);border-radius:21px;background:#101821;scroll-snap-align:center;cursor:pointer;opacity:.62;transform:scale(.95);transition:opacity .3s ease,transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.email-design-image{display:block;width:112px;height:218px;object-fit:cover;object-position:top;border-radius:3px;box-shadow:0 15px 30px rgba(0,0,0,.5);pointer-events:none}
.email-tile.featured { opacity:1;border-color:rgba(130,245,202,.42);transform:scale(1);box-shadow:0 0 45px rgba(88,231,189,.08); }
.mini-mail { width: 98px; height: 195px; display: flex; flex-direction: column; align-items: center; padding: 22px 8px; color: white; text-align: center; box-shadow: 0 15px 30px rgba(0,0,0,.5); }
.mini-mail small { font-size: 6px; letter-spacing: .08em; }.mini-mail b { margin: 25px 0 8px; font-size: 14px; }.mini-mail span { font-size: 7px; }.mini-mail button { margin-top: auto; padding: 7px 10px; border: 0; color: inherit; background: rgba(255,255,255,.18); font-size: 6px; }
.email-purple .mini-mail{background:linear-gradient(#412976,#160c2d)}.email-gold .mini-mail{background:linear-gradient(#322816,#0c0b08)}.email-green .mini-mail{background:linear-gradient(#177666,#072823)}.email-red .mini-mail{background:linear-gradient(#771f38,#240912)}.email-blue .mini-mail{background:linear-gradient(#184967,#071c2b)}.email-orange .mini-mail{background:linear-gradient(#9a4b20,#301207)}.email-pink .mini-mail{background:linear-gradient(#a63c67,#35101f)}.email-slate .mini-mail{background:linear-gradient(#46525d,#10171d)}.email-cyan .mini-mail{background:linear-gradient(#167d8a,#06252b)}.email-cream .mini-mail{color:#18211e;background:linear-gradient(#f0e7d2,#a99877)}
.design-focus { position: relative; width: min(920px,calc(100% - 48px)); height: 570px; margin: 75px auto 0; overflow: hidden; border: 1px solid rgba(130,245,202,.15); border-radius: 34px; background: radial-gradient(circle at 50% 80%,rgba(58,199,165,.22),transparent 50%),#0b141a; }
.phone-shell { width: 300px; height: 610px; margin: 100px auto 0; padding: 13px; border: 3px solid #53615e; border-radius: 51px; background: #030506; box-shadow: 0 30px 80px #000; }
.phone-notch { width: 100px; height: 23px; margin: 0 auto; border-radius: 20px; background:#000; }
.phone-mail { position:relative;height:530px;margin-top:15px;padding:70px 24px;overflow:hidden;color:#daf8ef;text-align:center;transition:background .35s ease; }
.phone-design-image{position:absolute;z-index:2;inset:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;background:#0b1114}.phone-mail>small,.phone-mail>b,.phone-mail>p,.phone-mail>span{position:relative;z-index:1;visibility:hidden}
.phone-mail.theme-purple .phone-design-image,.phone-mail.theme-red .phone-design-image{inset:0 auto auto -3%;width:106%;min-height:100%}
.phone-mail.theme-green{background:linear-gradient(160deg,#0e4038,#071612 55%,#16332d)}.phone-mail.theme-purple{background:linear-gradient(160deg,#4b2878,#160d2d 56%,#25133b)}.phone-mail.theme-gold{background:linear-gradient(160deg,#4f401d,#151108 56%,#302712)}.phone-mail.theme-red{background:linear-gradient(160deg,#70233a,#220a13 56%,#441323)}.phone-mail.theme-blue{background:linear-gradient(160deg,#1b5876,#081c2a 56%,#10384e)}.phone-mail.theme-orange{background:linear-gradient(160deg,#8b421f,#2b1007 56%,#4f210e)}.phone-mail.theme-pink{background:linear-gradient(160deg,#96385e,#2c0d1a 56%,#541a32)}.phone-mail.theme-slate{background:linear-gradient(160deg,#3e4b55,#0d151b 56%,#222e36)}.phone-mail.theme-cyan{background:linear-gradient(160deg,#126f7c,#052128 56%,#0b424c)}.phone-mail.theme-cream{color:#18211e;background:linear-gradient(160deg,#ede3cd,#9f8d6c 56%,#c9b994)}
.phone-mail.is-changing b,.phone-mail.is-changing p,.phone-mail.is-changing span{animation:mail-change .42s ease both}@keyframes mail-change{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.phone-mail small{letter-spacing:.14em;font-size:9px}.phone-mail b{display:block;margin:30px 0 15px;font-size:30px;line-height:1.05}.phone-mail p{color:#9fc5ba;font-size:12px;line-height:1.6}.phone-mail span{display:inline-block;margin-top:20px;padding:12px 15px;background:var(--accent);color:#06231f;font-size:9px;font-weight:700}
.focus-stat { position:absolute; right:42px; bottom:42px; padding:20px 25px; border:1px solid var(--border); border-radius:16px; background:rgba(8,18,21,.85); }.focus-stat strong{display:block;color:var(--accent);font-size:30px}.focus-stat span{color:var(--muted);font-size:12px}
.focus-stat strong.is-changing{animation:growth-change .4s cubic-bezier(.22,1,.36,1) both}@keyframes growth-change{from{opacity:0;transform:translateY(7px) scale(.9)}to{opacity:1;transform:none}}
.design-points { width: min(var(--max-width),calc(100% - 48px)); margin: 55px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:45px; }
.testimonials { padding-inline:0; background:#0a1015; }.testimonials .section-heading{padding-inline:24px}.review-track{display:flex;align-items:flex-start;gap:28px;padding:20px max(24px,calc((100vw - var(--max-width))/2));overflow-x:auto;scroll-snap-type:none;scroll-padding-inline:max(24px,calc((100vw - var(--max-width))/2))}.review-card{flex:0 0 clamp(300px,32vw,420px);min-height:310px;padding:31px;border:1px solid var(--border);border-radius:23px;background:linear-gradient(145deg,#101a21,#0c141b);scroll-snap-align:center}.review-card.featured{margin-top:0}.review-head{display:flex;align-items:center;gap:14px}.review-head>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(88,231,189,.12);color:var(--accent)}.review-head p{margin:0}.review-head strong,.review-head i{display:block}.review-head i{margin-top:4px;color:#ffc928;font-size:11px;font-style:normal;letter-spacing:2px}.review-card blockquote{margin:27px 0 0;color:var(--muted);font-size:15px;line-height:1.65}
.final-cta { position:relative; width:min(calc(100% - 48px),var(--max-width)); min-height:610px; margin:0 auto 90px; padding:105px 30px; overflow:hidden; border:1px solid var(--border);border-radius:30px;text-align:center;background:radial-gradient(circle at 50% 10%,rgba(88,231,189,.20),transparent 47%),#0b141a}.final-cta>*{position:relative;z-index:1}.cta-glow{position:absolute;z-index:0;inset:auto 20% -180px;height:300px;background:rgba(88,231,189,.13);filter:blur(80px)}.final-cta .button{margin-top:30px}.cta-proof{margin-top:38px;display:flex;flex-direction:column;align-items:center}.cta-proof b{margin:8px 0;color:#ffc928;letter-spacing:3px;font-size:11px}.cta-proof p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.site-footer{width:min(calc(100% - 48px),var(--max-width));margin:auto;padding:70px 0 30px;border-top:1px solid var(--border)}.footer-top{display:flex;align-items:center;justify-content:space-between}.footer-top p{color:var(--muted)}.footer-links{display:flex;gap:100px;margin:70px 0}.footer-links div{display:flex;flex-direction:column;gap:12px}.footer-links span{margin-bottom:7px;color:#62766f;text-transform:uppercase;letter-spacing:.1em;font-size:10px}.footer-links a{color:var(--muted);font-size:14px}.footer-links a:hover{color:var(--text)}.footer-bottom{display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid var(--border);color:#60756f;font-size:11px}

@media (max-width: 720px) {
  .nav-shell { width: min(calc(100% - 32px), var(--max-width)); height: 72px; }
  .brand { position:relative; z-index:4; font-size: 19px; }
  .brand-mark { width: 29px; height: 29px; }
  .brand-logo { width:145px; }
  .menu-toggle { position: relative; z-index: 4; display: grid; place-content: center; gap: 6px; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(130,245,202,.2); border-radius: 50%; background: rgba(12,27,29,.82); box-shadow:0 8px 28px rgba(0,0,0,.18); }
  .menu-toggle span:not(.sr-only) { display: block; width: 17px; height: 1px; background: var(--text); transition: transform .2s ease; }
  .menu-open .menu-toggle span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; z-index:3; inset: 0; width:100%; height: 100vh; height:100dvh; display: flex; flex-direction: column; justify-content: center; gap: 13px; padding:110px 24px 48px; overflow:hidden; background:radial-gradient(circle at 78% 18%,rgba(61,220,180,.18),transparent 30%),radial-gradient(circle at 14% 82%,rgba(25,125,105,.16),transparent 34%),#071013; font-size: 22px; opacity: 0; visibility:hidden; pointer-events: none; transform:scale(1.025); transition: opacity .28s ease,transform .28s ease,visibility .28s; }
  .site-nav::before { content:'Navigation'; width:min(100%,340px); margin:0 auto 12px; color:#5e7770; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
  .site-nav::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.14; background-image:linear-gradient(rgba(130,245,202,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(130,245,202,.08) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(circle at 50% 50%,black,transparent 75%); }
  .menu-open .site-nav { opacity: 1; visibility:visible; pointer-events: auto; transform:none; }
  .site-nav > a:not(.button) { position:relative; width:min(100%,340px); margin:0 auto; padding:18px 18px; border:1px solid rgba(130,245,202,.11); border-radius:14px; color:#dceae6; background:rgba(255,255,255,.025); font-size:22px; letter-spacing:-.035em; }
  .site-nav > a:not(.button)::after { content:''; position:absolute; top:50%; right:20px; width:7px; height:7px; border-top:1.5px solid var(--accent); border-right:1.5px solid var(--accent); transform:translateY(-50%) rotate(45deg); }
  .site-nav > a.nav-active { border-color:rgba(130,245,202,.3); background:rgba(88,231,189,.07); }
  .site-nav .button { width:min(100%,340px); min-height:56px; margin:10px auto 0; border-radius:14px; font-size:15px; }
  .hero { min-height: 830px; padding: 142px 20px 0; }
  h1 { font-size: clamp(42px, 12.5vw, 60px); line-height: 1.04; }
  .desktop-break { display: none; }
  .hero-copy { margin-top: 23px; font-size: 15px; line-height: 1.65; }
  .hero-actions { margin-top: 29px; gap: 21px; }
  .button-primary { min-height: 50px; padding: 0 22px; }
  .social-proof { flex-direction: column; gap: 9px; }
  .hero-proof-copy { align-items:center; }
  .hero-card { width: calc(100% + 10px); height: 205px; margin-top: 48px; padding: 22px 20px 0; border-radius: 18px 18px 0 0; }
  .metric { font-size: 30px; }
  .metric-cents { font-size: 19px; }
  .chart { height: 102px; }
  .platform-strip { min-height: 135px; gap: 18px; }
  .section{padding:90px 20px}.section-heading{margin-bottom:42px}.section h2,.final-cta h2{font-size:40px}.feature-grid{grid-template-columns:1fr;gap:15px}.feature-card{min-height:auto;padding:26px}.feature-icon{margin-bottom:20px}.designs,.testimonials{padding-inline:0}.design-rail{gap:14px;padding-inline:20px;scroll-padding-inline:20px}.email-tile{flex-basis:76vw;height:220px}.email-tile.featured{transform:none}.design-focus{width:calc(100% - 40px);height:450px;margin-top:45px}.phone-shell{width:240px;height:520px;margin-top:65px}.phone-mail{height:450px;padding:55px 18px}.focus-stat{z-index:5;right:auto;left:50%;bottom:14px;width:174px;padding:12px 15px;transform:translateX(-50%);text-align:center}.focus-stat strong{font-size:24px}.focus-stat span{font-size:10px}.design-points{width:calc(100% - 40px);grid-template-columns:1fr;gap:25px}.review-track{gap:16px;padding-inline:20px;scroll-padding-inline:20px}.review-card{flex-basis:calc(100vw - 50px);min-height:290px}.review-card.featured{margin-top:0}.final-cta{width:calc(100% - 40px);min-height:570px;margin-bottom:60px;padding:80px 20px}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}.footer-links{gap:50px;margin:50px 0}.site-footer{width:calc(100% - 40px)}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Flow system */
.flow-system { background:radial-gradient(circle at 50% 52%,rgba(29,123,104,.12),transparent 43%),#091014; }
.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.flow-card { position:relative; min-height:285px; padding:29px; overflow:hidden; border:1px solid rgba(130,245,202,.13); border-radius:22px; background:linear-gradient(145deg,rgba(16,30,35,.98),rgba(9,17,22,.98)); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.flow-card:hover { transform:translateY(-4px); border-color:rgba(130,245,202,.3); box-shadow:0 18px 50px rgba(0,0,0,.22),0 0 35px rgba(88,231,189,.045); }
.flow-number { position:absolute; top:27px; right:27px; color:#47615a; font-size:10px; letter-spacing:.12em; }
.flow-icon { display:grid; place-items:center; width:43px; height:43px; margin-bottom:24px; border:1px solid rgba(130,245,202,.22); border-radius:12px; color:var(--accent-bright); background:rgba(88,231,189,.06); font-size:19px; }
.flow-card h3 { margin:0 0 12px; font-size:20px; letter-spacing:-.025em; }
.flow-card p { margin:0 0 25px; color:var(--muted); font-size:13px; line-height:1.65; }
.flow-card small { position:absolute; left:29px; bottom:27px; color:var(--accent); font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.flow-card-shipping { grid-column:span 2; }
.shipping-stages { display:flex; align-items:center; gap:10px; margin:2px 0 35px; }
.shipping-stages span { padding:7px 9px; border:1px solid rgba(130,245,202,.15); border-radius:999px; color:#a9c0ba; background:rgba(88,231,189,.035); font-size:9px; white-space:nowrap; }
.shipping-stages i { flex:1; height:1px; background:rgba(130,245,202,.16); }
.flow-packages-link { margin-top:36px; color:var(--muted); text-align:center; font-size:13px; }
.flow-packages-link a { margin-left:5px; color:var(--accent-bright); font-weight:600; }
.pricing-flow-system { border-top:1px solid var(--border); }

/* Flows & FAQ page */
.flows-page { background:#080e12; }
.flows-hero { position:relative; min-height:790px; padding:175px 24px 95px; overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 44%,rgba(28,126,104,.15),transparent 44%),#080e12; }
.flows-hero > *:not(.pricing-glow,.grid-fade) { position:relative; z-index:2; }
.flows-hero-inner { max-width:850px; margin:auto; }
.flows-hero-inner h1 { font-size:clamp(52px,6vw,80px); }
.flows-hero-inner > p { max-width:650px; margin:27px auto 0; color:var(--muted); font-size:17px; line-height:1.7; }
.flows-hero-actions { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:34px; }
.journey-strip { display:flex; align-items:center; width:min(calc(100% - 48px),900px); margin:100px auto 0; padding:18px 24px; border:1px solid rgba(130,245,202,.14); border-radius:999px; color:#96ada7; background:rgba(10,24,27,.76); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.journey-strip span { white-space:nowrap; }
.journey-strip i { flex:1; height:1px; margin:0 14px; background:linear-gradient(90deg,rgba(88,231,189,.1),rgba(88,231,189,.55),rgba(88,231,189,.1)); }
.flows-library .flow-card { min-height:300px; }
.flows-process { padding:125px max(24px,calc((100vw - var(--max-width))/2)); background:#080e13; }
.flows-process .section-heading h2,.faq-intro h2 { margin:0; font-size:clamp(40px,5vw,64px); line-height:1.06; letter-spacing:-.055em; font-weight:500; }
.flows-process h2 em,.faq-intro h2 em { color:var(--accent-bright); font-family:Georgia,serif; font-weight:400; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.process-grid article { min-height:245px; padding:31px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(145deg,#101a21,#0c141b); }
.process-grid b { color:var(--accent); font-size:10px; letter-spacing:.12em; }
.process-grid h3 { margin:54px 0 13px; font-size:20px; }
.process-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.faq-section { display:grid; grid-template-columns:.78fr 1.22fr; gap:80px; width:min(calc(100% - 48px),var(--max-width)); margin:auto; padding:130px 0; }
.faq-intro { position:sticky; top:45px; align-self:start; }
.faq-intro .eyebrow { margin:0 0 22px; }
.faq-intro > p { max-width:430px; margin:22px 0 0; color:var(--muted); line-height:1.7; }
.faq-whatsapp { margin-top:30px; }
.faq-list { display:flex; flex-direction:column; }
.faq-list details { border-bottom:1px solid rgba(130,245,202,.13); }
.faq-list details:first-child { border-top:1px solid rgba(130,245,202,.13); }
.faq-list summary { position:relative; padding:24px 50px 24px 0; color:#e7f0ed; font-size:17px; font-weight:600; letter-spacing:-.02em; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary > span { position:absolute; top:50%; right:5px; width:20px; height:20px; transform:translateY(-50%); }
.faq-list summary > span::before,.faq-list summary > span::after { content:''; position:absolute; top:9px; left:4px; width:12px; height:1px; background:var(--accent); transition:transform .2s ease; }
.faq-list summary > span::after { transform:rotate(90deg); }
.faq-list details[open] summary > span::after { transform:rotate(0); }
.faq-list details p { margin:-5px 45px 24px 0; color:var(--muted); font-size:14px; line-height:1.75; }

@media (min-width:721px) and (max-width:980px) {
  .flow-grid { grid-template-columns:repeat(2,1fr); }
  .flow-card-shipping { grid-column:span 2; }
}

@media (max-width:720px) {
  .flow-grid { grid-template-columns:1fr; gap:14px; }
  .flow-card,.flow-card-shipping { grid-column:auto; min-height:270px; padding:25px; }
  .flow-card small { left:25px; bottom:24px; }
  .shipping-stages { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .shipping-stages i { display:none; }
  .shipping-stages span { text-align:center; white-space:normal; }
  .flows-hero { min-height:720px; padding:135px 20px 75px; }
  .flows-hero-inner h1 { font-size:46px; }
  .flows-hero-inner > p { font-size:15px; }
  .flows-hero-actions { flex-direction:column; gap:20px; }
  .journey-strip { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:65px; padding:15px; border-radius:20px; }
  .journey-strip span { padding:9px; border:1px solid rgba(130,245,202,.1); border-radius:999px; text-align:center; font-size:9px; }
  .journey-strip span:last-child { grid-column:1/-1; }
  .journey-strip i { display:none; }
  .flows-library .flow-card { min-height:285px; }
  .flows-process { padding:90px 20px; }
  .process-grid { grid-template-columns:1fr; gap:14px; }
  .process-grid article { min-height:auto; }
  .process-grid h3 { margin-top:30px; }
  .faq-section { grid-template-columns:1fr; gap:55px; width:calc(100% - 40px); padding:90px 0; }
  .faq-intro { position:static; }
  .faq-list summary { padding-block:21px; font-size:15px; }
  .faq-list details p { margin-right:25px; }
}

/* Pricing page */
.pricing-page { background:#080e12; }
.pricing-header { position:absolute; }
.site-nav .nav-active { color:var(--text); }
.pricing-hero { position:relative; min-height:100vh; padding:172px max(24px,calc((100vw - var(--max-width))/2)) 105px; overflow:hidden; background:radial-gradient(circle at 50% 44%,rgba(28,126,104,.13),transparent 45%),#080e12; }
.pricing-hero > *:not(.pricing-glow,.grid-fade) { position:relative; z-index:2; }
.pricing-glow { position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(110px); background:rgba(52,210,172,.10); }
.pricing-glow-left { left:-260px; top:180px; }
.pricing-glow-right { right:-260px; bottom:40px; }
.pricing-intro { max-width:760px; margin:0 auto 68px; text-align:center; }
.pricing-intro .eyebrow { margin-bottom:22px; }
.pricing-intro h1 { font-size:clamp(48px,5.5vw,74px); }
.pricing-intro p { max-width:620px; margin:24px auto 0; color:var(--muted); font-size:17px; line-height:1.7; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.pricing-card { position:relative; display:flex; flex-direction:column; min-height:590px; padding:34px 25px 25px; border:1px solid rgba(130,245,202,.14); border-radius:22px; background:linear-gradient(150deg,rgba(17,30,35,.98),rgba(10,18,23,.98)); box-shadow:inset 0 0 45px rgba(88,231,189,.02); }
.pricing-card-featured { border-color:rgba(88,231,189,.72); box-shadow:0 0 60px rgba(44,198,161,.09),inset 0 0 45px rgba(88,231,189,.035); }
.best-value { position:absolute; top:-13px; left:50%; transform:translateX(-50%); min-width:92px; padding:7px 13px; border-radius:999px; color:#06231f; background:linear-gradient(135deg,var(--accent),var(--accent-bright)); text-align:center; text-transform:uppercase; letter-spacing:.08em; font-size:9px; font-weight:700; }
.package-icon { display:grid; place-items:center; width:43px; height:43px; margin-bottom:22px; border:1px solid rgba(130,245,202,.23); border-radius:12px; color:var(--accent-bright); background:rgba(88,231,189,.06); font-size:21px; }
.pricing-card h2 { margin:0; font-size:22px; letter-spacing:-.03em; }
.package-description { min-height:47px; margin:10px 0 22px; color:#78918a; font-size:13px; line-height:1.55; }
.package-price { display:flex; align-items:baseline; margin-bottom:28px; color:var(--text); font-size:43px; font-weight:600; letter-spacing:-.055em; }
.package-price > span { margin-right:2px; font-size:24px; }
.package-price small { margin-left:9px; color:#687c76; font-size:12px; font-weight:400; letter-spacing:0; }
.package-meta { display:flex; flex-wrap:wrap; gap:8px; margin:-10px 0 23px; }
.package-meta span { padding:6px 10px; border:1px solid rgba(130,245,202,.14); border-radius:999px; color:#a8c8bf; background:rgba(88,231,189,.055); font-size:10px; font-weight:600; }
.package-fit { margin:0 0 18px; color:#a8bbb6; font-size:12px; line-height:1.55; }
.package-fit small { display:block; margin-bottom:5px; color:#647b75; text-transform:uppercase; letter-spacing:.09em; font-size:9px; }
.package-feature-group { padding-top:23px; border-top:1px solid var(--border); }
.package-feature-group + .package-feature-group { margin-top:2px; }
.package-feature-group h3 { margin:0 0 17px; color:#718b84; text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:600; }
.package-features { display:flex; flex-direction:column; gap:14px; margin:0 0 30px; padding:0; list-style:none; color:#c4d4d0; font-size:13px; line-height:1.45; }
.package-features li { position:relative; padding-left:25px; }
.package-features li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }
.package-button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; margin-top:auto; border:1px solid rgba(130,245,202,.17); border-radius:11px; color:var(--text); background:rgba(255,255,255,.012); font-size:13px; font-weight:600; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.package-button-inline { flex:0 0 auto; margin:0 0 26px; }
.package-button:hover { transform:translateY(-2px); border-color:rgba(130,245,202,.42); background:rgba(88,231,189,.05); }
.package-button-featured { border-color:transparent; color:#06231f; background:linear-gradient(135deg,#20c8b4,#83efb1); }
.package-button-featured:hover { border-color:transparent; background:linear-gradient(135deg,#42dbc2,#9bf5c3); }
.pricing-help { margin:42px auto 0; color:var(--muted); text-align:center; font-size:13px; }
.pricing-help a { color:var(--accent-bright); font-weight:600; }
.pricing-promise { width:min(calc(100% - 48px),var(--max-width)); margin:auto; padding:125px 0; }
.pricing-promise > div:first-child { margin-bottom:55px; text-align:center; }
.pricing-promise .eyebrow { justify-content:center; margin:0 auto 18px; }
.pricing-promise h2,.pricing-cta h2 { margin:0; font-size:clamp(40px,5vw,64px); line-height:1.06; letter-spacing:-.055em; font-weight:500; }
.pricing-promise h2 em { color:var(--accent-bright); font-family:Georgia,serif; font-weight:400; }
.promise-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); }
.promise-grid article { padding:35px 35px 10px 0; }
.promise-grid article + article { padding-left:35px; border-left:1px solid var(--border); }
.promise-grid b { color:var(--accent); font-size:11px; letter-spacing:.1em; }
.promise-grid h3 { margin:24px 0 12px; font-size:19px; }
.promise-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.pricing-cta { position:relative; width:min(calc(100% - 48px),var(--max-width)); min-height:500px; margin:0 auto 90px; padding:95px 30px; overflow:hidden; border:1px solid var(--border); border-radius:30px; text-align:center; background:radial-gradient(circle at 50% 10%,rgba(88,231,189,.20),transparent 47%),#0b141a; }
.pricing-cta > * { position:relative; z-index:1; }
.pricing-cta p { max-width:580px; margin:20px auto 0; color:var(--muted); line-height:1.7; }
.pricing-cta .button { margin-top:30px; }

@media (max-width:900px) {
  .pricing-grid { grid-template-columns:1fr; max-width:620px; margin:auto; gap:24px; }
  .pricing-card { min-height:auto; }
  .package-description { min-height:0; }
}

@media (max-width:720px) {
  .pricing-hero { padding:130px 20px 75px; }
  .pricing-intro { margin-bottom:48px; }
  .pricing-intro h1 { font-size:44px; }
  .pricing-intro p { font-size:15px; }
  .pricing-card { padding:29px 23px 23px; border-radius:19px; }
  .package-price { font-size:39px; }
  .pricing-help { line-height:1.6; }
  .pricing-promise { width:calc(100% - 40px); padding:90px 0; }
  .promise-grid { grid-template-columns:1fr; }
  .promise-grid article { padding:30px 0; }
  .promise-grid article + article { padding-left:0; border-top:1px solid var(--border); border-left:0; }
  .pricing-cta { width:calc(100% - 40px); min-height:500px; margin-bottom:60px; padding:80px 20px; }
}

/* Contact page */
.contact-page { background:#080e12; }
.contact-hero { position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; min-height:980px; padding:165px max(24px,calc((100vw - var(--max-width))/2)) 110px; overflow:hidden; }
.contact-hero > *:not(.grid-fade,.contact-glow) { position:relative; z-index:2; }
.contact-glow { position:absolute; top:120px; left:-200px; width:650px; height:650px; border-radius:50%; background:rgba(38,190,155,.1); filter:blur(120px); }
.contact-intro .eyebrow { margin:0 0 24px; }
.contact-intro h1 { font-size:clamp(48px,5vw,69px); }
.contact-intro > p { max-width:500px; margin:26px 0 0; color:var(--muted); font-size:16px; line-height:1.75; }
.contact-trust { display:flex; align-items:center; gap:23px; margin-top:42px; }
.contact-trust div { display:flex; flex-direction:column; gap:4px; }
.contact-trust strong { color:var(--text); font-size:18px; }
.contact-trust span { color:#71877f; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.contact-trust i { width:1px; height:36px; background:var(--border); }
.whatsapp-first { position:relative; display:flex; align-items:center; gap:15px; max-width:470px; margin-top:32px; padding:18px 18px; overflow:hidden; border:1px solid rgba(98,245,180,.58); border-radius:17px; background:linear-gradient(110deg,rgba(45,210,145,.16),rgba(30,110,91,.08)); box-shadow:0 12px 38px rgba(0,0,0,.18),0 0 32px rgba(64,225,165,.075); transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.whatsapp-first::after { content:''; position:absolute; inset:-80% auto -80% -35%; width:38%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transition:left .5s ease; }
.whatsapp-first:hover { transform:translateY(-3px); border-color:rgba(118,255,199,.9); background:linear-gradient(110deg,rgba(45,210,145,.22),rgba(30,110,91,.11)); box-shadow:0 16px 45px rgba(0,0,0,.25),0 0 38px rgba(64,225,165,.12); }
.whatsapp-first:hover::after { left:115%; }
.whatsapp-first > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:3px; }
.whatsapp-first strong { color:#edfff8; font-size:15px; }
.whatsapp-first small { color:var(--accent-bright); font-size:10px; font-weight:700; letter-spacing:.035em; text-transform:uppercase; }
.whatsapp-first em { color:#91aaa3; font-size:10px; font-style:normal; }
.whatsapp-first > b { color:var(--accent); }
.whatsapp-symbol { display:grid; flex:0 0 43px; place-items:center; width:43px; height:43px; border-radius:50%; color:#06231f; background:#50e49b; font-size:20px; font-weight:700; box-shadow:0 0 24px rgba(80,228,155,.24); }
.contact-card { padding:38px; border:1px solid rgba(130,245,202,.17); border-radius:27px; background:linear-gradient(145deg,rgba(17,31,36,.98),rgba(9,17,22,.98)); box-shadow:0 35px 100px rgba(0,0,0,.3),0 0 80px rgba(48,201,165,.055); }
.contact-card-heading { margin-bottom:30px; }
.contact-card-heading > span { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.contact-card-heading h2 { margin:10px 0 7px; font-size:28px; letter-spacing:-.04em; }
.contact-card-heading p { margin:0; color:var(--muted); font-size:13px; }
.contact-form { display:flex; flex-direction:column; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.contact-form label { position:relative; display:flex; flex-direction:column; gap:9px; color:#bdd0cb; font-size:12px; font-weight:500; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid rgba(130,245,202,.13); border-radius:11px; outline:0; color:var(--text); background:#0a1419; font:inherit; font-size:13px; transition:border-color .2s ease,box-shadow .2s ease; }
.contact-form input,.contact-form select { height:49px; padding:0 14px; }
.contact-form textarea { min-height:115px; padding:14px; resize:vertical; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#536761; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:rgba(88,231,189,.58); box-shadow:0 0 0 3px rgba(88,231,189,.055); }
.contact-form .field-error { border-color:#ff7085; box-shadow:0 0 0 3px rgba(255,112,133,.07); }
.form-error { position:absolute; z-index:8; top:calc(100% + 10px); left:12px; width:max-content; max-width:min(300px,calc(100vw - 70px)); margin:0; padding:10px 12px; border:1px solid rgba(255,255,255,.17); border-radius:8px; color:#fff; background:#26302e; box-shadow:0 10px 25px rgba(0,0,0,.35); font-size:12px; font-weight:500; line-height:1.4; }
.form-error::before { content:''; position:absolute; bottom:100%; left:15px; border:7px solid transparent; border-bottom-color:#26302e; }
.form-error[hidden] { display:none; }
.contact-form select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#75938b 50%),linear-gradient(135deg,#75938b 50%,transparent 50%); background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size:5px 5px; background-repeat:no-repeat; }
.contact-form select option { color:var(--text); background:#0a1419; }
.contact-submit { display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; margin-top:4px; border:0; border-radius:11px; color:#06231f; background:linear-gradient(135deg,var(--accent-bright),var(--accent)); font:inherit; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 13px 35px rgba(50,210,172,.12); transition:transform .2s ease,box-shadow .2s ease; }
.contact-submit:hover { transform:translateY(-2px); box-shadow:0 15px 45px rgba(50,210,172,.22); }
.form-note { margin:0; color:#667d76; text-align:center; font-size:10px; line-height:1.5; }
.contact-steps { padding:120px max(24px,calc((100vw - var(--max-width))/2)); background:#0a1015; }
.contact-steps .section-heading h2 { font-size:clamp(40px,5vw,64px); }
.contact-steps .section-heading h2 em { color:var(--accent-bright); font-family:Georgia,serif; font-weight:400; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.steps-grid article { min-height:230px; padding:30px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(145deg,#101a21,#0c141b); }
.steps-grid b { color:var(--accent); font-size:11px; letter-spacing:.11em; }
.steps-grid h3 { margin:45px 0 12px; font-size:19px; }
.steps-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.whatsapp-float { position:fixed; z-index:50; right:22px; bottom:22px; display:flex; align-items:center; gap:10px; min-height:48px; padding:7px 8px 7px 17px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#eafff4; background:#10201d; font-size:12px; font-weight:600; box-shadow:0 12px 40px rgba(0,0,0,.38); transition:transform .2s ease,box-shadow .2s ease; }
.whatsapp-float:hover { transform:translateY(-3px); box-shadow:0 16px 45px rgba(0,0,0,.46),0 0 30px rgba(66,211,137,.12); }
.whatsapp-float b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#062319; background:#50e878; font-size:15px; }

@media (max-width:900px) {
  .contact-hero { grid-template-columns:1fr; gap:55px; }
  .contact-intro { max-width:680px; text-align:center; margin:auto; }
  .contact-intro .eyebrow { margin-inline:auto; }
  .contact-intro > p { margin-inline:auto; }
  .contact-trust { justify-content:center; }
  .contact-card { width:min(100%,680px); margin:auto; }
}

@media (max-width:720px) {
  .contact-hero { padding:130px 20px 80px; gap:45px; }
  .contact-intro h1 { font-size:44px; }
  .contact-intro > p { font-size:15px; }
  .contact-trust { gap:13px; }
  .contact-trust strong { font-size:15px; }
  .contact-trust span { font-size:8px; }
  .whatsapp-first { margin-inline:auto; text-align:left; }
  .contact-card { padding:26px 20px; border-radius:20px; }
  .form-row { grid-template-columns:1fr; }
  .contact-steps { padding:90px 20px; }
  .steps-grid { grid-template-columns:1fr; gap:15px; }
  .steps-grid article { min-height:auto; }
  .steps-grid h3 { margin-top:28px; }
  .whatsapp-float { right:14px; bottom:14px; }
  .whatsapp-float > span { display:none; }
  .whatsapp-float { min-height:48px; padding:7px; }
}
