/* -------------------------------------------------
   style.css  |  Corporate Design System – Analog
   ------------------------------------------------- */

/* ============ ROOT / THEME ============ */
:root {
    /* Typography */
    --ff-heading: 'Manrope', sans-serif;
    --ff-body: 'Rubik', sans-serif;

    /* Analog Color Palette (teal–blue spectrum) */
    --color-primary: #2b7a78;
    --color-secondary: #3aafa9;
    --color-accent: #17252a;

    /* Extended Shades */
    --color-primary-dark: #205d5b;
    --color-secondary-light: #5fc2bf;
    --color-accent-light: #2e3d44;

    /* Neutrals */
    --color-white: #ffffff;
    --color-light: #f7f9fa;
    --color-gray: #7a8a99;
    --color-dark: #222222;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-overlay: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));

    /* UI */
    --radius-sm: 6px;
    --radius-md: 12px;
    --transition-fast: 0.25s ease;
    --transition-base: 0.45s cubic-bezier(.25,.8,.25,1);

    /* Shadows */
    --shadow-card: 0 10px 25px rgba(0,0,0,0.08);
    --shadow-hover: 0 15px 35px rgba(0,0,0,0.12);

    /* Z-index */
    --z-header: 900;
}

/* ============ GLOBAL RESETS & BASE ============ */
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--ff-body);
    color: var(--color-dark);
    background-color: var(--color-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    margin: 0 0 .65em;
    line-height: 1.2;
    color: var(--color-accent);
}
.section-title {
    text-align: center;
    font-size: clamp(1.8rem, 2.5vw + .5rem, 2.6rem);
    text-shadow: 1px 1px 3px rgba(0,0,0,.15);
    margin-bottom: 2.5rem;
}

/* Utility Containers */
.container { width: 90%; max-width: 1200px; margin-inline: auto; }
.is-two-thirds { width: 66.666%; max-width: 1200px; margin-inline: auto; }

/* ============ HEADER / NAV ============ */
.header {
    position: fixed;
    top: 0; inset-inline: 0;
    background: var(--color-accent);
    padding: 1rem 0;
    z-index: var(--z-header);
    transition: var(--transition-base);
}
.header__inner { display:flex; align-items:center; justify-content:space-between; }
.logo {
    font-family: var(--ff-heading);
    font-size: 1.4rem;
    color: var(--color-white);
    text-decoration:none;
    letter-spacing: .5px;
}
.nav ul { display:flex; gap: 2rem; list-style:none; margin:0; padding:0; }
.nav a { color: var(--color-white); text-decoration:none; position:relative; }
.nav a::after {
    content:''; position:absolute; left:0; bottom:-4px;
    width:0; height:2px; background: var(--color-secondary-light);
    transition: width var(--transition-fast);
}
.nav a:hover::after { width: 100%; }

/* Burger */
.nav-toggle { display:none; }
.burger { display:none; cursor:pointer; flex-direction:column; gap:4px; }
.burger span {
    width:25px; height:3px; background:var(--color-white);
    transition: transform .3s;
}
/* Responsive Nav */
@media (max-width: 768px){
    .burger { display:flex; }
    .nav { position:fixed; inset-inline:0; top:60px; background:var(--color-accent); transform:translateY(-110%); transition:var(--transition-base); }
    .nav ul { flex-direction:column; padding:2rem 0; gap:1.5rem; text-align:center; }
    .nav-toggle:checked ~ label.burger span:nth-child(1){ transform:translateY(6px) rotate(45deg);}
    .nav-toggle:checked ~ label.burger span:nth-child(2){ opacity:0;}
    .nav-toggle:checked ~ label.burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg);}
    .nav-toggle:checked ~ .nav{ transform:translateY(0);}
}

/* ============ HERO ============ */
.hero {
    position: relative;
    padding: 140px 0 100px;
    min-height: 70vh;
    display:flex; align-items:center;
    color: var(--color-white);
    text-align:center;
    overflow:hidden;
}
.hero__bg {
    position:absolute; inset:0;
    background-size:cover; background-repeat:no-repeat;
    background-position:center;
    filter: brightness(.85);
    z-index:-2;
}
.hero::after {
    content:''; position:absolute; inset:0;
    background:var(--gradient-overlay);
    z-index:-1;
}
.hero__content {
    animation: fadeInUp .8s ease-out .3s both;
}
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px);}
    to { opacity:1; transform:translateY(0);}
}

/* Particle Animation (simple) */
@keyframes float {
    from { transform:translateY(0) translateX(0); opacity:.9; }
    to   { transform:translateY(-60px) translateX(20px); opacity:0;}
}
.hero::before{
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:radial-gradient(circle, rgba(255,255,255,.25) 2px, transparent 2px);
    background-size:40px 40px; opacity:.08;
    animation:particle 20s linear infinite;
}
@keyframes particle {
    from{ background-position:0 0;}
    to  { background-position:400px -400px;}
}

/* ============ GLOBAL BUTTONS ============ */
.btn, button, input[type="submit"]{
    display:inline-block;
    padding:.75em 1.8em;
    border-radius: var(--radius-sm);
    font-family: var(--ff-heading);
    font-weight:600;
    font-size:1rem;
    cursor:pointer;
    text-decoration:none;
    border:0;
    transition:var(--transition-fast);
    color:var(--color-white);
    background:var(--gradient-primary);
    box-shadow: var(--shadow-card);
}
.btn-secondary{
    background:var(--color-secondary);
    color:var(--color-white);
}
.btn:hover{
    box-shadow: var(--shadow-hover);
    transform:translateY(-2px);
}

/* ============ SECTIONS GENERIC ============ */
.section { padding: 80px 0; }
.section:nth-of-type(even){ background: var(--color-white); }
.section:nth-of-type(odd){ background: var(--color-light); }

/* ============ GRID & CARDS ============ */
.card-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card, .item, .testimonial, .product-card, .team-member{
    display:flex;
    flex-direction:column;
    align-items:center;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding:1.5rem;
    text-align:center;
    transition:var(--transition-fast);
}
.card:hover{ transform:translateY(-4px); box-shadow: var(--shadow-hover); }
.card-image, .image-container{
    width:100%;
    height:200px;
    overflow:hidden;
    border-radius: var(--radius-sm);
    margin-bottom:1rem;
    position:relative;
}
.card-image img, .image-container img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}

/* ============ METHODOLOGY CAROUSEL ============ */
.carousel { position:relative; overflow:hidden; }
.carousel-track{ display:flex; gap:1rem; transition: transform .6s ease; }
.slide{ flex:0 0 300px; }
.carousel-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:35px; height:35px; border-radius:50%;
    border:none; background:var(--color-accent-light); color:var(--color-white);
    cursor:pointer; display:grid; place-items:center;
}
.carousel-btn.prev{ left:10px;}
.carousel-btn.next{ right:10px;}
.carousel-btn:hover{ background:var(--color-secondary);}

/* ============ GALLERY (Portfolio) ============ */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.5rem;
}
.gallery .image-container{ height:260px; }

/* ============ FAQ ACCORDION ============ */
.accordion-item{ border-bottom:1px solid var(--color-secondary); }
.accordion-header{
    width:100%; text-align:left; padding:1rem;
    background:var(--color-secondary); color:var(--color-white);
    border:none; font-weight:600; cursor:pointer;
}
.accordion-content{ max-height:0; overflow:hidden; transition:max-height .4s ease; padding:0 1rem;}
.accordion-item.open .accordion-content{ max-height:240px; padding:1rem; }

/* ============ CONTACT FORM ============ */
.contact-form{ display:grid; gap:1.25rem; }
.form-group{ display:flex; flex-direction:column; }
label{ margin-bottom: .4rem; font-weight:500; color:var(--color-accent);}
input[type="text"], input[type="email"], textarea{
    padding:.8rem 1rem; border:1px solid #d7e0e5; border-radius:var(--radius-sm);
    font-family:var(--ff-body); font-size:1rem; resize:vertical;
    transition:border var(--transition-fast);
}
input:focus, textarea:focus{ outline:none; border-color: var(--color-secondary); }

/* ============ BLOG "Read More" LINK ============ */
a.read-more{
    display:inline-block; color:var(--color-secondary);
    font-weight:600; position:relative; padding-right:1.2rem;
    transition:color var(--transition-fast);
}
a.read-more::after{
    content:'→'; position:absolute; right:0; top:0;
    transition: transform var(--transition-fast);
}
a.read-more:hover{ color:var(--color-primary-dark);}
a.read-more:hover::after{ transform: translateX(4px); }

/* ============ SOCIAL LINKS (FOOTER) ============ */
.footer{
    background: var(--color-accent);
    color: var(--color-white);
    padding:3rem 0;
}
.footer-nav ul{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; list-style:none; margin:0; padding:0;}
.footer a{ color:var(--color-secondary-light); text-decoration:none; transition:color var(--transition-fast);}
.footer a:hover{ color:var(--color-white);}
.socials{ display:flex; gap:1rem; justify-content:center; margin-top:1.5rem; }
.socials a{ font-weight:600; }

/* ============ LEGAL PAGES (terms / privacy) ============ */
.legal-page{ padding-top:100px; }

/* ============ SUCCESS PAGE ============ */
.success-page{
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:1.25rem;
    background:var(--gradient-primary);
    color:var(--color-white);
    text-align:center;
}

/* ============ PARALLAX / GLASSMORPHISM UTILITIES ============ */
.bg-parallax{
    background-attachment: fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
.glass{
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-md);
}

/* ============ ANIMATIONS UTILITIES ============ */
.fade-in{ animation: fadeIn .8s ease both;}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ============ MEDIA QUERIES (TYPOGRAPHY) ============ */
@media (min-width: 992px){
    body{ font-size:1.05rem; }
    .hero__title{ font-size:3rem; }
}

/* ============ PRINT OPTIMIZATION ============ */
@media print{
    *,*::before,*::after{ background:none!important; color:#000!important; box-shadow:none!important; }
    a::after{ content:" (" attr(href) ") "; }
}