:root{--background:#fff;--foreground:#121b2c;--card:#fff;--card-foreground:#121b2c;--popover:#fff;--popover-foreground:#121b2c;--primary:#245cf5;--primary-foreground:#fff;--secondary:#f2f5fa;--secondary-foreground:#121b2c;--muted:#f2f5fa;--muted-foreground:#596477;--accent:#edf2ff;--accent-foreground:#173fab;--destructive:#ba2737;--border:#dce2eb;--input:#dce2eb;--ring:#245cf5;--radius:.4rem}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#121b2c;font-size:16px;line-height:1.6}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:5px}button{cursor:pointer}p{color:#647084;line-height:1.75}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.13;letter-spacing:-.04em;font-weight:500}.site-header{height:98px;background:#080e1b;color:#fff;display:flex;align-items:center;padding:0 6%;gap:50px;border-bottom:1px solid #ffffff13}.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.12em;font-size:19px;line-height:1.25}.brand small{display:block;font-size:9px;letter-spacing:.3em;font-weight:400;margin-top:4px}.brand-mark{display:grid;place-items:center;background:#2860ff;width:37px;height:42px;font-size:29px;font-style:italic;letter-spacing:0;border-radius:3px}.nav{display:flex;gap:34px;margin:auto;font-size:14px;color:#c5cbd8}.nav a:hover{color:#fff}.nav-cta{display:flex;gap:24px;align-items:center;font-size:14px;border:1px solid #ffffff40;padding:12px 20px;border-radius:4px}.mobile-menu{display:none}.hero{position:relative;background:#080e1b;color:white;padding:76px 6% 0;overflow:hidden}.hero-copy{position:relative;z-index:1;width:55%;max-width:730px;padding-bottom:70px}.eyebrow{display:flex;align-items:center;gap:10px;letter-spacing:.16em;font-size:11px;font-weight:600;color:#aebbd2;text-transform:uppercase}.eyebrow>span{width:6px;height:6px;background:#7296ff}.hero h1{font-size:clamp(48px,5.05vw,78px);line-height:1.08;letter-spacing:-.052em;margin:27px 0}.hero h1 em{font-style:normal;color:#809fff;display:block}.hero-copy>p{color:#a8b1c3;font-size:17px;max-width:490px;line-height:1.8}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:34px}.button{display:inline-flex;gap:22px;align-items:center;justify-content:center;padding:16px 22px;border:0;border-radius:4px;font-size:14px;font-weight:600;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.blue{background:#2b61f3;color:white}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:#dae0ee}.hero-note{display:flex;align-items:center;gap:9px;color:#7f8a9f;font-size:12px;margin-top:38px}.hero-visual{position:absolute;right:0;top:8px;width:49%;height:575px}.hero-visual img{width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to right,transparent,#000 12%,#000 94%,transparent);opacity:.95}.visual-caption{display:flex;justify-content:space-between;position:absolute;bottom:22px;left:15%;right:11%;font-size:8px;letter-spacing:.13em;color:#8490a6}.hero-bottom{position:relative;border-top:1px solid #ffffff16;padding:23px 0;display:flex;justify-content:space-between;color:#9aa5b8;font-size:12px}.hero-bottom span:last-child{font-size:10px;letter-spacing:.16em}.tech-strip{padding:28px 6% 32px;border-bottom:1px solid #e6e9ef;text-align:center}.tech-strip>span{font-size:9px;letter-spacing:.18em;color:#8490a2}.tech-strip>div{display:flex;justify-content:space-around;gap:30px;margin-top:22px;align-items:center;color:#626c7d;font-size:20px}.tech-strip b{font-weight:600;letter-spacing:-.035em}.section{padding:90px 6%}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:40px}.light{color:#3761b8}.section h2,.cta h2{font-size:43px;letter-spacing:-.045em;margin-top:17px;line-height:1.17}.section h2 span{color:#8a94a5}.section-heading>div:last-child:not(:first-child){max-width:400px}.section-heading p{font-size:15px;max-width:420px}.link{display:inline-flex;gap:16px;align-items:center;font-size:14px;font-weight:600;margin-top:20px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e0e5ed;border-radius:6px;overflow:hidden}.service-card{padding:30px 25px;transition:background .2s}.service-card:hover{background:#f4f7fe}.service-card+.service-card{border-left:1px solid #e0e5ed}.card-top{display:flex;justify-content:space-between;align-items:center;color:#315fe8;margin-bottom:39px}.card-top span{font-size:11px;color:#9aa3b2}.service-card h3{font-size:21px;margin-bottom:14px}.service-card p{font-size:14px;min-height:76px}.card-bottom{display:flex;justify-content:space-between;font-size:12px;margin-top:30px;font-weight:600}.about-band{background:#f5f7fa;display:grid;grid-template-columns:1fr 2fr;gap:50px}.about-band>.eyebrow{align-self:start;margin-top:25px}.about-band h2{margin-top:0}.about-band p{margin:25px 0;max-width:740px}.checks{display:flex;gap:24px;flex-wrap:wrap;font-size:12px}.checks span{display:flex;align-items:center;gap:6px}.checks svg{color:#2b61f3}.project-grid,.article-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.project-art{padding:35px;height:320px;background:#e7edf5;display:flex;flex-direction:column;align-items:flex-start;position:relative;border-radius:5px}.project-art span{font-size:10px;letter-spacing:.14em;color:#60728f}.project-art strong{font-size:58px;line-height:1.05;letter-spacing:-.06em;font-weight:500;white-space:pre-line;margin:auto 0;color:#183152}.project-art svg{position:absolute;right:32px;bottom:32px;color:#476ba9}.project-1 .project-art{background:#192d49}.project-1 .project-art strong{color:#fff}.project-1 .project-art span{color:#8aabc9}.project-info{padding:23px 0}.project-info small,.article-card small{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#748196}.project-info h3{font-size:23px;margin:12px 0}.project-info p{font-size:14px}.process{background:#0d1728;color:white}.process .section-heading p,.process-grid p{color:#9ca9bd}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;gap:32px}.process-grid>div{border-top:1px solid #344054;padding-top:24px}.process-grid>div>span{color:#769aff;font-size:13px}.process-grid h3{font-size:20px;margin:26px 0 14px}.process-grid p{font-size:14px}.why{display:grid;grid-template-columns:1fr 1.3fr;gap:70px}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.why-grid svg{color:#3167ed;margin-bottom:15px}.why-grid h3{font-size:19px;margin-bottom:12px}.why-grid p{font-size:14px}.testimonial{text-align:center;background:#f4f7fb;padding:64px 15%}.testimonial .eyebrow{justify-content:center}.testimonial blockquote{font-size:30px;line-height:1.5;letter-spacing:-.025em;margin:25px 0}.testimonial p{font-size:12px}.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.faq p{margin-top:22px}.faq-list button{font-size:16px;padding:22px 0;text-align:left}.article-card{padding:32px;border:1px solid #e0e5ed;border-radius:4px}.article-card h3{font-size:27px;margin:18px 0}.article-card p{font-size:14px}.cta{padding:65px 6%;background:#2659e4;color:white;display:flex;justify-content:space-between;align-items:center;gap:40px}.cta .eyebrow{color:#c5d4ff}.cta p{color:#d2dfff;font-size:15px}.white{background:#fff;color:#173d99;margin-top:25px}footer{background:#080e1b;color:#f1f5fc;padding:55px 6% 25px}.footer-top{display:grid;grid-template-columns:1.3fr 1.3fr .7fr .7fr;gap:30px;padding-bottom:50px}.footer-top p{font-size:15px;color:#8d9aaf}.footer-top>div>a{display:block;font-size:13px;margin-bottom:12px;color:#a5b0c3}.footer-bottom{border-top:1px solid #273041;padding-top:22px;display:flex;justify-content:space-between;color:#8290a5;font-size:11px}.footer-bottom>div{display:flex;gap:22px}.page-hero{background:#0d1728;color:white;padding:65px 6% 75px}.page-hero h1{font-size:clamp(38px,4.5vw,65px);max-width:870px;margin:24px 0}.page-hero p{color:#aebbd0;max-width:670px;font-size:18px}.body-copy{max-width:850px;margin:auto;padding:65px 24px 80px}.body-copy p{white-space:pre-line;margin-bottom:25px}.body-copy h2{font-size:26px;margin:35px 0 14px}.contact-layout{display:grid;grid-template-columns:.8fr 1.3fr;gap:80px}.contact-layout h2{margin:0 0 25px}.contact-layout p{margin-bottom:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}label{font-size:14px;font-weight:500;display:block}input,textarea{width:100%;border:1px solid #d4dce9;border-radius:4px;background:white;padding:12px;margin-top:7px;color:#15243a}textarea{resize:vertical;min-height:150px}.wide{grid-column:1/-1}.form-note{font-size:12px;margin:18px 0}.form-status{margin-top:16px;color:#244eaf}.admin{max-width:1100px;margin:auto;padding:50px 24px}.admin h1{font-size:38px;margin-bottom:15px}.admin-list{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.admin-list button{padding:8px 13px;border:1px solid #cbd5e1;border-radius:4px;background:white}.admin-list button.selected{background:#245cf5;color:#fff}.admin textarea{min-height:250px}.inquiry{border-bottom:1px solid #ddd;padding:20px 0}.legal-note{padding:15px;background:#f5f7fb;border-left:3px solid #245cf5}.empty{padding:40px 0;color:#657185}@media(min-width:1600px){.hero-copy{max-width:800px}.hero-visual{height:650px}.hero{padding-top:95px}.hero h1{font-size:82px}}@media(max-width:1100px){.site-header{gap:22px}.nav{gap:20px}.hero-actions{gap:18px;flex-wrap:wrap}.hero h1{font-size:57px}.hero-visual{height:590px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card:nth-child(3){border-left:0;border-top:1px solid #e0e5ed}.service-card:nth-child(4){border-top:1px solid #e0e5ed}.tech-strip>div{flex-wrap:wrap;font-size:18px}.why{gap:35px}.section h2{font-size:36px}.checks{gap:12px}}@media(max-width:760px){.site-header{height:80px;padding:0 6%;gap:18px}.brand{font-size:16px}.brand small{font-size:8px}.brand-mark{width:30px;height:35px;font-size:25px}.nav{display:none}.nav.open{display:flex;position:absolute;top:80px;left:0;right:0;background:#101a2c;z-index:10;padding:25px;flex-direction:column}.nav-cta{margin-left:auto;padding:10px 13px;gap:8px;font-size:12px}.mobile-menu{display:block;background:none;border:0;color:#fff}.hero{padding-top:45px}.hero-copy{width:100%;padding-bottom:15px}.hero h1{font-size:49px;max-width:530px}.hero-copy>p{font-size:16px}.hero-visual{position:relative;width:100%;height:320px;top:0}.hero-visual img{object-fit:cover;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent)}.hero-note{margin-top:26px}.hero-bottom{font-size:11px}.hero-bottom span:last-child{display:none}.visual-caption{left:5%;right:5%;font-size:7px}.tech-strip{padding:25px 6%}.tech-strip>div{font-size:17px;gap:20px}.section{padding:55px 6%}.section-heading{display:block;margin-bottom:30px}.section-heading p{margin-top:20px}.section h2,.cta h2{font-size:35px}.service-card{padding:25px 19px}.service-card h3{font-size:20px}.service-card p{font-size:13px}.about-band,.why,.faq,.contact-layout{grid-template-columns:1fr;gap:28px}.about-band>.eyebrow{margin:0}.checks{flex-direction:column}.project-grid,.article-grid{grid-template-columns:1fr}.project-art{height:270px}.project-art strong{font-size:50px}.process-grid{grid-template-columns:1fr 1fr;gap:27px}.why-grid{gap:25px}.testimonial{padding:45px 7%}.testimonial blockquote{font-size:24px}.cta{display:block;padding:45px 6%}.cta>div+div{margin-top:25px}.footer-top{grid-template-columns:1fr 1fr;gap:25px}.footer-bottom{display:block;line-height:2}.footer-bottom>div{margin-top:14px}.page-hero{padding:45px 6% 55px}.page-hero h1{font-size:42px}.form-grid{grid-template-columns:1fr}.hero-actions .button{padding:15px}.body-copy{padding-top:40px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.faq-list details{border-bottom:1px solid #dce2eb;padding:20px 0}.faq-list summary{cursor:pointer;font-weight:600}.faq-list details>div{padding-top:14px;color:#647084}button:disabled{opacity:.6}
/* Branded mouse cursors. Native text selection and touch behavior are preserved. */
@media (hover:hover) and (pointer:fine){
 html,body,body *{cursor:url("cursor.png") 5 3,auto}
 a,a *,button,button *,summary,summary *,[role="button"],[role="button"] *,select{cursor:url("pointer.png") 14 4,pointer}
 input,textarea,[contenteditable="true"]{cursor:text}
 button:disabled,[aria-disabled="true"]{cursor:not-allowed}
}

/* ===== Scroll-reveal + micro-interaction animations ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-stagger.in > * { animation: rc-fade-up .6s cubic-bezier(.2,.7,.2,1) both; }
  .reveal-stagger.in > *:nth-child(1){animation-delay:.02s}
  .reveal-stagger.in > *:nth-child(2){animation-delay:.09s}
  .reveal-stagger.in > *:nth-child(3){animation-delay:.16s}
  .reveal-stagger.in > *:nth-child(4){animation-delay:.23s}
  .reveal-stagger.in > *:nth-child(5){animation-delay:.30s}
  .reveal-stagger.in > *:nth-child(6){animation-delay:.37s}
  @keyframes rc-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

  .service-card, .project, .article-card, .why-grid > div, .process-grid > div {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  }
  .service-card:hover, .article-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -20px #12233a4d; }
  .project:hover .project-art { transform: scale(1.015); }
  .project-art { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .why-grid > div:hover { transform: translateY(-4px); }

  .button { transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
  .button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px #245cf566; }
  .nav-cta { transition: transform .25s ease; }
  .nav-cta:hover { transform: translateY(-2px); }

  .hero-visual img { animation: rc-fade-in 1s ease both; }
  @keyframes rc-fade-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
}
/* Five service cards on large screens */
@media (min-width: 1101px) {
  .service-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Fifth card alignment on tablets */
@media (max-width: 1100px) and (min-width: 761px) {
  .service-card:nth-child(5) {
    border-left: 0;
    border-top: 1px solid #e0e5ed;
  }
}

/* One service card per row on mobile */
@media (max-width: 760px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card + .service-card {
    border-left: 0;
    border-top: 1px solid #e0e5ed;
  }
}
/* Ereal Cloud — interactive 3D section */
.ec3d {
  --ec3d-size: 154px;
  --ec3d-depth: 77px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 30px;
  padding: 70px 6%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 45%, #15295a 0%, transparent 53%),
    #080e1b;
  color: #f5f8ff;
}

.ec3d-copy {
  position: relative;
  z-index: 2;
  max-width: 490px;
}

.ec3d .eyebrow {
  color: #8cacff;
}

.ec3d-copy h2 {
  margin: 22px 0;
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.ec3d-copy h2 > span {
  color: #88aaff;
}

.ec3d-copy p {
  max-width: 410px;
  margin-bottom: 28px;
  color: #a8b5cb;
  font-size: 16px;
}

.ec3d-toggle {
  display: block;
  margin-top: 22px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #a8b5cb;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ec3d-toggle:focus-visible {
  outline: 2px solid #88aaff;
}

.ec3d-stage {
  position: relative;
  width: 100%;
  height: 470px;
  perspective: 1000px;
}

.ec3d-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #3268f536,
    #3268f510 45%,
    transparent 70%
  );
  pointer-events: none;
}

.ec3d-grid {
  position: absolute;
  inset: 8% -10%;
  opacity: .17;
  background-image:
    linear-gradient(#7299e5 1px, transparent 1px),
    linear-gradient(90deg, #7299e5 1px, transparent 1px);
  background-size: 46px 46px;
  transform: rotateX(65deg) translateY(110px);
  mask-image: radial-gradient(ellipse, black, transparent 68%);
  pointer-events: none;
}

.ec3d-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--ec3d-x, -9deg))
             rotateY(var(--ec3d-y, -15deg));
}

.ec3d-float {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ec3d-size);
  height: var(--ec3d-size);
  margin-left: calc(var(--ec3d-depth) * -1);
  margin-top: calc(var(--ec3d-depth) * -1);
  transform-style: preserve-3d;
  animation: ec3d-float 6s ease-in-out infinite;
}

.ec3d-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-13deg) rotateY(-24deg);
}

.ec3d-face {
  position: absolute;
  inset: 0;
  border: 1px solid #a6c3ff99;
  background: linear-gradient(135deg, #426fcd, #153779 65%, #0d214c);
  box-shadow: inset 0 0 28px #a8caff22;
  backface-visibility: hidden;
}

.ec3d-front {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(145deg, #7398e7, #2554ac 48%, #102a65);
  transform: translateZ(var(--ec3d-depth));
}

.ec3d-back {
  transform: rotateY(180deg) translateZ(var(--ec3d-depth));
}

.ec3d-right {
  transform: rotateY(90deg) translateZ(var(--ec3d-depth));
}

.ec3d-left {
  transform: rotateY(-90deg) translateZ(var(--ec3d-depth));
}

.ec3d-top {
  background: linear-gradient(135deg, #d3e5ff, #537bd1);
  transform: rotateX(90deg) translateZ(var(--ec3d-depth));
}

.ec3d-bottom {
  transform: rotateX(-90deg) translateZ(var(--ec3d-depth));
}

.ec3d-symbol {
  color: #fff;
  font-size: 90px;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 4px 18px #081a4d88;
}

.ec3d-front small {
  margin-top: 10px;
  font-size: 9px;
  letter-spacing: .22em;
  color: #e0eaff;
}

.ec3d-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  height: 350px;
  margin: -175px 0 0 -175px;
  border: 1px solid #779fff88;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.ec3d-orbit-one {
  box-shadow: 0 0 14px #477fff22;
  animation: ec3d-orbit-one 18s linear infinite;
}

.ec3d-orbit-two {
  width: 410px;
  height: 410px;
  margin: -205px 0 0 -205px;
  border-color: #b4d2ff55;
  animation: ec3d-orbit-two 24s linear infinite;
}

.ec3d-satellite {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d7e7ff;
  box-shadow: 0 0 20px #70a1ff;
}

.ec3d-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #6386c955;
  border-radius: 12px;
  background: linear-gradient(135deg, #1c3154f5, #0d182bf5);
  box-shadow: 0 15px 35px #0004;
  color: #e2ebff;
  font-size: 12px;
  white-space: nowrap;
  transform: translateZ(100px);
}

.ec3d-label > span {
  color: #95baff;
  font-size: 20px;
}

.ec3d-label-web {
  left: 4%;
  top: 18%;
}

.ec3d-label-ai {
  right: 0;
  top: 39%;
}

.ec3d-label-video {
  left: 12%;
  bottom: 15%;
}

.ec3d-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: .22em;
  color: #8a9cba;
}

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

@keyframes ec3d-orbit-one {
  from { transform: rotateX(68deg) rotateY(-18deg) rotateZ(0deg); }
  to { transform: rotateX(68deg) rotateY(-18deg) rotateZ(360deg); }
}

@keyframes ec3d-orbit-two {
  from { transform: rotateY(65deg) rotateX(25deg) rotateZ(360deg); }
  to { transform: rotateY(65deg) rotateX(25deg) rotateZ(0deg); }
}

.ec3d.ec3d-paused *,
.ec3d.ec3d-offscreen * {
  animation-play-state: paused !important;
}

@media (max-width: 1000px) {
  .ec3d {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ec3d-copy {
    max-width: 600px;
  }

  .ec3d-stage {
    max-width: 580px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .ec3d {
    --ec3d-size: 120px;
    --ec3d-depth: 60px;
    padding: 50px 6%;
  }

  .ec3d-stage {
    height: 370px;
  }

  .ec3d-symbol {
    font-size: 70px;
  }

  .ec3d-orbit-one {
    width: 250px;
    height: 250px;
    margin: -125px 0 0 -125px;
  }

  .ec3d-orbit-two {
    width: 290px;
    height: 290px;
    margin: -145px 0 0 -145px;
  }

  .ec3d-label {
    padding: 9px 10px;
    gap: 6px;
    font-size: 10px;
    transform: translateZ(55px);
  }

  .ec3d-label-web { left: 0; top: 12%; }
  .ec3d-label-ai { right: 0; top: 67%; }
  .ec3d-label-video { left: 0; bottom: 9%; }
}

@media (prefers-reduced-motion: reduce) {
  .ec3d *,
  .ec3d *::before,
  .ec3d *::after {
    animation: none !important;
    transition: none !important;
  }

  .ec3d-toggle {
    display: none;
  }
}
/* ===== Ereal Cloud Digital Portal ===== */

.ecportal {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 36px;
  padding: 80px 6%;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 75% 50%, #153276 0%, #09152d 32%, #050b18 70%);
}

.ecportal .ecportal-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 520px;
}

.ecportal .ecportal-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: #8db0ff;
}

.ecportal .ecportal-copy h2 {
  margin: 22px 0 25px;
  font-size: clamp(38px, 4.6vw, 70px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.055em;
  color: #fff;
}

.ecportal .ecportal-copy h2 > span {
  color: #7fa4ff;
}

.ecportal .ecportal-copy p {
  max-width: 440px;
  color: #aab8cf;
  font-size: 16px;
  line-height: 1.8;
}

.ecportal .ecportal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.ecportal .ecportal-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 15px 20px;
  border-radius: 5px;
  background: #2f66ff;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.ecportal .ecportal-toggle {
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #aabbd7;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.ecportal .ecportal-toggle:focus-visible,
.ecportal .ecportal-cta:focus-visible {
  outline: 2px solid #b4ceff;
  outline-offset: 5px;
}

.ecportal .ecportal-stage {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 560px;
  perspective: 1100px;
}

.ecportal .ecportal-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--ep-x, 0deg))
    rotateY(var(--ep-y, 0deg));
  transition: transform .2s ease-out;
}

.ecportal .ecportal-floor {
  position: absolute;
  inset: 55% -10% -15%;
  background:
    repeating-linear-gradient(
      90deg, #4e76cb30 0 1px, transparent 1px 48px
    ),
    repeating-linear-gradient(
      0deg, #4e76cb30 0 1px, transparent 1px 48px
    );
  transform: rotateX(65deg);
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}

.ecportal .ecportal-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  transform-style: preserve-3d;
}

.ecportal .ecportal-halo {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, #326aff35, transparent 68%);
  box-shadow: 0 0 90px #1d62ff40;
  animation: ep-breathe 4s ease-in-out infinite;
}

.ecportal .ecportal-ring {
  position: absolute;
  inset: 55px;
  border: 2px solid #7aa6ff;
  border-radius: 50%;
  box-shadow:
    0 0 18px #75a7ff,
    0 0 55px #276aff,
    inset 0 0 45px #225bff80;
  animation: ep-turn 16s linear infinite;
}

.ecportal .ecportal-ring::before,
.ecportal .ecportal-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.ecportal .ecportal-ring::before {
  inset: 17px;
  border: 1px dashed #b3ceff99;
}

.ecportal .ecportal-ring::after {
  inset: 39px;
  border: 6px double #427cff70;
  box-shadow: inset 0 0 25px #3679ff;
}

.ecportal .ecportal-core {
  position: absolute;
  inset: 135px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 35%, #7ca6ff, #173f96 40%, #071228 72%);
  box-shadow: 0 0 60px #397aff80;
  animation: ep-breathe 3s ease-in-out infinite;
}

.ecportal .ecportal-core strong {
  color: #fff;
  font-size: 100px;
  font-style: italic;
  line-height: 1;
  text-shadow: 0 0 25px #ffffff70;
  transform: translate(-4px, -5px);
}

.ecportal .ecportal-core small {
  position: absolute;
  bottom: 30px;
  color: #d7e5ff;
  font-size: 8px;
  letter-spacing: .24em;
}

.ecportal .ecportal-orbit {
  position: absolute;
  inset: 12px;
  border: 1px solid #7ea4ed80;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.ecportal .ecportal-orbit-one {
  transform: rotateX(65deg);
  animation: ep-orbit-one 14s linear infinite;
}

.ecportal .ecportal-orbit-two {
  transform: rotateY(65deg);
  animation: ep-orbit-two 18s linear infinite;
}

.ecportal .ecportal-orbit i {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9e7ff;
  box-shadow: 0 0 20px #70a1ff;
}

.ecportal .ecportal-particles {
  position: absolute;
  inset: 0;
}

.ecportal .ecportal-particles i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c5dcff;
  box-shadow: 0 0 12px #74a5ff;
  animation: ep-particle 5s linear infinite;
  animation-delay: var(--delay);
}

.ecportal .ecportal-card {
  position: absolute;
  z-index: 1;
  width: 178px;
  padding: 16px;
  border: 1px solid #78a4ff55;
  border-radius: 13px;
  background: linear-gradient(135deg, #142b4eef, #081326e8);
  box-shadow: 0 18px 40px #0006;
  animation: ep-card-float 5s ease-in-out infinite;
}

.ecportal .ecportal-card b {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #edf4ff;
}

.ecportal .ecportal-card span {
  font-size: 11px;
  line-height: 1.5;
  color: #a3b6d4;
}

.ecportal .ecportal-card-web {
  left: 0;
  top: 12%;
  animation-delay: -1s;
}

.ecportal .ecportal-card-ai {
  right: 0;
  top: 23%;
  animation-delay: -2.6s;
}

.ecportal .ecportal-card-mobile {
  left: 2%;
  bottom: 17%;
  animation-delay: -3.7s;
}

.ecportal .ecportal-card-video {
  right: 0;
  bottom: 9%;
  animation-delay: -.3s;
}

.ecportal .ecportal-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #8da4c6;
  font-size: 9px;
  letter-spacing: .2em;
}

@keyframes ep-turn {
  to { transform: rotate(360deg); }
}

@keyframes ep-breathe {
  50% { transform: scale(1.055); }
}

@keyframes ep-orbit-one {
  from { transform: rotateX(65deg) rotateZ(0deg); }
  to { transform: rotateX(65deg) rotateZ(360deg); }
}

@keyframes ep-orbit-two {
  from { transform: rotateY(65deg) rotateZ(0deg); }
  to { transform: rotateY(65deg) rotateZ(-360deg); }
}

@keyframes ep-card-float {
  0%, 100% {
    transform: translateY(-9px) rotateY(-4deg);
  }
  50% {
    transform: translateY(10px) rotateY(4deg);
  }
}

@keyframes ep-particle {
  0% {
    transform: rotate(var(--angle)) translateX(225px) scale(.5);
    opacity: 0;
  }
  20% { opacity: 1; }
  100% {
    transform: rotate(var(--angle)) translateX(85px) scale(1.4);
    opacity: 0;
  }
}

.ecportal.ep-paused *,
.ecportal.ep-paused *::before,
.ecportal.ep-paused *::after,
.ecportal.ep-offscreen *,
.ecportal.ep-offscreen *::before,
.ecportal.ep-offscreen *::after {
  animation-play-state: paused !important;
}

@media (max-width: 1000px) {
  .ecportal {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 60px 6%;
  }

  .ecportal .ecportal-copy {
    max-width: 620px;
  }

  .ecportal .ecportal-stage {
    max-width: 650px;
    margin: 0 auto;
  }
}

@media (max-width: 520px) {
  .ecportal {
    padding: 50px 6%;
  }

  .ecportal .ecportal-copy h2 {
    font-size: clamp(34px, 9vw, 46px);
  }

  .ecportal .ecportal-stage {
    height: 470px;
  }

  .ecportal .ecportal-art {
    transform: scale(.7);
  }

  .ecportal .ecportal-card {
    width: 132px;
    padding: 11px;
  }

  .ecportal .ecportal-card b {
    font-size: 11px;
  }

  .ecportal .ecportal-card span {
    font-size: 10px;
  }

  .ecportal .ecportal-card-web {
    top: 5%;
  }

  .ecportal .ecportal-card-ai {
    top: 16%;
  }

  .ecportal .ecportal-card-mobile {
    left: 0;
    bottom: 18%;
  }

  .ecportal .ecportal-card-video {
    bottom: 6%;
  }

  .ecportal .ecportal-caption {
    font-size: 7px;
    letter-spacing: .15em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecportal *,
  .ecportal *::before,
  .ecportal *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* ===== Ereal Cloud — Midnight Glass Rain ===== */

.ec-rain-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.ec-rain-drop {
  --rain-x: 50vw;
  --rain-size: 5px;
  --rain-speed: 8s;
  --rain-delay: 0s;
  --rain-drift: 0px;

  position: absolute;
  top: -90px;
  left: var(--rain-x);
  width: var(--rain-size);
  height: calc(var(--rain-size) * 2.15);
  border: 1px solid rgba(122, 187, 255, 0.32);
  border-radius: 55% 45% 52% 48% / 72% 72% 28% 28%;

  background:
    radial-gradient(
      ellipse at 28% 24%,
      rgba(238, 249, 255, 0.8) 0%,
      rgba(164, 210, 255, 0.28) 17%,
      transparent 36%
    ),
    radial-gradient(
      ellipse at 62% 82%,
      rgba(45, 115, 255, 0.55),
      transparent 66%
    ),
    linear-gradient(
      135deg,
      rgba(40, 90, 180, 0.24),
      rgba(10, 31, 67, 0.3) 50%,
      rgba(104, 178, 255, 0.48)
    );

  box-shadow:
    inset 1px 1px 2px rgba(225, 244, 255, 0.42),
    inset -2px -2px 4px rgba(24, 66, 145, 0.38),
    0 0 10px rgba(68, 139, 255, 0.12);

  opacity: 0;
  filter: blur(0.15px);

  animation:
    ec-rain-fall var(--rain-speed)
    linear var(--rain-delay) infinite;
}

/* Paani ki halki trail */
.ec-rain-drop::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 92%;
  width: 1px;
  height: 34px;
  background:
    linear-gradient(
      to top,
      rgba(80, 157, 255, 0.25),
      transparent
    );
}

/* Hero ke right side par medium visible rain */
.ec-rain-over-hero .ec-rain-right {
  --rain-opacity: 0.72;
}

/* Hero text ke upar sirf halkay drops */
.ec-rain-over-hero .ec-rain-left {
  --rain-opacity: 0.2;
}

/* Baqi jagah subtle drops */
.ec-rain-over-hero .ec-rain-soft {
  --rain-opacity: 0.32;
}

/* Hero ke neeche poore Home page par subtle rain */
.ec-rain-layer:not(.ec-rain-over-hero) .ec-rain-right {
  --rain-opacity: 0.22;
}

.ec-rain-layer:not(.ec-rain-over-hero) .ec-rain-left {
  --rain-opacity: 0.12;
}

.ec-rain-layer:not(.ec-rain-over-hero) .ec-rain-soft {
  --rain-opacity: 0.18;
}

/* Portal nazar aaye to rain aur kam ho */
.ec-rain-over-portal .ec-rain-drop {
  --rain-opacity: 0.1;
}

/* Buttons aur links ke upar drops visually halkay */
.ec-rain-left {
  filter: blur(0.3px);
}

@keyframes ec-rain-fall {
  0% {
    transform:
      translate3d(0, -100px, 0)
      scale(0.8);
    opacity: 0;
  }

  10% {
    opacity: var(--rain-opacity, 0.2);
  }

  86% {
    opacity: var(--rain-opacity, 0.2);
  }

  100% {
    transform:
      translate3d(
        var(--rain-drift),
        calc(100vh + 150px),
        0
      )
      scale(1.05);

    opacity: 0;
  }
}

.ec-rain-reduced {
  display: none;
}

@media (max-width: 760px) {
  .ec-rain-layer {
    z-index: 40;
  }

  .ec-rain-drop {
    filter: none;
  }

  .ec-rain-over-hero .ec-rain-right {
    --rain-opacity: 0.46;
  }

  .ec-rain-over-hero .ec-rain-left {
    --rain-opacity: 0.12;
  }

  .ec-rain-layer:not(.ec-rain-over-hero) .ec-rain-drop {
    --rain-opacity: 0.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-rain-layer {
    display: none;
  }
}
/* Hero pillars only — existing layout stays unchanged */
.hero-visual .ec-pillar-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 94%,
    transparent
  );
}

.hero-visual .ec-pillar-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-visual .visual-caption {
  z-index: 2;
  pointer-events: none;
}

.hero-visual .ec-pillar-pause {
  position: absolute;
  top: 18px;
  right: 12%;
  z-index: 3;
  padding: 8px 12px;
  border: 1px solid #536584;
  border-radius: 6px;
  background: #0b1426;
  color: #e4ecff;
  font: 12px Arial, sans-serif;
  cursor: pointer;
}

@media (max-width: 760px) {
  .hero-visual .ec-pillar-stage {
    mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 12%,
      #000 85%,
      transparent
    );
  }
}
.hero-visual > img {
  visibility: hidden !important;
}
/* No loading flash: same-scene poster is always underneath the WebGL canvas. */
.hero-visual > .ec-pillar-poster { display: block; position: absolute; inset: 0; }
.hero-visual .ec-pillar-poster img {
  display: block; width: 100%; height: 100%; object-fit: fill;
  visibility: visible !important; opacity: 1; animation: none !important;
  transform: none !important;
}
.hero-visual .ec-pillar-stage { opacity: 0; }
.hero-visual.ec-pillars-ready .ec-pillar-stage { opacity: 1; }
.hero-visual .ec-pillar-pause { visibility: hidden; }
.hero-visual.ec-pillars-ready .ec-pillar-pause { visibility: visible; }