/* ==========================================
   PUBLICLOCK
   style.css
========================================== */

:root {

    --background:#ffffff;
    --background-alt:#f7f9fb;
    --dark:#0f172a;
    --dark2:#1e293b;

    --primary:#0f172a;
    --accent:#2563eb;

    --text:#334155;
    --text-light:#64748b;

    --border:#e2e8f0;

    --success:#16a34a;

    --shadow:
    0 10px 30px rgba(15,23,42,.08);

    --radius:18px;

}


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


html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    system-ui,
    sans-serif;

    background:white;

    color:var(--text);

    line-height:1.75;

    font-size:18px;

}


.architecture{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
margin-top:40px;
}

.box{
background:white;
padding:25px;
border-radius:18px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
max-width:220px;
text-align:center;
}

.arrow{
font-size:40px;
color:#999;
align-self:center;
}

.quote{
border-left:4px solid #0a66c2;
padding-left:20px;
font-size:1.2em;
font-style:italic;
margin:40px 0;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:40px;
}

.card{
background:white;
padding:30px;
border-radius:18px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
}

.dark{
background:#101010;
color:white;
}

.dark .card{
background:#1d1d1d;
}

.hero{
padding:100px 20px;
text-align:center;
}

.hero h1{
font-size:3em;
margin-bottom:20px;
}

.hero p{
max-width:850px;
margin:auto;
font-size:1.2em;
}

.container{
max-width:1200px;
margin:auto;
padding:80px 20px;
}

h2{
margin-bottom:20px;
}

ul li{
margin-bottom:12px;
}

.cta{
background:#0a66c2;
color:white;
padding:18px 35px;
display:inline-block;
border-radius:12px;
text-decoration:none;
font-weight:bold;
margin-top:30px;
}

a{

    text-decoration:none;

    color:var(--accent);

}



img{
    max-width:100%;
}



.container{

    width:min(1180px,92%);
    margin:auto;

}


.narrow{

    width:min(760px,92%);
    margin:auto;

}


.center{
    text-align:center;
}


/****************************************/
/************** TOPBAR *****************/
/****************************************/

.topbar{

    position:sticky;
    top:0;

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

    backdrop-filter:blur(12px);

    border-bottom:1px solid var(--border);

    z-index:100;

}


.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:82px;

}


.logo{

    color:var(--primary);

    font-size:30px;

    font-weight:800;

    letter-spacing:2px;

}


nav{

    display:flex;

    gap:35px;

}


nav a{

    color:var(--text);

    font-size:16px;

}


nav a:hover{

    color:var(--accent);

}


/****************************************/
/**************** HERO *****************/
/****************************************/

.hero{

    padding:140px 0;

}


.hero-small{

    padding:100px 0;

}


.eyebrow{

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    margin-bottom:20px;

    font-weight:700;

}


h1{

    color:var(--dark);

    font-size:64px;

    line-height:1.1;

    margin-bottom:30px;

}


.hero-subtitle{

    max-width:850px;

    margin:auto;

    color:var(--text-light);

    font-size:24px;

}


/****************************************/
/**************** TEXT *****************/
/****************************************/

section{

    padding:110px 0;

}


h2{

    color:var(--dark);

    font-size:42px;

    margin-bottom:40px;

    line-height:1.2;

}


h3{

    color:var(--dark);

    font-size:26px;

    margin-bottom:18px;

}


p{

    margin-bottom:25px;

}


ul{

    padding-left:20px;

}


li{

    margin-bottom:15px;

}



/****************************************/
/************ LIGHT SECTION ************/
/****************************************/

.light-section{

    background:var(--background-alt);

}



/****************************************/
/************* DARK SECTION *************/
/****************************************/

.dark-section{

    background:var(--dark);

    color:#cbd5e1;

}


.dark-section h2,
.dark-section h3{

    color:white;

}



.dark-section .quote{

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

}


/****************************************/
/*************** QUOTE *****************/
/****************************************/

.quote{

    background:var(--background-alt);

    padding:50px;

    border-radius:var(--radius);

    font-size:28px;

    line-height:1.6;

    color:var(--dark);

    font-style:italic;

}



/****************************************/
/**************** CARD *****************/
/****************************************/

.cards{

    display:grid;

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

    gap:30px;

}


.card{

    background:white;

    padding:40px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}



.info-box{

    background:var(--background-alt);

    padding:50px;

    border-radius:var(--radius);

}



/****************************************/
/*************** OFFERS ****************/
/****************************************/

.offers-grid{

    display:grid;

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

    gap:35px;

}


.offer-card{

    background:white;

    border:1px solid var(--border);

    border-radius:22px;

    padding:50px;

    box-shadow:var(--shadow);

}


.featured{

    border:2px solid var(--accent);

    transform:scale(1.03);

}


.offer-badge{

    display:inline-block;

    padding:8px 18px;

    background:#eff6ff;

    color:var(--accent);

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}


.price{

    color:var(--dark);

    font-size:56px;

    font-weight:800;

    margin:25px 0;

}


.duration{

    color:var(--text-light);

    margin-bottom:10px;

}


.annual-cost{

    color:var(--success);

    margin-bottom:35px;

}



/****************************************/
/************** BUTTONS ****************/
/****************************************/

.button{

    display:inline-block;

    padding:18px 34px;

    background:var(--accent);

    color:white;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

}


.button:hover{

    transform:translateY(-2px);

}


.button.white{

    background:white;

    color:var(--dark);

}


.full{

    width:100%;
    text-align:center;
}



/****************************************/
/**************** FAQ ******************/
/****************************************/

.faq{

    margin-bottom:50px;

}


.faq h3{

    margin-bottom:15px;

}



/****************************************/
/*************** TABLE *****************/
/****************************************/

table{

    width:100%;

    border-collapse:collapse;

}


td,
th{

    border:1px solid var(--border);

    padding:20px;

}


th{

    background:var(--background-alt);

}



/****************************************/
/************** CONTACT ****************/
/****************************************/

.contact-box{

    background:white;

    border:1px solid var(--border);

    border-radius:20px;

    padding:60px;

    box-shadow:var(--shadow);

}


input,
textarea{

    width:100%;

    padding:18px;

    border:1px solid var(--border);

    border-radius:12px;

    margin-bottom:20px;

    font-size:17px;

}


textarea{

    min-height:180px;

}



/****************************************/
/*************** FOOTER ****************/
/****************************************/

footer{

    padding:90px 0;

    border-top:1px solid var(--border);

}


.footer-logo{

    color:var(--dark);

    font-size:34px;

    font-weight:800;

    margin-bottom:30px;

}


small{

    color:var(--text-light);

    font-size:12px;

}



/****************************************/
/*************** HR ********************/
/****************************************/

hr{

    margin:40px 0;

    border:none;

    border-top:1px solid var(--border);

}



/****************************************/
/************** MOBILE *****************/
/****************************************/

@media(max-width:900px){

    h1{

        font-size:46px;

    }

    h2{

        font-size:34px;

    }

    .hero-subtitle{

        font-size:20px;

    }

    nav{

        display:none;

    }

    .quote{

        font-size:22px;

    }

    .featured{

        transform:none;

    }

}


@media(max-width:600px){

    body{

        font-size:17px;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    .hero{

        padding:90px 0;

    }

    section{

        padding:80px 0;

    }

    .card,
    .offer-card,
    .contact-box{

        padding:35px;

    }

}

     body {
            background-color: theme('colors.brand.dark');
            color: theme('colors.slate.200');
        }

        /* Timeline specific styles */
        .timeline-container {
            position: relative;
        }
        .timeline-container::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 2rem;
            width: 4px;
            background: theme('colors.slate.800');
            border-radius: 4px;
        }
        @media (max-width: 768px) {
            .timeline-container::before {
                left: 1.5rem;
            }
        }

        .timeline-item {
            position: relative;
            padding-left: 5rem;
            margin-bottom: 3rem;
        }
        @media (max-width: 768px) {
            .timeline-item {
                padding-left: 4rem;
            }
        }

        .timeline-icon {
            position: absolute;
            left: 0.5rem;
            top: 0;
            width: 3rem;
            height: 3rem;
            background: theme('colors.brand.panel');
            border: 4px solid theme('colors.brand.dark');
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            z-index: 10;
            box-shadow: 0 0 0 2px theme('colors.brand.blue');
        }
        @media (max-width: 768px) {
            .timeline-icon {
                left: 0;
            }
        }

        /* Topbar Banners */
        .top-banner {
            background: linear-gradient(90deg, #ef4444, #b91c1c);
            color: white;
            text-align: center;
            padding: 10px 20px;
            font-size: 0.9rem;
            font-weight: 600;
            z-index: 100;
            position: relative;
        } 

        /* ==========================================
   NAVIGATION
========================================== */
.publiclock-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 1000;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--accent);
}

.nav-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  background: var(--accent);
  color: #fff;
}

.nav-btn:hover {
  background: #1d4ed8;
  color: #fff;
}