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

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, sans-serif;
background: #06131f;
color: #f1fbff;
line-height: 1.6;
}

.navbar {
height: 75px;
padding: 0 7%;
display: flex;
align-items: center;
justify-content: space-between;

background: rgba(6, 19, 31, 0.92);
border-bottom: 1px solid rgba(120, 230, 220, 0.15);

position: sticky;
top: 0;
z-index: 1000;

backdrop-filter: blur(15px);

}

.logo {
font-size: 20px;
font-weight: bold;
}

.logo span {
color: #67e5d1;
}

.navbar nav {
display: flex;
gap: 30px;
}

.navbar nav a {
color: #9db2bf;
text-decoration: none;
font-size: 14px;
transition: 0.3s;
}

.navbar nav a:hover {
color: #67e5d1;
}

.profile-btn {
background: #102738;
color: white;
border: 1px solid rgba(103, 229, 209, 0.2);
padding: 10px 16px;
border-radius: 12px;
cursor: pointer;
}

.hero {
min-height: 650px;
padding: 90px 7%;

display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;

background:
    radial-gradient(circle at 80% 40%, rgba(60, 210, 220, 0.12), transparent 35%),
    radial-gradient(circle at 20% 30%, rgba(70, 130, 255, 0.08), transparent 35%);

}

.hero-content {
max-width: 650px;
}

.tag {
color: #67e5d1;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 20px;
}

.hero h1 {
font-size: clamp(42px, 6vw, 75px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -3px;
}

.hero h1 span {
color: #67e5d1;
}

.description {
margin-top: 25px;
max-width: 600px;
color: #91a8b6;
font-size: 17px;
}

.hero-buttons {
margin-top: 35px;
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
text-decoration: none;
padding: 14px 22px;
border-radius: 12px;
font-weight: bold;
transition: 0.3s;
}

.primary-btn {
background: #67e5d1;
color: #03141c;
}

.primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(103, 229, 209, 0.2);
}

.secondary-btn {
border: 1px solid #294352;
color: white;
}

.secondary-btn:hover {
border-color: #67e5d1;
}

.trust {
margin-top: 25px;
display: flex;
gap: 22px;
flex-wrap: wrap;
color: #78909e;
font-size: 12px;
}

.health-visual {
width: 430px;
height: 430px;
position: relative;

display: flex;
justify-content: center;
align-items: center;

}

.circle {
width: 280px;
height: 280px;
border-radius: 50%;

border: 1px solid rgba(103, 229, 209, 0.25);

box-shadow:
    0 0 50px rgba(103, 229, 209, 0.1),
    inset 0 0 50px rgba(103, 229, 209, 0.05);

animation: pulse 3s infinite;

}

.person {
position: absolute;

width: 120px;
height: 120px;

border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;

font-size: 60px;

background: rgba(103, 229, 209, 0.08);
border: 1px solid rgba(103, 229, 209, 0.3);

}

.signal {
position: absolute;

padding: 10px 15px;

background: rgba(12, 35, 51, 0.9);
border: 1px solid rgba(103, 229, 209, 0.2);

border-radius: 12px;

font-size: 13px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

animation: float 4s ease-in-out infinite;

}

.signal-one {
top: 45px;
left: 20px;
}

.signal-two {
top: 100px;
right: 5px;
animation-delay: .7s;
}

.signal-three {
bottom: 80px;
left: 10px;
animation-delay: 1.2s;
}

.signal-four {
bottom: 30px;
right: 25px;
animation-delay: 1.7s;
}

.section {
padding: 100px 7%;
}

.section-title {
margin-bottom: 45px;
}

.section-title > p {
color: #67e5d1;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
}

.section-title h2 {
font-size: 42px;
line-height: 1.1;
margin: 10px 0;
}

.section-title span {
color: #849ba8;
}

.center {
text-align: center;
}

.card {
background: rgba(10, 30, 45, 0.75);
border: 1px solid rgba(103, 229, 209, 0.12);
border-radius: 22px;
padding: 30px;

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

backdrop-filter: blur(15px);

}

.card h3 {
font-size: 21px;
}

.small-text {
color: #718b99;
margin-bottom: 25px;
}

.checkin-container {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 25px;
}

.card label {
display: block;
color: #a9bcc6;
font-size: 13px;
margin: 20px 0 10px;
}

.symptoms {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.symptom {
background: #0b2333;
border: 1px solid #1d3c4d;
color: #d8e8ed;

padding: 14px;
border-radius: 12px;

cursor: pointer;
text-align: left;

transition: .25s;

}

.symptom:hover,
.symptom.active {
border-color: #67e5d1;
background: rgba(103, 229, 209, 0.08);
color: #67e5d1;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}

select,
textarea {
width: 100%;

background: #071b29;
color: white;

border: 1px solid #1d3c4d;

padding: 13px;
border-radius: 10px;

outline: none;

}

textarea {
min-height: 100px;
resize: vertical;
}

.analyze-btn {
width: 100%;
margin-top: 20px;

padding: 15px;

border: none;
border-radius: 12px;

background: #67e5d1;
color: #03141c;

font-weight: bold;
cursor: pointer;

transition: .3s;

}

.analyze-btn:hover {
transform: translateY(-2px);
}

.warning {
margin-top: 12px;
color: #607985;
font-size: 11px;
text-align: center;
}

.timeline-heading {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}

.timeline-heading > div > p,
.signal-map > p {
color: #67e5d1;
font-size: 11px;
letter-spacing: 1.5px;
}

.timeline-heading > span {
background: #102b3b;
padding: 6px 10px;
border-radius: 8px;
font-size: 10px;
color: #8ba7b4;
}

.timeline-item {
display: flex;
gap: 20px;
position: relative;
padding-bottom: 30px;
}

.timeline-item:not(:last-child)::before {
content: "";
position: absolute;
left: 5px;
top: 12px;
width: 1px;
height: 100%;
background: #244452;
}

.timeline-dot {
width: 11px;
height: 11px;
background: #67e5d1;
border-radius: 50%;
margin-top: 5px;
z-index: 1;
flex-shrink: 0;
}

.timeline-item small {
color: #68828f;
}

.timeline-item strong {
display: block;
margin-top: 3px;
}

.timeline-item p {
color: #718b99;
font-size: 13px;
}

.timeline-note {
margin-top: 5px;
color: #8ca4af !important;
font-style: italic;
}

.empty-timeline {
text-align: center;
padding: 50px 10px;
color: #718b99;
}

.empty-timeline p {
color: #a9bcc6;
font-size: 14px;
}

.empty-timeline small {
display: block;
margin-top: 5px;
}

.insights {
background:
radial-gradient(circle at 80% 50%, rgba(103, 229, 209, 0.05), transparent 35%);
}

.insight-container {
display: grid;
grid-template-columns: 1.4fr .6fr;
gap: 25px;
}

.ai-heading {
display: flex;
align-items: center;
gap: 15px;
}

.ai-icon {
width: 50px;
height: 50px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 15px;

background: rgba(103, 229, 209, 0.1);
color: #67e5d1;

font-size: 25px;

}

.ai-heading p {
color: #67e5d1;
font-size: 10px;
letter-spacing: 1.5px;
}

.monitor {
margin-left: auto;

padding: 7px 10px;

border-radius: 8px;

background: rgba(255, 183, 77, .1);
color: #ffbf66;

font-size: 10px;

}

.ai-message {
margin: 30px 0;
padding: 20px;

border-left: 3px solid #67e5d1;

background: rgba(103, 229, 209, 0.04);

color: #a5bac4;

}

.progress > div {
display: grid;
grid-template-columns: 130px 1fr 40px;
align-items: center;
gap: 15px;

margin: 18px 0;

font-size: 12px;

}

.bar {
height: 7px;
background: #102c3d;
border-radius: 20px;
overflow: hidden;
}

.bar span {
display: block;
height: 100%;
background: #67e5d1;
border-radius: 20px;
transition: width .5s ease;
}

.progress b {
color: #67e5d1;
}

.next-step {
margin-top: 30px;
padding: 20px;

border: 1px solid rgba(103, 229, 209, 0.12);
border-radius: 15px;

}

.next-step small {
color: #67e5d1;
font-size: 10px;
letter-spacing: 1px;
}

.next-step p {
margin-top: 8px;
color: #9eb2bc;
}

.signal-map {
min-height: 380px;
}

.map {
height: 280px;
margin-top: 20px;
position: relative;
}

.map-node {
position: absolute;

padding: 9px 13px;

border: 1px solid #285061;
border-radius: 10px;

background: #0a2535;

font-size: 12px;

}

.node1 {
top: 35px;
left: 10px;
}

.node2 {
top: 15px;
right: 10px;
}

.node3 {
bottom: 55px;
left: 0;
}

.node4 {
bottom: 25px;
right: 15px;
}

.map-center {
position: absolute;

top: 42%;
left: 40%;

width: 75px;
height: 75px;

border-radius: 50%;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

background: rgba(103, 229, 209, 0.1);
border: 1px solid rgba(103, 229, 209, 0.5);

color: #67e5d1;

}

.map-center small {
font-size: 9px;
}

.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.step {
padding: 30px;

border: 1px solid rgba(103, 229, 209, 0.12);
border-radius: 20px;

background: rgba(10, 30, 45, 0.5);

transition: .3s;

}

.step:hover {
transform: translateY(-6px);
border-color: rgba(103, 229, 209, .4);
}

.step > span {
color: #67e5d1;
font-size: 13px;
}

.step h3 {
margin: 15px 0 8px;
}

.step p {
color: #829aa7;
font-size: 14px;
}

.pattern-dashboard {
margin-top: 10px;
}

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

.stat-card {
padding: 25px;

background: rgba(10, 30, 45, 0.75);

border: 1px solid rgba(103, 229, 209, 0.12);

border-radius: 20px;

transition: 0.3s;

}

.stat-card:hover {
transform: translateY(-5px);
border-color: rgba(103, 229, 209, 0.4);
}

.stat-icon {
width: 38px;
height: 38px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background: rgba(103, 229, 209, 0.08);

color: #67e5d1;

margin-bottom: 20px;

}

.stat-card small {
color: #6f8996;
font-size: 10px;
letter-spacing: 1.5px;
}

.stat-card h3 {
margin-top: 7px;
font-size: 28px;
color: #f1fbff;
}

.stat-card p {
margin-top: 5px;
color: #718b99;
font-size: 12px;
}

.care-section {
background:
radial-gradient(
circle at 20% 50%,
rgba(103, 229, 209, 0.04),
transparent 35%
);
}

.care-grid {
display: grid;
grid-template-columns: 1.3fr .7fr;
gap: 25px;
}

.care-card {
min-height: 320px;
}

.care-heading {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 28px;
}

.care-icon {
width: 52px;
height: 52px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 15px;

background: rgba(103, 229, 209, 0.1);
border: 1px solid rgba(103, 229, 209, 0.2);

color: #67e5d1;
font-size: 24px;
flex-shrink: 0;

}

.care-heading p,
.care-label {
color: #67e5d1;
font-size: 10px;
letter-spacing: 1.5px;
font-weight: bold;
}

.care-heading h3 {
margin-top: 4px;
}

.guidance-block {
padding: 18px;
margin-top: 15px;

background: rgba(103, 229, 209, 0.035);

border: 1px solid rgba(103, 229, 209, 0.1);

border-radius: 15px;

}

.guidance-block h4 {
font-size: 13px;
color: #f1fbff;
margin-bottom: 10px;
}

.guidance-block ul {
list-style: none;
padding: 0;
}

.guidance-block li {
color: #9eb2bc;
font-size: 13px;
margin: 8px 0;
}

.guidance-block li::before {
content: "✓";
color: #67e5d1;
margin-right: 9px;
font-weight: bold;
}

.guidance-block > p {
color: #9eb2bc;
font-size: 13px;
}

.guidance-warning {
border-left: 3px solid #ffbf66;
}

.guidance-warning h4 {
color: #ffbf66;
}

.guidance-warning p {
color: #9eb2bc;
font-size: 13px;
}

.care-empty {
color: #718b99;
font-size: 14px;
padding: 30px 10px;
}

.persistence-card {
min-height: 320px;
}

.persistence-card > h3 {
margin-top: 7px;
}

.persistence-status {
display: flex;
align-items: center;
gap: 18px;

margin-top: 35px;
padding: 18px;

background: rgba(7, 27, 41, 0.8);

border: 1px solid #1d3c4d;

border-radius: 15px;

}

.status-circle {
width: 58px;
height: 58px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: rgba(103, 229, 209, 0.08);
border: 1px solid rgba(103, 229, 209, 0.3);

color: #67e5d1;

font-size: 20px;
font-weight: bold;

}

.persistence-status strong {
font-size: 15px;
}

.persistence-status p {
margin-top: 5px;

color: #718b99;

font-size: 12px;

}

.tracking-line {
display: flex;
justify-content: space-between;

margin-top: 25px;

color: #718b99;

font-size: 11px;

}

.tracking-line span:last-child {
color: #67e5d1;
}

footer {
padding: 35px 7%;

border-top: 1px solid rgba(103, 229, 209, 0.1);

display: flex;
justify-content: space-between;

color: #718996;
font-size: 12px;

}

footer strong {
color: #67e5d1;
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 40px rgba(103, 229, 209, .08);
}

50% {
    transform: scale(1.05);
    box-shadow: 0 0 70px rgba(103, 229, 209, .16);
}

}

@keyframes float {
0%, 100% {
transform: translateY(0);
}

50% {
    transform: translateY(-8px);
}

}

@media (max-width: 900px) {

.navbar nav {
    display: none;
}

.hero {
    flex-direction: column;
    text-align: center;
    padding-top: 60px;
}

.hero-buttons,
.trust {
    justify-content: center;
}

.health-visual {
    width: 330px;
    height: 330px;
    transform: scale(.85);
}

.checkin-container,
.insight-container,
.care-grid {
    grid-template-columns: 1fr;
}

.steps {
    grid-template-columns: 1fr;
}

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

.section-title h2 {
    font-size: 32px;
}

footer {
    flex-direction: column;
    gap: 10px;
}

}

@media (max-width: 500px) {

.navbar {
    padding: 0 5%;
}

.profile-btn {
    display: none;
}

.hero {
    padding-left: 5%;
    padding-right: 5%;
}

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

.section {
    padding: 70px 5%;
}

.symptoms,
.form-row {
    grid-template-columns: 1fr;
}

.progress > div {
    grid-template-columns: 100px 1fr 35px;
    gap: 8px;
}

.stats-grid {
    grid-template-columns: 1fr;
}

.care-heading {
    align-items: flex-start;
}

.persistence-status {
    align-items: flex-start;
}

.tracking-line {
    flex-direction: column;
    gap: 5px;
}

.health-visual {
    transform: scale(.75);
    margin: -30px 0;
}

}