/* Pulso Studio V1.0.4 — return to the original spatial / technical identity.
   Additive art direction on top of V1.0.3: no external libraries or requests. */
:root { --cosmos-blue:#2679f9; --cosmos-cyan:#67d8ff; }
body { background: #060c19; }
.site-header { background: rgba(6,13,28,.89); border-bottom-color:rgba(61,116,198,.26); }
.site-header.scrolled { background:rgba(6,13,28,.96); box-shadow:0 12px 42px rgba(0,0,0,.26); }

/* The opening is a place rather than a flat block: volumetric illumination,
   distant points, network edges and a perspective floor. */
.hero {
  min-height:770px;
  background:
    radial-gradient(ellipse 55% 60% at 76% 45%,rgba(19,65,155,.33),transparent 80%),
    radial-gradient(ellipse 56% 30% at 48% 98%,rgba(14,50,130,.24),transparent 75%),
    linear-gradient(180deg,#060b17 0%,#08132d 58%,#060c1a 100%);
}
.hero::after {
  content:""; position:absolute; inset:auto 0 0; height:180px; pointer-events:none;
  background:linear-gradient(to bottom,transparent,#060c19 94%); z-index:-1;
}
.hero-grid {
  inset:auto -60% -40%; height:115%;
  background-image:linear-gradient(rgba(44,105,214,.23) 1px,transparent 1px),linear-gradient(90deg,rgba(44,105,214,.23) 1px,transparent 1px);
  background-size:88px 88px;
  transform:perspective(500px) rotateX(69deg) translateY(19%);
  transform-origin:center 74%;
  opacity:.75;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,#000 70%,transparent 100%);
  z-index:-1;
}
.hero-cosmos { position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden; }
.cosmos-stars {position:absolute;inset:0;opacity:.58;}
.cosmos-stars-near {
  background-image:
    radial-gradient(circle at 5% 41%,#399dff 1px,transparent 2px),radial-gradient(circle at 14% 68%,#73c7ff 1px,transparent 2px),
    radial-gradient(circle at 27% 19%,#348bf4 1.3px,transparent 2px),radial-gradient(circle at 38% 56%,#5abfff 1px,transparent 2px),
    radial-gradient(circle at 45% 14%,#3f9eff 1.2px,transparent 2px),radial-gradient(circle at 57% 36%,#57bfff 1px,transparent 2px),
    radial-gradient(circle at 65% 78%,#65bdff 1px,transparent 2px),radial-gradient(circle at 73% 9%,#78b5ff 1px,transparent 2px),
    radial-gradient(circle at 88% 35%,#55b3ff 1px,transparent 2px),radial-gradient(circle at 95% 83%,#3e86ff 1px,transparent 2px);
  animation:cosmos-breathe 8s ease-in-out infinite alternate;
}
.cosmos-stars-far {
  opacity:.32;
  background-image:
    radial-gradient(circle at 8% 12%,#469eff 1px,transparent 2px),radial-gradient(circle at 18% 48%,#469eff 1px,transparent 2px),
    radial-gradient(circle at 31% 85%,#469eff 1px,transparent 2px),radial-gradient(circle at 49% 67%,#469eff 1px,transparent 2px),
    radial-gradient(circle at 53% 7%,#469eff 1px,transparent 2px),radial-gradient(circle at 79% 53%,#469eff 1px,transparent 2px),
    radial-gradient(circle at 84% 16%,#469eff 1px,transparent 2px),radial-gradient(circle at 97% 60%,#469eff 1px,transparent 2px);
  background-size:600px 520px;
}
.cosmos-halo {position:absolute; width:680px;height:530px;right:-130px;top:8%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(13,82,200,.17),rgba(8,48,135,.08) 43%,transparent 69%);filter:blur(14px);}
.cosmos-beam {position:absolute;width:1px;height:330px;left:72%;top:3%;transform:rotate(42deg);transform-origin:top;
  background:linear-gradient(180deg,transparent,rgba(61,142,255,.20),transparent);}
.hero-layout {min-height:680px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(45px,5vw,95px);padding-block:106px 94px;}
.hero-copy {position:relative;z-index:2;}
.hero-eyebrow {display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(65,128,218,.36);border-radius:6px;
  background:rgba(17,34,63,.62);padding:9px 13px;color:#a7ceff;font-size:13px;letter-spacing:.10em;margin-bottom:26px;}
.hero-eyebrow .status-dot {width:7px;height:7px;box-shadow:0 0 17px #39cfff;}
h1 {font-size:clamp(46px,4.5vw,69px);line-height:1.08;letter-spacing:-.058em;max-width:650px;}
h1>span {color:#67cfff;background:linear-gradient(110deg,#468dff 12%,#6bcfff 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-intro {font-size:17px;line-height:1.85;max-width:510px;margin-top:26px;color:#c0cfe5;}
.hero-intro strong {color:#f4f8ff;}
.hero-advantages {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:28px 0 0;max-width:575px;}
.hero-advantages li {display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.6;font-weight:600;color:#c4d9f5;}
.hero-advantages li span {color:#6cd7ff;font-size:17px;line-height:1.3;}
.hero-actions {margin-top:31px;gap:16px;}
.hero-actions .button {background:linear-gradient(120deg,#1e65e7,#267fff);border:1px solid #6da6ff65;box-shadow:0 13px 34px #1359d43b;font-size:15px;}
.hero-actions .button:hover {background:linear-gradient(120deg,#2775fa,#3b95ff);box-shadow:0 18px 44px #1359d45d;}
.hero-actions>.text-link {color:#e7efff;font-size:15px;}
.hero-footnote {color:#8ba4c9;font-size:14px;}

/* Spatial product theater: the real, keyboard-operable 3-tab demo stays intact. */
.showcase {position:relative;z-index:1;isolation:isolate;padding-top:28px;transform:translate3d(0,0,0);}
.showcase::before {inset:-85px -110px -85px;background:radial-gradient(ellipse at 55% 55%,#276ade3f,transparent 60%);}
.showcase-orbit {position:absolute;z-index:-1;left:51%;top:48%;border:1px solid rgba(58,111,211,.25);border-radius:50%;
  transform:translate(-50%,-50%) rotate(-23deg);pointer-events:none;}
.orbit-outer {width:115%;height:78%;border-style:dashed;animation:scene-orbit-turn 95s linear infinite;}
.orbit-inner {width:91%;height:65%;border-color:rgba(63,129,240,.21);transform:translate(-50%,-50%) rotate(24deg);}
.scene-satellite {position:absolute;z-index:3;min-width:92px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;border:1px solid #36598b85;border-radius:14px;background:linear-gradient(135deg,rgba(21,40,72,.95),rgba(12,26,49,.93));
  box-shadow:0 15px 35px #0005,inset 0 1px #bbddff18;pointer-events:none;animation:scene-float 6s ease-in-out infinite;}
.scene-satellite strong {font-size:26px;color:#68baff;font-weight:600;line-height:1;}
.scene-satellite span {font-size:10px;font-weight:800;letter-spacing:.07em;color:#afc9ef;}
.satellite-code {top:-18px;left:12%;transform:rotate(-8deg);animation-delay:-2s;}
.satellite-design {top:33px;right:-35px;min-width:76px;min-height:74px;transform:rotate(7deg);animation-delay:-1s;}
.satellite-design strong {font-size:32px;color:#81dfff;}
.satellite-mobile {right:-18px;bottom:60px;min-width:82px;min-height:85px;animation-delay:-3.5s;}
.satellite-mobile svg {width:26px;height:26px;color:#78b7ff;}
.showcase-heading {justify-content:flex-end;color:#9ac3ff;letter-spacing:.12em;font-size:12px;margin-bottom:18px;}
.demo-tabs {position:relative;z-index:4;margin:0 0 17px 18px;background:rgba(8,22,45,.9);border:1px solid #305183;border-radius:10px;box-shadow:0 8px 22px #0004;}
.demo-tabs button {font-size:14px;padding:10px 15px;}
.demo-tabs button[aria-selected=true] {background:linear-gradient(120deg,#2169e0,#2b7cf4);box-shadow:0 3px 12px #1556bf77;}
.demo-window {position:relative;z-index:2;background:rgba(9,20,41,.97);border-color:#365b93;
  box-shadow:0 29px 85px #0009,0 0 0 1px #72b1ff13,0 0 70px #1264dc1b;
  transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);transform-origin:center;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;}
.showcase:hover .demo-window {transform:perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-3px);box-shadow:0 35px 90px #0009,0 0 70px #1264dc30;}
.window-bar {background:rgba(19,38,68,.95);border-bottom-color:#2a4570;}
.window-bar i:first-child {background:#61aaff;}
.window-bar i:nth-child(2) {background:#426eaa;}
.demo-panel {background:linear-gradient(140deg,#0c1932,#09152b 63%,#0b1b36);}
.mini-site-hero {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(130px,.9fr);gap:7px;align-items:center;}
.mini-site-hero h2 {font-size:clamp(25px,2.45vw,38px);}
.demo-cta {background:linear-gradient(115deg,#2368e4,#3b8fff);color:#fff;font-size:14px;}
.mini-site-bottom {gap:16px;}
/* A planet constructed with layered gradients and a real split orbital ellipse. */
.planet-art {position:relative;height:245px;min-width:0;isolation:isolate;overflow:visible;}
.planet-glow {position:absolute;inset:5% -5%;background:radial-gradient(ellipse,#237df878,transparent 67%);filter:blur(16px);}
.planet-sphere {position:absolute;width:78%;aspect-ratio:1;max-width:190px;left:50%;top:48%;border-radius:50%;
  transform:translate(-50%,-50%);overflow:hidden;
  background:radial-gradient(circle at 28% 22%,#b3f1ff 0%,#79d5ff 11%,#3699fa 32%,#1461da 56%,#06276b 83%,#04112c 100%);
  box-shadow:inset -20px -16px 27px #020f3caf,inset 9px 9px 21px #ffffff30,0 0 36px #1e91ff7e;
  animation:planet-breathe 6.8s ease-in-out infinite;}
.planet-sphere::before {content:"";position:absolute;inset:-30%;opacity:.35;
  background:repeating-linear-gradient(163deg,transparent 0px,transparent 24px,#9de4ff55 27px,transparent 31px);transform:rotate(-16deg);}
.planet-sphere::after {content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff40,transparent 36%,transparent 64%,#051c4d7a);}
.planet-contour {position:absolute;inset:18% -25%;border:1px solid #d2f6ff38;border-radius:50%;transform:rotate(-24deg);}
.planet-orbit {position:absolute;left:50%;top:48%;width:110%;max-width:274px;height:37%;border:1.5px solid #70caff;opacity:.85;border-radius:50%;transform:translate(-50%,-50%) rotate(-29deg);
  box-shadow:0 0 12px #2eabff33;pointer-events:none;}
.orbit-back {z-index:-1;border-color:#3877ca;opacity:.67;}
.orbit-front {border-top-color:transparent;border-left-color:#9fe5ff;border-bottom-color:#5bafff;filter:drop-shadow(0 0 3px #55bfff);}
.planet-cube {position:absolute;right:9%;bottom:10%;width:40px;height:40px;border:1px solid #83cfff8c;border-radius:8px;
  transform:rotate(23deg);background:linear-gradient(130deg,#4dcbff9a,#1252b9d9 78%);box-shadow:inset 0 0 15px #9dddff36,0 8px 15px #0008;
  animation:cube-drift 6s ease-in-out infinite;}
.planet-spark {position:absolute;width:5px;height:5px;background:#95eaff;border-radius:50%;box-shadow:0 0 13px #7fcaff;}
.spark-one {top:14%;right:20%;}.spark-two {bottom:20%;left:8%;width:3px;height:3px;}
.scene-code-note {position:absolute;z-index:4;bottom:50px;left:-30px;display:inline-flex;gap:10px;align-items:center;
  border:1px solid #4478bf91;padding:12px 17px;border-radius:8px;background:rgba(10,29,60,.96);
  box-shadow:0 15px 35px #0009;pointer-events:none;}
.scene-code-note code {font-family:var(--font);font-size:12px;letter-spacing:.03em;color:#c2dbfa;font-weight:700;}
.showcase-caption {font-size:13px;margin-top:19px;color:#a8c6ee;}
.hero-strip {position:relative;z-index:2;border-top:1px solid #2b50904d;color:#b7d4f9;font-size:13px;}

/* Continuing the universe language in the rest of the site, without competing
   with content or removing the functional sections. */
.services-section {background:radial-gradient(ellipse at 80% 0%,#173f812a,transparent 45%),#091528;border-color:#284573;}
.possibilities-section {background:radial-gradient(ellipse at 13% 5%,#194b9d21,transparent 48%),#070f21;}
.approach-section {background:radial-gradient(ellipse at 88% 60%,#184eaa1e,transparent 55%),#0a1527;}
.process-section {background:radial-gradient(ellipse at 80% 10%,#134d9122,transparent 50%),#080f20;}
.service-card, .example, .project-form {border-color:#33527f;}
.service-card {transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;}
.service-card:hover {transform:translateY(-5px);border-color:#4a8de6;box-shadow:0 18px 45px #0003,0 0 30px #1665c019;}
.example-visual {position:relative;overflow:hidden;}
.example-visual::after {content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #5aa1fb12;border-radius:inherit;}
.contact-section {background:radial-gradient(ellipse at 0% 0%,#17458744,transparent 55%),#0c1b30;}
.faq-section {background:#080f1f;}

@keyframes cosmos-breathe {from{opacity:.38}to{opacity:.73}}
@keyframes planet-breathe {0%,100%{filter:brightness(1);transform:translate(-50%,-50%) translateY(0)}50%{filter:brightness(1.12);transform:translate(-50%,-50%) translateY(-7px)}}
@keyframes scene-float {0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes scene-orbit-turn {from{transform:translate(-50%,-50%) rotate(-23deg)}to{transform:translate(-50%,-50%) rotate(337deg)}}
@keyframes cube-drift {0%,100%{translate:0 0}50%{translate:-5px -9px}}

@media (min-width:1500px) {
  .hero-layout {min-height:750px;padding-block:118px 112px;gap:105px;}
  .planet-art {height:275px;}.planet-sphere {max-width:210px;}
}
@media (max-width:1150px) {
  .hero-layout {grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:34px;}
  h1 {font-size:clamp(42px,4.9vw,58px);}
  .hero-advantages {gap:9px 12px;}
  .hero-advantages li {font-size:13px;}
  .mini-site-hero {grid-template-columns:minmax(0,1.1fr) minmax(100px,.9fr);}
  .planet-art {height:200px;}.planet-sphere {max-width:155px;}
  .satellite-design {right:-16px;}.satellite-mobile {right:-12px;}
  .scene-code-note {left:-12px;}
}
@media (max-width:950px) and (min-width:761px) {
  .hero-layout {grid-template-columns:1fr;gap:60px;max-width:770px;padding-block:82px;}
  .hero-copy {max-width:670px;}
  h1 {font-size:clamp(51px,7.3vw,67px);}
  .showcase {width:min(640px,100%);margin-inline:auto;}
  .mini-site-hero {grid-template-columns:1fr 38%;}
  .planet-art {height:240px;}.planet-sphere {max-width:190px;}
}
@media (max-width:760px) {
  .hero {min-height:0;}
  .hero-grid {background-size:65px 65px;opacity:.5;inset:auto -100% -25%;height:80%;}
  .hero-layout {display:grid;grid-template-columns:1fr;gap:65px;padding-block:67px 77px;}
  h1 {font-size:clamp(43px,9vw,67px);}
  .hero-intro {font-size:17px;}
  .hero-advantages {margin-top:26px;}
  .hero-advantages li {font-size:14px;}
  .hero-eyebrow {font-size:12px;}
  .showcase {max-width:600px;width:100%;margin:auto;padding-top:33px;}
  .showcase-heading {justify-content:flex-start;font-size:12px;}
  .scene-satellite {min-width:75px;min-height:67px;}
  .scene-satellite strong {font-size:22px;}
  .scene-satellite span {font-size:9px;}
  .satellite-code {left:13%;top:-16px;}
  .satellite-design {right:0;top:2px;min-width:68px;}
  .satellite-mobile {bottom:46px;right:-6px;min-width:72px;}
  .demo-tabs {margin-left:0;}
  .mini-site-hero {grid-template-columns:minmax(0,1fr) minmax(115px,.9fr);}
  .planet-art {height:240px;}.planet-sphere {max-width:180px;}
  .demo-window {transform:none;}
  .showcase:hover .demo-window {transform:none;}
  .scene-code-note {left:-8px;bottom:42px;}
  .hero-strip {gap:12px;font-size:12px;}
}
@media (max-width:500px) {
  .hero-layout {gap:52px;padding-top:48px;}
  h1 {font-size:clamp(39px,10.2vw,52px);}
  .hero-advantages {grid-template-columns:1fr 1fr;gap:11px 9px;}
  .hero-advantages li {font-size:12px;}
  .hero-eyebrow {font-size:11px;padding:7px 10px;}
  .hero-intro {font-size:16px;}
  .hero-actions {gap:18px;}
  .showcase-heading {margin-bottom:19px;}
  .scene-satellite {display:none;}
  .demo-tabs {margin:0 0 16px;}
  .demo-tabs button {font-size:13px;}
  .mini-site-hero {display:grid;grid-template-columns:1fr;gap:10px;}
  .mini-site-hero h2 {font-size:clamp(27px,7vw,36px);}
  .planet-art {height:175px;width:100%;}
  .planet-sphere {max-width:148px;}
  .planet-cube {right:25%;width:30px;height:30px;}
  .scene-code-note {position:relative;left:auto;bottom:auto;max-width:max-content;margin-top:15px;padding:8px 11px;}
  .scene-code-note code {font-size:11px;}
  .hero-strip {justify-content:center;gap:10px 12px;}
}
@media (max-width:380px) {
  .hero-advantages {grid-template-columns:1fr;gap:8px;}
  .hero-actions .button {font-size:14px;}
  .hero-eyebrow {font-size:10px;}
  .showcase-heading {font-size:11px;}
  .demo-tabs button {font-size:12px;padding:10px 6px;}
}
@media (prefers-reduced-motion:reduce) {
  html:not([data-motion="on"]) .cosmos-stars, html:not([data-motion="on"]) .orbit-outer, html:not([data-motion="on"]) .scene-satellite, html:not([data-motion="on"]) .planet-sphere, html:not([data-motion="on"]) .planet-cube {animation:none!important;}
  html:not([data-motion="on"]) .service-card, html:not([data-motion="on"]) .demo-window {transition:none!important;}
  html:not([data-motion="on"]) .showcase:hover .demo-window, html:not([data-motion="on"]) .service-card:hover {transform:none;}
}

/* The globe should hover freely in the preview, as in the original concept. */
.planet-art {border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;}
.hero {--focus-x:72%;--focus-y:42%;}
.hero::before {content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.45;
  background:radial-gradient(circle 340px at var(--focus-x) var(--focus-y),#1d72e621,transparent 70%);}
@media (min-width:951px) { .hero-layout {padding-block:72px 52px;} }
@media (max-width:500px) { .hero-advantages li {font-size:14px;} }
@media (prefers-reduced-motion:reduce) { html:not([data-motion="on"]) .hero::before {opacity:.25;} }