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

:root {
--blue: #168BFA;
--blue-dark: #0874DC;
--light-blue: #EAF5FF;
--pale-blue: #F5FAFF;
--white: #FFFFFF;
--text: #172B4D;
--muted: #718096;
--border: #E4EDF7;
}

html {
scroll-behavior: smooth;
}

body {
background: var(--white);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
}

/* HEADER */

.header {
height: 70px;
padding: 0 7%;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,0.96);
border-bottom: 1px solid var(--border);
position: relative;
z-index: 10;
}

.brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text);
font-size: 23px;
font-weight: 800;
letter-spacing: 1px;
}

.brand img {
width: 38px;
height: 38px;
object-fit: contain;
}

.login-link {
color: var(--blue);
font-size: 14px;
font-weight: 700;
text-decoration: none;
padding: 10px 20px;
border: 1px solid #CDE5FF;
border-radius: 9px;
transition: 0.2s;
}

.login-link:hover {
background: var(--light-blue);
}

/* HERO SECTION */

.hero {
min-height: 510px;
padding: 65px 8%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 45px;
background:
radial-gradient(circle at 85% 15%, #D9EEFF 0, transparent 35%),
linear-gradient(120deg, #FFFFFF, #F1F8FF);
}

.hero-content {
flex: 1;
max-width: 510px;
}

.welcome-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #E1F1FF;
color: #0874DC;
border-radius: 30px;
padding: 9px 14px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 22px;
}

.badge-dot {
width: 7px;
height: 7px;
background: #168BFA;
border-radius: 50%;
}

.hero h1 {
font-size: clamp(35px, 5vw, 57px);
line-height: 1.12;
letter-spacing: -2px;
margin-bottom: 20px;
font-weight: 800;
}

.hero h1 span {
display: block;
color: var(--blue);
}

.description {
color: var(--muted);
font-size: 15px;
line-height: 1.8;
max-width: 430px;
margin-bottom: 27px;
}

/* HERO BUTTONS */

.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.primary-button,
.secondary-button {
min-height: 47px;
padding: 0 21px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
border-radius: 9px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.2s;
}

.primary-button {
background: var(--blue);
color: white;
box-shadow: 0 7px 18px rgba(22,139,250,0.22);
}

.primary-button:hover {
background: var(--blue-dark);
transform: translateY(-2px);
}

.primary-button span {
font-size: 19px;
}

.secondary-button {
background: white;
color: var(--text);
border: 1px solid var(--border);
}

.secondary-button:hover {
background: var(--light-blue);
}

.trust-line {
margin-top: 24px;
color: var(--muted);
font-size: 11px;
}

.check-icon {
color: #168BFA;
font-weight: bold;
margin-right: 5px;
}

/* SOCIAL PREVIEW CARD */

.visual-card {
width: 390px;
max-width: 100%;
padding: 22px;
border-radius: 18px;
background: white;
border: 1px solid var(--border);
box-shadow: 0 20px 55px rgba(36,104,164,0.12);
transform: rotate(1deg);
}

.visual-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}

.visual-brand {
display: flex;
align-items: center;
gap: 9px;
}

.mini-logo {
width: 37px;
height: 37px;
display: grid;
place-items: center;
background: var(--blue);
color: white;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
}

.visual-brand strong,
.visual-brand small {
display: block;
}

.visual-brand strong {
font-size: 13px;
}

.visual-brand small {
font-size: 10px;
color: var(--muted);
margin-top: 3px;
}

.online-status {
color: #16A36A;
font-size: 10px;
}

.visual-message {
display: flex;
gap: 11px;
padding: 19px 0;
border-bottom: 1px solid var(--border);
}

.avatar {
width: 35px;
height: 35px;
flex-shrink: 0;
display: grid;
place-items: center;
color: white;
font-weight: bold;
border-radius: 50%;
}

.avatar-one {
background: #429DF4;
}

.avatar-two {
background: #8A83E9;
}

.message-content {
min-width: 0;
}

.message-content strong {
font-size: 12px;
}

.message-content p {
font-size: 12px;
line-height: 1.6;
margin: 6px 0;
color: #46566E;
}

.message-content small {
font-size: 9px;
color: var(--muted);
}

.visual-bottom {
display: flex;
justify-content: space-between;
padding-top: 17px;
color: var(--blue);
font-size: 10px;
font-weight: bold;
}

/* FEATURES */

.features-section {
padding: 65px 8%;
background: white;
}

.section-heading {
text-align: center;
margin-bottom: 35px;
}

.section-heading span {
color: var(--blue);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}

.section-heading h2 {
font-size: 28px;
margin-top: 10px;
}

.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 17px;
}

.feature-card {
padding: 23px 18px;
background: var(--pale-blue);
border: 1px solid var(--border);
border-radius: 13px;
transition: 0.2s;
}

.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(22,139,250,0.08);
}

.feature-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
background: #DCEEFF;
color: var(--blue);
border-radius: 11px;
font-size: 21px;
margin-bottom: 17px;
}

.feature-card h3 {
font-size: 14px;
margin-bottom: 9px;
}

.feature-card p {
font-size: 11px;
color: var(--muted);
line-height: 1.7;
}

/* FOOTER */

.footer {
padding: 30px 8%;
background: #F5FAFF;
border-top: 1px solid var(--border);
text-align: center;
}

.footer-brand strong {
display: block;
color: var(--blue);
font-size: 19px;
letter-spacing: 1px;
}

.footer-brand span {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}

.footer-links {
display: flex;
justify-content: center;
gap: 22px;
margin: 18px 0;
}

.footer-links a {
color: #52657D;
font-size: 11px;
text-decoration: none;
}

.footer > p {
font-size: 10px;
color: var(--muted);
}

/* TABLETS */

@media (max-width: 850px) {
.hero {
padding: 45px 5%;
gap: 25px;
}

.visual-card {
    width: 340px;
}

.features-grid {
    grid-template-columns: repeat(2, 1fr);
}

}

/* PHONES */

@media (max-width: 600px) {
.header {
height: 55px;
padding: 0 15px;
}

.brand {
    font-size: 19px;
}

.brand img {
    width: 31px;
    height: 31px;
}

.login-link {
    padding: 8px 13px;
    font-size: 12px;
}

.hero {
    min-height: auto;
    padding: 35px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
}

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

.description {
    font-size: 13px;
}

.visual-card {
    width: 100%;
    transform: none;
    padding: 16px;
}

.features-section {
    padding: 40px 15px;
}

.section-heading h2 {
    font-size: 22px;
}

.features-grid {
    gap: 10px;
}

.feature-card {
    padding: 15px 12px;
}

}

/* VERY SMALL SCREENS: 320 x 240 */

@media (max-width: 350px) {
.header {
height: 40px;
padding: 0 8px;
}

.brand {
    font-size: 15px;
    gap: 5px;
}

.brand img {
    width: 24px;
    height: 24px;
}

.login-link {
    font-size: 10px;
    padding: 6px 9px;
}

.hero {
    padding: 15px 10px;
    gap: 15px;
}

.welcome-badge {
    font-size: 8px;
    padding: 6px 9px;
    margin-bottom: 10px;
}

.hero h1 {
    font-size: 27px;
    letter-spacing: -1px;
    margin-bottom: 9px;
}

.description {
    font-size: 10px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.hero-buttons {
    gap: 7px;
}

.primary-button,
.secondary-button {
    min-height: 35px;
    padding: 0 10px;
    font-size: 9px;
    border-radius: 6px;
}

.trust-line {
    font-size: 9px;
    margin-top: 10px;
}

.visual-card {
    padding: 10px;
    border-radius: 10px;
}

.visual-top {
    padding-bottom: 9px;
}

.mini-logo {
    width: 26px;
    height: 26px;
    font-size: 14px;
}

.visual-brand strong {
    font-size: 10px;
}

.visual-brand small,
.online-status {
    font-size: 8px;
}

.visual-message {
    gap: 7px;
    padding: 10px 0;
}

.avatar {
    width: 25px;
    height: 25px;
    font-size: 10px;
}

.message-content strong {
    font-size: 9px;
}

.message-content p {
    font-size: 9px;
    margin: 3px 0;
}

.message-content small,
.visual-bottom {
    font-size: 8px;
}

.features-section {
    padding: 25px 10px;
}

.section-heading {
    margin-bottom: 15px;
}

.section-heading h2 {
    font-size: 18px;
}

.features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.feature-card {
    padding: 11px 9px;
}

.feature-icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
    margin-bottom: 8px;
}

.feature-card h3 {
    font-size: 10px;
    margin-bottom: 4px;
}

.feature-card p {
    font-size: 9px;
}

.footer {
    padding: 15px 8px;
}

}