:root{
  --bg:#0d1220;
  --card:#0f1526;
  --muted:#a3adc2;
  --text:#e6ebff;
  --brand:#7aa2ff;
  --brand-2:#a87cff;
  --accent:#6ff2c8;
  --btn:#6c7cff;
  --btn-2:#b07dff;
  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.08);
  --shadow:0 20px 60px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1000px 700px at 20% 20%, #1a2240 0%, #0b0f1c 60%, #080b14 100%) fixed;
  overflow-x:hidden;
}

/* smooth in-page anchor scrolling */
html{scroll-behavior:smooth}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  [data-animate]{opacity:1 !important; transform:none !important}
}

.bg-wrap{position:fixed;inset:0;pointer-events:none}
.glow{width:100%;height:100%}

.card{
  max-width:1120px;
  margin:48px auto;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(120%) blur(8px);
  position:relative;
  overflow:hidden;
}

/* header */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;
}
.brand{font-weight:800;font-size:22px;letter-spacing:.2px}
.dot{color:var(--brand-2)}
.nav{display:flex;gap:28px}
.nav-link{
  color:var(--muted);text-decoration:none;font-weight:500;
  transition:color .2s;
}
.nav-link:hover{color:var(--text)}
.btn{
  border-radius:12px;
  padding:12px 18px;
  font-weight:600;
  border:none;cursor:pointer;
}
.btn.ghost{
  background:transparent;color:var(--accent);
  border:1px solid rgba(111,242,200,.35);
  box-shadow:0 0 0 1px rgba(111,242,200,.15) inset;
}
.btn.primary{
  background:linear-gradient(135deg,var(--btn),var(--btn-2));
  color:#fff;box-shadow:0 8px 24px rgba(114,124,255,.35);
     text-decoration: none;
}
.btn.outline{
  display:inline-flex;gap:10px;align-items:center;
  background:transparent;color:var(--text);
  border:1px solid rgba(255,255,255,.2);
     text-decoration: none;
}
.play{
  width:10px;height:10px;border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 6px rgba(111,242,200,.15);
}

/* hero layout */
.hero{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:20px;
  padding:28px;
  padding-bottom:42px;
}
.hero-left{padding:36px 24px 24px 20px}
.title{
  font-size:64px;line-height:1.02;margin:18px 0 10px;
  letter-spacing:-.6px;font-weight:800;
}
.break{display:block}
.aimm{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.subtitle{
  color:var(--muted);max-width:520px;margin:8px 0 22px;font-size:17px
}
.cta{display:flex;gap:14px;align-items:center;margin:14px 0 28px}

/* features */
.features{display:grid;grid-template-columns:1fr;gap:14px;max-width:620px}
.feature{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px;border-radius:14px;background:rgba(255,255,255,.03);
  border:1px solid var(--stroke);
}
.icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#334,#556);
  position:relative;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 8px 20px rgba(0,0,0,.35);
}
.icon.templates:after{
  content:"";position:absolute;inset:8px;border-radius:6px;
  background:conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--brand));
}
.icon.resources:after{
  content:"";position:absolute;left:8px;top:8px;right:8px;bottom:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%), radial-gradient(circle at 70% 70%, var(--brand-2), transparent 60%), #222b;
}
.f-title{font-weight:700;font-size:15px;margin-bottom:4px}
.f-sub{color:var(--muted);font-size:14px}

/* scroll-reveal base */
[data-animate]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
  transition-delay:var(--delay, 0s);
}
[data-animate].in-view{opacity:1; transform:none}
[data-animate="fade-in"]{transform:none}
[data-animate="fade-up"]{transform:translateY(16px)}
[data-animate="fade-down"]{transform:translateY(-16px)}
[data-animate="fade-left"]{transform:translateX(16px)}
[data-animate="fade-right"]{transform:translateX(-16px)}

/* right visual */
.hero-right{position:relative;min-height:520px}
.scene{
  position:relative;height:100%;display:grid;place-items:center;
}
.hero-img{width:100%;max-width:560px;height:auto;display:block;filter:drop-shadow(0 24px 60px rgba(0,0,0,.5))}
/* remove previous dashed rings; keep chips/pills */
/* mobile duplicate of scene, hidden by default */
.scene-mobile{display:none}

/* simplified 3D figure (CSS shapes) */
.figure{position:relative;transform:translateY(20px)}
.head{width:86px;height:86px;border-radius:50%;background:linear-gradient(135deg,#f1e8ff,#cbb8ff);box-shadow:0 12px 30px rgba(176,125,255,.35);transform:translate(40px,10px)}
.torso{width:160px;height:170px;border-radius:36px;background:linear-gradient(160deg,#ff9fb2,#ffbfb2 40%,#ffd5c2);transform:translate(0,0)}
.arm{width:36px;height:120px;border-radius:20px;background:linear-gradient(160deg,#ffb1be,#ffd2c1);position:absolute;left:120px;top:70px;box-shadow:0 8px 18px rgba(255,145,170,.25)}
.laptop{width:140px;height:90px;border-radius:10px;background:linear-gradient(160deg,#2e79ff,#8d6bff);position:absolute;left:120px;top:90px;transform:rotate(-6deg);box-shadow:0 20px 40px rgba(110,124,255,.4)}
.shoes{width:170px;height:28px;border-radius:20px;background:linear-gradient(160deg,#b3b6ff,#e9e3ff);position:absolute;left:10px;top:210px;filter:blur(.2px)}

/* chips & pills */
.chip{
  position:absolute;width:76px;height:44px;border-radius:12px;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--stroke);backdrop-filter:blur(6px);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:float 7s ease-in-out infinite;
  display:grid;place-items:center;
}
.c1{left:50%;top:8%;transform:translateX(130px);animation-delay:0s}
.c2{left:74%;top:40%;animation-delay:1.1s}
.c3{left:58%;top:78%;animation-delay:2.2s}
.c4{left:20%;top:24%;animation-delay:3.3s}
.pill{
  position:absolute;width:120px;height:54px;border-radius:999px;
  background:linear-gradient(135deg, rgba(122,162,255,.45), rgba(168,124,255,.45));
  filter:blur(10px);opacity:.35;animation:float 9s ease-in-out infinite;
}
.p1{left:70%;top:16%}
.p2{left:82%;top:68%;animation-delay:1.6s}

/* chip icons */
.chip-icon{width:20px;height:20px;color:#e7eaff;opacity:0.95}
.chip-icon.insta{color:#ff5d9e}
.chip-icon.x{color:#e7eaff}
.chip-icon.fb{color:#8bb3ff}
.chip-icon.li{color:#6cb2ff}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* sections */
.services{padding:12px 28px 36px}
.services-head{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin:8px 0 18px}
.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;font-size:35px}
.section-title{font-size:34px;margin:0;color:var(--text);font-weight:800}
.section-sub{color:var(--muted);max-width:760px;margin:6px 0 0;font-size:20px}
.view-all{margin-left:auto}

.services-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px
}
.s-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--stroke);border-radius:16px;padding:18px;min-height:132px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease
}
.s-card:before{
  content:"";position:absolute;inset:-40% -40% auto auto;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--brand), transparent 60%);
  opacity:.12;filter:blur(10px)
}
.s-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.55)}
.s-icon{color:var(--accent);margin-bottom:10px}
.s-title{font-weight:700;margin-bottom:4px}
.s-sub{color:var(--muted);font-size:14px}

.about{padding:22px 28px 36px}
.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;align-items:center}

.about-img{width:100%;height:auto;border-radius:12px;display:block;filter:grayscale(10%) contrast(105%)}
.about-content .section-title{font-size:32px}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.a-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--stroke)}
.a-icon{color:var(--accent);flex:0 0 auto}
.a-title{font-weight:700}
.a-sub{color:var(--muted);font-size:14px}

.stats{padding:0 0 10px}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
  margin:0 28px;border-radius:16px;overflow:hidden
}
.stat{padding:18px 10px;text-align:center;border-right:1px solid var(--stroke)}
.stat:last-child{border-right:none}
.stat-num{font-weight:800;font-size:26px;color:var(--accent)}
.stat-label{color:var(--muted);font-size:13px;margin-top:4px}

.projects, .products{padding:22px 28px 36px}
.projects-head, .products-head{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin:8px 0 18px}
.projects-grid, .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p-card, .product-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--stroke);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease
}
.p-thumb{width:100%;height:180px;object-fit:cover;display:block;filter:grayscale(8%) contrast(104%)}
.p-body{padding:14px}
.p-title{font-weight:800;margin:0 0 6px}
.p-sub{color:var(--muted);font-size:14px;margin:0 0 12px}
.p-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag{
  font-size:12px;color:var(--text);opacity:.9;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke)
}

.p-actions{display:flex;gap:10px}
.p-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.55)}

/* contact */
.contact{padding:22px 28px 36px}
.contact-head{display:flex;flex-direction:column;gap:8px;margin:8px 0 18px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;align-items:start}
.c-left{display:grid;grid-template-columns:1fr;gap:12px}
.c-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--stroke);border-radius:16px;padding:16px;box-shadow:var(--shadow)
}
.c-title{font-weight:800;margin-bottom:6px}
.c-link{color:var(--accent);text-decoration:none}
.c-link:hover{text-decoration:underline}
.c-text{color:var(--muted)}

.contact-form{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--stroke);border-radius:16px;padding:16px;box-shadow:var(--shadow)
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:6px}
.label{font-weight:600;font-size:14px;color:var(--text)}
.input,.textarea{
  width:100%;padding:12px 12px;border-radius:10px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);color:var(--text);outline:none
}
.input:focus,.textarea:focus{box-shadow:0 0 0 2px rgba(122,162,255,.25)}

/* footer */
.footer{padding:20px 28px;border-top:1px solid var(--stroke);color:var(--muted);text-align:center}
.footer p{margin:6px 0}
.footer .socials{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:10px 0}
.footer .nav{display:flex;justify-content:center;gap:28px;margin-top:8px}

/* responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:8px}
  .hero-right{min-height:380px}
  .title{font-size:44px}
  .card{margin:20px 12px}
  .nav{display:none}
  .footer .nav{display:flex}
  .btn.ghost{padding:10px 14px}
  .services-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr;margin:0 12px}
  .projects-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

@media (max-width: 600px){
  .card{margin:16px 10px}
  .hero{padding:16px}
  .hero-left{padding:20px 10px 10px 10px}
  .title{font-size:34px}
  .subtitle{font-size:15px;max-width:100%}
  .eyebrow{font-size:24px}
  .section-title{font-size:26px}
  .section-sub{font-size:16px}

  /* smaller hero visual on mobile (apply to original right scene) */
  .hero-right .hero-img{max-width:320px}
  .hero-right .chip{width:60px;height:36px}
  .hero-right .pill{width:90px;height:40px}

  .services{padding:12px 16px 24px}
  .services-grid{grid-template-columns:1fr}

  .about{padding:16px}
  .about-grid{gap:14px}
  .about-visual,.about-figure{display:flex;justify-content:center}
  .about-content{text-align:center}
  .about-features{grid-template-columns:1fr;gap:12px}
  .a-item{padding:10px}
  .a-title{font-size:16px}
  .a-sub{font-size:14px}

  .stats{padding:0}
  .stats-grid{grid-template-columns:1fr;margin:0 10px}

  .projects, .products{padding:16px}
  .projects-grid, .products-grid{grid-template-columns:1fr}
  .p-thumb, .product-thumb{height:160px}

  .contact{padding:16px}
  .contact-head{gap:6px}
  .contact-form{padding:12px}
  .input,.textarea{font-size:16px}

  .footer{padding:16px}
  .footer p{font-size:14px}
  .footer .socials{gap:12px}
  .footer .socials a{display:inline-flex;align-items:center;justify-content:center;padding:8px}
  .footer .socials svg{width:24px;height:24px}
  .footer .nav{gap:18px}
}