:root {
    --blue: #1f7bff;
    --green: #1ac29a;
    --orange: #ff8c37;
    --dark: #0e1a2b;
    --text: #0b1624;
    --muted: #5d6b85;
    --bg: #f7f9fc;
    --card: rgba(255,255,255,0.8);
    --glass: rgba(255,255,255,0.6);
    --shadow: 0 20px 70px rgba(0,0,0,0.08);
}
* { box-sizing: border-box; }
body { margin:0; font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }

.site-header { position: sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 36px; backdrop-filter: blur(10px); background: rgba(255,255,255,0.85); box-shadow: 0 8px 30px rgba(0,0,0,0.05); }
.site-header .logo img { height:42px; }
.nav ul { list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.nav a { padding:10px 14px; border-radius:14px; transition: all .3s; font-weight:600; }
.nav a:hover { background: linear-gradient(120deg, rgba(31,123,255,0.12), rgba(26,194,154,0.12)); color: var(--blue); }
.nav-toggle { display:none; }
.nav input { display:none; }

.hero { display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; padding:100px 46px; gap:48px; background: radial-gradient(circle at 20% 20%, rgba(31,123,255,0.08), transparent 45%), radial-gradient(circle at 85% 10%, rgba(255,140,55,0.12), transparent 50%), #f6f8fc; }
.hero.inner { grid-template-columns:1fr; padding:70px 24px; text-align:left; }
.hero h1 { font-size:56px; margin:14px 0; line-height:1.05; }
.hero .gradient { background: linear-gradient(90deg, var(--blue), var(--orange)); -webkit-background-clip: text; color: transparent; }
.lead { color: var(--muted); max-width:620px; font-size:18px; line-height:1.5; }
.cta-group { display:flex; gap:16px; margin-top:20px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:16px; font-weight:700; border:none; cursor:pointer; transition:.25s; box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.btn.primary { background: linear-gradient(120deg, var(--blue), #2c5bff); color:#fff; box-shadow: 0 12px 30px rgba(31,123,255,0.35); }
.btn.ghost { background: #fff; color: var(--text); border:1px solid rgba(0,0,0,0.08); }
.btn.full { width:100%; }

.hero-visual { position:relative; }
.glass-card { background: var(--glass); border:1px solid rgba(255,255,255,0.6); border-radius:24px; padding:24px; box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.stat { background: rgba(255,255,255,0.65); padding:16px; border-radius:16px; text-align:center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.stat span { display:block; font-size:26px; font-weight:700; color:var(--dark); }
.stat small { color: var(--muted); }

.section { padding:70px 32px; }
.section.alt { background: #f1f4f9; }
.section-head { text-align:center; margin-bottom:32px; }
.section-head h2 { margin:0; font-size:28px; }
.section-head p { color: var(--muted); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.card { background: var(--card); border-radius:18px; padding:20px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,0.6); }
.glass { backdrop-filter: blur(14px); border:1px solid rgba(255,255,255,0.6); }
.hover-3d { transition: transform .25s, box-shadow .25s; }
.hover-3d:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 18px 40px rgba(31,123,255,0.15); }
.glow { border:1px solid rgba(31,123,255,0.15); box-shadow: 0 15px 40px rgba(31,123,255,0.12); }
.icon-badge { width:48px; height:48px; border-radius:14px; background: rgba(31,123,255,0.1); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px; color:var(--blue); overflow:hidden; }
.icon-badge.soft { background: rgba(26,194,154,0.12); color:var(--green); }
.icon-badge img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; }

.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.portfolio-card { border-radius:18px; overflow:hidden; background:#fff; box-shadow: var(--shadow); display:flex; flex-direction:column; }
.portfolio-card .thumb { height:170px; background-size:cover; background-position:center; }
.portfolio-info { padding:16px; }
.portfolio-info h3 { margin:0 0 8px; }
.portfolio-info p { margin:0; color: var(--muted); }

.testimonial-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.testimonial { background:#fff; padding:20px; border-radius:18px; box-shadow: var(--shadow); }
.quote { color:var(--text); font-weight:600; }
.author { display:flex; align-items:center; gap:12px; margin-top:16px; }
.avatar { width:46px; height:46px; border-radius:50%; background-size:cover; background-position:center; background-color:#dfe7f3; }

.site-footer { background:#0f1117; color:#e5e9f0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; padding:40px 32px; }
.footer-col h4 { margin:0 0 12px; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:8px; color:#cbd5e1; }
.logo-footer { height:40px; margin-bottom:10px; }
.social a { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background: transparent; color:#fff; margin-right:8px; border:1px solid rgba(255,255,255,0.2); overflow:hidden; }
.social img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.icon-img img { width:18px; height:18px; object-fit:contain; vertical-align:middle; margin-right:6px; }

.hero-visual .hero-display {
    background: radial-gradient(circle at 20% 20%, rgba(31,123,255,0.16), transparent 50%), radial-gradient(circle at 80% 10%, rgba(26,194,154,0.12), transparent 50%), #0e1625;
    border-radius:28px;
    min-height:380px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.08);
    position:relative;
    overflow:hidden;
}
.hero-visual .hero-display::after {
    content:"";
    position:absolute;
    inset:18px;
    border-radius:20px;
    background: linear-gradient(135deg, rgba(35,178,255,0.08), rgba(26,194,154,0.05));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.hero-visual .hero-display .grid-lines {
    position:absolute; inset:32px; border-radius:16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 100% 36px, 48px 100%;
    opacity:0.4;
}
.hero-visual .hero-display .bars {
    position:absolute; inset:60px 40px;
}
.hero-visual .hero-display .bars .bar {
    height:12px; margin-bottom:12px; border-radius:10px;
    background: linear-gradient(90deg, rgba(48,195,255,0.8), rgba(31,123,255,0.7));
    box-shadow: 0 6px 20px rgba(31,123,255,0.25);
}
.footer-bottom { background:#0b0d13; color:#7c8698; text-align:center; padding:14px; }

.contact-grid { padding:60px 24px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; }
.contact-form { background:#fff; padding:22px; border-radius:18px; box-shadow: var(--shadow); display:grid; gap:12px; }
.contact-form label { display:grid; gap:6px; font-weight:600; color:var(--text); }
.contact-form input, .contact-form textarea { width:100%; padding:12px; border-radius:12px; border:1px solid #dbe1ec; background:#f9fbff; font-size:14px; }
.contact-form textarea { resize:vertical; }
.contact-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.contact-cards .card { position:relative; padding-top:58px; }
.contact-cards .icon-badge { position:absolute; top:12px; left:12px; background:#eef3fb; }
.contact-cards img { max-width:36px; max-height:36px; object-fit:contain; }
.form-result { margin-top:8px; font-weight:600; }

.filters { display:flex; gap:10px; padding:12px 24px; flex-wrap:wrap; }
.pill { background:#eef3fb; color:var(--text); padding:8px 12px; border-radius:12px; font-weight:600; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; padding:24px; }
.blog-card { background:#fff; border-radius:18px; overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column; }
.blog-card .thumb { height:150px; background-size:cover; background-position:center; }
.blog-card .body { padding:16px; display:grid; gap:8px; }
.blog-card .meta { color:var(--muted); font-size:12px; }
.blog-card h3 { margin:0; }
.read { color:var(--blue); font-weight:700; }

.article { padding:24px; background:#fff; margin:24px; border-radius:18px; box-shadow: var(--shadow); }
.article .cover { width:100%; border-radius:14px; margin-bottom:16px; }
.article .content { color:#20293c; line-height:1.6; }

.split { display:grid; grid-template-columns:1.1fr 0.9fr; gap:20px; align-items:center; }
.image-block { height:280px; border-radius:20px; background:url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80') center/cover; box-shadow: var(--shadow); }
.mission { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.gradient { background: linear-gradient(135deg, rgba(31,123,255,0.12), rgba(255,140,55,0.12)); }
.adsense { margin:22px; padding:18px; border:1px dashed #d0d7e6; text-align:center; border-radius:16px; color:var(--muted); }

.eyebrow { text-transform:uppercase; letter-spacing:1px; font-weight:700; color:var(--blue); }
.meta { color:var(--muted); }

@media (max-width: 900px) {
    .hero { grid-template-columns:1fr; text-align:center; }
    .hero .lead { margin:0 auto; }
    .hero-visual { order:-1; }
    .contact-grid, .split { grid-template-columns:1fr; }
    .site-header { padding:12px 18px; }
    .nav ul { display:none; flex-direction:column; background:#fff; position:absolute; top:60px; right:12px; width:200px; padding:12px; box-shadow: var(--shadow); }
    .nav-toggle { display:block; cursor:pointer; font-size:24px; }
    #nav-toggle:checked + label + ul { display:flex; }
}