*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    color:#1e293b;

    background: linear-gradient(
        -45deg,
        #dbeafe,
        #bfdbfe,
        #e0f2fe,
        #ffffff
    );

    background-size:400% 400%;

    animation:gradientBG 12s ease infinite;
}
/* NAVBAR */

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 80px;

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

backdrop-filter:blur(15px);

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.logo{

font-size:30px;

font-weight:bold;

color:#2563eb;

}

nav ul{

display:flex;

list-style:none;

gap:35px;

}

nav ul li a{

text-decoration:none;

color:#1e293b;

font-weight:bold;

transition:.3s;

}

nav ul li a:hover{

color:#2563eb;

}

/* HERO */

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:80px;

min-height:85vh;

}

.hero-left{

width:55%;

}

.hero-left h1{

font-size:58px;

line-height:1.2;

margin-bottom:25px;

color:#2563eb;

}

.hero-left p{

font-size:21px;

line-height:1.8;

margin-bottom:40px;

color:#475569;

}

.hero-buttons{

display:flex;

gap:20px;

}

.primary-btn{

background:#2563eb;

color:white;

padding:16px 35px;

border-radius:12px;

text-decoration:none;

font-weight:bold;

}

.primary-btn:hover{

background:#1d4ed8;

}

.secondary-btn{

border:2px solid #2563eb;

padding:16px 35px;

border-radius:12px;

text-decoration:none;

font-weight:bold;

color:#2563eb;

background:white;

}

.secondary-btn:hover{

background:#2563eb;

color:white;

}

.hero-right{

width:40%;

display:flex;

justify-content:center;

}

.ai-box{

background:white;

padding:40px;

border-radius:20px;

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

text-align:center;

}

.ai-box h2{

color:#2563eb;

margin-bottom:20px;
animation: float 4s ease-in-out infinite;

}

.ai-box p{

font-size:22px;

line-height:1.8;

}

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

footer{

background:#0f172a;

color:white;

padding:60px 80px 20px;

margin-top:80px;

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}

.footer-logo h2{

font-size:30px;

margin-bottom:20px;

color:#3b82f6;

}

.footer-logo p{

line-height:1.8;

color:#cbd5e1;

}

footer h3{

margin-bottom:20px;

color:white;

}

footer ul{

list-style:none;

}

footer ul li{

margin-bottom:12px;

}

footer ul li a{

text-decoration:none;

color:#cbd5e1;

transition:.3s;

}

footer ul li a:hover{

color:#3b82f6;

padding-left:5px;

}

.footer-contact p{

margin-bottom:12px;

color:#cbd5e1;

}

footer hr{

margin:40px 0 20px;

border:none;

height:1px;

background:#334155;

}

.copyright{

text-align:center;

color:#94a3b8;

font-size:15px;

}
/* ================= STATISTICS ================= */

.stats{

width:90%;

margin:80px auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.stat-card{

background:white;

padding:40px;

text-align:center;

border-radius:20px;

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

transition:.35s;

cursor:pointer;

}

.stat-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 55px rgba(37,99,235,.18);

}

.stat-card h2{

font-size:48px;

color:#2563eb;

margin-bottom:15px;

}

.stat-card p{

font-size:18px;

color:#64748b;

font-weight:bold;

}
@keyframes gradientBG{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}
@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

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

.features{

padding:100px 8%;

text-align:center;

}

.section-title{

font-size:45px;

color:#2563eb;

margin-bottom:15px;

}

.section-subtitle{

font-size:20px;

color:#64748b;

margin-bottom:60px;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.feature-card{

background:white;

padding:40px;

border-radius:20px;

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

transition:.35s;

cursor:pointer;

}

.feature-card:hover{

transform:translateY(-15px);

box-shadow:0 25px 60px rgba(37,99,235,.18);

}

.icon{

font-size:55px;

margin-bottom:20px;

}

.feature-card h3{

margin-bottom:15px;

color:#2563eb;

font-size:25px;

}

.feature-card p{

color:#64748b;

line-height:1.8;

font-size:17px;

}
/* ================= WORKFLOW ================= */

.workflow{

padding:100px 8%;

background:#f8fbff;

text-align:center;

}

.workflow-container{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin-top:60px;

flex-wrap:wrap;

}

.workflow-step{

background:white;

padding:30px;

width:220px;

border-radius:20px;

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

transition:.35s;

}

.workflow-step:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(37,99,235,.18);

}

.workflow-icon{

font-size:50px;

margin-bottom:20px;

}

.workflow-step h3{

color:#2563eb;

margin-bottom:15px;

}

.workflow-step p{

color:#64748b;

line-height:1.7;

}

.arrow{

font-size:40px;

color:#2563eb;

font-weight:bold;

}
/* ================= TOOLS ================= */

.tools{
    padding:100px 8%;
    text-align:center;
}

.tools-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}

.tool-card{
    background:#ffffff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.tool-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(37,99,235,.15);
}

.tool-icon{
    font-size:50px;
    margin-bottom:20px;
}

.tool-card h3{
    color:#2563eb;
    margin-bottom:15px;
}

.tool-card p{
    color:#64748b;
    line-height:1.7;
}
/* Clickable public AI tool cards */
.tool-card-link{
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.tool-card-link h3,
.tool-card-link p{
    text-decoration:none;
}

.tool-card-link:focus-visible{
    outline:3px solid #2563eb;
    outline-offset:4px;
}

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

/* Public home refinements */
.ai-box-points{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.ai-box-points span{padding:8px 10px;border-radius:999px;background:#eff6ff;color:#2563eb;font-weight:700;font-size:13px}
.about-section{padding:90px 8%;text-align:center;background:#f8fbff}
.about-card{max-width:900px;margin:0 auto;background:#fff;padding:32px;border-radius:22px;box-shadow:0 15px 40px rgba(0,0,0,.08);color:#64748b;line-height:1.8;font-size:17px}
.footer-logo{display:flex;align-items:flex-start;gap:10px;text-decoration:none;color:inherit}
.footer-logo h2{margin:0}
.footer-more{display:inline-block!important;margin-top:5px;font-weight:800}
.mobile-nav-toggle{display:none;border:0;background:#eef2ff;color:#2563eb;border-radius:11px;width:42px;height:42px;font-size:20px;cursor:pointer}
@media(max-width:900px){
  nav{padding:14px 18px;gap:12px}
  nav .logo{font-size:22px}
  nav .logo .vk-logo{width:34px!important;height:34px!important}
  .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  nav ul{display:none;position:absolute;top:68px;left:14px;right:14px;flex-direction:column;gap:0;padding:10px;background:rgba(255,255,255,.98);border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 15px 35px rgba(15,23,42,.14);z-index:1000}
  nav.mobile-open ul{display:flex}
  nav ul li a{display:block;padding:12px 14px}
  .hero{padding:46px 18px;min-height:auto}
  .hero-left,.hero-right{width:100%}
  .hero-right{margin-top:22px}
  .hero-left h1{font-size:clamp(34px,8vw,48px)}
  .hero-left p{font-size:17px}
  .feature-grid,.tools-grid{grid-template-columns:1fr!important}
  .stats{width:auto;margin:50px 18px;grid-template-columns:1fr 1fr;gap:14px}
  .stat-card{padding:24px 14px}
  .stat-card h2{font-size:36px}
  .workflow-container{gap:12px}
  .workflow-step{width:100%;max-width:340px}
  .arrow{transform:rotate(90deg)}
  footer{padding:40px 18px 18px;margin-top:50px;overflow:hidden}
  .footer-container{grid-template-columns:1fr!important;gap:28px}
  .footer-logo{align-items:center}
  .footer-logo h2{font-size:24px}
  footer h3{margin-bottom:10px}
  footer ul{padding:0}
  footer ul li{margin-bottom:9px}
  .about-section{padding:65px 18px}
}
@media(max-width:600px){
  nav{position:relative}
  .hero-buttons{flex-direction:column}
  .hero-buttons>*{width:100%;text-align:center}
  .features,.workflow,.tools{padding:65px 18px}
  .section-title{font-size:32px}
  .section-subtitle{font-size:16px;margin-bottom:32px}
  .stats{grid-template-columns:1fr}
}