:root {
color-scheme: light;
--page: #F4F1F8;
--page-soft: #E8E2F0;
--panel: #FFFCFF;
--panel-deep: #DDD5E7;
--ink: #20202B;
--muted: #706D7A;
--line: rgba(32, 32, 43, .16);
--line-strong: rgba(32, 32, 43, .38);
--oxblood: #5B3FA8;
--oxblood-hover: #472F88;
--sky: #C7E3F2;
--sky-deep: #5DA9D0;
--lemon: #F2C35B;
--green: #4F967E;
--danger: #D65F67;
--lavender: #D8C9F0;
--shadow: 0 24px 60px -38px rgba(32, 32, 43, .50);
--inset: inset 0 1px 0 rgba(255, 255, 255, .82),
inset 0 -1px 0 rgba(0, 0, 0, .08);
--font: "Aptos", "Segoe UI", Arial, sans-serif;
--ease: cubic-bezier(.2, .8, .2, 1);
--nav-height: 72px;
}
[data-theme="dark"] {
color-scheme: dark;
--page: #11121D;
--page-soft: #191A29;
--panel: #232438;
--panel-deep: #1A1B2B;
--ink: #F4F1FA;
--muted: #AAA8B7;
--line: rgba(244, 241, 250, .15);
--line-strong: rgba(244, 241, 250, .36);
--oxblood: #9B7AE5;
--oxblood-hover: #B095F0;
--sky: #3F718F;
--sky-deep: #70BCE1;
--lemon: #E9C45D;
--green: #6FBA9F;
--danger: #EF777E;
--lavender: #8274AE;
--shadow: 0 28px 66px -36px rgba(0, 0, 0, .90);
--inset: inset 0 1px 0 rgba(255, 255, 255, .08),
inset 0 -1px 0 rgba(0, 0, 0, .40);
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-height) + 18px)
}
body {
margin: 0;
overflow-x: hidden;
background: var(--page);
color: var(--ink);
font-family: var(--font);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background .35s, color .35s
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .26;
background-image: radial-gradient(var(--line-strong) .65px, transparent .65px);
background-size: 10px 10px
}
body.no-scroll {
overflow: hidden
}
::selection {
background: var(--lemon);
color: #17191c
}
::-webkit-scrollbar {
width: 10px
}
::-webkit-scrollbar-track {
background: var(--page)
}
::-webkit-scrollbar-thumb {
background: var(--oxblood);
border: 2px solid var(--page);
border-radius: 999px
}
a {
color: inherit;
text-decoration: none
}
button,
input,
select,
textarea {
font: inherit;
color: inherit
}
button {
cursor: pointer
}
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote {
margin: 0
}
ul,
ol {
padding: 0;
list-style: none
}
img,
svg {
display: block;
max-width: 100%
}
:focus-visible {
outline: 3px solid var(--sky-deep);
outline-offset: 3px
}
.skip-link {
position: fixed;
top: -70px;
left: 18px;
z-index: 3000;
padding: .7rem 1rem;
border-radius: 10px;
background: var(--ink);
color: var(--page);
font-weight: 800;
transition: top .25s
}
.skip-link:focus {
top: 14px
}
.shell {
width: min(1180px, calc(100% - 32px));
margin-inline: auto
}
.module {
position: relative;
border: 1px solid var(--line-strong);
border-bottom: 0;
background: color-mix(in srgb, var(--panel) 91%, transparent)
}
.module:last-of-type {
border-bottom: 1px solid var(--line-strong)
}
.module-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 42px;
padding: .55rem .9rem;
border-bottom: 1px solid var(--line-strong);
background: var(--panel-deep);
color: var(--muted);
font-size: .68rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase
}
.module-label span:first-child {
display: inline-flex;
align-items: center;
gap: .55rem
}
.module-label span:first-child::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--oxblood)
}
.module-body {
padding: clamp(2rem, 5vw, 4.5rem)
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--oxblood);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase
}
.eyebrow::before {
content: "";
width: 20px;
height: 3px;
border-radius: 3px;
background: currentColor
}
.section-title {
max-width: 760px;
margin-top: .7rem;
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 800;
letter-spacing: -.055em;
line-height: .98
}
.section-title span {
color: var(--oxblood)
}
.section-copy {
max-width: 650px;
margin-top: .8rem;
color: var(--muted);
font-size: 1rem
}
.action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 46px;
padding: .74rem 1.15rem;
border: 1px solid var(--ink);
border-radius: 10px;
background: var(--ink);
color: var(--page);
font-size: .88rem;
font-weight: 800;
box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 22%, transparent);
transition: transform .2s var(--ease), box-shadow .2s, background .25s, border-color .25s
}
.action:hover {
transform: translateY(-2px);
box-shadow: 0 8px 0 color-mix(in srgb, var(--ink) 22%, transparent);
color: var(--page)
}
.action:active {
transform: translateY(2px);
box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 22%, transparent)
}
.action.primary {
background: var(--oxblood);
border-color: var(--oxblood);
color: #fff
}
.action.primary:hover {
background: var(--oxblood-hover);
border-color: var(--oxblood-hover)
}
.action.secondary {
background: var(--lemon);
border-color: var(--ink);
color: #17191c
}
.action.outline {
background: var(--panel);
color: var(--ink)
}
.action.small {
min-height: 38px;
padding: .55rem .8rem;
font-size: .78rem;
box-shadow: none
}
/* navigation */
.site-nav {
position: fixed;
inset: 0 0 auto;
z-index: 1100;
min-height: var(--nav-height);
border-bottom: 1px solid var(--line-strong);
background: color-mix(in srgb, var(--page) 88%, transparent);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px)
}
.nav-inner {
width: min(1180px, calc(100% - 32px));
min-height: var(--nav-height);
margin-inline: auto;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: stretch;
border-inline: 1px solid var(--line-strong)
}
.brand {
display: flex;
align-items: center;
gap: .65rem;
padding-inline: 1rem;
border-right: 1px solid var(--line-strong);
font-size: 1.05rem;
font-weight: 900;
letter-spacing: -.03em
}
.brand-mark {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid var(--ink);
border-radius: 9px;
background: var(--lemon);
color: #17191c;
box-shadow: var(--inset);
font-size: 1rem
}
.nav-links {
display: flex;
align-items: stretch;
overflow-x: auto;
scrollbar-width: none
}
.nav-links::-webkit-scrollbar {
display: none
}
.nav-links a {
position: relative;
display: flex;
align-items: center;
padding: 0 .8rem;
border-right: 1px solid var(--line);
color: var(--muted);
font-size: .78rem;
font-weight: 700;
white-space: nowrap;
transition: color .25s, background .25s
}
.nav-links a:hover,
.nav-links a.active {
color: var(--ink);
background: var(--panel)
}
.nav-links a.active::after {
content: "";
position: absolute;
inset: auto .8rem 8px;
height: 3px;
border-radius: 3px;
background: var(--oxblood)
}
.nav-actions {
display: flex;
align-items: stretch
}
.theme-toggle,
.menu-toggle {
width: 54px;
border: 0;
border-left: 1px solid var(--line-strong);
background: transparent;
color: var(--ink);
font-size: 1.1rem;
transition: background .25s, color .25s
}
.theme-toggle:hover,
.menu-toggle:hover {
background: var(--sky);
color: #17191c
}
.nav-quote {
display: flex;
align-items: center;
padding-inline: 1rem;
border-left: 1px solid var(--line-strong);
background: var(--oxblood);
color: #fff;
font-size: .78rem;
font-weight: 800
}
.menu-toggle {
display: none
}
.mobile-menu {
position: fixed;
inset: var(--nav-height) 0 auto;
z-index: 1090;
display: none;
max-height: calc(100vh - var(--nav-height));
padding: 1rem;
overflow-y: auto;
border-bottom: 1px solid var(--line-strong);
background: var(--page)
}
.mobile-menu.open {
display: grid;
animation: slideDown .35s var(--ease)
}
.mobile-menu a {
padding: .9rem 1rem;
border-bottom: 1px solid var(--line);
font-weight: 750
}
.mobile-menu a:hover {
background: var(--panel);
color: var(--oxblood)
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-12px)
}
}
@media(max-width:1030px) {
.nav-links {
display: none
}
.nav-inner {
grid-template-columns: 1fr auto
}
.menu-toggle {
display: block
}
}
@media(max-width:560px) {
.nav-quote {
display: none
}
.shell,
.nav-inner {
width: calc(100% - 18px)
}
.brand {
padding-inline: .7rem
}
}
/* hero */
main {
padding-top: calc(var(--nav-height) + 22px)
}
.hero-grid {
display: grid;
grid-template-columns: 1fr .9fr;
min-height: calc(100vh - var(--nav-height) - 46px)
}
.hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 5vw, 4.4rem);
border-right: 1px solid var(--line-strong)
}
.hero-copy h1 {
margin-top: .8rem;
font-size: clamp(2.65rem, 4.5vw, 3.7rem);
font-weight: 900;
letter-spacing: -.07em;
line-height: .9
}
.hero-copy h1 span {
display: block;
color: var(--oxblood)
}
.hero-copy>p {
max-width: 560px;
margin-top: 1.25rem;
color: var(--muted);
font-size: 1.05rem
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: .7rem;
margin-top: 1.6rem
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: 1.5rem
}
.hero-trust span {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .8rem;
font-weight: 700
}
.hero-trust i {
color: var(--green)
}
.console-zone {
padding: clamp(1rem, 2.4vw, 2rem);
background: var(--page-soft)
}
.console {
height: 100%;
min-height: 620px;
display: grid;
grid-template-rows: auto minmax(280px, 1fr) auto;
border: 1px solid var(--ink);
border-radius: 22px;
background: var(--panel-deep);
box-shadow: var(--shadow), var(--inset);
overflow: hidden
}
.console-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
padding: .72rem .9rem;
border-bottom: 1px solid var(--line-strong);
font-size: .68rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase
}
.console-top span {
display: inline-flex;
align-items: center;
gap: .45rem
}
.led {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 18%, transparent);
animation: ledPulse 2.2s ease-in-out infinite
}
@keyframes ledPulse {
50% {
box-shadow: 0 0 0 9px transparent
}
}
.house-display {
position: relative;
background: var(--sky);
overflow: hidden
}
.house-display::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 28%;
background: var(--green);
opacity: .48
}
.house-display svg {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
min-height: 330px
}
.scan {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: .18;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(23, 25, 28, .2) 3px 4px)
}
.scan::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: var(--lemon);
box-shadow: 0 0 14px var(--lemon);
animation: scan 4.8s linear infinite
}
@keyframes scan {
from {
top: 0
}
to {
top: 100%
}
}
.home-part {
transition: opacity .35s, filter .35s, transform .35s var(--ease);
transform-box: fill-box;
transform-origin: center
}
.home-part.active {
filter: drop-shadow(0 0 7px var(--lemon));
transform: scale(1.035)
}
.issue-mark {
opacity: 0;
transition: opacity .35s
}
.issue-mark.on {
opacity: 1
}
.drop {
animation: drop 1.2s linear infinite
}
@keyframes drop {
from {
transform: translateY(-4px);
opacity: .2
}
to {
transform: translateY(12px);
opacity: 1
}
}
.wind {
stroke-dasharray: 5 6;
animation: dash 1s linear infinite
}
@keyframes dash {
to {
stroke-dashoffset: -22
}
}
.wifi {
animation: wifi 1.8s ease-out infinite;
transform-origin: center;
transform-box: fill-box
}
@keyframes wifi {
from {
opacity: .9;
transform: scale(.65)
}
to {
opacity: 0;
transform: scale(1.2)
}
}
.console-controls {
padding: .85rem;
border-top: 1px solid var(--line-strong)
}
.screen {
min-height: 80px;
padding: .75rem .85rem;
border: 1px inset var(--line-strong);
border-radius: 9px;
background: #17271f;
color: #a9efbf;
font-family: "Courier New", monospace;
font-size: .8rem;
line-height: 1.45;
box-shadow: inset 0 4px 16px rgba(0, 0, 0, .32)
}
.screen b {
color: #dcffe7
}
.rockers {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: .5rem;
margin-top: .7rem
}
.rocker {
min-height: 72px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .25rem;
border: 1px solid var(--ink);
border-radius: 9px;
background: var(--panel);
box-shadow: var(--inset), 0 4px 0 color-mix(in srgb, var(--ink) 24%, transparent);
font-size: .68rem;
font-weight: 800;
transition: transform .2s var(--ease), background .25s, box-shadow .2s
}
.rocker .re {
font-size: 1.25rem
}
.rocker[aria-pressed="true"] {
background: var(--lemon);
color: #17191c;
transform: translateY(3px);
box-shadow: var(--inset), 0 1px 0 color-mix(in srgb, var(--ink) 24%, transparent)
}
.console-foot {
display: flex;
align-items: center;
gap: .55rem;
margin-top: .7rem
}
.console-foot .action {
flex: 1
}
.reset-diagnostic {
width: 44px;
min-height: 44px;
border: 1px solid var(--line-strong);
border-radius: 9px;
background: var(--panel)
}
@media(max-width:950px) {
.hero-grid {
grid-template-columns: 1fr
}
.hero-copy {
border-right: 0;
border-bottom: 1px solid var(--line-strong)
}
.console {
min-height: 570px
}
}
@media(max-width:580px) {
.rockers {
grid-template-columns: repeat(2, 1fr)
}
.rocker:last-child {
grid-column: 1/-1
}
}
/* ticker */
.ticker {
overflow: hidden;
border-top: 1px solid var(--line-strong);
border-bottom: 1px solid var(--line-strong);
background: var(--lemon);
color: #17191c
}
.ticker-track {
display: flex;
width: max-content;
animation: ticker 36s linear infinite
}
.ticker-track span {
display: inline-flex;
align-items: center;
gap: 2.2rem;
padding: .65rem 1.1rem;
font-size: .8rem;
font-weight: 850;
white-space: nowrap
}
.ticker-track i {
color: var(--oxblood);
font-style: normal
}
@keyframes ticker {
to {
transform: translateX(-50%)
}
}
/* about */
.about-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 1rem;
margin-top: 2rem
}
.story-panel {
padding: 1.5rem;
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--panel)
}
.story-panel p {
color: var(--muted)
}
.story-panel p+p {
margin-top: .8rem
}
.mission-grid {
display: grid;
gap: .75rem
}
.mission {
padding: 1.2rem;
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--panel-deep)
}
.mission .mi {
font-size: 1.5rem
}
.mission h3 {
margin: .45rem 0 .3rem;
font-size: 1rem
}
.mission p {
color: var(--muted);
font-size: .88rem
}
.value-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 1rem;
border: 1px solid var(--line-strong)
}
.value {
padding: 1.1rem;
border-right: 1px solid var(--line-strong);
background: var(--panel)
}
.value:last-child {
border-right: 0
}
.value .vi {
font-size: 1.5rem
}
.value h3 {
margin-top: .5rem;
font-size: .95rem
}
.value p {
margin-top: .25rem;
color: var(--muted);
font-size: .8rem
}
.highlights {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-top: 1rem
}
.highlights span {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .4rem .72rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
font-size: .76rem;
font-weight: 700
}
@media(max-width:850px) {
.about-grid {
grid-template-columns: 1fr
}
.value-board {
grid-template-columns: 1fr 1fr
}
.value:nth-child(2) {
border-right: 0
}
.value:nth-child(-n+2) {
border-bottom: 1px solid var(--line-strong)
}
}
@media(max-width:480px) {
.value-board {
grid-template-columns: 1fr
}
.value {
border-right: 0;
border-bottom: 1px solid var(--line-strong)
}
.value:last-child {
border-bottom: 0
}
}
/* services */
.service-console {
margin-top: 2rem;
border: 1px solid var(--ink);
border-radius: 22px;
background: var(--panel-deep);
box-shadow: var(--shadow), var(--inset);
overflow: hidden
}
.service-console-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .7rem .9rem;
border-bottom: 1px solid var(--line-strong);
font-size: .68rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase
}
.service-readout {
display: grid;
grid-template-columns: .82fr 1.18fr;
border-bottom: 1px solid var(--line-strong);
background: var(--panel)
}
.service-visual {
min-height: 270px;
display: grid;
place-items: center;
padding: 2rem;
border-right: 1px solid var(--line-strong);
background: var(--sky)
}
.service-visual .big-icon {
font-size: clamp(4.5rem, 10vw, 8rem);
filter: drop-shadow(0 15px 14px rgba(23, 25, 28, .18));
transition: transform .45s var(--ease)
}
.service-visual.animate .big-icon {
animation: servicePop .55s var(--ease)
}
@keyframes servicePop {
from {
transform: scale(.72) rotate(-8deg);
opacity: .2
}
}
.service-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.3rem, 3vw, 2.3rem)
}
.service-code {
color: var(--oxblood);
font-family: "Courier New", monospace;
font-size: .7rem;
font-weight: 800;
letter-spacing: .12em
}
.service-copy h3 {
margin-top: .45rem;
font-size: clamp(1.4rem, 3vw, 2.25rem);
letter-spacing: -.04em
}
.service-copy p {
margin-top: .7rem;
color: var(--muted);
font-size: .94rem
}
.service-benefit {
display: inline-flex;
align-items: center;
gap: .45rem;
align-self: flex-start;
margin-top: .85rem;
padding: .35rem .65rem;
border-radius: 999px;
background: var(--sky);
color: #17222a;
font-size: .74rem;
font-weight: 800
}
.service-copy .action {
align-self: flex-start;
margin-top: 1rem
}
.keys {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: .6rem;
padding: .8rem
}
.service-key {
min-height: 112px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: .5rem;
padding: .7rem;
border: 1px solid var(--ink);
border-radius: 9px;
background: var(--panel);
box-shadow: var(--inset), 0 5px 0 color-mix(in srgb, var(--ink) 25%, transparent);
text-align: left;
transition: transform .2s, box-shadow .2s, background .25s
}
.service-key:hover {
transform: translateY(-2px);
box-shadow: var(--inset), 0 7px 0 color-mix(in srgb, var(--ink) 25%, transparent)
}
.service-key.active {
transform: translateY(4px);
background: var(--lemon);
color: #17191c;
box-shadow: var(--inset), 0 1px 0 color-mix(in srgb, var(--ink) 25%, transparent)
}
.service-key .key-top {
width: 100%;
display: flex;
justify-content: space-between;
gap: .5rem;
font-size: .63rem;
font-weight: 800;
color: var(--muted)
}
.service-key .key-icon {
font-size: 1.3rem
}
.service-key strong {
font-size: .75rem;
line-height: 1.22
}
@media(max-width:980px) {
.keys {
grid-template-columns: repeat(3, 1fr)
}
}
@media(max-width:700px) {
.service-readout {
grid-template-columns: 1fr
}
.service-visual {
min-height: 180px;
border-right: 0;
border-bottom: 1px solid var(--line-strong)
}
}
@media(max-width:520px) {
.keys {
grid-template-columns: repeat(2, 1fr)
}
}
/* why */
.quality-board {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 1rem;
margin-top: 2rem
}
.quality-selector {
display: grid;
gap: .55rem
}
.quality-switch {
display: grid;
grid-template-columns: auto 1fr auto;
gap: .8rem;
align-items: center;
padding: .85rem;
border: 1px solid var(--line-strong);
border-radius: 13px;
background: var(--panel);
text-align: left
}
.quality-switch .qi {
font-size: 1.35rem
}
.quality-switch b {
font-size: .88rem
}
.quality-switch .toggle {
width: 44px;
height: 24px;
padding: 3px;
border-radius: 999px;
background: var(--panel-deep);
border: 1px solid var(--line-strong);
transition: background .3s
}
.quality-switch .toggle::after {
content: "";
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--muted);
transition: transform .35s var(--ease), background .3s
}
.quality-switch.active .toggle {
background: var(--green);
border-color: var(--green)
}
.quality-switch.active .toggle::after {
transform: translateX(20px);
background: #fff
}
.quality-switch.selected {
border-color: var(--oxblood);
box-shadow: inset 4px 0 0 var(--oxblood)
}
.quality-display {
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.4rem, 4vw, 3rem);
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--ink);
color: var(--page)
}
.quality-display .qd-icon {
font-size: 3rem
}
.quality-display h3 {
margin-top: .7rem;
font-size: clamp(1.5rem, 3vw, 2.4rem)
}
.quality-display p {
margin-top: .7rem;
color: color-mix(in srgb, var(--page) 76%, transparent)
}
.quality-display ul {
display: grid;
gap: .45rem;
margin-top: 1.2rem
}
.quality-display li {
display: flex;
gap: .5rem;
font-size: .86rem
}
.quality-display li i {
color: var(--lemon)
}
@media(max-width:780px) {
.quality-board {
grid-template-columns: 1fr
}
.quality-display {
min-height: 330px
}
}
/* testimonials */
.intercom {
display: grid;
grid-template-columns: 210px 1fr;
margin-top: 2rem;
border: 1px solid var(--ink);
border-radius: 22px;
background: var(--panel-deep);
box-shadow: var(--shadow), var(--inset);
overflow: hidden
}
.callers {
padding: .7rem;
border-right: 1px solid var(--line-strong);
display: grid;
gap: .45rem;
align-content: start
}
.caller {
display: grid;
grid-template-columns: auto 1fr;
gap: .55rem;
align-items: center;
padding: .55rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
text-align: left;
transition: border-color .25s, background .25s
}
.caller.active {
border-color: var(--oxblood);
background: var(--lemon);
color: #17191c
}
.caller .avatar {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--sky);
font-size: 1rem
}
.caller b {
display: block;
font-size: .78rem
}
.caller span {
font-size: .66rem;
color: var(--muted)
}
.call-display {
min-height: 430px;
display: grid;
grid-template-rows: auto 1fr auto;
background: #17271f;
color: #dcffe7
}
.call-head {
display: flex;
justify-content: space-between;
gap: .7rem;
padding: .7rem .9rem;
border-bottom: 1px solid rgba(220, 255, 231, .18);
font-family: "Courier New", monospace;
font-size: .7rem
}
.waveform {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 78px
}
.waveform i {
display: block;
width: 4px;
height: 12px;
border-radius: 4px;
background: #a9efbf;
animation: wave 1.1s ease-in-out infinite;
animation-delay: calc(var(--i)*-.07s)
}
@keyframes wave {
50% {
height: var(--h);
opacity: .55
}
}
.call-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.2rem clamp(1.2rem, 4vw, 2.7rem)
}
.call-content .stars {
color: var(--lemon);
letter-spacing: .13em
}
.call-content blockquote {
margin-top: .8rem;
color: #effff4;
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.55;
transition: opacity .25s
}
.call-content .person {
margin-top: 1rem;
color: #a9efbf;
font-family: "Courier New", monospace;
font-size: .8rem
}
.call-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
padding: .7rem .9rem;
border-top: 1px solid rgba(220, 255, 231, .18)
}
.call-foot span {
font-family: "Courier New", monospace;
font-size: .7rem
}
.call-buttons {
display: flex;
gap: .4rem
}
.call-buttons button {
width: 36px;
height: 36px;
border: 1px solid #a9efbf;
border-radius: 50%;
color: #a9efbf
}
.call-buttons button:hover {
background: #a9efbf;
color: #17271f
}
@media(max-width:700px) {
.intercom {
grid-template-columns: 1fr
}
.callers {
grid-template-columns: repeat(3, 1fr);
border-right: 0;
border-bottom: 1px solid var(--line-strong)
}
.caller {
grid-template-columns: 1fr;
text-align: center;
justify-items: center
}
.caller span {
display: none
}
}
/* faq manual */
.manual {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 520px;
margin-top: 2rem;
border: 1px solid var(--ink);
background: var(--panel);
box-shadow: var(--shadow)
}
.manual-tabs {
display: grid;
align-content: start;
border-right: 1px solid var(--line-strong);
background: var(--panel-deep)
}
.manual-tab {
display: grid;
grid-template-columns: auto 1fr;
gap: .55rem;
align-items: center;
padding: .75rem;
border-bottom: 1px solid var(--line);
text-align: left;
font-size: .78rem;
font-weight: 750
}
.manual-tab span {
color: var(--oxblood);
font-family: "Courier New", monospace;
font-size: .68rem
}
.manual-tab.active {
background: var(--lemon);
color: #17191c
}
.manual-page {
padding: clamp(1.4rem, 4vw, 3rem)
}
.manual-page .manual-code {
color: var(--oxblood);
font-family: "Courier New", monospace;
font-size: .7rem;
font-weight: 800
}
.manual-page h3 {
margin-top: .6rem;
font-size: clamp(1.35rem, 3vw, 2rem)
}
.manual-page p {
margin-top: .8rem;
color: var(--muted)
}
.manual-page .answer-checks {
display: grid;
gap: .5rem;
margin-top: 1.2rem
}
.manual-page .answer-checks span {
display: flex;
gap: .5rem;
align-items: flex-start;
font-size: .86rem
}
.manual-page .answer-checks i {
color: var(--green)
}
.manual-nav {
display: flex;
gap: .45rem;
margin-top: 1.4rem
}
@media(max-width:720px) {
.manual {
grid-template-columns: 1fr
}
.manual-tabs {
grid-template-columns: repeat(2, 1fr);
border-right: 0;
border-bottom: 1px solid var(--line-strong)
}
}
/* property */
.property-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 2rem
}
.property-copy {
padding: 1.3rem;
border-left: 5px solid var(--oxblood);
background: var(--panel)
}
.property-copy p {
color: var(--muted)
}
.check-list {
display: grid;
gap: .45rem;
margin-top: 1rem
}
.check-list li {
display: flex;
gap: .5rem;
font-size: .9rem
}
.check-list i {
color: var(--green)
}
.property-tool {
padding: 1.2rem;
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--panel-deep)
}
.property-tool h3 {
font-size: 1rem
}
.tool-help {
margin-top: .3rem;
color: var(--muted);
font-size: .82rem
}
.tool-options {
display: grid;
gap: .45rem;
margin-top: .9rem
}
.tool-choice {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: .65rem;
padding: .65rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
text-align: left
}
.tool-choice.active {
border-color: var(--sky-deep);
background: var(--sky);
color: #17222a
}
.tool-result {
min-height: 70px;
margin-top: .8rem;
padding: .75rem;
border-radius: 10px;
background: var(--ink);
color: var(--page);
font-size: .85rem
}
.tool-result b {
color: var(--lemon)
}
.readiness {
height: 10px;
margin-top: .8rem;
overflow: hidden;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line)
}
.readiness i {
display: block;
height: 100%;
width: 0;
background: var(--green);
transition: width .45s var(--ease)
}
@media(max-width:800px) {
.property-grid {
grid-template-columns: 1fr
}
}
/* forms */
.lead-grid,
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 2rem
}
.form-panel,
.info-panel {
padding: 1.25rem;
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--panel)
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .8rem
}
.form-label {
display: block;
margin-bottom: .3rem;
color: var(--muted);
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase
}
.form-control,
.form-select {
width: 100%;
padding: .72rem .8rem;
border: 1px solid var(--line-strong);
border-radius: 10px;
background: var(--page);
color: var(--ink)
}
.form-control:focus,
.form-select:focus {
border-color: var(--sky-deep);
background: var(--page);
color: var(--ink);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 35%, transparent)
}
.form-select option {
background: var(--panel);
color: var(--ink)
}
.check-row {
display: flex;
gap: .55rem;
align-items: flex-start;
margin: .9rem 0;
color: var(--muted);
font-size: .82rem
}
.check-row input {
width: 17px;
height: 17px;
margin-top: .2rem;
accent-color: var(--oxblood);
flex: 0 0 auto
}
.success {
display: none;
margin-top: .8rem;
padding: .7rem .8rem;
border: 1px solid var(--green);
border-radius: 10px;
background: color-mix(in srgb, var(--green) 12%, transparent);
color: var(--green);
font-size: .84rem;
font-weight: 750
}
.success.show {
display: block;
animation: successIn .4s var(--ease)
}
@keyframes successIn {
from {
opacity: 0;
transform: translateY(8px)
}
}
.unsubscribe {
margin-top: .8rem;
color: var(--muted);
font-size: .82rem
}
.unsubscribe button {
border: 0;
background: transparent;
color: var(--oxblood);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px
}
.unsubscribe a {
color: var(--oxblood);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px
}
.mail-board {
padding: 1.25rem;
border-radius: 18px;
background: var(--oxblood);
color: #fff
}
.mail-board h3 {
font-size: 1.3rem
}
.mail-board p {
margin-top: .45rem;
color: rgba(255, 255, 255, .75)
}
.mail-board ul {
display: grid;
gap: .6rem;
margin-top: 1rem
}
.mail-board li {
display: flex;
gap: .55rem;
font-size: .88rem
}
.mail-board i {
color: var(--lemon)
}
.mail-board a {
color: #fff;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px
}
.contact-item {
display: grid;
grid-template-columns: auto 1fr;
gap: .7rem;
padding: .75rem 0;
border-bottom: 1px dashed var(--line)
}
.contact-item:last-of-type {
border-bottom: 0
}
.contact-item .ci {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--sky);
font-size: 1.1rem;
color: #17222a
}
.contact-item b {
display: block;
font-size: .68rem;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--muted)
}
.contact-item span,
.contact-item a {
font-size: .9rem;
font-weight: 650
}
.map-placeholder {
position: relative;
min-height: 210px;
margin-top: 1rem;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 14px;
background: var(--page-soft);
text-align: center
}
.map-placeholder::before {
content: "";
position: absolute;
inset: 0;
opacity: .6;
background-image: linear-gradient(28deg, transparent 43%, var(--line) 44% 45%, transparent 46%), linear-gradient(120deg, transparent 47%, var(--line) 48% 49%, transparent 50%);
background-size: 55px 55px
}
.map-placeholder>div {
position: relative;
z-index: 1
}
.map-placeholder .pin {
font-size: 2.2rem
}
.map-placeholder b {
display: block
}
.map-placeholder span {
color: var(--muted);
font-size: .78rem
}
@media(max-width:800px) {
.lead-grid,
.contact-grid {
grid-template-columns: 1fr
}
}
@media(max-width:560px) {
.field-row {
grid-template-columns: 1fr
}
}
/* footer */
.footer {
margin-top: 0;
border-top: 1px solid var(--line-strong);
background: var(--ink);
color: var(--page)
}
.footer-lines {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid rgba(255, 255, 255, .18)
}
.footer-line {
padding: 1rem;
border-right: 1px solid rgba(255, 255, 255, .18)
}
.footer-line:last-child {
border-right: 0
}
.footer-line h3 {
display: flex;
align-items: center;
gap: .45rem;
color: var(--page);
font-size: .82rem
}
.footer-line h3 i {
display: block;
width: 22px;
height: 6px;
border-radius: 4px;
background: var(--fc)
}
.footer-line a {
display: block;
margin-top: .32rem;
color: color-mix(in srgb, var(--page) 72%, transparent);
font-size: .78rem
}
.footer-line a:hover {
color: var(--fc)
}
.footer-main {
display: grid;
grid-template-columns: 1.4fr .8fr 1fr;
gap: 2rem;
padding: 2.2rem 0
}
.footer-brand {
font-size: 1.25rem;
font-weight: 900
}
.footer-main h4 {
margin-bottom: .65rem;
color: var(--sky);
font-size: .7rem;
letter-spacing: .14em;
text-transform: uppercase
}
.footer-main p {
max-width: 400px;
margin-top: .5rem;
color: color-mix(in srgb, var(--page) 70%, transparent);
font-size: .86rem
}
.footer-main a {
display: block;
margin-top: .25rem;
color: color-mix(in srgb, var(--page) 72%, transparent);
font-size: .84rem
}
.footer-main a:hover {
color: var(--sky)
}
.socials {
display: flex;
gap: .45rem;
margin-top: .9rem
}
.socials a {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 9px;
color: var(--page)
}
.socials a:hover {
background: var(--sky);
color: #17222a
}
.footer-bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: .6rem;
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, .18);
color: color-mix(in srgb, var(--page) 60%, transparent);
font-size: .76rem
}
.footer-bottom button,
.footer-bottom a {
border: 0;
background: transparent;
color: var(--page);
text-decoration: underline;
text-underline-offset: 3px
}
@media(max-width:820px) {
.footer-lines {
grid-template-columns: 1fr 1fr
}
.footer-line:nth-child(2) {
border-right: 0
}
.footer-line:nth-child(-n+2) {
border-bottom: 1px solid rgba(255, 255, 255, .18)
}
.footer-main {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:520px) {
.footer-lines,
.footer-main {
grid-template-columns: 1fr
}
.footer-line {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, .18)
}
}
/* modal and utilities */
.modal-content {
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--panel);
color: var(--ink)
}
.modal-header,
.modal-footer {
border-color: var(--line)
}
.modal-title {
font-size: 1.15rem;
font-weight: 850
}
.modal-title small {
display: block;
margin-bottom: .18rem;
color: var(--oxblood);
font-size: .62rem;
letter-spacing: .12em;
text-transform: uppercase
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(1)
}
.legal {
padding: .85rem 0;
border-bottom: 1px dashed var(--line)
}
.legal:last-child {
border-bottom: 0
}
.legal h3 {
color: var(--oxblood);
font-size: .9rem
}
.legal p {
margin-top: .3rem;
color: var(--muted);
font-size: .87rem
}
.legal-wrap {
max-width: 860px
}
.toast-message {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 1300;
max-width: 80vw;
padding: .65rem 1rem;
border-radius: 10px;
background: var(--ink);
color: var(--page);
font-size: .82rem;
font-weight: 750;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: .3s var(--ease)
}
.toast-message.show {
opacity: 1;
transform: none
}
.to-top {
position: fixed;
right: 16px;
bottom: 70px;
z-index: 1050;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 1px solid var(--ink);
border-radius: 10px;
background: var(--lemon);
color: #17191c;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: .3s var(--ease)
}
.to-top.show {
opacity: 1;
visibility: visible;
transform: none
}
[data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
transition-delay: var(--delay, 0s)
}
[data-reveal].in {
opacity: 1;
transform: none
}
@media(prefers-reduced-motion:reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important
}
[data-reveal] {
opacity: 1;
transform: none
}
}
.modal{
z-index: 10000;
}