@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root { --blue-950:#132b52; --blue-800:#244b80; --blue-600:#4b8df8; --blue-400:#85b9ff; --ice:#e8f3ff; --sky:#f4f9ff; --white:#fff; --text:#193252; --muted:#6e8198; --line:#dbe8f6; --shadow:0 24px 70px rgba(54,105,166,.12); --ease:cubic-bezier(.2,.7,.2,1); --max:1220px; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; color:var(--text); background:var(--sky); font-family:'Plus Jakarta Sans',sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; } button { border:0; font:inherit; cursor:pointer; }
.container { width:min(calc(100% - 48px),var(--max)); margin:0 auto; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; border-bottom:1px solid transparent; transition:background .3s ease,box-shadow .3s ease,border-color .3s ease; }
.site-header.scrolled { background:rgba(244,249,255,.86); border-color:rgba(219,232,246,.9); box-shadow:0 8px 28px rgba(52,94,139,.08); backdrop-filter:blur(18px); }
.nav { min-height:82px; display:flex; align-items:center; justify-content:space-between; }
.brand { position:relative; color:var(--blue-950); font:800 28px/1 'Manrope',sans-serif; letter-spacing:-.075em; } .brand span { color:var(--blue-600); } .brand::after { content:''; display:inline-block; width:22px; height:3px; margin:0 0 2px 5px; border-radius:999px; background:linear-gradient(90deg,var(--blue-600),var(--blue-400)); vertical-align:middle; }
.nav-menu { display:flex; align-items:center; gap:31px; color:#71849b; font-size:13px; font-weight:700; } .nav-menu a { transition:color .2s ease; } .nav-menu a:hover { color:var(--blue-600); }
.nav-cta { padding:10px 17px; border:1px solid var(--blue-400); border-radius:999px; color:var(--blue-800)!important; }
.mobile-toggle { display:none; width:42px; height:42px; background:transparent; } .mobile-toggle span { display:block; width:22px; height:2px; margin:5px auto; background:var(--blue-800); }
.hero { position:relative; min-height:820px; overflow:hidden; display:flex; align-items:center; background:radial-gradient(circle at 82% 35%,rgba(133,185,255,.28),transparent 28%),linear-gradient(135deg,#f9fcff,#eaf4ff); }
.hero::before { content:''; position:absolute; width:680px; height:680px; right:-250px; top:-180px; border:1px solid rgba(75,141,248,.15); border-radius:50%; box-shadow:0 0 0 62px rgba(75,141,248,.035),0 0 0 124px rgba(75,141,248,.025); animation:orbit 22s linear infinite; }
.hero::after { content:''; position:absolute; inset:0; opacity:.45; background-image:linear-gradient(rgba(75,141,248,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(75,141,248,.07) 1px,transparent 1px); background-size:62px 62px; mask-image:linear-gradient(90deg,transparent,#000 50%,transparent); }
.hero-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.8fr); gap:72px; align-items:center; }
.hero-copy { max-width:690px; padding-top:40px; } .kicker { display:flex; align-items:center; gap:10px; margin-bottom:26px; color:var(--blue-600); font:800 11px/1 'Manrope',sans-serif; letter-spacing:.16em; text-transform:uppercase; } .kicker::before { content:''; width:30px; height:2px; border-radius:2px; background:var(--blue-400); }
h1 { max-width:760px; color:var(--blue-950); font:800 clamp(52px,7.3vw,100px)/.95 'Manrope',sans-serif; letter-spacing:-.085em; } h1 em { color:var(--blue-600); font-style:normal; }
.hero-lead { max-width:570px; margin-top:28px; color:#71849b; font-size:17px; line-height:1.75; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 21px; border-radius:999px; font-size:13px; font-weight:800; transition:transform .25s var(--ease),box-shadow .25s ease,background .25s ease; }
.button-primary { background:var(--blue-600); color:var(--white); box-shadow:0 12px 28px rgba(75,141,248,.25); } .button-primary:hover { transform:translateY(-3px); background:#377de7; box-shadow:0 18px 34px rgba(75,141,248,.3); }
.button-ghost { border:1px solid var(--line); background:rgba(255,255,255,.6); color:var(--blue-800); } .button-ghost:hover { transform:translateY(-3px); border-color:var(--blue-400); background:var(--white); }
.hero-services { display:flex; gap:26px; flex-wrap:wrap; list-style:none; margin-top:30px; color:#5d7390; font:700 11px 'Manrope',sans-serif; letter-spacing:.07em; text-transform:uppercase; } .hero-services li { display:inline-flex; align-items:center; gap:8px; } .hero-services i { width:7px; height:7px; border-radius:50%; background:var(--blue-600); box-shadow:0 0 0 4px rgba(75,141,248,.12); }
.system-visual { position:relative; min-height:500px; display:grid; place-items:center; } .system-ring { width:min(410px,80vw); aspect-ratio:1; position:relative; border:1px solid rgba(75,141,248,.26); border-radius:50%; animation:spin 28s linear infinite; } .system-ring::before,.system-ring::after { content:''; position:absolute; inset:12%; border:1px dashed rgba(133,185,255,.55); border-radius:50%; } .system-ring::after { inset:25%; border-style:solid; border-color:rgba(75,141,248,.2); }
.system-core { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:130px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(75,141,248,.35); border-radius:50%; background:rgba(255,255,255,.8); color:var(--blue-950); font:800 20px 'Manrope',sans-serif; letter-spacing:-.08em; box-shadow:0 15px 55px rgba(75,141,248,.2),inset 0 0 0 12px rgba(232,243,255,.8); } .system-core span { color:var(--blue-600); }
.system-node { position:absolute; width:104px; padding:13px 8px; border:1px solid rgba(75,141,248,.2); border-radius:16px; background:rgba(255,255,255,.78); color:var(--blue-800); text-align:center; font:800 11px 'Manrope',sans-serif; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 15px 35px rgba(54,105,166,.12); backdrop-filter:blur(10px); animation:drift 5s ease-in-out infinite; } .system-node::before { content:''; display:block; width:7px; height:7px; margin:0 auto 8px; border-radius:50%; background:var(--blue-600); box-shadow:0 0 0 5px rgba(75,141,248,.1); } .node-ai { top:7%; left:4%; } .node-iot { right:-2%; top:38%; animation-delay:-1.8s; } .node-software { bottom:5%; left:12%; animation-delay:-3.2s; }
.services { padding:115px 0 135px; background:var(--white); } .section-head { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:50px; } .section-kicker { color:var(--blue-600); font:800 11px 'Manrope',sans-serif; letter-spacing:.15em; text-transform:uppercase; } .section-head h2 { max-width:600px; margin-top:12px; color:var(--blue-950); font:800 clamp(36px,5vw,68px)/.98 'Manrope',sans-serif; letter-spacing:-.08em; } .section-head p { max-width:340px; color:var(--muted); font-size:14px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .service-card { min-height:235px; padding:26px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,#fff,#f6faff); transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease; } .service-card:hover { transform:translateY(-7px); border-color:var(--blue-400); box-shadow:var(--shadow); } .service-number { color:var(--blue-600); font:800 11px 'Manrope',sans-serif; letter-spacing:.08em; } .service-card h3 { margin-top:46px; color:var(--blue-950); font:800 24px/1.05 'Manrope',sans-serif; letter-spacing:-.06em; } .service-card p { margin-top:13px; color:var(--muted); font-size:14px; }
.solutions { padding:115px 0; background:var(--ice); } .solution-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:48px; } .solution-card { grid-column:span 2; min-height:255px; padding:25px; position:relative; overflow:hidden; border:1px solid rgba(133,185,255,.35); border-radius:24px; background:rgba(255,255,255,.68); transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease; } .solution-card:nth-child(4),.solution-card:nth-child(5) { grid-column:span 3; } .solution-card:hover { transform:translateY(-6px); background:var(--white); box-shadow:var(--shadow); } .solution-card::after { content:''; position:absolute; width:130px; height:130px; right:-50px; bottom:-50px; border:1px solid rgba(75,141,248,.25); border-radius:50%; } .solution-card small { color:var(--blue-600); font:800 11px 'Manrope',sans-serif; letter-spacing:.14em; } .solution-card h3 { margin-top:52px; color:var(--blue-950); font:800 27px 'Manrope',sans-serif; letter-spacing:-.07em; } .solution-card p { max-width:310px; margin-top:10px; color:var(--muted); font-size:14px; }
.contact { padding:115px 0; background:var(--blue-600); color:var(--white); } .contact-inner { display:flex; justify-content:space-between; align-items:end; gap:50px; } .contact h2 { max-width:700px; font:800 clamp(42px,6vw,82px)/.94 'Manrope',sans-serif; letter-spacing:-.085em; } .contact p { max-width:330px; margin-top:18px; color:#dceaff; font-size:15px; } .contact .button { background:var(--white); color:var(--blue-800); white-space:nowrap; } .contact .button:hover { background:#e9f3ff; transform:translateY(-3px); }
footer { padding:27px 0; background:var(--blue-950); color:#9ab0ca; font-size:12px; } .footer-inner { display:flex; justify-content:space-between; gap:20px; } .footer-brand { color:var(--white); font:800 20px 'Manrope',sans-serif; letter-spacing:-.08em; } .footer-brand span { color:var(--blue-400); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease),transform .75s var(--ease); } .reveal.visible { opacity:1; transform:translateY(0); } :where(a,button):focus-visible { outline:3px solid var(--blue-600); outline-offset:4px; }
@keyframes orbit { to { transform:rotate(360deg); } } @keyframes spin { to { transform:rotate(-360deg); } } @keyframes drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@media (max-width:900px) { .hero { min-height:auto; padding:138px 0 70px; } .hero-layout { grid-template-columns:1fr; gap:20px; } .hero-copy { padding-top:0; } .system-visual { min-height:400px; } .section-head { display:block; } .section-head p { margin-top:18px; } }
@media (max-width:680px) { .container { width:min(calc(100% - 32px),var(--max)); } .nav { min-height:70px; } .mobile-toggle { display:block; } .nav-menu { display:none; position:absolute; top:64px; left:16px; right:16px; padding:16px; flex-direction:column; align-items:stretch; gap:4px; border:1px solid var(--line); border-radius:20px; background:rgba(244,249,255,.98); box-shadow:var(--shadow); } .nav-menu.open { display:flex; } .nav-menu a { padding:12px; color:var(--blue-800); } .hero { padding-top:116px; } h1 { font-size:clamp(44px,14vw,65px); } .hero-lead { font-size:16px; } .hero-services { gap:13px; font-size:10px; } .hero-actions { display:grid; grid-template-columns:1fr; } .button { width:100%; } .system-visual { min-height:335px; transform:scale(.82); margin:-18px 0; } .services,.solutions,.contact { padding:80px 0; } .service-grid,.solution-grid { grid-template-columns:1fr; } .solution-card,.solution-card:nth-child(4),.solution-card:nth-child(5) { grid-column:auto; min-height:205px; } .service-card h3 { margin-top:35px; } .contact-inner { display:block; } .contact .button { margin-top:28px; } .footer-inner { display:block; } .footer-copy { margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* Neural solution constellation */
.neural-visual { position:relative; min-height:500px; display:grid; place-items:center; }
#neuralCanvas { position:absolute; inset:0; width:100%; height:100%; opacity:.72; }
.neural-glow { position:absolute; width:310px; height:310px; border-radius:50%; background:radial-gradient(circle,rgba(133,185,255,.3),rgba(133,185,255,.08) 42%,transparent 72%); filter:blur(8px); animation:neuralPulse 5s ease-in-out infinite; }
.neural-core { position:absolute; z-index:3; width:112px; height:112px; display:grid; place-items:center; border:1px solid rgba(75,141,248,.38); border-radius:50%; background:rgba(255,255,255,.78); color:var(--blue-600); font:800 36px 'Manrope',sans-serif; box-shadow:0 0 0 10px rgba(255,255,255,.35),0 18px 50px rgba(75,141,248,.22); animation:neuralFloat 6s ease-in-out infinite; }
.neural-core::before { content:""; position:absolute; inset:-13px; border:1px solid rgba(75,141,248,.22); border-radius:50%; animation:neuralSpin 8s linear infinite; }
.neural-icon { position:absolute; z-index:4; width:66px; height:66px; display:grid; place-items:center; border:1px solid rgba(75,141,248,.28); border-radius:20px; background:rgba(255,255,255,.82); color:var(--blue-600); box-shadow:0 14px 35px rgba(54,105,166,.16); backdrop-filter:blur(12px); animation:neuralIconFloat 6s ease-in-out infinite; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.neural-icon:hover { transform:scale(1.1); border-color:var(--blue-600); box-shadow:0 18px 42px rgba(75,141,248,.25); }
.neural-icon svg { width:31px; height:31px; }
.icon-farm { top:10%; left:12%; animation-delay:-.8s; } .icon-livestock { top:24%; right:6%; animation-delay:-2s; } .icon-home { bottom:15%; right:15%; animation-delay:-3.4s; } .icon-edu { bottom:8%; left:22%; animation-delay:-4.6s; } .icon-business { top:48%; left:1%; animation-delay:-1.7s; }
.neural-particle { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--blue-400); box-shadow:0 0 14px var(--blue-400); animation:particleDrift 7s ease-in-out infinite; }
.particle-1 { left:19%; top:31%; } .particle-2 { right:18%; top:12%; animation-delay:-2s; } .particle-3 { right:6%; bottom:21%; animation-delay:-4s; }
@keyframes neuralPulse { 0%,100% { transform:scale(.9); opacity:.6; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes neuralFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes neuralSpin { to { transform:rotate(360deg); } }
@keyframes neuralIconFloat { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-11px,0); } }
@keyframes particleDrift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(16px,-18px); } }
@media (max-width:900px) { .neural-visual { min-height:400px; } }
@media (max-width:680px) { .neural-visual { min-height:335px; transform:scale(.82); margin:-18px 0; } .neural-icon { width:57px; height:57px; border-radius:17px; } .neural-icon svg { width:27px; height:27px; } .neural-core { width:92px; height:92px; font-size:30px; } }

/* Solution gallery layout */
.solution-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.solution-card, .solution-card:nth-child(4), .solution-card:nth-child(5) { grid-column:auto; }
.solution-photo { height:210px; aspect-ratio:16 / 10; }
.solution-content { min-height:235px; display:flex; flex-direction:column; }
.solution-content p { flex:1; }
.solution-card:nth-child(1) .solution-photo img { object-position:center; }
.solution-card:nth-child(2) .solution-photo img { object-position:center 42%; }
.solution-card:nth-child(3) .solution-photo img { object-position:center; }
.solution-card:nth-child(4) .solution-photo img { object-position:center 38%; }
.solution-card:nth-child(5) .solution-photo img { object-position:center; }

@media (min-width:681px) and (max-width:1000px) {
	.solution-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
	.solution-photo { height:190px; }
}

@media (max-width:680px) {
	.solution-grid { grid-template-columns:1fr; gap:18px; }
	.solution-photo { height:200px; }
	.solution-content { min-height:0; }
}

/* Detailed solution cards */
.solution-card { display:flex; flex-direction:column; padding:0; min-height:0; }
.solution-photo { height:190px; overflow:hidden; background:var(--ice); }
.solution-photo img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s var(--ease); }
.solution-card:hover .solution-photo img { transform:scale(1.06); }
.solution-content { padding:22px 24px 25px; }
.solution-card h3 { margin-top:18px; font-size:24px; }
.solution-card p { margin-top:9px; }
.solution-card ul { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; padding:0; list-style:none; }
.solution-card li { padding:5px 9px; border-radius:999px; background:var(--ice); color:var(--blue-800); font:700 10px 'Manrope',sans-serif; }
@media (max-width:680px) { .solution-photo { height:180px; } .solution-content { padding:20px; } }

/* Desktop header clearance and calmer headline scale */
@media (min-width:901px) {
	.hero { padding-top:82px; }
	.hero-layout { min-height:738px; }
	.hero-copy { padding-top:0; }
	h1 { font-size:clamp(48px,6.2vw,82px); line-height:.98; }
}

/* Simple contact panel and compact footer */
.contact { padding:92px 0; background:var(--ice); }
.contact-inner { max-width:980px; padding:48px 54px; align-items:center; border:1px solid rgba(133,185,255,.42); border-radius:28px; background:linear-gradient(135deg,#fff,rgba(255,255,255,.72)); box-shadow:var(--shadow); }
.contact-copy { max-width:610px; }
.contact-copy .section-kicker { margin-bottom:14px; }
.contact h2 { max-width:600px; color:var(--blue-950); font-size:clamp(36px,5vw,62px); letter-spacing:-.08em; }
.contact p { max-width:500px; margin-top:14px; color:var(--muted); }
.contact .button { flex-shrink:0; background:var(--blue-600); color:var(--white); box-shadow:0 12px 28px rgba(75,141,248,.22); }
.contact .button:hover { background:#377de7; }
footer { padding:22px 0; background:var(--blue-950); }
.footer-inner { justify-content:center; }
.footer-inner { flex-direction:column; align-items:center; gap:9px; }
.footer-brand { color:var(--white); font:800 24px/1 'Manrope',sans-serif; letter-spacing:-.075em; }
.footer-brand span { color:var(--blue-400); }
.footer-copy { margin:0; color:#b8c9dc; font-size:11px; letter-spacing:.02em; text-align:center; }
.contact-button { min-height:56px; padding:0 24px; gap:9px; }
.contact-button-dot { width:8px; height:8px; border-radius:50%; background:#bfe0ff; box-shadow:0 0 0 5px rgba(255,255,255,.16); }
.contact-button:hover .contact-button-dot { background:var(--white); }
@media (max-width:680px) { .contact { padding:70px 0; } .contact-inner { display:block; padding:32px 24px; border-radius:22px; } .contact .button { width:100%; margin-top:25px; } }