:root{
  --bg:#090a0c;--bg-soft:#0d0f12;--card:#111318;--line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.15);--text:#f4f4f2;--muted:#969aa3;
  --accent:#4f7fff;--accent-soft:rgba(79,127,255,.16);
  --serif:Georgia,"Times New Roman",serif;--sans:Inter,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 70% -10%,rgba(71,91,150,.17),transparent 28%),
    radial-gradient(circle at 10% 70%,rgba(25,49,100,.10),transparent 25%),
    var(--bg);
  color:var(--text);font-family:var(--sans);line-height:1.5;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
::selection{background:var(--accent);color:#fff}
.noise{pointer-events:none;position:fixed;inset:0;z-index:200;opacity:.022;background-image:repeating-radial-gradient(circle at 0 0,transparent 0,#fff 1px,transparent 1px,transparent 4px);background-size:7px 7px}

.sidebar{
  position:fixed;inset:0 auto 0 0;width:176px;padding:28px 24px;border-right:1px solid var(--line);
  background:rgba(7,8,10,.86);backdrop-filter:blur(20px);z-index:100;display:flex;flex-direction:column
}
.brand{font-family:var(--serif);font-size:23px;letter-spacing:.22em;margin-bottom:6px}
.brand-sub{font-size:8px;letter-spacing:.43em;color:var(--muted);text-transform:uppercase}
.nav{margin-top:56px;display:grid;gap:18px}
.nav a{color:#8b8f98;font-size:12px;transition:.25s ease;position:relative}
.nav a::before{content:"";position:absolute;left:-15px;top:50%;width:5px;height:5px;border-radius:99px;background:var(--accent);transform:translateY(-50%) scale(0);box-shadow:0 0 12px var(--accent);transition:.25s}
.nav a:hover,.nav a.active{color:#fff}
.nav a:hover::before,.nav a.active::before{transform:translateY(-50%) scale(1)}
.side-services{margin-top:auto;padding-top:25px;border-top:1px solid var(--line)}
.side-label{color:#6f737c;font-size:8px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:16px}
.side-services ul{list-style:none;display:grid;gap:10px}
.side-services li{color:#969aa3;font-size:10px}
.side-contact{margin-top:26px;color:#70747d;font-size:9px;line-height:1.8}

.page{margin-left:176px}
.container{width:min(1180px,calc(100% - 64px));margin:0 auto}
section{border-bottom:1px solid var(--line)}
.eyebrow{color:#7d828d;font-size:10px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:10px}
.section-title{font-family:var(--serif);font-size:clamp(32px,4vw,55px);font-weight:400;line-height:1.02;letter-spacing:-.02em}
.accent{color:#6e96ff}.muted{color:var(--muted)}

.hero{min-height:620px;position:relative;overflow:hidden;display:flex;align-items:center;background:linear-gradient(90deg,rgba(8,9,11,.94),rgba(8,9,11,.68) 48%,rgba(8,9,11,.35)),radial-gradient(circle at 75% 42%,rgba(63,114,255,.16),transparent 25%)}
.hero::after{content:"";position:absolute;width:750px;height:750px;right:-290px;top:-265px;border:1px solid rgba(93,127,255,.17);border-radius:50%;box-shadow:0 0 0 100px rgba(255,255,255,.008),0 0 0 250px rgba(255,255,255,.006)}
.hero-rock{position:absolute;right:-50px;bottom:-80px;width:650px;height:430px;opacity:.76;transform:rotate(-6deg);background:linear-gradient(145deg,transparent 15%,#292c32 16%,#101115 50%,#020305 84%);clip-path:polygon(5% 78%,19% 52%,30% 59%,39% 29%,53% 39%,66% 14%,77% 31%,91% 25%,100% 70%,88% 100%,22% 100%);filter:drop-shadow(0 25px 60px #000)}
.hero-rock::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 35px);opacity:.15}
.hero-content{padding:95px 0;position:relative;z-index:5;max-width:800px}
.hero-badge{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:#a3a6ad;margin-bottom:34px}
.hero-badge::before{content:"";width:24px;height:1px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
h1{font-family:var(--serif);font-size:clamp(55px,6.4vw,97px);font-weight:400;line-height:.95;max-width:850px;letter-spacing:-.035em}
.hero-description{margin-top:28px;max-width:570px;font-size:16px;color:#aaadb4}
.hero-actions{display:flex;align-items:center;gap:13px;margin-top:35px}
.btn{height:52px;padding:0 24px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:15px;border:1px solid var(--line-strong);font-size:12px;cursor:pointer;transition:.25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#315fd7,#4c7eff);border-color:transparent;box-shadow:0 10px 30px rgba(47,95,215,.22)}
.btn-primary:hover{box-shadow:0 12px 36px rgba(47,95,215,.35)}
.btn-ghost{background:rgba(255,255,255,.015)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}

.projects,.services,.process,.trust,.about{padding:68px 0 74px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}
.link-arrow{color:#7095ff;font-size:11px}
.project-grid{display:grid;grid-template-columns:1.15fr 1fr .8fr;grid-template-rows:225px 180px;gap:9px}
.project-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:3px;min-height:190px;background-color:#15171b}
.project-card::before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.08),transparent 30%);opacity:0;transition:.35s}
.project-card:hover::before{opacity:1}.project-card:hover .project-arrow{transform:translate(4px,-4px)}
.p1{grid-row:span 2;background:linear-gradient(180deg,rgba(5,6,8,.12),rgba(5,6,8,.86)),radial-gradient(circle at 42% 35%,#3c4048,#0a0b0d 65%)}
.p2{background:linear-gradient(180deg,rgba(9,10,12,.12),rgba(8,9,10,.6)),linear-gradient(110deg,#090b0e 20%,#30363f 20% 31%,#11151b 31% 42%,#39414c 42% 54%,#151a20 54%)}
.p3{grid-row:span 2;background:radial-gradient(circle at 60% 35%,rgba(229,161,77,.55),transparent 16%),radial-gradient(circle at 68% 54%,rgba(244,182,93,.37),transparent 20%),#0d0e10}
.p4{background:radial-gradient(circle at 72% 30%,#d0b2a5,transparent 21%),radial-gradient(circle at 65% 42%,#5d3b34,transparent 30%),#171517}
.p5{background:linear-gradient(0deg,rgba(2,3,4,.65),rgba(5,6,8,.08)),radial-gradient(ellipse at center,#313237 0 22%,#141519 50%,#050607 78%)}
.project-info{position:absolute;z-index:2;left:18px;right:18px;bottom:18px}
.project-name{font-family:var(--serif);font-size:22px;margin-bottom:5px}
.project-desc{font-size:10px;color:#aaaeb7;max-width:260px}
.project-tag{display:inline-flex;margin-top:10px;padding:4px 7px;border:1px solid rgba(255,255,255,.13);font-size:8px;color:#8f949d}
.project-arrow{position:absolute;right:15px;bottom:15px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:.25s;z-index:3}

.services-layout{display:grid;grid-template-columns:1.1fr 1.9fr;gap:10px;margin-top:28px}
.service-feature{min-height:332px;padding:28px;border:1px solid var(--line);background:radial-gradient(circle at 70% 75%,rgba(39,94,255,.32),transparent 22%),var(--card);position:relative;overflow:hidden}
.service-feature .shape{position:absolute;width:170px;height:170px;right:-25px;bottom:-35px;border:1px solid rgba(82,125,255,.35);transform:rotate(35deg);box-shadow:inset 0 0 45px rgba(50,103,255,.17)}
.service-feature h3{font-family:var(--serif);font-size:30px;font-weight:400;max-width:260px}
.service-feature p{color:var(--muted);font-size:11px;max-width:300px;margin-top:14px}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.service-card{padding:24px;border:1px solid var(--line);min-height:160px;background:var(--card);position:relative;transition:.25s ease}
.service-card:hover{background:#151820;border-color:rgba(80,118,220,.4);transform:translateY(-2px)}
.service-card h4{font-family:var(--serif);font-weight:400;font-size:21px;margin-bottom:10px}
.service-card p{color:var(--muted);font-size:10px;max-width:270px}
.service-card.blue{background:linear-gradient(135deg,rgba(35,69,150,.33),rgba(16,18,23,.9)),var(--card)}

.process-copy{max-width:360px;font-size:12px}
.process-grid{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--bg-soft);min-height:170px;padding:28px 24px;display:flex;flex-direction:column;justify-content:center}
.step h4{font-family:var(--serif);font-size:20px;font-weight:400;margin-bottom:10px}
.step p{color:var(--muted);font-size:10px;max-width:260px}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.about-card{border:1px solid var(--line);background:var(--card);padding:28px}
.about-card>p{color:#b1b4bc;font-size:13px}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:28px;border:1px solid var(--line)}
.about-stats>div{background:#0e1014;padding:20px;min-height:140px}
.about-stats h5,.stats h5{font-family:var(--serif);font-size:24px;font-weight:400;margin-bottom:10px}
.about-stats span,.stats span{font-size:10px;color:var(--muted);display:block;line-height:1.6}

.trust-inner{display:grid;grid-template-columns:.8fr 1fr;gap:30px;align-items:stretch}
.stats{border:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);min-height:220px}
.stat{padding:24px 18px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line);background:#0f1115}
.stat:last-child{border-right:0}
.review{border:1px solid var(--line);padding:28px;background:var(--card);display:flex;flex-direction:column;justify-content:space-between}
.review p{font-family:var(--serif);color:#c8c9cd;font-size:20px;max-width:600px}
.review-person{margin-top:22px;display:flex;align-items:center;gap:12px;font-size:11px;color:#8e929b}
.avatar{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#b9a08e 0 19%,transparent 20%),radial-gradient(circle at 50% 70%,#24262c 0 35%,#101114 36%);border:1px solid var(--line-strong)}

.contact{padding:80px 0;min-height:520px;position:relative;overflow:hidden;background:radial-gradient(circle at 7% 60%,rgba(37,78,184,.26),transparent 22%),linear-gradient(120deg,#080a0e,#0b0d12)}
.contact::before{content:"";position:absolute;left:-100px;bottom:-190px;width:630px;height:450px;background:linear-gradient(145deg,transparent 20%,#222733 21%,#07101e 60%);clip-path:polygon(0 100%,26% 42%,43% 56%,55% 23%,71% 41%,84% 12%,100% 100%);opacity:.55}
.contact-inner{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.contact-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(43px,5vw,72px);line-height:.96}
.contact-copy p{margin-top:21px;color:var(--muted);max-width:390px;font-size:12px}
.socials{display:flex;gap:10px;margin-top:30px}
.social{width:43px;height:43px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:12px;color:#c6c8ce;transition:.25s}
.social:hover{border-color:#557fe9;background:var(--accent-soft);transform:translateY(-2px)}
.form{padding:28px;background:rgba(14,16,21,.75);border:1px solid var(--line);backdrop-filter:blur(10px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{width:100%;border:1px solid var(--line);background:#0d0f13;color:white;padding:15px;outline:none;border-radius:2px;transition:.25s}
.field:focus{border-color:#4169d7;box-shadow:0 0 0 3px rgba(65,105,215,.08)}
textarea.field{min-height:130px;resize:vertical;margin-top:10px}
.mt10{margin-top:10px}
.form .btn{width:100%;margin-top:10px}
.form-message{text-align:center;font-size:11px;color:#83a4ff;min-height:20px;margin-top:12px}
.footer{padding:28px 0;color:#6e727a;font-size:9px}
.footer-inner{display:flex;justify-content:space-between;gap:20px}

.mobile-header,.menu-button,.mobile-menu{display:none}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1000px){
  .sidebar{display:none}.page{margin-left:0}
  .mobile-header{position:fixed;left:0;right:0;top:0;height:64px;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(8,9,11,.88);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}
  .mobile-brand{font-family:var(--serif);letter-spacing:.17em}
  .menu-button{display:block;border:0;color:white;background:transparent;cursor:pointer;font-size:22px}
  .mobile-menu{position:fixed;inset:64px 0 auto 0;z-index:99;background:#0b0c0f;border-bottom:1px solid var(--line);padding:20px}
  .mobile-menu.open{display:grid}
  .mobile-menu a{padding:12px 0;border-bottom:1px solid var(--line);color:#b0b3b9}
  .hero{padding-top:64px}.hero-rock{opacity:.25}
  .project-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .project-card{grid-row:auto!important;min-height:270px}.p1{grid-column:span 2}
  .services-layout,.trust-inner,.contact-inner,.about-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .container{width:min(100% - 32px,1180px)}
  .hero{min-height:700px;align-items:flex-start}.hero-content{padding-top:120px}h1{font-size:58px}
  .hero-actions{flex-direction:column;align-items:stretch;max-width:340px}
  .project-grid{grid-template-columns:1fr}.p1{grid-column:auto}.project-card{min-height:260px}
  .service-grid,.process-grid,.stats,.about-stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}
  .form-row{grid-template-columns:1fr}.footer-inner,.section-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:460px){
  h1{font-size:48px}.section-title{font-size:36px}.contact-copy h2{font-size:49px}
}


/* ===== VARIANT 4 — TEKTUR ===== */
:root{
  --display:"Tektur", sans-serif;
  --body:"Inter", Arial, Helvetica, sans-serif;
}

body{
  font-family:var(--body) !important;
  letter-spacing:0 !important;
}

/* Brand + main headlines */
.brand,
.mobile-brand,
h1,
.section-title,
.contact-copy h2,
.project-name,
.service-feature h3,
.service-card h4,
.step h4,
.about-stats h5,
.stats h5{
  font-family:var(--display) !important;
}

/* Brand */
.brand,
.mobile-brand{
  font-weight:600 !important;
  letter-spacing:.015em !important;
  text-transform:uppercase;
}

/* Hero */
h1{
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  line-height:.94 !important;
  text-transform:uppercase;
  max-width:920px !important;
}

/* Section titles */
.section-title,
.contact-copy h2{
  font-weight:600 !important;
  letter-spacing:-.015em !important;
  line-height:1.02 !important;
}

/* Cards and smaller headings */
.project-name,
.service-feature h3,
.service-card h4,
.step h4,
.about-stats h5,
.stats h5{
  font-weight:600 !important;
  letter-spacing:-.01em !important;
}

/* Body text stays readable */
.nav a,
.side-services li,
.side-contact,
.hero-description,
.project-desc,
.project-tag,
.service-feature p,
.service-card p,
.step p,
.about-card > p,
.about-stats span,
.stats span,
.contact-copy p,
.field,
.btn,
.eyebrow,
.hero-badge,
.brand-sub{
  font-family:var(--body) !important;
}

.hero-badge,
.eyebrow,
.brand-sub{
  letter-spacing:.10em !important;
}

.hero-description,
.service-feature p,
.service-card p,
.step p,
.about-card > p,
.contact-copy p{
  line-height:1.72 !important;
  letter-spacing:0 !important;
}

.project-desc{
  line-height:1.6 !important;
}

.btn{
  font-weight:600 !important;
  letter-spacing:0 !important;
}

/* Slightly sharper look for display font */
.brand{
  font-size:24px !important;
}

.section-title{
  font-size:clamp(34px,4vw,56px) !important;
}

.service-feature h3{
  font-size:32px !important;
  line-height:1.06 !important;
}

.contact-copy h2{
  font-size:clamp(45px,5vw,74px) !important;
}


/* ===== Smaller heading adjustment ===== */
h1{
  font-size: clamp(52px, 5.8vw, 88px) !important;
  line-height: .95 !important;
}

.section-title{
  font-size: clamp(30px, 3.6vw, 50px) !important;
}

.contact-copy h2{
  font-size: clamp(40px, 4.6vw, 64px) !important;
}

.service-feature h3{
  font-size: 28px !important;
}

@media(max-width:720px){
  h1{
    font-size: 46px !important;
  }
  .section-title{
    font-size: 32px !important;
  }
  .contact-copy h2{
    font-size: 40px !important;
  }
}


/* ===== Glowing EGRAVO logo ===== */
.brand,
.mobile-brand{
  color: #f4f7ff !important;
  text-shadow:
    0 0 6px rgba(111, 141, 255, 0.55),
    0 0 14px rgba(111, 141, 255, 0.40),
    0 0 28px rgba(111, 141, 255, 0.22);
}

.brand:hover,
.mobile-brand:hover{
  text-shadow:
    0 0 8px rgba(111, 141, 255, 0.70),
    0 0 18px rgba(111, 141, 255, 0.52),
    0 0 34px rgba(111, 141, 255, 0.30);
}


/* ===== Premium pulse animation for EGRAVO logo ===== */
@keyframes egravoPulse {
  0%, 100% {
    color: #f4f7ff;
    text-shadow:
      0 0 6px rgba(111, 141, 255, 0.45),
      0 0 14px rgba(111, 141, 255, 0.30),
      0 0 26px rgba(111, 141, 255, 0.16);
  }
  50% {
    color: #ffffff;
    text-shadow:
      0 0 8px rgba(111, 141, 255, 0.75),
      0 0 18px rgba(111, 141, 255, 0.52),
      0 0 36px rgba(111, 141, 255, 0.28);
  }
}

.brand,
.mobile-brand {
  animation: egravoPulse 3.8s ease-in-out infinite;
  will-change: text-shadow, color;
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .mobile-brand {
    animation: none;
  }
}


/* ===== Stronger visible pulse for EGRAVO logo ===== */
@keyframes egravoPulseStrong {
  0%, 100% {
    color: #eef3ff;
    text-shadow:
      0 0 4px rgba(70, 120, 255, 0.35),
      0 0 10px rgba(70, 120, 255, 0.28),
      0 0 18px rgba(70, 120, 255, 0.18);
    filter: brightness(0.92);
  }

  45% {
    color: #ffffff;
    text-shadow:
      0 0 8px rgba(95, 145, 255, 0.95),
      0 0 18px rgba(95, 145, 255, 0.78),
      0 0 34px rgba(75, 120, 255, 0.58),
      0 0 56px rgba(55, 95, 255, 0.34);
    filter: brightness(1.18);
  }

  55% {
    color: #ffffff;
    text-shadow:
      0 0 10px rgba(115, 160, 255, 1),
      0 0 22px rgba(95, 145, 255, 0.9),
      0 0 42px rgba(75, 120, 255, 0.68),
      0 0 68px rgba(55, 95, 255, 0.4);
    filter: brightness(1.28);
  }
}

.brand,
.mobile-brand {
  animation: egravoPulseStrong 2.4s ease-in-out infinite !important;
  will-change: text-shadow, color, filter;
}

.brand:hover,
.mobile-brand:hover {
  animation-duration: 1.6s !important;
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .mobile-brand {
    animation: none !important;
  }
}


/* ===== EGRAVO color-flow logo ===== */
@keyframes egravoColorFlow {
  0% {
    background-position: 0% 50%;
    filter: brightness(.98);
    text-shadow:
      0 0 8px rgba(85, 130, 255, .50),
      0 0 18px rgba(85, 130, 255, .30);
  }
  25% {
    background-position: 50% 50%;
    filter: brightness(1.12);
    text-shadow:
      0 0 10px rgba(100, 165, 255, .75),
      0 0 24px rgba(95, 120, 255, .46),
      0 0 38px rgba(120, 85, 255, .24);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.2);
    text-shadow:
      0 0 10px rgba(160, 110, 255, .82),
      0 0 26px rgba(120, 90, 255, .55),
      0 0 42px rgba(75, 150, 255, .28);
  }
  75% {
    background-position: 50% 50%;
    filter: brightness(1.1);
    text-shadow:
      0 0 10px rgba(75, 190, 255, .72),
      0 0 24px rgba(85, 140, 255, .44),
      0 0 38px rgba(110, 95, 255, .23);
  }
  100% {
    background-position: 0% 50%;
    filter: brightness(.98);
    text-shadow:
      0 0 8px rgba(85, 130, 255, .50),
      0 0 18px rgba(85, 130, 255, .30);
  }
}

.brand,
.mobile-brand {
  color: transparent !important;
  background-image: linear-gradient(
    100deg,
    #f7fbff 0%,
    #7fd3ff 18%,
    #6f8dff 38%,
    #a57cff 58%,
    #70b7ff 78%,
    #ffffff 100%
  ) !important;
  background-size: 260% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: egravoColorFlow 3.2s ease-in-out infinite !important;
  will-change: background-position, filter, text-shadow;
}

.brand:hover,
.mobile-brand:hover {
  animation-duration: 1.9s !important;
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .mobile-brand {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}


/* ===== EGRAVO motion upgrade ===== */

/* Более живой фон первого экрана */
@keyframes heroGlowFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .42;
  }
  50% {
    transform: translate3d(-22px, 16px, 0) scale(1.08);
    opacity: .68;
  }
}

.hero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:4%;
  top:8%;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(92,128,255,.20) 0%,
      rgba(87,112,210,.09) 32%,
      transparent 68%);
  filter:blur(12px);
  animation:heroGlowFloat 7s ease-in-out infinite;
  pointer-events:none;
}

.hero-content{
  animation:heroContentIn .9s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes heroContentIn{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Карточки проектов — подъём, свечение и лёгкий zoom */
.project-card{
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .45s ease,
    filter .35s ease !important;
  transform:translateZ(0);
}

.project-card:hover{
  transform:translateY(-8px) scale(1.012) !important;
  border-color:rgba(111,141,255,.34) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(111,141,255,.05) inset !important;
  filter:brightness(1.07);
}

.project-card .project-arrow{
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    background .3s ease,
    border-color .3s ease !important;
}

.project-card:hover .project-arrow{
  transform:translate(5px,-5px) rotate(6deg) !important;
  background:rgba(111,141,255,.12);
  border-color:rgba(111,141,255,.55);
}

/* Карточки услуг */
.service-card,
.service-feature,
.step,
.about-card,
.review,
.stat{
  transition:
    transform .4s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .4s ease;
}

.service-card:hover,
.step:hover,
.stat:hover{
  transform:translateY(-5px);
  border-color:rgba(111,141,255,.25);
  box-shadow:0 20px 50px rgba(0,0,0,.20);
}

.service-feature:hover,
.about-card:hover,
.review:hover{
  transform:translateY(-4px);
  border-color:rgba(111,141,255,.22);
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}

/* Кнопки — аккуратный световой проход */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-2px auto -2px -45%;
  width:32%;
  transform:skewX(-18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );
  transition:left .65s cubic-bezier(.2,.7,.2,1);
  z-index:-1;
}

.btn:hover::before{
  left:125%;
}

.btn-primary:hover{
  transform:translateY(-3px) !important;
  box-shadow:
    0 14px 38px rgba(47,95,215,.38),
    0 0 28px rgba(92,128,255,.12) !important;
}

.btn-ghost:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(111,141,255,.38);
}

/* Более выразительное появление секций */
.reveal{
  opacity:0;
  transform:translateY(30px) scale(.992);
  filter:blur(3px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.2,.7,.2,1),
    filter .85s ease !important;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* Небольшая задержка в сетках */
.project-grid .reveal:nth-child(2),
.service-grid .reveal:nth-child(2),
.process-grid .reveal:nth-child(2){transition-delay:.06s}

.project-grid .reveal:nth-child(3),
.service-grid .reveal:nth-child(3),
.process-grid .reveal:nth-child(3){transition-delay:.12s}

.project-grid .reveal:nth-child(4),
.service-grid .reveal:nth-child(4),
.process-grid .reveal:nth-child(4){transition-delay:.18s}

.project-grid .reveal:nth-child(5),
.process-grid .reveal:nth-child(5){transition-delay:.24s}

.process-grid .reveal:nth-child(6){transition-delay:.30s}

/* Мягкое движение декоративной формы */
@keyframes shapeDrift{
  0%,100%{transform:rotate(35deg) translate3d(0,0,0)}
  50%{transform:rotate(41deg) translate3d(-8px,-7px,0)}
}

.service-feature .shape{
  animation:shapeDrift 6s ease-in-out infinite;
}

/* Мобильные устройства: меньше движения */
@media(max-width:720px){
  .project-card:hover,
  .service-card:hover,
  .step:hover,
  .stat:hover,
  .service-feature:hover,
  .about-card:hover,
  .review:hover{
    transform:none !important;
  }

  .hero::before{
    width:340px;
    height:340px;
    right:-120px;
    top:12%;
  }
}

/* Уважение системной настройки */
@media(prefers-reduced-motion:reduce){
  .hero::before,
  .hero-content,
  .service-feature .shape{
    animation:none !important;
  }

  .reveal,
  .reveal.visible{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}


/* ===== EGRAVO UNIQUE EDITION ===== */


/* Hero signature signal */
.hero-signal{
  position:absolute;
  left:0;
  bottom:34px;
  width:min(520px,42vw);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,141,255,.9),transparent);
  opacity:.48;
  overflow:visible;
}

.hero-signal::after{
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  width:42px;
  height:5px;
  border-radius:99px;
  background:#8ba5ff;
  box-shadow:
    0 0 12px rgba(111,141,255,.85),
    0 0 28px rgba(111,141,255,.45);
  animation:egravoSignal 4.2s ease-in-out infinite;
}

@keyframes egravoSignal{
  0%,100%{left:2%;opacity:.55}
  50%{left:88%;opacity:1}
}

/* Interactive hero orb */
.hero-orb{
  position:absolute;
  right:10%;
  top:28%;
  width:170px;
  height:170px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),transparent 18%),
    radial-gradient(circle at 55% 55%,rgba(93,126,255,.42),rgba(43,60,120,.18) 45%,transparent 70%);
  border:1px solid rgba(134,156,236,.16);
  box-shadow:
    inset 0 0 40px rgba(116,143,255,.12),
    0 0 60px rgba(74,103,196,.14);
  filter:blur(.1px);
  mix-blend-mode:screen;
  transform:translate3d(0,0,0);
  transition:transform .25s ease-out;
  z-index:2;
}

.hero-orb::before,
.hero-orb::after{
  content:"";
  position:absolute;
  inset:-22px;
  border:1px solid rgba(113,141,224,.12);
  border-radius:50%;
}

.hero-orb::after{
  inset:-48px;
  border-color:rgba(113,141,224,.07);
}

/* Distinct project presentation */
.egravo-showcase{
  perspective:1200px;
}

.egravo-showcase .project-card{
  transform-style:preserve-3d;
}

.egravo-showcase .project-card::after{
  content:"EGRAVO / CASE";
  position:absolute;
  top:12px;
  right:14px;
  font-family:var(--body);
  font-size:7px;
  letter-spacing:.13em;
  color:rgba(255,255,255,.28);
  z-index:5;
  background:none;
  inset:auto 14px auto auto;
}

.egravo-showcase .project-card:hover .project-info{
  transform:translateZ(24px);
}

.project-info{
  transition:transform .35s ease;
}

/* Section edge accent: quiet but branded */
.projects,
.services,
.process,
.about,
.trust{
  position:relative;
}

.projects::before,
.services::before,
.process::before,
.about::before,
.trust::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:76px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:.45;
}

/* Signature marquee */
.signature-strip{
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#0a0b0e;
  padding:16px 0;
}

.signature-track{
  width:max-content;
  display:flex;
  gap:70px;
  animation:signatureMove 20s linear infinite;
}

.signature-track span{
  font-family:var(--display);
  font-size:11px;
  letter-spacing:.08em;
  color:#626772;
  white-space:nowrap;
}

@keyframes signatureMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Magnetic button helper */
.btn{
  will-change:transform;
}

/* Better feel on touch devices */
@media (pointer:coarse){
  .hero-orb{opacity:.45}
}

@media(max-width:720px){
  .hero-orb{
    width:110px;
    height:110px;
    right:-25px;
    top:22%;
    opacity:.48;
  }
  .hero-signal{width:70vw}
}

@media(prefers-reduced-motion:reduce){
  .hero-signal::after,
  .signature-track{
    animation:none!important;
  }
}


/* ===== EGRAVO AMBIENT INTERACTION — no custom cursor ===== */

/* Вертикальный прогресс прокрутки, как фирменный signal rail */
.scroll-progress{
  position:fixed;
  left:191px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.035);
  z-index:120;
  pointer-events:none;
}

.scroll-progress span{
  display:block;
  width:1px;
  height:0%;
  background:linear-gradient(
    180deg,
    #8da6ff 0%,
    #6e8fff 45%,
    #9a7cff 100%
  );
  box-shadow:
    0 0 10px rgba(111,141,255,.65),
    0 0 24px rgba(111,141,255,.28);
  transition:height .08s linear;
}

/* Световой "сканер" первого экрана следует за мышью */
.hero-spotlight{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.78;
  background:
    radial-gradient(
      380px circle at var(--spot-x, 72%) var(--spot-y, 42%),
      rgba(128,154,255,.18),
      rgba(80,105,190,.07) 38%,
      transparent 72%
    );
  transition:opacity .35s ease;
  mix-blend-mode:screen;
}

.hero:hover .hero-spotlight{
  opacity:1;
}

/* Фирменная "сетка сигнала" на hero */
.hero{
  --grid-opacity:.06;
}

.hero::marker{display:none}

.hero .container::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,var(--grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,var(--grid-opacity)) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 84%,transparent 100%);
  opacity:.22;
}

/* Карточки проектов: сканирующая линия + угловые метки */
.project-card::before{
  content:"";
  position:absolute;
  left:-40%;
  top:0;
  width:22%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(160,180,255,.16),
    rgba(255,255,255,.18),
    transparent
  );
  transform:skewX(-15deg);
  opacity:0;
  z-index:3;
}

.project-card:hover::before{
  opacity:1;
  animation:caseScan .85s ease forwards;
}

@keyframes caseScan{
  from{left:-40%}
  to{left:125%}
}

.project-card{
  --corner:#7595ff;
}

.project-card .project-info::before,
.project-card .project-info::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  opacity:0;
  transition:opacity .3s ease,transform .3s ease;
}

.project-card .project-info::before{
  left:-10px;
  top:-10px;
  border-left:1px solid var(--corner);
  border-top:1px solid var(--corner);
  transform:translate(-5px,-5px);
}

.project-card .project-info::after{
  right:-10px;
  bottom:-10px;
  border-right:1px solid var(--corner);
  border-bottom:1px solid var(--corner);
  transform:translate(5px,5px);
}

.project-card:hover .project-info::before,
.project-card:hover .project-info::after{
  opacity:.75;
  transform:translate(0,0);
}

/* Заголовки секций — еле заметная "световая печать" */
.section-title,
.contact-copy h2{
  position:relative;
}

.section-title::after,
.contact-copy h2::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin-top:16px;
  background:linear-gradient(90deg,#6f8dff,rgba(111,141,255,0));
  box-shadow:0 0 16px rgba(111,141,255,.28);
  transition:width .8s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible .section-title::after,
.reveal.visible.contact-copy h2::after{
  width:min(180px,38%);
}

/* Кнопки получают краткий импульс при наведении */
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(137,158,255,0);
  transition:
    inset .25s ease,
    border-color .25s ease,
    opacity .25s ease;
  pointer-events:none;
}

.btn:hover::after{
  inset:-4px;
  border-color:rgba(137,158,255,.28);
}

/* Небольшой parallax для больших блоков */
[data-float]{
  transform:translate3d(0,var(--float-y,0px),0);
  transition:transform .18s ease-out;
  will-change:transform;
}

@media(max-width:1000px){
  .scroll-progress{left:0}
}

@media(max-width:720px){
  .hero-spotlight{opacity:.45}
  .hero .container::before{opacity:.12}
}

@media(prefers-reduced-motion:reduce){
  .project-card:hover::before{animation:none}
  [data-float]{transform:none!important}
}


/* ===== EGRAVO CONTENT + VISUAL UPGRADE ===== */

/* subtle animated grain */
.noise{
  opacity:.032 !important;
  animation:grainShift 7s steps(8) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-1%,1%,0)}
  40%{transform:translate3d(1%,-1%,0)}
  60%{transform:translate3d(.5%,1%,0)}
  80%{transform:translate3d(-.5%,-1%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* animated spectral line behind hero */
.hero-content::before{
  content:"";
  position:absolute;
  left:-6%;
  top:35%;
  width:74%;
  height:1px;
  background:linear-gradient(90deg,transparent,#6889ff,#8c74ff,transparent);
  opacity:.18;
  filter:blur(.2px);
  transform:rotate(-7deg);
  animation:spectralLine 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes spectralLine{
  0%,100%{opacity:.10;transform:rotate(-7deg) translateX(-3%)}
  50%{opacity:.34;transform:rotate(-7deg) translateX(5%)}
}

/* mask-style reveal for headings */
.section-title,
.contact-copy h2,
h1{
  clip-path:inset(0 100% 0 0);
}
.visible h1,
.reveal.visible .section-title,
.contact-copy.visible h2,
.hero-content.visible h1{
  animation:titleReveal 1.05s cubic-bezier(.2,.75,.2,1) forwards;
}
@keyframes titleReveal{
  to{clip-path:inset(0 0 0 0)}
}

/* chromatic micro glow on accent text */
.accent{
  text-shadow:
    0 0 14px rgba(104,137,255,.20),
    1px 0 0 rgba(120,90,255,.08),
    -1px 0 0 rgba(70,160,255,.06);
}

/* section transition veil */
.projects,
.services,
.process,
.about,
.trust,
.contact{
  overflow:hidden;
}
.projects::after,
.services::after,
.process::after,
.about::after,
.trust::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,141,255,.20),transparent);
}

/* premium hover texture on content cards */
.service-card,
.step,
.about-card,
.review,
.stat{
  overflow:hidden;
}
.service-card::after,
.step::after,
.about-card::after,
.review::after,
.stat::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(220px circle at var(--hx,70%) var(--hy,30%),rgba(111,141,255,.09),transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
}
.service-card:hover::after,
.step:hover::after,
.about-card:hover::after,
.review:hover::after,
.stat:hover::after{
  opacity:1;
}

/* stronger but restrained project hover */
.project-card{
  isolation:isolate;
}
.project-card:hover{
  box-shadow:
    0 26px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(111,141,255,.08) inset,
    0 0 38px rgba(83,111,210,.08) !important;
}

/* moving line through signature strip */
.signature-strip{
  position:relative;
}
.signature-strip::after{
  content:"";
  position:absolute;
  left:-25%;
  top:0;
  width:20%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(120,145,255,.08),transparent);
  transform:skewX(-15deg);
  animation:signatureSweep 7s linear infinite;
}
@keyframes signatureSweep{
  to{left:125%}
}

/* button press feel */
.btn:active{
  transform:translateY(0) scale(.985) !important;
}

/* footer micro accent */
.footer-inner::before{
  content:"";
  display:block;
  width:38px;
  height:1px;
  background:linear-gradient(90deg,#6f8dff,transparent);
  margin-right:12px;
}

/* mobile polish */
@media(max-width:720px){
  .hero-content::before{width:120%;left:-10%;top:31%}
  .noise{opacity:.022 !important}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .noise,
  .hero-content::before,
  .signature-strip::after{
    animation:none !important;
  }
  .section-title,
  .contact-copy h2,
  h1{
    clip-path:none !important;
  }
}


/* ===== EGRAVO NEXT EDITION ===== */

/* Mini case details */
.project-case{
  display:grid;
  gap:7px;
  margin-top:12px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(8px);
  transition:max-height .35s ease,opacity .3s ease,transform .35s ease;
}
.project-case span{
  font-size:9px;
  line-height:1.45;
  color:#b7bbc4;
}
.project-case b{
  color:#e6e8ef;
  font-weight:600;
}
.project-card:hover .project-case{
  max-height:90px;
  opacity:1;
  transform:translateY(0);
}

/* Principles */
.principles{
  position:relative;
  padding:78px 0 82px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.principles::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 26%,rgba(77,104,190,.11),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 45%);
  pointer-events:none;
}
.principles-copy{max-width:380px;font-size:12px;line-height:1.7}
.principles-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:34px;
}
.principle-card{
  position:relative;
  min-height:220px;
  padding:28px 24px 24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#111318,#0d0f13);
  overflow:hidden;
  transition:transform .4s ease,border-color .35s ease,box-shadow .4s ease;
}
.principle-card::after{
  content:"";
  position:absolute;
  right:-50px;
  bottom:-80px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(92,128,255,.12),transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
}
.principle-card:hover{
  transform:translateY(-5px);
  border-color:rgba(111,141,255,.28);
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.principle-card:hover::after{opacity:1}
.principle-mark{
  display:block;
  width:28px;
  height:1px;
  background:linear-gradient(90deg,#6f8dff,transparent);
  box-shadow:0 0 12px rgba(111,141,255,.35);
  margin-bottom:28px;
}
.principle-card h3{
  font-family:var(--display);
  font-size:21px;
  font-weight:600;
  letter-spacing:-.015em;
  margin-bottom:12px;
}
.principle-card p{
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

/* Stronger final CTA */
.contact-signal{
  display:flex;
  gap:6px;
  margin-bottom:20px;
}
.contact-signal span{
  display:block;
  width:34px;
  height:2px;
  background:linear-gradient(90deg,#6f8dff,rgba(111,141,255,.14));
  animation:contactPulse 2.8s ease-in-out infinite;
}
.contact-signal span:nth-child(2){animation-delay:.2s;opacity:.65}
.contact-signal span:nth-child(3){animation-delay:.4s;opacity:.35}
@keyframes contactPulse{
  0%,100%{transform:scaleX(.55);filter:brightness(.8)}
  50%{transform:scaleX(1);filter:brightness(1.35)}
}
.contact::after{
  content:"";
  position:absolute;
  right:-140px;
  top:50%;
  width:520px;
  height:520px;
  border-radius:50%;
  border:1px solid rgba(111,141,255,.08);
  box-shadow:
    0 0 0 80px rgba(111,141,255,.02),
    0 0 0 160px rgba(111,141,255,.01);
  transform:translateY(-50%);
  pointer-events:none;
}

@media(max-width:1000px){
  .principles-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .principles-grid{grid-template-columns:1fr}
  .compare{height:360px}
  .new-title{font-size:42px}
  .new-sub{max-width:68%;top:45%}
  .new-cards{grid-template-columns:1fr 1fr}
  .new-cards span:nth-child(3){display:none}
}
@media(prefers-reduced-motion:reduce){
  .contact-signal span{animation:none}
}


/* ===== Crisp project text fix ===== */
/* Убираем причины размытия: 3D-наклон/масштаб и лишние фильтры на карточках проектов */
.project-card,
.egravo-showcase .project-card{
  transform-style: flat !important;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.project-card:hover{
  transform: translateY(-4px) !important;
  filter: none !important;
}

.project-card .project-info,
.egravo-showcase .project-card:hover .project-info{
  transform: none !important;
  will-change: auto !important;
}

/* Делаем мелкий текст в карточках чётче и чуть крупнее */
.project-desc{
  font-size: 11px !important;
  line-height: 1.65 !important;
  color: #c3c7d0 !important;
  opacity: 1 !important;
}

.project-case{
  gap: 8px !important;
  margin-top: 14px !important;
}

.project-case span{
  font-size: 10px !important;
  line-height: 1.58 !important;
  color: #d2d6de !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.project-case b{
  color: #f3f5fa !important;
}

/* Сканирующий блик оставляем, но делаем мягче, чтобы не "мыл" карточку визуально */
.project-card::before{
  opacity: 0 !important;
}

.project-card:hover::before{
  opacity: .55 !important;
}

/* Чуть более спокойный ховер без потери эффекта */
.project-card:hover{
  box-shadow:
    0 18px 44px rgba(0,0,0,.24),
    0 0 0 1px rgba(111,141,255,.08) inset !important;
}

/* На маленьких экранах ещё немного увеличим читаемость */
@media(max-width:720px){
  .project-desc{font-size: 12px !important;}
  .project-case span{font-size: 11px !important;}
}


/* ===== Site types block ===== */
.site-types{
  position:relative;
  padding:78px 0 86px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.site-types::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 84% 24%,rgba(89,118,214,.12),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.006),transparent 44%);
  pointer-events:none;
}
.types-copy{
  max-width:380px;
  font-size:12px;
  line-height:1.7;
}
.types-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:34px;
}
.type-card{
  position:relative;
  min-height:260px;
  padding:28px 26px 24px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,#111318,#0d0f13);
  overflow:hidden;
  transition:
    transform .4s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .4s ease,
    background .35s ease;
}
.type-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(240px circle at 85% 18%,rgba(111,141,255,.14),transparent 62%);
  opacity:0;
  transition:opacity .35s ease;
}
.type-card::after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:18px;
  height:18px;
  border-top:1px solid rgba(111,141,255,.5);
  border-right:1px solid rgba(111,141,255,.5);
  opacity:.2;
  transition:opacity .3s ease, transform .3s ease;
}
.type-card:hover{
  transform:translateY(-6px);
  border-color:rgba(111,141,255,.28);
  box-shadow:0 22px 54px rgba(0,0,0,.24);
}
.type-card:hover::before{opacity:1}
.type-card:hover::after{
  opacity:.8;
  transform:translate(3px,-3px);
}
.type-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.type-badge{
  min-width:36px;
  height:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(111,141,255,.22);
  background:rgba(111,141,255,.07);
  color:#9fb2ff;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
}
.type-card h3{
  font-family:var(--display);
  font-size:24px;
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.015em;
}
.type-lead{
  color:#d2d5dc;
  font-size:12px;
  line-height:1.7;
  max-width:560px;
}
.type-meta{
  display:grid;
  gap:9px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
}
.type-meta span{
  color:#aeb3bd;
  font-size:10px;
  line-height:1.65;
}
.type-meta b{
  color:#f1f4fb;
  font-weight:600;
}

@media(max-width:1000px){
  .types-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:720px){
  .type-card{
    min-height:auto;
    padding:22px 18px 20px;
  }
  .type-card h3{
    font-size:22px;
  }
  .type-lead{
    font-size:12px;
  }
  .type-meta span{
    font-size:11px;
  }
}


/* ===== Launch kit ===== */
.launch-kit{
  position:relative;
  padding:82px 0 88px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.launch-kit::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 14% 16%,rgba(111,141,255,.09),transparent 22%),
    linear-gradient(180deg,rgba(255,255,255,.004),transparent 50%);
  pointer-events:none;
}
.launch-copy{
  max-width:390px;
  font-size:12px;
  line-height:1.7;
}
.launch-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:34px;
}
.launch-card{
  position:relative;
  min-height:220px;
  padding:26px 24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#111318,#0d0f13);
  overflow:hidden;
  transition:transform .4s ease,border-color .35s ease,box-shadow .4s ease;
}
.launch-card::after{
  content:"";
  position:absolute;
  inset:auto -55px -70px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,141,255,.13),transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
}
.launch-card:hover{
  transform:translateY(-5px);
  border-color:rgba(111,141,255,.26);
  box-shadow:0 20px 48px rgba(0,0,0,.22);
}
.launch-card:hover::after{opacity:1}
.launch-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(111,141,255,.22);
  background:rgba(111,141,255,.06);
  color:#9cb1ff;
  font-size:15px;
  margin-bottom:26px;
}
.launch-card h3{
  font-family:var(--display);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.015em;
  margin-bottom:11px;
}
.launch-card p{
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

/* ===== FAQ ===== */
.faq{
  position:relative;
  padding:88px 0 94px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.faq::before{
  content:"FAQ";
  position:absolute;
  right:-18px;
  top:-40px;
  font-family:var(--display);
  font-size:180px;
  font-weight:700;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.018);
  pointer-events:none;
}
.faq-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:70px;
  align-items:start;
}
.faq-heading{
  position:sticky;
  top:90px;
}
.faq-copy{
  margin-top:18px;
  max-width:300px;
  font-size:12px;
  line-height:1.7;
}
.faq-list{
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-question{
  width:100%;
  min-height:82px;
  padding:0;
  border:0;
  background:transparent;
  color:#e7e9ee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  text-align:left;
  cursor:pointer;
}
.faq-question span:first-child{
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.015em;
}
.faq-plus{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  color:#8fa8ff;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.faq-item.open .faq-plus{
  transform:rotate(45deg);
  border-color:rgba(111,141,255,.42);
  background:rgba(111,141,255,.07);
}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1);
}
.faq-answer > p{
  overflow:hidden;
  color:#9ca1ab;
  font-size:11px;
  line-height:1.75;
  max-width:680px;
  padding-right:56px;
}
.faq-item.open .faq-answer{
  grid-template-rows:1fr;
}
.faq-item.open .faq-answer > p{
  padding-bottom:26px;
}

@media(max-width:1000px){
  .launch-grid{grid-template-columns:repeat(2,1fr)}
  .faq-layout{grid-template-columns:1fr;gap:32px}
  .faq-heading{position:relative;top:auto}
}
@media(max-width:720px){
  .launch-grid{grid-template-columns:1fr}
  .launch-card{min-height:auto}
  .faq-question{min-height:74px}
  .faq-question span:first-child{font-size:16px}
  .faq-answer > p{padding-right:18px}
  .faq::before{font-size:100px;top:10px}
}


/* ===== FAQ Bento Redesign ===== */
.faq-bento{
  padding:88px 0 96px;
}
.faq-bento::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 16%, rgba(94,123,220,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.004), transparent 46%);
  pointer-events:none;
}
.faq-copy-wide{
  max-width:390px;
  font-size:12px;
  line-height:1.7;
}
.faq-bento-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:34px;
}
.faq-card{
  position:relative;
  min-height:220px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, #111318, #0d0f13);
  overflow:hidden;
  transition:
    transform .35s ease,
    border-color .3s ease,
    box-shadow .35s ease;
}
.faq-card-wide{
  grid-column:span 2;
}
.faq-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-60px;
  bottom:-70px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,141,255,.12),transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.faq-card:hover{
  transform:translateY(-4px);
  border-color:rgba(111,141,255,.26);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.faq-card:hover::after{opacity:1}

.faq-card-button{
  position:relative;
  z-index:2;
  width:100%;
  min-height:220px;
  padding:24px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.faq-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.faq-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(111,141,255,.22);
  background:rgba(111,141,255,.055);
  color:#9eb2ff;
  font-size:14px;
}
.faq-card-title{
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.015em;
}
.faq-card-short{
  max-width:480px;
  color:#c7cbd3;
  font-size:11px;
  line-height:1.7;
}
.faq-card-more{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:
    grid-template-rows .35s cubic-bezier(.2,.7,.2,1),
    opacity .3s ease,
    margin .35s ease;
}
.faq-card-more p{
  overflow:hidden;
  color:#9ca1ab;
  font-size:10px;
  line-height:1.7;
}
.faq-card.open .faq-card-more{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:14px;
}
.faq-card-action{
  margin-top:auto;
  padding-top:22px;
  color:#7f9cff;
  font-size:9px;
  letter-spacing:.04em;
}
.faq-card.open .faq-card-action{
  color:#b5c4ff;
}

@media(max-width:1000px){
  .faq-bento-grid{grid-template-columns:repeat(2,1fr)}
  .faq-card-wide{grid-column:span 1}
}
@media(max-width:720px){
  .faq-bento-grid{grid-template-columns:1fr}
  .faq-card{min-height:auto}
  .faq-card-button{min-height:200px}
  .faq-card-title{font-size:17px}
  .faq-card-short{font-size:11px}
  .faq-card-more p{font-size:11px}
}


/* Email form states */
.form .btn:disabled{
  opacity:.65;
  cursor:wait;
  transform:none !important;
}
.form-message{
  margin-top:12px;
  min-height:18px;
  color:#9fb3ff;
  font-size:11px;
  line-height:1.5;
}


/* =========================================================
   EGRAVO — MOBILE ADAPTATION
   ========================================================= */

@media (max-width: 820px){

  html{
    scroll-padding-top:72px;
  }

  body{
    overflow-x:hidden;
  }

  .page{
    margin-left:0 !important;
  }

  .sidebar{
    display:none !important;
  }

  .container{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin:0 auto;
  }

  /* ---------- Mobile header ---------- */

  .mobile-header{
    display:flex !important;
    height:62px;
    padding:0 14px;
    background:rgba(7,8,11,.90);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .mobile-brand{
    font-size:19px !important;
    letter-spacing:.01em !important;
    max-width:64%;
  }

  .menu-button{
    display:block !important;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:6px;
    background:rgba(255,255,255,.025);
    color:#fff;
    line-height:1;
  }

  .mobile-menu{
    inset:62px 0 auto 0 !important;
    padding:10px 14px 14px;
    background:rgba(8,9,12,.97);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .mobile-menu.open{
    display:grid !important;
  }

  .mobile-menu a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:0 4px !important;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  /* ---------- Hero ---------- */

  .hero{
    min-height:auto !important;
    padding-top:62px !important;
    align-items:flex-start !important;
  }

  .hero-content{
    padding:72px 0 64px !important;
    max-width:100% !important;
  }

  .hero-badge{
    font-size:8px !important;
    letter-spacing:.09em !important;
    margin-bottom:24px !important;
  }

  h1{
    font-size:clamp(37px, 11vw, 54px) !important;
    line-height:.97 !important;
    letter-spacing:-.03em !important;
    max-width:100% !important;
    overflow-wrap:normal;
  }

  .hero-description{
    margin-top:24px !important;
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.65 !important;
  }

  .hero-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:28px !important;
  }

  .hero-actions .btn{
    width:100%;
    min-height:52px;
  }

  .hero-rock{
    right:-170px !important;
    bottom:-95px !important;
    width:430px !important;
    height:300px !important;
    opacity:.18 !important;
  }

  .hero-orb{
    width:94px !important;
    height:94px !important;
    right:-28px !important;
    top:24% !important;
    opacity:.32 !important;
  }

  .hero-signal{
    width:78vw !important;
    bottom:16px !important;
  }

  .hero .container::before{
    background-size:42px 42px !important;
    opacity:.10 !important;
  }

  .hero-content::before{
    display:none !important;
  }

  /* ---------- Common section spacing ---------- */

  .projects,
  .services,
  .process,
  .trust,
  .about,
  .principles,
  .before-after,
  .site-types,
  .launch-kit,
  .faq{
    padding:58px 0 62px !important;
  }

  .section-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-bottom:24px !important;
  }

  .section-title{
    font-size:clamp(29px, 8.8vw, 40px) !important;
    line-height:1.03 !important;
    max-width:100% !important;
  }

  .eyebrow{
    font-size:8px !important;
    margin-bottom:9px !important;
  }

  .types-copy,
  .principles-copy,
  .before-copy,
  .launch-copy,
  .faq-copy-wide,
  .process-copy{
    max-width:100% !important;
    font-size:12px !important;
    line-height:1.65 !important;
  }

  /* ---------- Site format cards ---------- */

  .types-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:22px !important;
  }

  .type-card{
    min-height:auto !important;
    padding:21px 18px !important;
  }

  .type-top{
    gap:11px !important;
    margin-bottom:14px !important;
  }

  .type-badge{
    min-width:32px !important;
    height:32px !important;
  }

  .type-card h3{
    font-size:20px !important;
  }

  .type-lead{
    font-size:12px !important;
  }

  .type-meta{
    margin-top:15px !important;
    padding-top:14px !important;
  }

  .type-meta span{
    font-size:11px !important;
  }

  /* ---------- Services ---------- */

  .services-layout{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:22px !important;
  }

  .service-feature{
    min-height:285px !important;
    padding:22px !important;
  }

  .service-feature h3{
    max-width:88% !important;
    font-size:25px !important;
  }

  .service-feature p{
    max-width:88% !important;
    font-size:11px !important;
  }

  .service-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .service-card{
    min-height:auto !important;
    padding:20px !important;
  }

  /* ---------- Principles ---------- */

  .principles-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .principle-card{
    min-height:auto !important;
    padding:22px 19px !important;
  }

  .principle-card h3{
    font-size:19px !important;
  }


  /* ---------- Process ---------- */

  .process-grid{
    grid-template-columns:1fr !important;
  }

  .step{
    min-height:auto !important;
    padding:22px 20px !important;
  }

  .step h4{
    font-size:20px !important;
  }

  /* ---------- Launch kit ---------- */

  .launch-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .launch-card{
    min-height:auto !important;
    padding:21px 19px !important;
  }

  .launch-icon{
    margin-bottom:18px !important;
  }

  .launch-card h3{
    font-size:19px !important;
  }

  /* ---------- About ---------- */

  .about-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .about-card{
    padding:20px !important;
  }

  .about-stats{
    grid-template-columns:1fr !important;
    margin-top:20px !important;
  }

  .about-stats>div{
    min-height:auto !important;
  }

  /* ---------- Trust ---------- */

  .trust-inner{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .stats{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }

  .stat{
    min-height:120px;
    border-right:0 !important;
    border-bottom:1px solid var(--line);
  }

  .review{
    min-height:auto !important;
    padding:22px !important;
  }

  .review p{
    font-size:18px !important;
  }

  /* ---------- FAQ Bento ---------- */

  .faq-bento-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:22px !important;
  }

  .faq-card,
  .faq-card-wide{
    grid-column:auto !important;
    min-height:auto !important;
  }

  .faq-card-button{
    min-height:190px !important;
    padding:20px !important;
  }

  .faq-card-head{
    margin-bottom:18px !important;
  }

  .faq-card-title{
    font-size:16px !important;
  }

  .faq-card-short{
    font-size:11px !important;
    line-height:1.65 !important;
  }

  .faq-card-more p{
    font-size:11px !important;
  }

  /* ---------- Contact ---------- */

  .contact{
    min-height:auto !important;
    padding:64px 0 42px !important;
  }

  .contact-inner{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .contact-copy h2{
    font-size:clamp(34px, 10vw, 46px) !important;
    max-width:100% !important;
  }

  .contact-copy p{
    max-width:100% !important;
    font-size:12px !important;
  }

  .socials{
    margin-top:22px !important;
  }

  .form{
    padding:18px !important;
  }

  .form-row{
    grid-template-columns:1fr !important;
  }

  .field{
    min-height:48px;
    padding:14px !important;
    font-size:16px !important; /* prevents iOS zoom */
  }

  textarea.field{
    min-height:120px !important;
  }

  .form .btn{
    width:100%;
    min-height:52px;
  }

  /* ---------- Marquee + footer ---------- */

  .signature-strip{
    padding:12px 0 !important;
  }

  .signature-track span{
    font-size:9px !important;
  }

  .footer{
    padding:24px 0 !important;
  }

  .footer-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  /* ---------- Disable desktop-only hover effects ---------- */

  .type-card:hover,
  .service-card:hover,
  .service-feature:hover,
  .principle-card:hover,
  .step:hover,
  .launch-card:hover,
  .about-card:hover,
  .review:hover,
  .stat:hover,
  .faq-card:hover{
    transform:none !important;
    box-shadow:none !important;
  }

  /* ---------- Scroll rail ---------- */

  .scroll-progress{
    left:0 !important;
    z-index:150 !important;
  }

  /* ---------- Keep animations lighter on mobile ---------- */

  .reveal{
    transform:translateY(14px) !important;
    filter:none !important;
  }

  .reveal.visible{
    transform:translateY(0) !important;
  }
}

/* Small phones */
@media (max-width: 390px){
  .container{
    width:calc(100% - 22px) !important;
  }

  h1{
    font-size:35px !important;
  }

  .section-title{
    font-size:28px !important;
  }

  .contact-copy h2{
    font-size:32px !important;
  }

  .hero-content{
    padding-top:60px !important;
  }

  .btn{
    padding:0 16px !important;
    font-size:11px !important;
  }
}


/* =========================================================
   EGRAVO — HARMONIC WOW EDITION
   ========================================================= */

:root{
  --mx:70%;
  --my:30%;
}

/* global ambient light that follows mouse on desktop */
.ambient-glow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.62;
  background:
    radial-gradient(
      460px circle at var(--mx) var(--my),
      rgba(99,130,255,.09),
      rgba(91,112,190,.035) 42%,
      transparent 72%
    );
  mix-blend-mode:screen;
  transition:opacity .35s ease;
}

/* a tiny signal showing current reading position */
.section-signal{
  position:fixed;
  right:22px;
  top:50%;
  width:1px;
  height:110px;
  transform:translateY(-50%);
  background:linear-gradient(180deg,transparent,rgba(127,153,255,.34),transparent);
  z-index:90;
  pointer-events:none;
}
.section-signal::after{
  content:"";
  position:absolute;
  left:-2px;
  top:var(--signal-pos,0%);
  width:5px;
  height:22px;
  border-radius:99px;
  background:#87a1ff;
  box-shadow:0 0 14px rgba(111,141,255,.72);
  transform:translateY(-50%);
  transition:top .15s linear;
}

/* cinematic hero light */
.hero-arc{
  position:absolute;
  right:4%;
  top:11%;
  width:420px;
  height:420px;
  border-radius:50%;
  border:1px solid rgba(128,151,225,.10);
  box-shadow:
    0 0 0 54px rgba(94,121,212,.018),
    0 0 0 108px rgba(94,121,212,.009);
  opacity:.75;
  animation:arcBreath 6.8s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}

.hero-beam{
  position:absolute;
  right:4%;
  top:8%;
  width:50%;
  height:72%;
  background:
    linear-gradient(120deg,
      transparent 22%,
      rgba(130,153,255,.035) 46%,
      rgba(255,255,255,.018) 51%,
      transparent 68%);
  transform:skewX(-12deg);
  filter:blur(.2px);
  animation:beamShift 8s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}

@keyframes arcBreath{
  0%,100%{transform:scale(.98);opacity:.52}
  50%{transform:scale(1.04);opacity:.82}
}

@keyframes beamShift{
  0%,100%{transform:translateX(-2%) skewX(-12deg);opacity:.4}
  50%{transform:translateX(5%) skewX(-12deg);opacity:.82}
}

/* headings get a very subtle chromatic edge */
h1,
.section-title,
.contact-copy h2{
  text-shadow:
    0 0 18px rgba(91,118,220,.06),
    1px 0 0 rgba(100,140,255,.035),
    -1px 0 0 rgba(147,105,255,.028);
}

/* reveal with depth instead of blur */
.reveal{
  opacity:0;
  transform:translateY(22px);
  filter:none !important;
  transition:
    opacity .72s ease,
    transform .78s cubic-bezier(.2,.72,.2,1) !important;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* stagger cards more elegantly */
.types-grid .reveal:nth-child(2),
.service-grid .reveal:nth-child(2),
.principles-grid .reveal:nth-child(2),
.launch-grid .reveal:nth-child(2),
.faq-bento-grid .reveal:nth-child(2){transition-delay:.055s}

.types-grid .reveal:nth-child(3),
.service-grid .reveal:nth-child(3),
.principles-grid .reveal:nth-child(3),
.launch-grid .reveal:nth-child(3),
.faq-bento-grid .reveal:nth-child(3){transition-delay:.11s}

.types-grid .reveal:nth-child(4),
.service-grid .reveal:nth-child(4),
.principles-grid .reveal:nth-child(4),
.launch-grid .reveal:nth-child(4),
.faq-bento-grid .reveal:nth-child(4){transition-delay:.165s}

.launch-grid .reveal:nth-child(5),
.faq-bento-grid .reveal:nth-child(5){transition-delay:.22s}

.launch-grid .reveal:nth-child(6){transition-delay:.275s}

/* editorial dividers between sections */
.egravo-divider{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#090a0c;
  border-top:1px solid rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.03);
}
.egravo-divider span{
  width:82px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,141,255,.18));
}
.egravo-divider span:last-child{
  background:linear-gradient(90deg,rgba(111,141,255,.18),transparent);
}
.egravo-divider i{
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6f8dff;
  box-shadow:0 0 12px rgba(111,141,255,.58);
}

/* refined hover glow for premium cards */
.type-card,
.service-card,
.service-feature,
.principle-card,
.step,
.launch-card,
.about-card,
.review,
.stat,
.faq-card{
  position:relative;
}

.type-card::before,
.service-card::before,
.principle-card::before,
.step::before,
.launch-card::before,
.faq-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      240px circle at var(--hx,70%) var(--hy,30%),
      rgba(111,141,255,.085),
      transparent 70%
    );
  opacity:0;
  transition:opacity .28s ease;
}

.type-card:hover::before,
.service-card:hover::before,
.principle-card:hover::before,
.step:hover::before,
.launch-card:hover::before,
.faq-card:hover::before{
  opacity:1;
}

/* CTA gets more immersive, no visible email */
.contact{
  background:
    radial-gradient(circle at 12% 58%,rgba(45,82,185,.22),transparent 24%),
    radial-gradient(circle at 82% 30%,rgba(108,92,190,.09),transparent 25%),
    linear-gradient(120deg,#08090c,#0a0d13) !important;
}
.contact::before{
  opacity:.38 !important;
}
.contact-copy{
  position:relative;
}
.contact-copy::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-28px;
  width:150px;
  height:1px;
  background:linear-gradient(90deg,#6f8dff,transparent);
  box-shadow:0 0 14px rgba(111,141,255,.22);
}

/* CTA buttons feel magnetic but not flashy */
.contact .btn-primary{
  box-shadow:
    0 12px 34px rgba(47,95,215,.28),
    0 0 0 1px rgba(255,255,255,.025) inset;
}
.contact .btn-primary:hover{
  box-shadow:
    0 16px 42px rgba(47,95,215,.36),
    0 0 28px rgba(111,141,255,.10) !important;
}

/* no email link visible in social area */
.socials a[href^="mailto:"]{
  display:none !important;
}

@media(max-width:820px){
  .ambient-glow{
    opacity:.28;
  }
  .section-signal{
    display:none;
  }
  .hero-arc{
    width:220px;
    height:220px;
    right:-85px;
    top:16%;
    opacity:.34;
  }
  .hero-beam{
    width:95%;
    right:-35%;
    opacity:.28;
  }
  .egravo-divider{
    height:20px;
  }
}

.cookie-notice{
  position:fixed;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:300;
  max-width:920px;
  margin:0 auto;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border:1px solid rgba(133,154,235,.2);
  border-radius:18px;
  background:rgba(12,14,20,.96);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);
}
.cookie-notice[hidden]{display:none}
.cookie-notice__text{max-width:610px}
.cookie-notice__text strong{display:block;margin-bottom:5px;color:#fff;font-size:14px}
.cookie-notice__text p{margin:0;color:#a8acb6;font-size:11px;line-height:1.55}
.cookie-notice__text a{color:#9eb2ff;text-decoration:underline;text-underline-offset:3px}
.cookie-notice__actions{display:flex;flex:0 0 auto;gap:9px}
.cookie-notice__button{min-height:40px;padding:0 15px;border-radius:11px;font:inherit;font-size:11px;cursor:pointer}
.cookie-notice__button--primary{border:1px solid #6688ff;background:#527cff;color:#fff}
.cookie-notice__button--secondary{border:1px solid rgba(255,255,255,.14);background:transparent;color:#d5d8e0}

@media(max-width:680px){
  .cookie-notice{left:10px;right:10px;bottom:10px;padding:16px;display:block}
  .cookie-notice__actions{margin-top:14px;display:grid;grid-template-columns:1fr 1fr}
  .cookie-notice__button{padding:0 10px}
}

@media(prefers-reduced-motion:reduce){
  .hero-arc,
  .hero-beam{
    animation:none !important;
  }
}


/* =========================================================
   EGRAVO — PROJECT MODE SWITCHER
   ========================================================= */

.project-mode{
  margin:28px 0 0;
  width:min(620px,100%);
  position:relative;
  z-index:3;
}

.project-mode__tabs{
  display:inline-grid;
  grid-template-columns:repeat(3,auto);
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(8,10,14,.58);
  box-shadow:
    0 14px 38px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(14px);
}

.project-mode__tab{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(228,234,255,.52);
  font-family:"Tektur",sans-serif;
  font-size:11px;
  letter-spacing:.13em;
  padding:10px 14px 9px;
  border-radius:10px;
  cursor:pointer;
  transition:
    color .24s ease,
    background .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

.project-mode__tab:hover{
  color:rgba(242,245,255,.84);
}

.project-mode__tab.is-active{
  color:#f4f7ff;
  background:linear-gradient(180deg,rgba(103,128,230,.19),rgba(85,105,183,.08));
  box-shadow:
    inset 0 0 0 1px rgba(132,155,255,.18),
    0 0 20px rgba(84,111,224,.08);
}

.project-mode__caption{
  margin-top:14px;
  display:flex;
  align-items:baseline;
  gap:10px;
  min-height:24px;
  color:rgba(223,229,247,.68);
}

.project-mode__label{
  flex:0 0 auto;
  font-family:"Tektur",sans-serif;
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#8ca3ff;
}

.project-mode__text{
  font-size:13px;
  line-height:1.55;
  transition:opacity .18s ease, transform .18s ease;
}

.project-mode.is-changing .project-mode__text,
.project-mode.is-changing .project-mode__label{
  opacity:.2;
  transform:translateY(3px);
}

/* mode-driven hero visuals */
.hero{
  --mode-grid-opacity:.18;
  --mode-beam-opacity:.58;
  --mode-arc-scale:1;
  --mode-glow-x:78%;
  --mode-glow-y:34%;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--mode-grid-opacity);
  background-image:
    linear-gradient(rgba(116,137,212,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,137,212,.10) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent 8%,#000 48%,transparent 94%);
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 48%,transparent 94%);
  transition:opacity .45s ease, background-size .45s ease;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(
      500px circle at var(--mode-glow-x) var(--mode-glow-y),
      rgba(100,127,236,.12),
      rgba(98,117,188,.045) 42%,
      transparent 75%
    );
  transition:background .5s ease;
}

.hero[data-project-mode="structure"]{
  --mode-grid-opacity:.25;
  --mode-beam-opacity:.36;
  --mode-arc-scale:.98;
  --mode-glow-x:80%;
  --mode-glow-y:32%;
}

.hero[data-project-mode="design"]{
  --mode-grid-opacity:.08;
  --mode-beam-opacity:.72;
  --mode-arc-scale:1.05;
  --mode-glow-x:72%;
  --mode-glow-y:28%;
}

.hero[data-project-mode="design"]::after{
  background-size:72px 72px;
}

.hero[data-project-mode="motion"]{
  --mode-grid-opacity:.13;
  --mode-beam-opacity:.86;
  --mode-arc-scale:1.08;
  --mode-glow-x:84%;
  --mode-glow-y:40%;
}

.hero[data-project-mode="motion"]::after{
  background-size:58px 58px;
  animation:projectGridDrift 8s linear infinite;
}

.hero[data-project-mode="motion"] .hero-arc{
  animation:projectArcMotion 3.8s ease-in-out infinite;
}

.hero[data-project-mode="design"] .hero-arc{
  filter:drop-shadow(0 0 30px rgba(107,127,232,.10));
}

.hero .hero-beam{
  opacity:var(--mode-beam-opacity);
}

.hero .hero-arc{
  transform:scale(var(--mode-arc-scale));
}

@keyframes projectGridDrift{
  from{background-position:0 0,0 0}
  to{background-position:58px 29px,29px 58px}
}

@keyframes projectArcMotion{
  0%,100%{transform:scale(1.02) rotate(0deg);opacity:.5}
  50%{transform:scale(1.10) rotate(4deg);opacity:.88}
}

@media(max-width:820px){
  .project-mode{
    margin-top:22px;
    width:100%;
  }

  .project-mode__tabs{
    width:100%;
    grid-template-columns:repeat(3,1fr);
  }

  .project-mode__tab{
    padding:10px 8px 9px;
    font-size:9px;
    letter-spacing:.08em;
  }

  .project-mode__caption{
    display:block;
    min-height:48px;
  }

  .project-mode__label{
    display:block;
    margin-bottom:4px;
  }

  .project-mode__text{
    display:block;
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero[data-project-mode="motion"]::after,
  .hero[data-project-mode="motion"] .hero-arc{
    animation:none !important;
  }
}


/* =========================================================
   PROJECT MODE V2 — unmistakable hero transformation
   ========================================================= */

.mode-visual{
  position:absolute;
  right:5%;
  top:50%;
  width:min(430px,34vw);
  aspect-ratio:1/1;
  transform:translateY(-50%);
  z-index:2;
  pointer-events:none;
}

.mode-visual__frame{
  position:absolute;
  inset:0;
  border:1px solid rgba(153,170,235,.10);
  border-radius:34px;
  background:
    linear-gradient(180deg,rgba(19,22,31,.52),rgba(8,10,15,.28));
  box-shadow:
    0 40px 100px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 80px rgba(77,102,201,.07);
  overflow:hidden;
  backdrop-filter:blur(18px);
}

.mode-visual__frame::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.035);
}

.mode-scene{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.94);
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.2,.75,.2,1);
}

.hero[data-project-mode="structure"] .mode-scene--structure,
.hero[data-project-mode="design"] .mode-scene--design,
.hero[data-project-mode="motion"] .mode-scene--motion{
  opacity:1;
  transform:scale(1);
}

/* STRUCTURE */
.mode-scene--structure{
  background:
    linear-gradient(rgba(107,132,225,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,132,225,.07) 1px,transparent 1px);
  background-size:34px 34px;
}

.mode-scene--structure::before,
.mode-scene--structure::after{
  content:"";
  position:absolute;
  left:11%;
  right:11%;
  border:1px solid rgba(125,150,244,.13);
  border-radius:16px;
}

.mode-scene--structure::before{
  top:15%;
  height:24%;
}
.mode-scene--structure::after{
  bottom:15%;
  height:38%;
}

.wire{
  position:absolute;
  display:block;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(118,145,255,.06),rgba(124,150,255,.65),rgba(118,145,255,.06));
  box-shadow:0 0 8px rgba(109,136,255,.18);
  animation:wirePulse 3.2s ease-in-out infinite;
}

.wire--a{left:23%;top:35%;width:48%;transform:rotate(21deg)}
.wire--b{left:34%;top:46%;width:34%;transform:rotate(-32deg);animation-delay:.5s}
.wire--c{left:22%;top:63%;width:51%;transform:rotate(-8deg);animation-delay:1s}
.wire--d{left:40%;top:25%;width:29%;transform:rotate(58deg);animation-delay:1.4s}

.node{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(150,170,255,.65);
  background:#0d111b;
  box-shadow:0 0 18px rgba(107,137,255,.40);
}
.node--1{left:21%;top:33%}
.node--2{left:65%;top:48%}
.node--3{left:38%;top:68%}
.node--4{left:69%;top:24%}

@keyframes wirePulse{
  0%,100%{opacity:.35}
  50%{opacity:.95}
}

/* DESIGN */
.mode-scene--design{
  background:
    radial-gradient(circle at 32% 30%,rgba(106,128,237,.24),transparent 27%),
    radial-gradient(circle at 70% 62%,rgba(155,100,232,.16),transparent 30%),
    linear-gradient(145deg,rgba(16,19,29,.7),rgba(8,9,14,.18));
}

.design-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(.2px);
  opacity:.85;
}

.design-orb--1{
  width:58%;
  aspect-ratio:1;
  left:8%;
  top:6%;
  background:
    conic-gradient(from 45deg,
      rgba(90,129,255,.15),
      rgba(155,104,245,.28),
      rgba(93,125,242,.07),
      rgba(90,129,255,.15));
  animation:designSpin 8s linear infinite;
}

.design-orb--2{
  width:42%;
  aspect-ratio:1;
  right:5%;
  bottom:3%;
  border:1px solid rgba(150,142,255,.17);
  box-shadow:
    inset 0 0 45px rgba(114,92,208,.10),
    0 0 50px rgba(92,120,231,.08);
  animation:designFloat 4.5s ease-in-out infinite;
}

.design-glass{
  position:absolute;
  left:18%;
  right:18%;
  top:32%;
  padding:22px 22px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 22px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}

.design-glass span{
  display:block;
  font-family:"Tektur",sans-serif;
  font-size:48px;
  line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(110deg,#fff,#8fb2ff 52%,#c392ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.design-glass b,
.design-glass small{
  display:block;
  margin-top:10px;
}
.design-glass b{
  color:#eaf0ff;
  font-size:11px;
  letter-spacing:.15em;
}
.design-glass small{
  color:rgba(222,228,247,.48);
  font-size:10px;
  letter-spacing:.05em;
}

@keyframes designSpin{
  to{transform:rotate(360deg)}
}
@keyframes designFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* MOTION */
.mode-scene--motion{
  background:
    radial-gradient(circle at 50% 50%,rgba(88,113,225,.12),transparent 26%),
    linear-gradient(145deg,rgba(12,14,21,.72),rgba(8,9,14,.24));
}

.orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(116,144,255,.18);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.orbit--1{
  width:62%; aspect-ratio:1;
  animation:orbitSpinA 5s linear infinite;
}
.orbit--2{
  width:44%; aspect-ratio:1;
  border-color:rgba(169,122,255,.16);
  animation:orbitSpinB 4s linear infinite reverse;
}
.orbit--3{
  width:78%; aspect-ratio:1;
  border-style:dashed;
  border-color:rgba(255,255,255,.07);
  animation:orbitSpinA 10s linear infinite;
}

.pulse-core{
  position:absolute;
  left:50%;
  top:50%;
  width:54px;
  height:54px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#dce7ff 0 8%,#7596ff 9% 26%,rgba(101,130,238,.14) 27% 58%,transparent 60%);
  box-shadow:0 0 46px rgba(106,139,255,.35);
  animation:corePulse 2.2s ease-in-out infinite;
}

.motion-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9fb8ff;
  box-shadow:0 0 18px rgba(109,140,255,.65);
}
.motion-dot--1{left:25%;top:31%;animation:dotFloat 2.7s ease-in-out infinite}
.motion-dot--2{right:24%;top:39%;animation:dotFloat 3.2s ease-in-out infinite .4s}
.motion-dot--3{left:43%;bottom:19%;animation:dotFloat 2.4s ease-in-out infinite .8s}

@keyframes orbitSpinA{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes orbitSpinB{
  from{transform:translate(-50%,-50%) rotate(18deg) scaleY(.72)}
  to{transform:translate(-50%,-50%) rotate(378deg) scaleY(.72)}
}
@keyframes corePulse{
  0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.74}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
}
@keyframes dotFloat{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(-12px);opacity:1}
}




@media(max-width:1100px){
  .mode-visual{
    width:330px;
    right:2%;
    opacity:.86;
  }
}

@media(max-width:820px){
  .mode-visual{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    max-width:360px;
    margin:28px auto 46px;
    transform:none;
  }
}


/* =========================================================
   EGRAVO — PROCESS EXPERIENCE
   ========================================================= */

.process-experience{
  position:relative;
  overflow:hidden;
}

.process-experience::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  right:-230px;
  top:26%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(93,119,226,.09),transparent 68%);
  pointer-events:none;
}

.process-experience__layout{
  margin-top:44px;
  display:grid;
  grid-template-columns:minmax(300px,.86fr) minmax(420px,1.14fr);
  gap:54px;
  align-items:center;
}

.process-experience__steps{
  position:relative;
  display:grid;
  gap:6px;
}

.process-experience__steps::before{
  content:"";
  position:absolute;
  left:10px;
  top:20px;
  bottom:20px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(119,145,240,.28),transparent);
}

.process-stage{
  appearance:none;
  width:100%;
  border:0;
  padding:16px 18px 16px 34px;
  background:transparent;
  color:inherit;
  text-align:left;
  display:flex;
  align-items:flex-start;
  gap:14px;
  position:relative;
  cursor:pointer;
  border-radius:16px;
  transition:
    background .28s ease,
    transform .28s ease,
    box-shadow .28s ease;
}

.process-stage:hover,
.process-stage.is-active{
  background:linear-gradient(90deg,rgba(99,126,225,.09),rgba(99,126,225,.018));
  transform:translateX(4px);
  box-shadow:inset 0 0 0 1px rgba(130,152,235,.07);
}

.process-stage__mark{
  position:absolute;
  left:5px;
  top:25px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#0b0d12;
  border:1px solid rgba(139,159,235,.40);
  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.process-stage.is-active .process-stage__mark{
  background:#8aa3ff;
  box-shadow:0 0 16px rgba(112,142,255,.68);
  transform:scale(1.12);
}

.process-stage__body strong{
  display:block;
  font-family:"Tektur",sans-serif;
  font-size:17px;
  letter-spacing:.01em;
  color:rgba(243,246,255,.72);
  transition:color .25s ease;
}

.process-stage.is-active .process-stage__body strong{
  color:#f7f9ff;
}

.process-stage__body small{
  display:block;
  margin-top:5px;
  max-width:390px;
  font-size:12px;
  line-height:1.55;
  color:rgba(203,211,235,.43);
}

.process-orbit{
  min-height:520px;
  position:relative;
  border-radius:32px;
  border:1px solid rgba(135,155,230,.10);
  background:
    radial-gradient(circle at 50% 47%,rgba(89,117,225,.11),transparent 26%),
    linear-gradient(145deg,rgba(16,18,26,.74),rgba(8,9,13,.34));
  box-shadow:
    0 35px 100px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
  isolation:isolate;
}

.process-orbit::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(128,145,203,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,145,203,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 50%,#000 0 42%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 42%,transparent 78%);
  opacity:.62;
}

.process-orbit__halo{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px solid rgba(119,145,240,.13);
  transform:translate(-50%,-50%);
  transition:
    width .5s ease,
    opacity .5s ease,
    border-color .5s ease;
}

.process-orbit__halo--outer{
  width:76%;
  aspect-ratio:1;
  animation:processOrbitA 14s linear infinite;
}

.process-orbit__halo--mid{
  width:57%;
  aspect-ratio:1;
  border-style:dashed;
  border-color:rgba(163,126,238,.13);
  animation:processOrbitB 10s linear infinite reverse;
}

.process-orbit__halo--inner{
  width:38%;
  aspect-ratio:1;
  border-color:rgba(255,255,255,.06);
  animation:processPulse 3.2s ease-in-out infinite;
}

.process-orbit__core{
  position:absolute;
  left:50%;
  top:50%;
  width:min(330px,72%);
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:3;
  transition:opacity .18s ease, transform .18s ease;
}

.process-orbit.is-changing .process-orbit__core{
  opacity:.18;
  transform:translate(-50%,-47%);
}

.process-orbit__eyebrow{
  display:block;
  font-family:"Tektur",sans-serif;
  font-size:9px;
  letter-spacing:.17em;
  color:#819cff;
  margin-bottom:16px;
}

.process-orbit__title{
  display:block;
  font-family:"Tektur",sans-serif;
  font-size:clamp(24px,2.4vw,38px);
  letter-spacing:-.025em;
  color:#f4f7ff;
  text-shadow:0 0 26px rgba(112,140,244,.12);
}

.process-orbit__text{
  margin:14px auto 0;
  max-width:300px;
  font-size:12px;
  line-height:1.65;
  color:rgba(214,221,241,.54);
}

.process-orbit__signal{
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:11px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:#91a8ff;
  box-shadow:
    0 0 16px rgba(113,143,255,.78),
    0 0 42px rgba(104,135,255,.24);
  transform-origin:5px 5px;
  animation:processSignal 6s linear infinite;
  z-index:4;
}

.process-orbit__dot{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(155,174,255,.78);
  box-shadow:0 0 14px rgba(109,140,255,.44);
  z-index:2;
}

.process-orbit__dot--a{left:21%;top:32%;animation:dotBreathe 2.7s ease-in-out infinite}
.process-orbit__dot--b{right:19%;top:40%;animation:dotBreathe 3.1s ease-in-out infinite .6s}
.process-orbit__dot--c{left:43%;bottom:18%;animation:dotBreathe 2.4s ease-in-out infinite 1.1s}

.process-orbit[data-active-stage="structure"]{
  background:
    radial-gradient(circle at 50% 47%,rgba(90,129,235,.15),transparent 28%),
    linear-gradient(145deg,rgba(14,19,29,.8),rgba(7,9,14,.34));
}

.process-orbit[data-active-stage="design"]{
  background:
    radial-gradient(circle at 38% 38%,rgba(105,122,240,.18),transparent 28%),
    radial-gradient(circle at 67% 63%,rgba(155,96,225,.12),transparent 30%),
    linear-gradient(145deg,rgba(16,17,29,.82),rgba(8,9,14,.32));
}

.process-orbit[data-active-stage="build"] .process-orbit__halo--outer,
.process-orbit[data-active-stage="test"] .process-orbit__halo--mid{
  border-color:rgba(123,171,255,.22);
}

.process-orbit[data-active-stage="launch"]{
  background:
    radial-gradient(circle at 50% 48%,rgba(117,149,255,.20),transparent 25%),
    linear-gradient(145deg,rgba(14,18,29,.86),rgba(8,9,14,.30));
}

.process-orbit[data-active-stage="launch"] .process-orbit__signal{
  box-shadow:
    0 0 20px rgba(130,157,255,.92),
    0 0 68px rgba(108,136,255,.42);
}

@keyframes processOrbitA{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes processOrbitB{
  from{transform:translate(-50%,-50%) rotate(15deg) scaleY(.76)}
  to{transform:translate(-50%,-50%) rotate(375deg) scaleY(.76)}
}

@keyframes processPulse{
  0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:.74;transform:translate(-50%,-50%) scale(1.06)}
}

@keyframes processSignal{
  from{transform:rotate(0deg) translateX(175px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(175px) rotate(-360deg)}
}

@keyframes dotBreathe{
  0%,100%{opacity:.32;transform:scale(.86)}
  50%{opacity:1;transform:scale(1.15)}
}

@media(max-width:980px){
  .process-experience__layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .process-orbit{
    min-height:440px;
  }
}

@media(max-width:620px){
  .process-copy{
    display:none;
  }

  .process-experience__layout{
    margin-top:26px;
  }

  .process-stage{
    padding:13px 12px 13px 30px;
  }

  .process-stage__body strong{
    font-size:15px;
  }

  .process-stage__body small{
    font-size:11px;
  }

  .process-orbit{
    min-height:350px;
    border-radius:24px;
  }

  .process-orbit__title{
    font-size:24px;
  }

  .process-orbit__text{
    font-size:11px;
  }

  @keyframes processSignal{
    from{transform:rotate(0deg) translateX(115px) rotate(0deg)}
    to{transform:rotate(360deg) translateX(115px) rotate(-360deg)}
  }
}

@media(prefers-reduced-motion:reduce){
  .process-orbit__halo,
  .process-orbit__signal,
  .process-orbit__dot{
    animation:none !important;
  }
}


/* =========================================================
   EGRAVO — FINAL PROJECT SIGNAL
   ========================================================= */

.project-signal-section{
  position:relative;
  padding:110px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 48%,rgba(80,108,212,.08),transparent 31%),
    #090a0d;
}

.project-signal-section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(118,143,234,.12),transparent);
}

.project-signal{
  position:relative;
  min-height:610px;
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(430px,1.18fr);
  gap:54px;
  align-items:center;
  padding:62px;
  border-radius:36px;
  border:1px solid rgba(129,150,229,.10);
  background:
    linear-gradient(145deg,rgba(16,18,27,.78),rgba(8,9,13,.54));
  box-shadow:
    0 36px 110px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
  isolation:isolate;
}

.project-signal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px circle at var(--signal-x,76%) var(--signal-y,42%),
    rgba(101,129,237,.095),transparent 70%);
  transition:background .3s ease;
  z-index:0;
}

.project-signal__copy{
  position:relative;
  z-index:3;
}

.project-signal__copy .section-title{
  margin-top:10px;
}

.project-signal__copy > .muted{
  max-width:470px;
  margin-top:18px;
}

.project-signal__choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.project-signal__choice{
  appearance:none;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  padding:9px 13px 8px;
  background:rgba(255,255,255,.018);
  color:rgba(226,232,249,.52);
  font-family:"Tektur",sans-serif;
  font-size:10px;
  letter-spacing:.08em;
  cursor:pointer;
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.project-signal__choice:hover{
  color:#eef2ff;
  transform:translateY(-1px);
}

.project-signal__choice.is-active{
  color:#f5f7ff;
  border-color:rgba(130,154,245,.25);
  background:rgba(93,119,223,.10);
  box-shadow:0 0 22px rgba(87,116,225,.08);
}

.project-signal__message{
  min-height:118px;
  margin-top:26px;
  padding-left:18px;
  border-left:1px solid rgba(117,143,238,.28);
  transition:opacity .18s ease, transform .18s ease;
}

.project-signal.is-changing .project-signal__message{
  opacity:.16;
  transform:translateY(5px);
}

.project-signal__message span{
  display:block;
  font-family:"Tektur",sans-serif;
  font-size:9px;
  letter-spacing:.15em;
  color:#819cff;
}

.project-signal__message strong{
  display:block;
  margin-top:9px;
  font-family:"Tektur",sans-serif;
  font-size:20px;
  color:#f2f5ff;
}

.project-signal__message p{
  max-width:420px;
  margin-top:8px;
  color:rgba(208,216,238,.50);
  font-size:12px;
  line-height:1.65;
}

.project-signal__cta{
  margin-top:12px;
}

/* visual field */
.signal-field{
  position:relative;
  width:min(510px,100%);
  aspect-ratio:1/1;
  margin-left:auto;
  border-radius:50%;
  transform:translateZ(0);
}

.signal-field::before,
.signal-field::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.signal-field::before{
  inset:6%;
  background:
    radial-gradient(circle at 50% 50%,rgba(105,135,248,.11),transparent 48%),
    conic-gradient(from 0deg,
      transparent,
      rgba(118,143,238,.08),
      transparent 27%,
      rgba(157,111,225,.06),
      transparent 54%,
      rgba(118,143,238,.08),
      transparent);
  filter:blur(.3px);
  animation:signalAtmosphere 14s linear infinite;
}

.signal-field::after{
  inset:16%;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:
    0 0 80px rgba(90,121,235,.08),
    inset 0 0 60px rgba(96,122,228,.045);
}

.signal-field__grid{
  position:absolute;
  inset:4%;
  border-radius:50%;
  overflow:hidden;
  opacity:.54;
  background-image:
    linear-gradient(rgba(113,135,204,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(113,135,204,.055) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(circle,#000 0 58%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle,#000 0 58%,transparent 78%);
}

.signal-field__ring{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:
    width .55s ease,
    height .55s ease,
    opacity .55s ease,
    border-color .55s ease,
    transform .55s ease;
}

.signal-field__ring--outer{
  width:88%;
  height:88%;
  border:1px solid rgba(124,149,244,.12);
  animation:signalRingOuter 18s linear infinite;
}

.signal-field__ring--middle{
  width:66%;
  height:66%;
  border:1px dashed rgba(157,124,230,.13);
  animation:signalRingMiddle 12s linear infinite reverse;
}

.signal-field__ring--inner{
  width:43%;
  height:43%;
  border:1px solid rgba(255,255,255,.065);
  animation:signalRingPulse 3.8s ease-in-out infinite;
}

.signal-core{
  position:absolute;
  left:50%;
  top:50%;
  width:142px;
  height:142px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(140,160,240,.13);
  background:
    radial-gradient(circle,rgba(121,149,255,.13),rgba(15,19,30,.76) 58%,rgba(8,10,15,.56));
  box-shadow:
    0 0 44px rgba(98,130,244,.12),
    inset 0 0 32px rgba(105,130,226,.05);
  z-index:4;
}

.signal-core strong{
  position:relative;
  z-index:2;
  font-family:"Tektur",sans-serif;
  font-size:34px;
  letter-spacing:-.04em;
  color:#f6f8ff;
  text-shadow:0 0 25px rgba(128,153,255,.22);
}

.signal-core small{
  position:relative;
  z-index:2;
  margin-top:5px;
  font-family:"Tektur",sans-serif;
  font-size:7px;
  letter-spacing:.15em;
  color:rgba(193,205,239,.45);
}

.signal-core__pulse{
  position:absolute;
  inset:17%;
  border-radius:50%;
  border:1px solid rgba(127,151,244,.14);
  animation:signalCorePulse 2.6s ease-out infinite;
}

.signal-node{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#8ea7ff;
  box-shadow:
    0 0 15px rgba(112,141,255,.72),
    0 0 30px rgba(112,141,255,.18);
  z-index:3;
  transition:
    left .55s cubic-bezier(.2,.75,.2,1),
    top .55s cubic-bezier(.2,.75,.2,1),
    right .55s cubic-bezier(.2,.75,.2,1),
    bottom .55s cubic-bezier(.2,.75,.2,1),
    transform .55s ease;
}

.signal-node--1{left:14%;top:43%}
.signal-node--2{left:31%;top:17%}
.signal-node--3{right:18%;top:28%}
.signal-node--4{right:24%;bottom:18%}
.signal-node--5{left:29%;bottom:16%}

.signal-sweep{
  position:absolute;
  left:50%;
  top:50%;
  width:44%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(135,160,255,.66),transparent);
  box-shadow:0 0 12px rgba(103,135,255,.25);
  animation:signalSweep 6.6s linear infinite;
  z-index:2;
}

/* signal states */
.project-signal[data-signal="trust"] .signal-field__ring--outer{
  transform:translate(-50%,-50%) scaleY(.76) rotate(18deg);
  border-color:rgba(111,164,245,.16);
}
.project-signal[data-signal="trust"] .signal-node--1{left:20%;top:29%}
.project-signal[data-signal="trust"] .signal-node--2{left:44%;top:11%}
.project-signal[data-signal="trust"] .signal-node--3{right:16%;top:44%}
.project-signal[data-signal="trust"] .signal-node--4{right:34%;bottom:12%}
.project-signal[data-signal="trust"] .signal-node--5{left:18%;bottom:27%}

.project-signal[data-signal="action"] .signal-field__ring--middle{
  width:54%;
  height:78%;
  border-color:rgba(124,159,255,.20);
}
.project-signal[data-signal="action"] .signal-node--1{left:12%;top:51%}
.project-signal[data-signal="action"] .signal-node--2{left:39%;top:9%}
.project-signal[data-signal="action"] .signal-node--3{right:11%;top:43%}
.project-signal[data-signal="action"] .signal-node--4{right:35%;bottom:8%}
.project-signal[data-signal="action"] .signal-node--5{left:24%;bottom:25%}

.project-signal[data-signal="renew"] .signal-field__ring--outer{
  width:78%;
  height:92%;
  border-color:rgba(169,124,235,.15);
}
.project-signal[data-signal="renew"] .signal-field__ring--middle{
  transform:translate(-50%,-50%) scaleY(.70) rotate(-26deg);
}
.project-signal[data-signal="renew"] .signal-node--1{left:18%;top:36%}
.project-signal[data-signal="renew"] .signal-node--2{left:36%;top:13%}
.project-signal[data-signal="renew"] .signal-node--3{right:15%;top:31%}
.project-signal[data-signal="renew"] .signal-node--4{right:19%;bottom:25%}
.project-signal[data-signal="renew"] .signal-node--5{left:36%;bottom:10%}

@keyframes signalAtmosphere{
  to{transform:rotate(360deg)}
}

@keyframes signalRingOuter{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes signalRingMiddle{
  from{transform:translate(-50%,-50%) rotate(16deg) scaleY(.78)}
  to{transform:translate(-50%,-50%) rotate(376deg) scaleY(.78)}
}

@keyframes signalRingPulse{
  0%,100%{opacity:.36;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}
}

@keyframes signalCorePulse{
  0%{transform:scale(.82);opacity:.65}
  90%,100%{transform:scale(1.55);opacity:0}
}

@keyframes signalSweep{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@media(max-width:980px){
  .project-signal{
    grid-template-columns:1fr;
    padding:46px;
  }

  .signal-field{
    margin:10px auto 0;
    max-width:470px;
  }
}

@media(max-width:620px){
  .project-signal-section{
    padding:72px 0;
  }

  .project-signal{
    min-height:0;
    padding:26px 20px 34px;
    border-radius:26px;
    gap:28px;
  }

  .project-signal__choices{
    margin-top:22px;
  }

  .project-signal__choice{
    font-size:9px;
    padding:8px 11px 7px;
  }

  .project-signal__message{
    min-height:126px;
  }

  .project-signal__message strong{
    font-size:17px;
  }

  .signal-field{
    width:min(330px,100%);
  }

  .signal-core{
    width:108px;
    height:108px;
  }

  .signal-core strong{
    font-size:28px;
  }
}

@media(prefers-reduced-motion:reduce){
  .signal-field::before,
  .signal-field__ring,
  .signal-core__pulse,
  .signal-sweep{
    animation:none !important;
  }
}

/* FINAL SIGNAL V2 */
.signal-field__mode{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  font-family:"Tektur",sans-serif;font-size:10px;letter-spacing:.22em;
  color:rgba(201,211,241,.30);z-index:5;
}
.signal-field__grid,.signal-field__ring,.signal-core{
  transition:all .55s cubic-bezier(.2,.75,.2,1);
}

/* IMAGE */
.project-signal[data-signal="image"] .signal-field__ring--outer{width:88%;height:88%;border-radius:50%}
.project-signal[data-signal="image"] .signal-field__ring--middle{width:66%;height:66%;border-radius:50%}
.project-signal[data-signal="image"] .signal-field__ring--inner{width:43%;height:43%;border-radius:50%}
.project-signal[data-signal="image"] .signal-core{width:142px;height:142px;border-radius:50%}

/* TRUST */
.project-signal[data-signal="trust"] .signal-field__grid{background-size:38px 38px;opacity:.34}
.project-signal[data-signal="trust"] .signal-field__ring--outer{
  width:82%;height:68%;border-radius:32% 32% 46% 46% / 26% 26% 58% 58%;
  border-color:rgba(103,187,242,.23);box-shadow:0 0 48px rgba(91,173,235,.08)
}
.project-signal[data-signal="trust"] .signal-field__ring--middle{
  width:58%;height:48%;border-radius:26px;border-style:solid;border-color:rgba(120,159,245,.18)
}
.project-signal[data-signal="trust"] .signal-field__ring--inner{
  width:34%;height:29%;border-radius:18px
}
.project-signal[data-signal="trust"] .signal-core{
  width:150px;height:116px;border-radius:26px;
  background:linear-gradient(145deg,rgba(85,164,222,.14),rgba(13,19,28,.80))
}

/* ACTION */
.project-signal[data-signal="action"] .signal-field__grid{background-size:24px 24px;opacity:.68}
.project-signal[data-signal="action"] .signal-field__ring--outer{
  width:90%;height:56%;border-radius:999px;border-color:rgba(100,163,255,.22)
}
.project-signal[data-signal="action"] .signal-field__ring--middle{
  width:66%;height:38%;border-radius:999px;border-style:solid;border-color:rgba(126,151,255,.19)
}
.project-signal[data-signal="action"] .signal-field__ring--inner{
  width:36%;height:20%;border-radius:999px
}
.project-signal[data-signal="action"] .signal-core{
  width:164px;height:92px;border-radius:999px;
  background:linear-gradient(90deg,rgba(79,139,238,.15),rgba(18,22,34,.85))
}
.project-signal[data-signal="action"] .signal-sweep{width:48%;height:2px;animation-duration:3.6s}

/* RENEW */
.project-signal[data-signal="renew"] .signal-field__grid{background-size:52px 52px;opacity:.28}
.project-signal[data-signal="renew"] .signal-field__ring--outer{
  width:84%;height:84%;border-radius:34%;border-style:dashed;border-color:rgba(178,121,236,.20)
}
.project-signal[data-signal="renew"] .signal-field__ring--middle{
  width:63%;height:74%;border-radius:42% 58% 36% 64% / 52% 38% 62% 48%;
  border-color:rgba(132,126,246,.20)
}
.project-signal[data-signal="renew"] .signal-field__ring--inner{
  width:35%;height:45%;border-radius:28% 72% 46% 54% / 61% 42% 58% 39%
}
.project-signal[data-signal="renew"] .signal-core{
  width:132px;height:150px;border-radius:38% 62% 44% 56% / 54% 42% 58% 46%;
  background:radial-gradient(circle at 40% 34%,rgba(170,111,233,.18),rgba(15,17,29,.81) 62%)
}
.project-signal[data-signal="renew"] .signal-sweep{
  background:linear-gradient(90deg,rgba(184,119,244,.72),transparent);animation-duration:8.4s
}


/* =========================================================
   EGRAVO — FINAL POLISH PASS
   ========================================================= */

/* Optical page finish */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  box-shadow:
    inset 0 0 110px rgba(0,0,0,.20),
    inset 0 -90px 130px rgba(0,0,0,.10);
  opacity:.65;
}

/* Cleaner section rhythm */
section{
  scroll-margin-top:84px;
}

.section-head{
  align-items:flex-end;
}

.section-title{
  text-wrap:balance;
}

.muted,
.hero-subtitle,
.process-stage__body small,
.project-signal__message p{
  text-wrap:pretty;
}

/* Sharper cards without blur on text */
.type-card,
.service-card,
.service-feature,
.principle-card,
.step,
.launch-card,
.faq-card,
.about-card,
.review,
.stat{
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Premium border response */
.type-card,
.service-card,
.principle-card,
.launch-card,
.faq-card,
.process-stage,
.project-signal{
  transition:
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    transform .28s ease;
}

.type-card:hover,
.service-card:hover,
.principle-card:hover,
.launch-card:hover,
.faq-card:hover{
  border-color:rgba(129,153,244,.16);
}

/* Buttons: more tactile, still restrained */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-40%;
  width:34%;
  height:320%;
  transform:rotate(18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.16),
    transparent
  );
  opacity:0;
  transition:left .55s cubic-bezier(.2,.72,.2,1),opacity .25s ease;
  pointer-events:none;
}

.btn:hover::after{
  left:112%;
  opacity:.7;
}

/* Better keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px #090b10,
    0 0 0 4px rgba(116,145,255,.68);
}

/* Form polish */
input,
textarea,
select{
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

input:hover,
textarea:hover,
select:hover{
  border-color:rgba(135,155,229,.18);
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(127,151,243,.28);
  box-shadow:0 0 0 3px rgba(90,119,226,.06);
}

/* Contact block balance */
.contact{
  position:relative;
  overflow:hidden;
}

.contact::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-160px;
  width:420px;
  height:420px;
  border-radius:50%;
  border:1px solid rgba(127,150,236,.08);
  box-shadow:
    0 0 0 46px rgba(90,118,216,.02),
    0 0 0 92px rgba(90,118,216,.012);
  pointer-events:none;
}

/* Desktop: reduce visual fatigue from too many simultaneous ambient effects */
@media (min-width: 821px){
  .noise{
    opacity:.30;
  }
}

/* Mobile optical cleanup */
@media(max-width:820px){
  body::before{
    box-shadow:
      inset 0 0 58px rgba(0,0,0,.12),
      inset 0 -52px 70px rgba(0,0,0,.07);
  }

  section{
    scroll-margin-top:72px;
  }

  .section-head{
    align-items:flex-start;
  }

  .btn::after{
    display:none;
  }

  .contact::after{
    width:260px;
    height:260px;
    right:-120px;
    bottom:-110px;
    opacity:.55;
  }
}

/* Respect reduced motion more comprehensively */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}


.side-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"]{
  color:#f4f7ff;
}

.side-nav a[aria-current="page"]::before{
  opacity:1;
  transform:scaleY(1);
}


/* =========================================================
   EGRAVO — LIGHT PAGE LOADER
   ========================================================= */

.page-loader{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 44%,rgba(82,111,220,.08),transparent 32%),
    #08090c;
  opacity:1;
  visibility:visible;
  transition:
    opacity .36s ease,
    visibility .36s ease;
}

.page-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Mobile hero layout: keep the interactive visual decorative, not a flex column. */
@media (max-width:820px){
  .hero{
    display:block !important;
  }

  .hero > .container{
    position:relative;
    z-index:3;
    width:calc(100% - 28px) !important;
    margin:0 auto !important;
  }

  .hero-content{
    width:100% !important;
  }

  .mode-visual{
    position:absolute !important;
    left:auto !important;
    right:-42px !important;
    top:104px !important;
    width:160px !important;
    max-width:none !important;
    margin:0 !important;
    transform:none !important;
    opacity:.30 !important;
    z-index:0 !important;
  }
}

@media (max-width:390px){
  .hero > .container{
    width:calc(100% - 22px) !important;
  }

  .mode-visual{
    right:-48px !important;
    width:148px !important;
    opacity:.25 !important;
  }
}

.page-loader__inner{
  position:relative;
  width:min(260px,68vw);
  text-align:center;
}

.page-loader__brand{
  font-family:"Tektur",sans-serif;
  font-size:22px;
  letter-spacing:.12em;
  color:#f5f7ff;
  text-shadow:
    0 0 18px rgba(114,143,255,.18),
    0 0 34px rgba(148,105,236,.08);
  animation:loaderBrand 1s ease-in-out infinite;
}

.page-loader__track{
  position:relative;
  height:1px;
  margin-top:16px;
  overflow:hidden;
  background:rgba(255,255,255,.055);
}

.page-loader__track span{
  position:absolute;
  top:0;
  left:-38%;
  width:38%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(125,151,255,.84),
    rgba(170,121,238,.72),
    transparent
  );
  box-shadow:0 0 12px rgba(113,141,255,.28);
  animation:loaderSweep .82s cubic-bezier(.2,.72,.2,1) infinite;
}

.page-loader__pulse{
  width:5px;
  height:5px;
  margin:13px auto 0;
  border-radius:50%;
  background:#8da5ff;
  box-shadow:
    0 0 12px rgba(116,145,255,.72),
    0 0 26px rgba(116,145,255,.18);
  animation:loaderPulse 1.15s ease-in-out infinite;
}

@keyframes loaderBrand{
  0%,100%{opacity:.74}
  50%{opacity:1}
}

@keyframes loaderSweep{
  0%{left:-38%;opacity:0}
  15%{opacity:1}
  100%{left:100%;opacity:.2}
}

@keyframes loaderPulse{
  0%,100%{transform:scale(.85);opacity:.48}
  50%{transform:scale(1.22);opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .page-loader__brand,
  .page-loader__track span,
  .page-loader__pulse{
    animation:none !important;
  }
}


/* =========================================================
   EGRAVO — FINAL MICRO POLISH
   ========================================================= */

/* Back to top: intentionally quiet, appears only after scrolling */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(133,154,235,.12);
  background:rgba(10,12,18,.72);
  color:rgba(239,243,255,.78);
  display:grid;
  place-items:center;
  font-size:17px;
  cursor:pointer;
  z-index:120;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  transition:
    opacity .24s ease,
    visibility .24s ease,
    transform .24s ease,
    border-color .24s ease,
    color .24s ease,
    box-shadow .24s ease;
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top:hover{
  color:#fff;
  border-color:rgba(133,154,235,.25);
  box-shadow:
    0 14px 38px rgba(0,0,0,.26),
    0 0 22px rgba(96,126,231,.08);
}

.form-message{
  min-height:1.4em;
}

.form-message.success{
  text-shadow:0 0 18px rgba(107,180,150,.10);
}

.privacy-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:14px 0 16px;
  color:#9196a2;
  font-size:10px;
  line-height:1.55;
  cursor:pointer;
}

.privacy-consent input{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:1px 0 0;
  accent-color:#527cff;
}

.privacy-consent a,
.footer a{
  color:#9eb2ff;
  text-decoration:underline;
  text-decoration-color:rgba(158,178,255,.35);
  text-underline-offset:3px;
}

.privacy-consent a:hover,
.footer a:hover{
  color:#fff;
}

@media(max-width:820px){
  .back-to-top{
    right:14px;
    bottom:14px;
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .privacy-consent{
    font-size:11px;
  }
}