*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
  --color-text: #2A2A4C;
  --color-text-muted: #656476;
  --color-secondary: #8C899E;
  --color-accent: #6B9BFF;
  --color-bg-dark: #07043B;
  --shadow-sm: 0 2px 6px hsla(0,0%,0%,0.08);
  --shadow-md: 0 6px 16px hsla(0,0%,0%,0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
}
/* Typography hierarchy */
body { color: var(--color-text); }
h1 { font-size: clamp(1.6rem, 2.5vw, 2rem); line-height: 1.2; color: var(--color-text); }
h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.3; color: var(--color-text); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.35; color: var(--color-text); }
p, li { color: var(--color-secondary); line-height: 1.6; }
.heading{
    display: flex;
    padding-top: 3%;
}
.fylo{
    margin-left: 5%;
}
.fylo img{
    height: 40px;
    
}
.list{
    display: flex;
    margin-left: 60%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #656476;
}
/* Ensure anchor-based nav matches original style */
.list a { color: var(--color-text-muted); text-decoration: none; font-family: inherit; }
.list a:hover { opacity: 0.85; }
.list a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.work{
    padding-left: 25px;
}
.login{
    padding-left: 25px;
}
.files{
    color:#2A2A4C;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-top: 10%;
    margin-left: 5%;
    width: 50%;
}

.files p{
    padding-top: 10px;
}
.illustration{
    display: flex;
    padding-top: 5%;
}
.location img{
    height: 450px;
}
.check{
    display: flex;
    margin-top: 20px;
}

.start button{
    padding: 7px;
    margin-left: 180px;
    width: 70%;
    color: #656476;
    background-color: #6B9BFF;
    border: none;
    
}
.start button:hover{
    cursor: pointer;
    background-color: #6b9aff75;
    transition: 1s;
}
.mail h3{
    font-size: small;
}
.product{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left: 5%;
    margin-top: 10%;
    


}
.action{
    display: flex;
}
.page img{
    height: 350px;
}
.cover{
    padding-top: 10px;
}
.collection{
    padding-top: 10px;
}
.line{
    display: flex;
    padding-top: 10px;
    font-size: small;
    
}

.top{
    color:#87EAD8;
}
.target img{
    padding-top: 3px;
    
}
.box{
    margin-top: 20px;
    box-shadow: 5px 5px 5px 5px hsla(0, 52%, 6%, 0.2);
    width: 25%;
   
}
.activity{
    padding-left: 35px;
    color:#8C899E;
}
.activity p{
    width: 85%;
    font-size: small;

}
.activity img{
    padding-top: 20px;
}
.diagram{
    display: flex;
    padding-top: 10px;
    padding-left: 35px;
}
.testimony img{
    border-radius: 50px;
    height: 50px;
}
.brown{
    font-size: smaller;
    margin-left: 10px;
    padding-top: 5px;
    font-size: smaller;
}
.brown p{
    padding-top: 3px;
    color: #84838B;
}
.div{
    margin-top: -18%;
}
.access{
    display: flex;
    margin-top: 7%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #575989;
    padding-top: 5%;
    padding-bottom: 5%;
}
.early{
    margin-left: 50px;
    

}

.access p{
    padding-top: 10px;
}
.point h3{
    font-size: small;
}
.free{
    margin-top: 20px;
    margin-left: 25%;
}
.front button{
    margin-top: 7px;
    border: none;
    color: #656476;
    background-color: #6B9BFF;
    padding: 7px;
}
.front button:hover{
    cursor: pointer;
    background-color: #6b9aff75;
   transition: 1s;
}
.example{
    background-color: #07043B;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    
    
}
.web{
    display: flex;
    font-size: small;
    
}
.site{
    display: flex;
    font-size: small;
    padding-top: 10px;
}
.school{
    margin-left: 50px;
}
.program{
    padding-top: 40px;
}
.program img{
    height: 30px;
    
}
.mobile img{
    height: 0.7rem;
}
.tech img{
    height: 0.7rem;
}
.huddle{
    padding-top: 15px;
}
.number{
    padding-left: 14px;
}
.education{
    padding-left: 10px;
}
.media{
    padding-top: 75px;
    padding-left: 20%;
    
}
.media li{
    padding-top: 10px;
}
.press{
    padding-top: 80px;
    padding-left: 20%;
}
.press li{
    padding-top: 10px;
}
.icon img{
    border-radius: 50px;
    margin-top: 450%;
    height: 20px ;
    
}
.icon{
    display: flex;
    margin-left: 15%;
}

.insta{
    margin-left: 15px;
}







@media screen and (max-width:768px){

    .fylo img{
       height: 25px;
       margin-top: 20%;
    }

    .list{
        margin-left: 36px;
        margin-top: 6%;
        
    }
    .list ol{
        font-size: 15px;
    }
    /* Match font size for anchors on small screens */
    .list a { font-size: 15px; }
    .files{
        margin-top: 70%;
        width: 100%;
        
        
    }
    .files h1{
        font-size: 22px;
        align-items: center;
        text-align: center;
        margin-left: -25px;
    }
    .files p{
        align-items: center;
        text-align: center;
        margin-left: 7px;
        font-size: 15px;
        width: 85%;
    }
    .location img{
        margin-left: -110%;
        height: 220px;
        margin-top: 5%;
    }
    .start{
        margin-left: -122%;
        margin-top: 15%;
    }
    .start button{
        padding-left: 60px;
        padding-right: 60px;
        background-color: #2F65F9;
        color: white;
    }
    .mail{
        margin-left: 60px;
    }
    .fylo_text{
        margin-top: 110%;
    }
    .page img{
        margin-left: -30%;
        height: 220px;
        margin-top: 15%;
        
    }
    .location h1{
        width: 300%;
        font-size: 16px;
        align-items: center;
        text-align: center;
        margin-left: 7px;
        
    }
    .cover{
        width: 330%;
        margin-left: -5px;
    }
    .collection{
        width: 352%;
        margin-left: -5px;
    }
    .line{
        margin-top: 25%;
        margin-left: 50px;
    }
    .activity p{
        width: 100%;
        margin-left: -12px;
    }
    .testimony img{
        height: 25px;

    }
    .brown h3{
        width: 300%;
        margin-top: -5px;
        font-size: 14px;
    }
    .brown p{
        width: 300%;
        font-size: 12px;
        margin-bottom: 30px;
    }
    .box{
        width: 98%;
        margin-left: -5px;
        
    }
    .diagram{
        margin-left: -15px;
        
    }
    .free{
        margin-top: 50%;
    }
    .early{
        color: white;
    }
    .early h1{
        width: 350%;
        font-size: 20px;
        align-items: center;
        text-align: center;
        margin-left: 1px;

    }
    .early p{
        width: 500%;
        margin-left: -30px;
        font-size: 15px;
    }
    .front button{
        padding-left: 60px;
        padding-right: 60px;
        background-color: #2F65F9;
        color: white;
        

    }
    .front{
        margin-left: -90%;
    }
    .point input{
        margin-left: -70%;
    }
    .point h3{
        margin-left: -70%;
    }

    .program img{
        height: 35px;
        margin-left: -25px;
        
        
    }
    
    

    
}

/* Structured content sections (progressive disclosure) */
.section-block {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 4%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #2A2A4C; /* reuse heading/text color */
}
.section-block h2 {
  font-size: 1.4rem;
  color: #2A2A4C;
}

/* Accordion: uses native <details> for progressive disclosure */
.accordion details {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  background: #ffffff;
}
.accordion summary {
  cursor: pointer;
  color: #656476; /* matches nav text color */
  font-weight: 600;
}
.accordion .accordion-body {
  margin-top: 8px;
  color: #8C899E; /* matches testimonial text */
}

/* Tabs: purely CSS radios with labels */
.tabs {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  align-items: center;
}
.tabs input[type="radio"] { display: none; }
.tab-label {
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  color: #656476;
  cursor: pointer;
}
.tab-label:hover { background: #f8f8fb; }
.tab-panels {
  grid-column: 1 / -1;
  margin-top: 12px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 12px;
}
.panel { display: none; color: #2A2A4C; }

/* Show the right panel when a tab is selected */
#usage-personal:checked ~ .tab-label[for="usage-personal"],
#usage-team:checked ~ .tab-label[for="usage-team"],
#usage-enterprise:checked ~ .tab-label[for="usage-enterprise"] {
  background: #6B9BFF; /* reuse primary accent */
  color: #fff;
  border-color: transparent;
}
#usage-personal:checked ~ .tab-panels #panel-personal { display: block; }
#usage-team:checked ~ .tab-panels #panel-team { display: block; }
#usage-enterprise:checked ~ .tab-panels #panel-enterprise { display: block; }

/* Cards for how-it-works */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 12px;
}
.card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 14px;
  color: #2A2A4C;
}
.card h3 { color: #2A2A4C; font-size: 1rem; }
.card p { color: #8C899E; margin-top: 6px; }

/* Feature cards under hero */
.feature-cards h2 { color: #2A2A4C; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.feature-card { display: flex; flex-direction: column; align-items: flex-start; }
.card-icon { height: 24px; margin-bottom: 8px; }
.feature-card.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.feature-card.card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px hsla(0, 0%, 0%, 0.12); }

/* General button hover refinement (reuse colors) */
.start button,
.front button { transition: background-color 0.25s ease, transform 0.15s ease; }
.start button:hover,
.front button:hover { transform: translateY(-1px); }

/* Fade-in reveal animation on scroll */
/* Only hide elements initially when JS is enabled to avoid content disappearing without JS */
.js-enabled .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js-enabled .reveal.visible { opacity: 1; transform: none; }

/* Make new and existing grids responsive without altering layout semantics */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
  .illustration { flex-direction: column; align-items: center; }
  .files { width: 90%; margin-left: 0; padding-top: 8%; text-align: left; }
  .location img { height: auto; max-height: 320px; }
  .check { flex-direction: column; gap: 10px; }
  .start button { margin-left: 0; width: auto; }
  .action { flex-direction: column; }
  .page img { height: auto; max-height: 280px; }
  .box { width: auto; margin-right: 5%; }
  .example { flex-direction: column; }
  .media, .press { padding-left: 5%; }
  .icon { margin-left: 5%; }
}

/* Minor responsiveness: stack cards on smaller screens without altering design */
@media (max-width: 768px) {
  .tabs { grid-template-columns: 1fr 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
}

/* Testimonials section */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: 'avatar quote' 'avatar author'; align-items: start; gap: 10px; }
.testimonial-card .avatar { grid-area: avatar; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); }
.testimonial-card blockquote { grid-area: quote; margin: 0; color: var(--color-text); font-size: 0.95rem; line-height: 1.6; }
.testimonial-card .author { grid-area: author; }
.testimonial-card .author h3 { margin: 0; font-size: 1rem; color: var(--color-text); }
.testimonial-card .author p { margin: 2px 0 0; color: var(--color-secondary); font-size: 0.9rem; }

@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* Subtle hover for feature cards already defined (ensure transitions) */
.feature-card { transition: box-shadow 200ms ease, transform 200ms ease; }
.feature-card:hover { transform: translateY(-2px); }

/* Buttons transition ease */
.start button, .front button { transition: filter 160ms ease, box-shadow 200ms ease, transform 200ms ease; }
.start button:hover, .front button:hover { transform: translateY(-1px); }

/* Fade-in reveal animation on scroll */
/* Only hide elements initially when JS is enabled to avoid content disappearing without JS */
.js-enabled .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js-enabled .reveal.visible { opacity: 1; transform: none; }

/* Make new and existing grids responsive without altering layout semantics */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
  .illustration { flex-direction: column; align-items: center; }
  .files { width: 90%; margin-left: 0; padding-top: 8%; text-align: left; }
  .location img { height: auto; max-height: 320px; }
  .check { flex-direction: column; gap: 10px; }
  .start button { margin-left: 0; width: auto; }
  .action { flex-direction: column; }
  .page img { height: auto; max-height: 280px; }
  .box { width: auto; margin-right: 5%; }
  .example { flex-direction: column; }
  .media, .press { padding-left: 5%; }
  .icon { margin-left: 5%; }
}

/* Minor responsiveness: stack cards on smaller screens without altering design */
@media (max-width: 768px) {
  .tabs { grid-template-columns: 1fr 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
}

/* Use variables in new components previously added */
.section-block { margin-left: 5%; margin-right: 5%; margin-top: var(--space-4); color: var(--color-text); }
.section-block h2 { color: var(--color-text); }
.accordion details { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.tab-label { border-radius: var(--radius-sm); }
.tab-panels { border-radius: var(--radius-sm); }
.card { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }

/* Responsive spacing improvements */
@media (max-width: 1024px) { .feature-cards h2 { margin-bottom: var(--space-2); } }
@media (max-width: 640px) {
  .heading { padding-top: var(--space-2); }
  .files { padding-top: var(--space-4); }
  .media, .press { margin-top: var(--space-4); }
}

/* Placeholder imagery style to harmonize */
.card-icon { background: #fff; border-radius: var(--radius-sm); padding: 4px; box-shadow: var(--shadow-sm); }

/* Footer improvements staying on-brand */
.example { background-color: var(--color-bg-dark); }


/* Optional sticky navbar */
.sticky { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: var(--shadow-sm); }

/* CTA buttons under feature cards */
.cta-group { display: flex; gap: 12px; margin-top: 16px; }
.btn { display: inline-block; padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; transition: transform 160ms ease, box-shadow 200ms ease, background-color 160ms ease, color 160ms ease; }
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: #fff; color: var(--color-text); border: 1px solid rgba(0,0,0,0.08); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Icon hover effects with smooth transitions */
.card-icon { transition: transform 160ms ease, filter 160ms ease, box-shadow 200ms ease; }
.feature-card:hover .card-icon { transform: scale(1.03); filter: brightness(1.05); box-shadow: var(--shadow-md); }

/* CSS-only tooltips using data attributes */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 110%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(7,4,59,0.95);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Smooth transitions for interactive elements already present */
.list .character, .list .work, .list .login { transition: color 160ms ease, opacity 160ms ease; }
.list .character:hover, .list .work:hover, .list .login:hover { opacity: 0.85; }

/* Accessible focus outlines */
.btn:focus-visible, .start button:focus-visible, .front button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Fix hero image and button visibility across breakpoints */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

.illustration { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }

.location img { width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mail input { width: min(100%, 28rem); padding: 10px 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; }
.mail h3 { flex-basis: 100%; }

.start { margin-left: 0; }
.start button { padding: 0.625rem 1rem; margin-left: 0; width: auto; min-width: 12rem; color: #fff; background-color: #2F65F9; border: none; border-radius: 6px; }

@media (max-width: 768px) {
  .files { margin-top: var(--space-4); }
  .location img { margin-left: 0; height: auto; max-height: 320px; margin-top: var(--space-2); }
  .mail { flex-direction: column; align-items: stretch; }
  .start { margin-left: 0; margin-top: var(--space-2); }
  .start button { width: 100%; }
  .mail { margin-left: 0; }
}