/* ==========================================================
   Retro Design-System — Hyperrealistic Textures Theme
   Compatible with Bootstrap 5
   ========================================================== */

/* ---------- CSS Variables / Theme Tokens ---------- */
:root{
    /* Split-Complementary Palette */
    --clr-primary: #ff6b6b;     /* vivid coral               */
    --clr-primary-dark: #cc5555;
    --clr-primary-light: #ff8a8a;

    --clr-secondary: #6bffce;   /* fresh mint (adjacent #1)  */
    --clr-secondary-dark: #42dca8;
    --clr-secondary-light: #8dffd9;

    --clr-accent: #6b9bff;      /* soft azure (adjacent #2)  */
    --clr-accent-dark: #4877e0;
    --clr-accent-light: #8db4ff;

    --clr-dark: #1d1d1d;
    --clr-light: #f9f9f9;

    /* Gradients */
    --grad-primary: linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);
    --grad-secondary: linear-gradient(135deg,var(--clr-secondary) 0%,var(--clr-primary) 100%);

    /* Typography */
    --ff-heading: 'Roboto',sans-serif;
    --ff-body: 'Lato',sans-serif;

    /* Radii & Shadows */
    --radius-sm: .4rem;
    --radius-md: .8rem;
    --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --shadow-md: 0 6px 20px rgba(0,0,0,.12);

    /* Animation */
    --timing-elastic: cubic-bezier(.68,-0.55,.27,1.55);
}

/* ---------- Global Resets ---------- */
html{scroll-behavior:smooth;}
body{
    font-family:var(--ff-body);
    color:var(--clr-dark);
    background:var(--clr-light);
    line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    font-weight:700;
    line-height:1.2;
}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:var(--clr-primary);transition:color .2s ease;}
a:hover{color:var(--clr-accent);}
.text-shadow-sm{text-shadow:0 1px 3px rgba(0,0,0,.35);}
.pt-hero-fix{padding-top:100px;}           /* for privacy/terms pages */

/* ---------- Utility Layout Helpers ---------- */
.col-two-thirds{flex:0 0 66.666%;max-width:66.666%;}
.d-center{display:flex;justify-content:center;align-items:center;}
.parallax{background-attachment:fixed;background-size:cover;background-repeat:no-repeat;}
.glassy{
    background:rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    border-radius:var(--radius-md);
}

/* ---------- Animations ---------- */
@keyframes elasticIn{
    0%{transform:scale(.6);opacity:0;}
    60%{transform:scale(1.05);opacity:1;}
    80%{transform:scale(.95);}
    100%{transform:scale(1);}
}
@keyframes floatY{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

/* ---------- Navbar ---------- */
.navbar{
    backdrop-filter:blur(8px);
    background:rgba(255,255,255,.9);
    box-shadow:var(--shadow-sm);
}
.nav-link{
    font-weight:500;
    position:relative;
}
.nav-link::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:2px;
    background:var(--clr-primary);
    transition:width .3s var(--timing-elastic);
}
.nav-link:hover::after{width:100%;}

/* ---------- Hero Section ---------- */
#hero{
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
    color:#fff;
}
#hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
}
#hero .container{position:relative;z-index:2;}
#hero h1{animation:elasticIn .9s var(--timing-elastic) both;}
#hero p{animation:elasticIn 1.2s var(--timing-elastic) both;}

/* ---------- Buttons ---------- */
.btn,
button,
input[type='submit']{
    --btn-bg:var(--clr-primary);
    --btn-bg-hover:var(--clr-accent);
    --btn-color:#fff;
    --btn-radius:var(--radius-sm);

    font-weight:600;
    border:none;
    border-radius:var(--btn-radius);
    padding:.65rem 1.4rem;
    background:var(--btn-bg);
    color:var(--btn-color);
    transition:background .25s ease,transform .25s var(--timing-elastic);
}
.btn-outline-light{
    --btn-bg:transparent;
    --btn-color:#fff;
    border:2px solid #fff;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--btn-bg-hover);
    transform:translateY(-2px);
}
.btn:active{transform:scale(.96);}

/* ---------- Section Headings ---------- */
.section-title{
    font-size:clamp(1.8rem,3vw,2.4rem);
    margin-bottom:2rem;
    text-align:center;
    color:var(--clr-dark);
}

/* ---------- Cards / Items / Testimonials ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#fff;
    border:none;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:1.25rem;
    transition:transform .4s var(--timing-elastic),box-shadow .4s;
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}
/* card image wrapper */
.image-container{
    width:100%;
    height:220px; /* fixed height */
    overflow:hidden;
    border-radius:var(--radius-sm);
    margin-bottom:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
}
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ---------- Statistics ---------- */
#stats .display-5{
    font-family:var(--ff-heading);
    font-size:clamp(2.2rem,4vw,3rem);
    animation:floatY 4s ease-in-out infinite;
}

/* ---------- Pricing ---------- */
#pricing .card{
    border:2px solid var(--clr-primary-light);
}
#pricing .display-6{color:var(--clr-primary);}

/* ---------- Resources “Читать далее” Links ---------- */
.read-more{
    font-weight:600;
    color:var(--clr-accent);
    position:relative;
}
.read-more::after{
    content:'➜';
    margin-left:.4rem;
    transition:transform .3s var(--timing-elastic);
}
.read-more:hover::after{transform:translateX(4px);}

/* ---------- Careers Parallax Section ---------- */
#careers{
    position:relative;
}
#careers::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9));
}

/* ---------- Contact Form ---------- */
#contact form{border-radius:var(--radius-md);}
#contact .form-control:focus{
    border-color:var(--clr-accent-dark);
    box-shadow:0 0 0 .25rem rgba(107,155,255,.25);
}

/* ---------- Accolades / Media Glassmorphism Cards ---------- */
.glass-card{
    padding:2rem;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);
    color:var(--clr-dark);
}

/* ---------- Footer ---------- */
footer{
    background:var(--clr-dark);
    color:#ccc;
    font-size:.95rem;
}
footer a{
    color:var(--clr-light);
    transition:color .2s;
}
footer a:hover{color:var(--clr-secondary);}
footer .social-link{
    font-weight:600;
    margin:0 .25rem;
}
footer .social-link:hover{color:var(--clr-accent);}

/* ---------- Success Page ---------- */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--grad-secondary);
    color:#fff;
}
.success-page h1{font-size:3rem;margin-bottom:1rem;}

/* ---------- Media Queries ---------- */
@media (max-width: 767.98px){
    .navbar-brand{font-size:1.4rem;}
    #hero{padding:5rem 0;}
    .image-container{height:180px;}
}