/*==================================================
SLEEP CALCULATOR v2.0
AllWebApps
Professional Responsive Stylesheet
==================================================*/


/*==================================================
RESET
==================================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#eef5ff;
    color:#1f2937;
    line-height:1.7;
    overflow-x:hidden;
}


/*==================================================
CSS VARIABLES
==================================================*/

:root{

    --primary:#2563eb;
    
    --primary-dark:#1e40af;

    --secondary:#60a5fa;

    --success:#22c55e;

    --danger:#ef4444;

    --warning:#f59e0b;

    --white:#ffffff;

    --light:#f8fafc;

    --dark:#0f172a;

    --dark-card:#1e293b;

    --text:#1f2937;

    --gray:#64748b;

    --border:#e5e7eb;

    --radius:18px;

    --shadow:
        0 18px 40px rgba(15,23,42,.12);

}


/*==================================================
DARK MODE
==================================================*/

body.dark{

    background:#07111f;

    color:#f8fafc;

}


/*==================================================
GLOBAL LAYOUT
==================================================*/

.container{

    width:min(92%,1320px);

    margin:auto;

}

section{

    padding:80px 0;

}


/*==================================================
TYPOGRAPHY
==================================================*/

h1,h2,h3{

    font-weight:700;

}

p{

    color:inherit;

}


/*==================================================
HEADER
==================================================*/

header{

    position:sticky;

    top:15px;

    left:0;

    right:0;

    width:96%;

    margin:auto;

    z-index:9999;

    border-radius:20px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(14px);

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

body.dark header{

    background:#111827;

}


/*==================================================
HEADER CONTAINER
==================================================*/

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}


/*==================================================
LOGO
==================================================*/

.logo{

    font-size:30px;

    font-weight:700;

    color:var(--primary);

}


/*==================================================
NAVIGATION
==================================================*/

nav{

    display:flex;

    align-items:center;

    gap:20px;

}

nav a{

    text-decoration:none;

    color:inherit;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:var(--primary);

}

nav button{

    width:46px;

    height:46px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:var(--primary);

    color:#ffffff;

    font-size:20px;

    transition:.3s;

}

nav button:hover{

    background:var(--primary-dark);

}

/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    min-height:620px;

    padding:70px 0;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #4f8cff,
    #1d4ed8);

    color:#ffffff;

}


/*==================================================
HERO GRID
==================================================*/

.hero-grid{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:center;

}

.hero-left{

    position:relative;

    z-index:2;

}

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

}


/*==================================================
BADGE
==================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:28px;

    border-radius:50px;

    background:rgba(255,255,255,.18);

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(10px);

    font-size:15px;

    font-weight:700;

}


/*==================================================
HERO TITLE
==================================================*/

.hero h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    color:#ffffff;

}


/*==================================================
HERO DESCRIPTION
==================================================*/

.hero p{

    max-width:650px;

    font-size:22px;

    line-height:1.7;

    margin-bottom:38px;

    opacity:.96;

}


/*==================================================
HERO BUTTONS
==================================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:35px;

}


/*==================================================
BUTTONS
==================================================*/

.button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:210px;

    height:58px;

    padding:0 28px;

    border-radius:14px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.35s;

    cursor:pointer;

}

.button:first-child{

    background:#ffffff;

    color:#2563eb;

}

.button.secondary{

    background:rgba(255,255,255,.18);

    color:#ffffff;

    border:1px solid rgba(255,255,255,.28);

    backdrop-filter:blur(12px);

}

.button:hover{

    transform:translateY(-4px);

}


/*==================================================
FEATURES
==================================================*/

.hero-features{

    display:flex;

    gap:28px;

    flex-wrap:wrap;

    font-size:16px;

    font-weight:700;

}

/*==================================================
HERO CARD / SLEEP CIRCLE
==================================================*/

.hero-card,
.sleep-circle{

    position:relative;

    width:420px;

    height:420px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
    radial-gradient(circle at center,#67a8ff,#2563eb);

    border:10px solid rgba(255,255,255,.16);

    color:#ffffff;

    overflow:hidden;

    box-shadow:
    0 0 30px rgba(255,255,255,.12),
    0 0 80px rgba(37,99,235,.35),
    0 35px 70px rgba(15,23,42,.25);

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

}

/*==================================================
HERO MOON
==================================================*/

.sleep-circle .moon{

    position:relative;

    z-index:2;

    font-size:82px;

    margin-bottom:8px;

    line-height:1;

}

/*==================================================
HERO HOURS
==================================================*/

.sleep-hours{

    position:relative;

    z-index:2;

    width:100%;

    display:block;

    margin:12px 0;

    padding:0;

    font-size:48px;

    font-weight:800;

    line-height:1.15;

    text-align:center;

    white-space:nowrap;

}

/*==================================================
HERO TEXT
==================================================*/

.sleep-text{

    position:relative;

    z-index:2;

    width:100%;

    display:block;

    margin-top:8px;

    padding:0;

    font-size:22px;

    font-weight:500;

    text-align:center;

}

/*==================================================
MOON GLOW
==================================================*/

.moon-glow{

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.35),
    rgba(255,255,255,0));

    animation:glowPulse 5s infinite;

}


/*==================================================
STARS
==================================================*/

.hero-stars{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.hero-stars span{

    position:absolute;

    width:4px;

    height:4px;

    background:#ffffff;

    border-radius:50%;

    opacity:.7;

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

}

.hero-stars span:nth-child(1){top:8%;left:10%;}
.hero-stars span:nth-child(2){top:14%;left:26%;}
.hero-stars span:nth-child(3){top:12%;left:48%;}
.hero-stars span:nth-child(4){top:18%;left:78%;}
.hero-stars span:nth-child(5){top:38%;left:14%;}
.hero-stars span:nth-child(6){top:55%;left:34%;}
.hero-stars span:nth-child(7){top:30%;left:60%;}
.hero-stars span:nth-child(8){top:22%;left:90%;}
.hero-stars span:nth-child(9){top:72%;left:16%;}
.hero-stars span:nth-child(10){top:84%;left:46%;}
.hero-stars span:nth-child(11){top:68%;left:74%;}
.hero-stars span:nth-child(12){top:90%;left:92%;}

/*==================================================
SECTION HEADINGS
==================================================*/

section h2{

    font-size:52px;

    font-weight:800;

    text-align:center;

    color:#0f172a;

    margin-bottom:18px;

}

body.dark section h2{

    color:#ffffff;

}

.section-subtitle{

    max-width:760px;

    margin:0 auto 50px;

    text-align:center;

    font-size:20px;

    line-height:1.8;

    color:#64748b;

}

body.dark .section-subtitle{

    color:#cbd5e1;

}


/*==================================================
GRID
==================================================*/

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:35px;

}


/*==================================================
CARD
==================================================*/

.card{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border-radius:22px;

    padding:30px;

    border:1px solid #e5e7eb;

    box-shadow:0 18px 40px rgba(15,23,42,.08);

    transition:.35s;

}

body.dark .card{

    background:#1e293b;

    border-color:#334155;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(15,23,42,.18);

}

.card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

    90deg,

    #2563eb,

    #60a5fa);

}


/*==================================================
CARD TITLE
==================================================*/

.card h3{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    font-size:24px;

    color:#0f172a;

}

body.dark .card h3{

    color:#ffffff;

}


/*==================================================
LABELS
==================================================*/

.card label{

    display:block;

    margin:18px 0 8px;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:#64748b;

}

body.dark .card label{

    color:#cbd5e1;

}

/*==================================================
INPUTS
==================================================*/

.card input,

.card select{

    width:100%;

    height:56px;

    padding:0 18px;

    border-radius:14px;

    border:2px solid #e5e7eb;

    background:#ffffff;

    color:#1f2937;

    font-size:17px;

    outline:none;

    transition:.3s;

}

.card input:focus,

.card select:focus{

    border-color:#2563eb;

    box-shadow:
    0 0 0 5px
    rgba(37,99,235,.15);

}

/*==============================
Dark Mode Inputs
==============================*/

body.dark .card input,

body.dark .card select{

    background:#334155;

    border:2px solid #64748b;

    color:#ffffff;

}

body.dark .card input:focus,

body.dark .card select:focus{

    background:#475569;

    border-color:#60a5fa;

    box-shadow:
    0 0 0 5px
    rgba(96,165,250,.18);

}

body.dark .card input::placeholder{

    color:#cbd5e1;

}

/*==================================================
CARD BUTTON
==================================================*/

.card button{

    width:100%;

    height:56px;

    margin-top:22px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#ffffff;

    background:

    linear-gradient(

    90deg,

    #2563eb,

    #3b82f6);

    transition:.3s;

}

.card button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 35px

    rgba(37,99,235,.35);

}


/*==================================================
RESULT BOX
==================================================*/

.results{

    margin-top:22px;

    min-height:90px;

    padding:20px;

    border-radius:16px;

    background:#f8fbff;

    border:1px solid #dbeafe;

    line-height:1.8;

    font-size:16px;

}

.results b{

    color:#2563eb;

}

body.dark .results{

    background:#0f172a;

    border-color:#334155;

}

body.dark .results b{

    color:#60a5fa;

}

/*==================================================
FAQ
==================================================*/

.faq{

    max-width:900px;

    margin:auto;

}

.faq h3{

    margin:30px 0 12px;

    font-size:24px;

    color:var(--primary);

}

.faq p{

    margin-bottom:18px;

    font-size:17px;

    line-height:1.8;

}


/*==================================================
CONTACT
==================================================*/

#contact{

    background:#f1f5f9;

}

body.dark #contact{

    background:#0f172a;

}


/*==================================================
FOOTER
==================================================*/

footer{

    background:#111827;

    color:#ffffff;

    text-align:center;

    padding:35px 0;

}

footer p{

    margin:0;

    font-size:16px;

}


/*==================================================
ANIMATIONS
==================================================*/

.fade{

    animation:fadeIn .4s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes twinkle{

    0%,100%{

        opacity:.25;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.8);

    }

}

@keyframes glowPulse{

    0%,100%{

        transform:scale(.9);

        opacity:.5;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

@keyframes moonFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}


/*==================================================
TABLET
==================================================*/

@media (max-width:1000px){

.hero-grid{

grid-template-columns:1fr;

gap:50px;

text-align:center;

}

.hero h1{

font-size:52px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

}


/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

header{

padding:16px 0;

}

header .container{

flex-direction:column;

align-items:center;

gap:16px;

}

.logo{

font-size:22px;

text-align:center;

}

nav{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

nav a{

font-size:15px;

}

.theme-toggle{

width:54px;

height:54px;

}

section{

padding:50px 0;

}

.hero{

padding:30px 0 20px;

min-height:auto;

overflow:hidden;

}

.hero-grid{

display:flex;

flex-direction:column;

align-items:center;

gap:28px;

text-align:center;

}

.hero-left,

.hero-right{

width:100%;

max-width:100%;

}

.hero h1{

font-size:52px;

line-height:1.1;

margin-bottom:18px;

}

.hero p{

font-size:20px;

line-height:1.6;

max-width:100%;

margin:0 auto 24px;

padding:0;

}

.hero-buttons{

display:flex;

flex-direction:column;

align-items:center;

gap:14px;

}

.button{

width:100%;

max-width:320px;

min-width:0;

}

.hero-features{

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

font-size:18px;

}

.sleep-circle{

width:230px;

height:230px;

margin:0 auto;

}

.sleep-circle .moon{

font-size:64px;

}

.sleep-hours{

font-size:32px;

}

.sleep-text{

font-size:18px;

}

section h2{

font-size:36px;

}

.section-subtitle{

font-size:18px;

line-height:1.7;

padding:0 12px;

}

.grid{

grid-template-columns:1fr;

gap:24px;

}

.card{

padding:22px;

}

}

/*==================================================
RESULT CARD
==================================================*/

.result-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

    color:var(--primary);

}

.result-time{

    font-size:34px;

    font-weight:700;

    margin-bottom:18px;

}

.result-rating{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    font-size:15px;

    font-weight:600;

    margin-bottom:24px;

}

.result-section{

    margin-bottom:22px;

    line-height:1.8;

}