:root{
  --bg:#08111d;
  --bg2:#0b1521;
  --panel:#0f1925;
  --panel2:#121e2b;
  --text:#f3f1ec;
  --muted:#9aa2ac;
  --muted2:#66717c;
  --line:rgba(255,255,255,.095);
  --line2:rgba(255,255,255,.15);
  --accent:#c9824b;
  --purple:#8790ff;
  --baby:#ef9eb5;
  --shell:min(1220px,calc(100% - 48px));
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:
    radial-gradient(circle at 80% 3%,rgba(114,91,255,.09),transparent 26%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.shell{width:var(--shell);margin:0 auto}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:100;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")
}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(9,9,11,.74);
  border-bottom:1px solid rgba(255,255,255,.055);
  backdrop-filter:blur(18px)
}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-symbol{
  width:35px;height:35px;border:1px solid var(--line2);
  display:grid;place-items:center;border-radius:50%;
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.brand-word{font-size:13px;font-weight:700;letter-spacing:.16em}
.nav-links{display:flex;align-items:center;gap:31px}
.nav-links>a{font-size:12px;color:#aaa9af;transition:.2s ease}
.nav-links>a:hover{color:var(--text)}
.nav-pill{padding:11px 15px!important;border:1px solid var(--line2);border-radius:999px}
.nav-pill span{margin-left:8px;color:var(--accent)}
.menu-button{display:none}

.micro-label,.section-kicker{
  font:500 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;color:#77767d
}
.micro-label{display:flex;align-items:center;gap:9px}
.micro-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(230,165,106,.5)}
.hero{
  min-height:790px;display:grid;grid-template-columns:1.02fr .98fr;
  gap:50px;align-items:center;padding:74px 0 94px
}
.hero-copy{padding-bottom:4px}
.hero h1{
  max-width:720px;margin:28px 0 28px;
  font-size:clamp(56px,6.55vw,94px);line-height:.94;
  letter-spacing:-.068em;font-weight:590
}
.hero h1 span{display:block;color:#8e8d94}
.hero-lead{
  max-width:625px;margin:0;color:#aaa9af;
  font-size:17px;line-height:1.78
}
.hero-actions{display:flex;align-items:center;gap:25px;margin-top:38px}
.button{
  min-height:50px;padding:0 19px 0 21px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:space-between;gap:26px;
  font-size:12px;font-weight:650;transition:transform .2s ease,box-shadow .2s ease
}
.button:hover{transform:translateY(-2px)}
.button-accent{background:var(--accent);color:#0d0e08;box-shadow:0 18px 55px rgba(230,165,106,.08)}
.quiet-link{font-size:12px;color:#929198}
.quiet-link span{margin-left:6px;color:#d7d6da}
.hero-meta{
  display:flex;gap:0;margin-top:58px;border-top:1px solid var(--line);
  max-width:570px
}
.hero-meta>div{padding:19px 27px 0 0;margin-right:27px;border-right:1px solid var(--line)}
.hero-meta>div:last-child{border-right:0}
.hero-meta strong{display:block;font-size:15px;margin-bottom:4px}
.hero-meta span{
  font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#68676e;
  text-transform:uppercase;letter-spacing:.06em
}

.hero-visual{min-height:520px;position:relative}
.grid-plane{
  position:absolute;inset:6% -5% 2% 2%;border-radius:50%;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at center,black 0,transparent 68%);
  transform:perspective(600px) rotateX(65deg) rotateZ(-11deg) scale(1.06);
  opacity:.55
}
.device{
  position:absolute;border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(25,25,30,.98),rgba(13,13,16,.98));
  box-shadow:0 38px 90px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.04)
}
.phone-card{
  width:248px;height:468px;left:5%;top:16px;border-radius:34px;
  transform:rotate(-5deg);z-index:3;overflow:hidden
}
.device-bar{
  height:54px;padding:0 17px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px;font-size:10px;color:#aaa9af
}
.device-bar i{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:auto}
.tiny-logo{
  width:25px;height:25px;border-radius:8px;background:rgba(255,138,160,.14);
  display:grid;place-items:center;color:#ffc1cc;font-size:9px;font-weight:700
}
.baby-screen{padding:28px 18px}
.baby-title small,.growth-card small{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#716f77;letter-spacing:.1em
}
.baby-title strong{display:block;margin-top:7px;font-size:22px;letter-spacing:-.04em}
.tracker-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:26px}
.tracker-item{
  min-height:112px;padding:13px;border-radius:17px;background:#18181d;
  border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column
}
.tracker-icon{
  width:30px;height:30px;border-radius:10px;background:rgba(255,138,160,.1);
  color:#ffb2c0;display:grid;place-items:center;font-size:13px
}
.tracker-item small{margin-top:auto;color:#74737a;font-size:8px}
.tracker-item strong{margin-top:4px;font-size:12px}
.growth-card{margin-top:10px;background:#18181d;border:1px solid rgba(255,255,255,.06);border-radius:17px;padding:15px}
.growth-card strong{display:block;font-size:12px;margin-top:5px}
.growth-line{height:53px;display:flex;align-items:flex-end;gap:8px;padding-top:9px}
.growth-line span{width:20%;height:20%;background:#57545c;border-radius:3px 3px 1px 1px}
.growth-line span:nth-child(2){height:34%}.growth-line span:nth-child(3){height:53%}.growth-line span:nth-child(4){height:68%;background:#a76d7b}.growth-line span:nth-child(5){height:83%;background:var(--baby)}
.desktop-card{
  width:420px;height:275px;right:-2%;bottom:39px;border-radius:24px;z-index:4;overflow:hidden;transform:rotate(3deg)
}
.desktop-top{
  height:43px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  padding:0 15px;font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#65646b;letter-spacing:.09em
}
.three-dots{letter-spacing:2px}
.desktop-body{display:grid;grid-template-columns:45px 1fr;height:calc(100% - 43px)}
.desktop-body aside{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:13px 0;gap:17px}
.desktop-body aside b{font-size:10px;margin-bottom:5px}
.desktop-body aside span{width:12px;height:2px;background:#414047;border-radius:2px}
.desktop-body aside span.active{background:var(--purple)}
.desktop-body section{padding:17px}
.dash-title{display:flex;justify-content:space-between;align-items:flex-start}
.dash-title small{font:7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#65646b;letter-spacing:.1em}
.dash-title strong{display:block;margin-top:4px;font-size:15px}
.dev-pill{font:7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#a59cff;border:1px solid rgba(132,115,255,.22);background:rgba(132,115,255,.07);padding:6px 7px;border-radius:999px}
.asset-list{margin-top:23px;border-top:1px solid var(--line)}
.asset{height:41px;display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.055);font-size:9px;color:#939299}
.asset small{font:7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#65646b}
.asset-status{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.asset-status.warning{background:#ffcc66}
.floating-tag{
  position:absolute;padding:10px 12px;border:1px solid var(--line);background:rgba(11,11,14,.84);
  backdrop-filter:blur(11px);border-radius:10px;z-index:5
}
.floating-tag span,.floating-tag strong{display:block;font:7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.floating-tag span{color:#5f5e65}.floating-tag strong{color:#aaa9af;margin-top:5px}
.tag-one{right:12%;top:11%}.tag-one strong{color:var(--accent)}
.tag-two{left:22%;bottom:0}

.intro-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b0b0d}
.strip-inner{
  min-height:60px;display:flex;align-items:center;justify-content:space-between;
  font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#68676e;text-transform:uppercase;letter-spacing:.08em
}
.strip-inner i{width:3px;height:3px;background:#4a494f;border-radius:50%}

.section{padding:128px 0}
.section-head{
  display:grid;grid-template-columns:1fr 400px;align-items:end;gap:65px;margin-bottom:62px
}
.section-head h2,.company-heading h2{
  margin:14px 0 0;max-width:780px;font-size:clamp(42px,4.8vw,67px);
  font-weight:590;line-height:1.02;letter-spacing:-.057em
}
.section-head>p{
  margin:0 0 4px;color:#8e8d94;line-height:1.75;font-size:14px
}

.product{
  min-height:660px;display:grid;grid-template-columns:.92fr 1.08fr;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(145deg,#111115,#0e0e11);margin-bottom:24px
}
.product:last-child{margin-bottom:0}
.product-copy{padding:38px 42px 40px;display:flex;flex-direction:column}
.product-topline{display:flex;justify-content:space-between;align-items:center}
.product-number{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5f5e65}
.status{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:999px;padding:8px 10px;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em;color:#85848b
}
.status i{width:5px;height:5px;border-radius:50%}
.status-live{color:#cbe95f;border-color:rgba(230,165,106,.16);background:rgba(230,165,106,.05)}
.status-live i{background:var(--accent)}
.status-dev{color:#a49aff;border-color:rgba(132,115,255,.17);background:rgba(132,115,255,.05)}
.status-dev i{background:var(--purple)}
.product-name{display:flex;align-items:center;gap:16px;margin-top:58px}
.app-mark{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-weight:700;font-size:16px}
.baby-mark{background:linear-gradient(145deg,#5b333d,#33242b);border:1px solid rgba(255,138,160,.18);color:#ffc1cd}
.maintenance-mark{background:linear-gradient(145deg,#302d50,#1c1b2b);border:1px solid rgba(132,115,255,.20);color:#a79dff}
.product-name small{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#69686f;letter-spacing:.1em
}
.product-name h3{margin:5px 0 0;font-size:29px;letter-spacing:-.04em}
.product-intro{
  margin:46px 0 17px;max-width:500px;font-size:24px;line-height:1.34;letter-spacing:-.035em;color:#dbd9dd
}
.product-body{max-width:520px;color:#8d8c93;line-height:1.7;font-size:13px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.tags span{
  padding:7px 9px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);
  border-radius:7px;font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#707076;text-transform:uppercase
}
.product-button{
  min-height:56px;margin-top:auto;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;padding-top:21px;
  font-size:12px;font-weight:650
}
.product-button span{font-size:16px;transition:transform .2s ease}
a.product-button:hover span{transform:translate(2px,-2px)}
.product-button.disabled{color:#64636a}

.product-preview{position:relative;overflow:hidden;border-left:1px solid var(--line);min-height:660px}
.baby-preview{
  background:
    radial-gradient(circle at 57% 48%,rgba(255,138,160,.12),transparent 30%),
    linear-gradient(145deg,#171317,#0f0e11)
}
.maintenance-preview{
  background:
    radial-gradient(circle at 56% 46%,rgba(132,115,255,.13),transparent 30%),
    linear-gradient(145deg,#121218,#0e0e12)
}
.halo{
  position:absolute;width:460px;height:460px;border-radius:50%;left:50%;top:50%;
  transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.05);
  box-shadow:0 0 0 70px rgba(255,255,255,.015),0 0 0 140px rgba(255,255,255,.008)
}
.preview-phone{
  position:absolute;width:260px;height:510px;border-radius:36px;background:#101013;border:1px solid rgba(255,255,255,.13);
  padding:9px;box-shadow:0 38px 80px rgba(0,0,0,.38)
}
.preview-phone-front{left:45%;top:74px;transform:translateX(-32%) rotate(4deg);z-index:3}
.preview-phone-back{left:26%;top:133px;transform:rotate(-9deg);opacity:.62}
.mini-screen{height:100%;border-radius:29px;background:linear-gradient(#f6e8ea,#e9d5d8);color:#21191b;padding:22px 16px;overflow:hidden}
.preview-phone-back .mini-screen{background:linear-gradient(#2a2428,#171519)}
.mini-brand{font-size:9px;font-weight:700;color:#4d3c41}
.mini-greeting{font-size:24px;font-weight:650;letter-spacing:-.05em;margin-top:38px}
.mini-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:32px}
.mini-actions div{height:76px;background:rgba(255,255,255,.58);border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.mini-actions b{font-size:15px;color:#b45b70}.mini-actions span{font-size:7px;color:#694b53}
.mini-feed{margin-top:11px;background:rgba(255,255,255,.45);border-radius:16px;padding:15px}
.mini-feed span{height:6px;background:#d1b6bd;border-radius:6px;display:block;margin-bottom:10px}
.mini-feed span:nth-child(2){width:73%}.mini-feed span:nth-child(3){width:55%;margin-bottom:0}
.mini-head{height:15px;width:52%;border-radius:10px;background:#55454b}
.mini-chart{height:180px;margin-top:45px;border-left:1px solid #51444a;border-bottom:1px solid #51444a;position:relative}
.mini-chart:after{content:"";position:absolute;left:15px;right:0;bottom:22px;height:2px;background:#d07e93;transform:rotate(-12deg);box-shadow:40px -21px 0 -1px #d07e93,75px -10px 0 -1px #d07e93}
.mini-blocks{display:flex;gap:7px;margin-top:25px}.mini-blocks i{width:31%;height:60px;border-radius:10px;background:#30282c}

.dash-panel{
  position:absolute;width:560px;height:390px;left:11%;top:115px;
  border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#121217;
  display:grid;grid-template-columns:62px 1fr;overflow:hidden;box-shadow:0 38px 80px rgba(0,0,0,.36);
  transform:rotate(-2deg)
}
.dash-nav{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:19px;gap:24px}
.dash-nav b{font-size:13px;margin-bottom:7px}
.dash-nav i{width:16px;height:2px;background:#3e3d45;border-radius:2px}
.dash-nav i.active{background:var(--purple)}
.dash-main{padding:27px}
.dash-head{display:flex;align-items:center;justify-content:space-between}
.dash-head small{font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#66656d;letter-spacing:.1em}
.dash-head strong{display:block;font-size:21px;margin-top:5px}
.dash-head>span{font:7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#b1d94a;border:1px solid rgba(230,165,106,.14);padding:6px 8px;border-radius:999px}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:28px}
.dash-stats div{padding:14px;border:1px solid rgba(255,255,255,.065);border-radius:11px;background:#16161b}
.dash-stats small{font:7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#626169}
.dash-stats strong{display:block;margin-top:10px;font-size:20px}
.dash-table{margin-top:19px;border-top:1px solid var(--line)}
.dash-table div{height:48px;display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.055);font-size:10px;color:#a2a1a7}
.dash-table i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dash-table i.warn{background:#ffcc69}
.dash-table small{font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#66656d}
.qr-card{
  position:absolute;right:6%;bottom:63px;width:133px;height:147px;background:#e9e8ea;color:#111;
  border-radius:15px;padding:14px;transform:rotate(7deg);z-index:4;box-shadow:0 20px 40px rgba(0,0,0,.28)
}
.fake-qr{height:94px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.fake-qr i{background:#171719;border-radius:2px}
.fake-qr i:nth-child(2),.fake-qr i:nth-child(6),.fake-qr i:nth-child(8){background:#e9e8ea;border:5px solid #171719}
.qr-card span{display:block;margin-top:10px;text-align:center;font:7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}

.company{background:#0c0c0f;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.company-grid{display:grid;grid-template-columns:1fr .86fr;gap:110px}
.company-heading h2 span{color:#85848b}
.company-copy{padding-top:29px}
.company-copy p{max-width:560px;color:#8f8e95;line-height:1.8;font-size:14px}
.company-lead{color:#d0cfd4!important;font-size:21px!important;line-height:1.55!important;margin-top:0}
.service-note{margin-top:45px;display:grid;grid-template-columns:35px 1fr;gap:18px;align-items:start}
.service-note i{height:1px;background:var(--accent);margin-top:13px}
.service-note p{margin:0;font-size:12px;color:#74737a}

.principles{padding:92px 0 130px;background:#0c0c0f}
.principle-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:38px}
.principle-head p{margin:0;color:#75747b;font-size:12px}
.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.principle-grid article{padding:28px 24px 0 0;min-height:220px;border-right:1px solid var(--line)}
.principle-grid article:not(:first-child){padding-left:24px}
.principle-grid article:last-child{border-right:0}
.principle-grid article>span{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5c5b62}
.principle-grid h3{margin:46px 0 11px;font-size:18px;letter-spacing:-.03em}
.principle-grid p{margin:0;color:#737279;font-size:12px;line-height:1.68}

.closing{padding:145px 0 155px;position:relative;overflow:hidden}
.closing:before{
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;left:50%;top:55%;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(230,165,106,.065),transparent 66%);pointer-events:none
}
.closing-inner{max-width:880px;text-align:center;position:relative}
.closing h2{font-size:clamp(56px,7vw,92px);line-height:.92;letter-spacing:-.07em;font-weight:590;margin:22px 0 25px}
.closing h2 span{color:#838288}
.closing p{max-width:590px;margin:0 auto 34px;color:#85848b;line-height:1.75;font-size:14px}
.closing .button{margin:0 auto}

.footer{border-top:1px solid var(--line);padding:42px 0 46px}
.footer-inner{display:grid;grid-template-columns:1fr 1fr auto;gap:45px;align-items:end}
.footer-brand>span,.footer-products,.footer-copy{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#606066;text-transform:uppercase;letter-spacing:.07em
}
.footer-brand>span{display:block;margin-top:14px}
.footer-products{display:flex;flex-direction:column;gap:9px}
.footer-products a{color:#86858c}
.footer-copy{display:flex;flex-direction:column;gap:9px;text-align:right}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .72s ease,transform .72s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1050px){
  .hero{grid-template-columns:1fr;gap:42px;padding-top:76px}
  .hero-copy{max-width:820px}
  .hero-visual{min-height:580px;max-width:720px;width:100%;margin:0 auto}
  .section-head{grid-template-columns:1fr;gap:24px}
  .section-head>p{max-width:600px}
  .product{grid-template-columns:1fr}
  .product-preview{border-left:0;border-top:1px solid var(--line);min-height:600px}
  .company-grid{grid-template-columns:1fr;gap:35px}
  .company-copy{padding-top:0}
  .principle-grid{grid-template-columns:1fr 1fr}
  .principle-grid article:nth-child(2){border-right:0}
  .principle-grid article:nth-child(3),.principle-grid article:nth-child(4){border-top:1px solid var(--line)}
}
@media(max-width:760px){
  :root{--shell:min(100% - 32px,680px)}
  .nav{height:70px}
  .menu-button{
    display:flex;width:40px;height:40px;border:1px solid var(--line);background:transparent;border-radius:50%;
    align-items:center;justify-content:center;flex-direction:column;gap:6px
  }
  .menu-button span{width:14px;height:1px;background:#bbb9be}
  .nav-links{
    position:absolute;display:none;left:16px;right:16px;top:65px;background:rgba(15,15,18,.98);
    border:1px solid var(--line);border-radius:18px;padding:13px;flex-direction:column;align-items:stretch;gap:2px;
    box-shadow:0 30px 70px rgba(0,0,0,.4)
  }
  .nav-links.open{display:flex}
  .nav-links>a{padding:13px 11px}.nav-pill{border-radius:10px}
  .hero{min-height:auto;padding:58px 0 70px}
  .hero h1{font-size:clamp(50px,14vw,75px)}
  .hero-lead{font-size:15px}
  .hero-meta{flex-wrap:wrap}
  .hero-meta>div{margin-right:18px;padding-right:18px}
  .hero-visual{min-height:470px}
  .phone-card{width:210px;height:395px;left:3%}
  .desktop-card{width:350px;height:230px;right:-8%;bottom:23px}
  .system-card{width:100%}
  .tag-one{right:0}.tag-two{left:8%}
  .strip-inner{justify-content:flex-start;gap:18px;overflow:hidden;white-space:nowrap}
  .section{padding:90px 0}
  .section-head h2,.company-heading h2{font-size:clamp(39px,11vw,58px)}
  .product{border-radius:23px}
  .product-copy{padding:27px 23px 28px}
  .product-name{margin-top:44px}
  .product-intro{font-size:21px;margin-top:38px}
  .product-preview{min-height:500px}
  .preview-phone{width:220px;height:430px}
  .preview-phone-front{top:45px;left:49%}
  .preview-phone-back{top:95px;left:13%}
  .dash-panel{width:455px;height:320px;left:5%;top:82px}
  .qr-card{right:4%;bottom:43px}
  .principle-head{display:block}
  .principle-head p{margin-top:14px}
  .principle-grid{grid-template-columns:1fr}
  .principle-grid article,.principle-grid article:not(:first-child){
    min-height:auto;padding:25px 0;border-right:0;border-top:1px solid var(--line)
  }
  .principle-grid article:first-child{border-top:0}
  .principle-grid h3{margin-top:28px}
  .closing{padding:105px 0}
  .closing h2{font-size:clamp(52px,16vw,78px)}
  .footer-inner{grid-template-columns:1fr;gap:25px;align-items:start}
  .footer-copy{text-align:left}
}
@media(max-width:500px){
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-meta>div{width:calc(50% - 15px);border-right:0}
  .hero-visual{min-height:430px}
  .phone-card{width:190px;height:355px;left:0}
  .baby-screen{padding:20px 14px}.baby-title strong{font-size:18px}
  .tracker-item{min-height:90px}.growth-card{display:none}
  .desktop-card{width:310px;height:205px;right:-22%;bottom:24px}
  .asset-list{margin-top:12px}.asset{height:34px}
  .floating-tag{display:none}
  .product-preview{min-height:445px}
  .preview-phone{width:200px;height:390px}
  .preview-phone-front{left:48%;top:34px}
  .preview-phone-back{left:3%;top:78px}
  .dash-panel{width:400px;height:285px;left:-2%;top:70px}
  .dash-main{padding:18px}.dash-stats{margin-top:18px}.dash-table{margin-top:12px}
  .qr-card{width:110px;height:124px;padding:11px;right:1%;bottom:36px}
  .fake-qr{height:78px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}
}


/* v3 — brand, language and legal refinements */
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;margin-left:3px;
  padding:5px;border:1px solid var(--line);border-radius:999px
}
.lang-switch a{
  min-width:30px;height:27px;padding:0 8px;border-radius:999px;
  display:grid;place-items:center;font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;color:#727178!important
}
.lang-switch a.active{background:#202025;color:var(--text)!important}
.brand-line{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#68676e;
  text-transform:uppercase;letter-spacing:.10em
}
.brand-line:before{
  content:"";width:28px;height:1px;background:var(--accent)
}
.footer-legal{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;letter-spacing:.07em
}
.footer-legal a{color:#6b6a71}
.footer-legal a:hover{color:#a6a5ab}
.legal-page{
  min-height:70vh;padding:105px 0 130px
}
.legal-wrap{max-width:820px}
.legal-wrap h1{
  margin:22px 0 28px;font-size:clamp(46px,7vw,82px);
  line-height:.96;letter-spacing:-.065em;font-weight:590
}
.legal-intro{
  max-width:680px;color:#a3a2a8;font-size:17px;line-height:1.75;
  margin-bottom:55px
}
.legal-block{
  padding:30px 0;border-top:1px solid var(--line)
}
.legal-block h2{
  margin:0 0 14px;font-size:20px;letter-spacing:-.03em
}
.legal-block p,.legal-block li{
  color:#89888f;font-size:13px;line-height:1.8
}
.legal-block ul{padding-left:20px}
.legal-back{
  display:inline-flex;gap:9px;align-items:center;margin-top:35px;
  font-size:12px;color:#aaa9af
}
.screenshot-ready{
  position:absolute;right:17px;top:17px;z-index:8;
  padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.08);
  background:rgba(9,9,11,.68);backdrop-filter:blur(9px);
  font:7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#6b6a71;
  letter-spacing:.08em;text-transform:uppercase
}
@media(max-width:760px){
  .lang-switch{margin:7px 0 0;padding:4px}
  .nav-links .lang-switch a{padding:0 8px}
  .legal-page{padding:78px 0 95px}
}


/* v3.1 — real Ruzemi Baby+ product artwork */
.baby-real-preview{
  display:grid;
  place-items:center;
  padding:38px;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,152,193,.13),transparent 32%),
    radial-gradient(circle at 70% 72%,rgba(151,126,255,.10),transparent 33%),
    linear-gradient(145deg,#151216,#0f0e11);
}
.baby-real-glow{
  position:absolute;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,187,211,.10),transparent 68%);
  filter:blur(12px);
}
.baby-product-art{
  position:relative;
  z-index:2;
  margin:0;
  width:min(100%,490px);
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 36px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.025) inset;
  transform:rotate(1.2deg);
  background:#f5eeee;
}
.baby-product-art:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  border-radius:inherit;
}
.baby-product-art img{
  display:block;
  width:100%;
  height:auto;
}
@media(max-width:760px){
  .baby-real-preview{padding:24px;min-height:auto}
  .baby-product-art{
    width:min(100%,430px);
    border-radius:21px;
    transform:none;
  }
}


/* v3.2 — corporate portfolio layout */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.portfolio-card{
  min-height:420px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.025),transparent 32%),
    linear-gradient(145deg,#121216,#0e0e11);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.portfolio-card:before{
  content:"";
  position:absolute;
  right:-100px;top:-110px;
  width:260px;height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(132,115,255,.065),transparent 68%);
  pointer-events:none;
}
.portfolio-card:first-child:before{
  background:radial-gradient(circle,rgba(255,138,160,.065),transparent 68%);
}
.portfolio-future:before{
  background:radial-gradient(circle,rgba(230,165,106,.05),transparent 68%);
}
.portfolio-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  position:relative;
  z-index:2;
}
.portfolio-meta{
  margin-top:52px;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#66656c;
  letter-spacing:.11em;
}
.portfolio-card h3{
  margin:9px 0 18px;
  font-size:29px;
  letter-spacing:-.04em;
  font-weight:590;
}
.portfolio-card p{
  margin:0;
  color:#8d8c93;
  font-size:13px;
  line-height:1.72;
  max-width:360px;
}
.portfolio-link{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:650;
}
.portfolio-link span{
  font-size:15px;
  transition:transform .2s ease;
}
a.portfolio-link:hover span{transform:translate(2px,-2px)}
.portfolio-link.disabled{color:#64636a}
.future-mark{
  background:linear-gradient(145deg,#22251a,#171910);
  border:1px solid rgba(230,165,106,.14);
  color:var(--accent);
}
@media(max-width:980px){
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .portfolio-future{grid-column:1 / -1}
}
@media(max-width:680px){
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-future{grid-column:auto}
  .portfolio-card{min-height:360px;padding:24px}
  .portfolio-meta{margin-top:40px}
}


/* v3.3 — official Ruzemi identity */
.brand-logo{
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.brand-logo img{
  display:block;
  width:auto;
  height:43px;
  object-fit:contain;
}
.footer-logo img{height:46px}

.hero-brandmark{
  width:72px;
  height:72px;
  margin-bottom:25px;
  display:grid;
  place-items:center;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(circle at 50% 35%,rgba(230,165,106,.04),transparent 55%),
    rgba(255,255,255,.015);
}
.hero-brandmark img{
  width:54px;
  height:54px;
  object-fit:contain;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.28));
}
.site-header .brand-symbol,
.site-header .brand-word,
.footer .brand-symbol,
.footer .brand-word{
  display:none;
}

/* The lime from the selected logo becomes the corporate accent. */
:root{
  --accent:#c9824b;
}

@media(max-width:760px){
  .brand-logo img{height:38px}
  .footer-logo img{height:42px}
  .hero-brandmark{
    width:64px;height:64px;margin-bottom:22px;
  }
  .hero-brandmark img{width:48px;height:48px}
}


/* v3.4 — refined corporate brand system */
body{
  background:
    radial-gradient(circle at 82% 7%,rgba(96,119,150,.105),transparent 27%),
    radial-gradient(circle at 65% 50%,rgba(201,130,75,.022),transparent 26%),
    var(--bg);
}
.site-header{
  background:rgba(8,17,29,.76);
}
.brand-logo img{
  height:47px;
  max-width:205px;
}
.footer-logo img{height:49px}

.hero{
  grid-template-columns:1fr 1fr;
}
.hero-brand-system{
  min-height:570px;
  position:relative;
  isolation:isolate;
  display:block;
}
.hero-system-grid{
  position:absolute;
  inset:4% -7% 0 -4%;
  opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 53% 48%,black 0%,rgba(0,0,0,.82) 34%,transparent 72%);
}
.hero-symbol-stage{
  position:absolute;
  width:270px;
  height:300px;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  z-index:3;
  animation:ruzemiFloat 7s ease-in-out infinite;
}
.hero-symbol-stage img{
  position:relative;
  z-index:2;
  width:225px;
  height:225px;
  object-fit:contain;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.35));
}
.symbol-aura{
  position:absolute;
  width:245px;height:245px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,130,75,.08),rgba(92,125,151,.035) 42%,transparent 68%);
  filter:blur(9px);
  animation:auraPulse 5.8s ease-in-out infinite;
}
.brand-orbit{
  position:absolute;
  left:50%;top:49%;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:1;
}
.orbit-a{width:350px;height:350px}
.orbit-b{width:470px;height:470px;border-color:rgba(201,130,75,.07)}
.orbit-c{width:575px;height:575px;border-style:dashed;opacity:.44}
.portfolio-node{
  position:absolute;
  z-index:5;
  min-width:188px;
  padding:12px 13px;
  display:grid;
  grid-template-columns:25px 1fr 10px;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:rgba(10,20,31,.78);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 45px rgba(0,0,0,.17);
}
.portfolio-node strong{display:block;font-size:10px;font-weight:600;color:#cbcdd1}
.portfolio-node small{
  display:block;margin-top:4px;
  font:7px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#646f79;text-transform:uppercase;letter-spacing:.08em
}
.node-index{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#59646f
}
.node-dot{width:6px;height:6px;border-radius:50%;background:#58626b}
.node-dot.live{background:var(--accent);box-shadow:0 0 12px rgba(201,130,75,.28)}
.node-dot.dev{background:#8790ff}
.node-baby{right:-1%;top:15%;animation:nodeDrift 6.4s ease-in-out infinite}
.node-maintenance{left:-2%;bottom:16%;animation:nodeDrift 7.1s ease-in-out infinite reverse}
.node-next{right:4%;bottom:5%;min-width:160px;animation:nodeDrift 8.2s ease-in-out infinite}
.system-caption{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;gap:12px;align-items:center;
  white-space:nowrap;
}
.system-caption span,.system-caption b{
  font:7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em
}
.system-caption span{color:#59646f}
.system-caption b{color:#858f99;font-weight:500}
.brand-line{
  margin-top:25px;
  color:#67727d;
}

@keyframes ruzemiFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-.5deg)}
  50%{transform:translate(-50%,-50%) translateY(-8px) rotate(.7deg)}
}
@keyframes auraPulse{
  0%,100%{opacity:.68;transform:scale(.97)}
  50%{opacity:1;transform:scale(1.05)}
}
@keyframes nodeDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@media(max-width:1050px){
  .hero-brand-system{min-height:530px}
  .node-baby{right:3%}.node-maintenance{left:2%}.node-next{right:7%}
}
@media(max-width:760px){
  .brand-logo img{height:41px;max-width:185px}
  .hero-brand-system{min-height:450px}
  .hero-symbol-stage{width:220px;height:240px}
  .hero-symbol-stage img{width:180px;height:180px}
  .symbol-aura{width:205px;height:205px}
  .orbit-a{width:275px;height:275px}
  .orbit-b{width:355px;height:355px}
  .orbit-c{width:430px;height:430px}
  .portfolio-node{min-width:155px;padding:10px;grid-template-columns:20px 1fr 8px}
  .portfolio-node strong{font-size:9px}
  .node-baby{right:-2%;top:10%}
  .node-maintenance{left:-3%;bottom:15%}
  .node-next{right:0;bottom:1%;min-width:140px}
}
@media(max-width:500px){
  .hero-brand-system{min-height:405px}
  .portfolio-node{min-width:140px}
  .node-baby{right:-13%;top:9%}
  .node-maintenance{left:-12%;bottom:18%}
  .node-next{right:-8%;bottom:0}
  .system-caption{bottom:-5px}
}
@media(prefers-reduced-motion:reduce){
  .hero-symbol-stage,.symbol-aura,.portfolio-node{animation:none!important}
}


/* v3.5 — production polish */
.skip-link{
  position:fixed;
  left:18px;
  top:12px;
  z-index:9999;
  padding:11px 14px;
  border-radius:10px;
  background:var(--accent);
  color:#091009;
  font-size:12px;
  font-weight:700;
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:6px;
}
.menu-button:focus-visible{border-radius:50%}

.portfolio-card{
  transition:
    transform .24s ease,
    border-color .24s ease,
    background-color .24s ease,
    box-shadow .24s ease;
}
@media (hover:hover) and (pointer:fine){
  .portfolio-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.15);
    box-shadow:0 26px 65px rgba(0,0,0,.16);
  }
  .portfolio-card:first-child:hover{
    box-shadow:0 28px 70px rgba(239,158,181,.055);
  }
  .portfolio-card:nth-child(2):hover{
    box-shadow:0 28px 70px rgba(135,144,255,.055);
  }
}

.status i{
  animation:statusBreath 3.4s ease-in-out infinite;
}
.portfolio-future .status i{animation:none}
@keyframes statusBreath{
  0%,100%{opacity:.66}
  50%{opacity:1;box-shadow:0 0 9px currentColor}
}

.error-page{
  min-height:70vh;
  display:grid;
  align-items:center;
  padding:95px 0 120px;
}
.error-wrap{
  max-width:780px;
  text-align:center;
}
.error-symbol{
  width:130px;
  height:130px;
  margin:32px auto 24px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:32px;
  background:rgba(255,255,255,.018);
}
.error-symbol img{width:92px;height:92px;object-fit:contain}
.error-wrap h1{
  margin:0;
  font-size:clamp(45px,7vw,80px);
  line-height:.98;
  letter-spacing:-.06em;
  font-weight:590;
}
.error-wrap p{
  max-width:590px;
  margin:24px auto 32px;
  color:#8d959d;
  line-height:1.75;
  font-size:14px;
}
.error-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
}

@media(max-width:620px){
  .error-actions{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-card,.status i{transition:none!important;animation:none!important}
}


/* v3.5.1 — cleaner professional hero */
.hero-clean-visual{
  position:relative;
  min-height:560px;
  display:grid;
  place-items:center;
}
.hero-clean-glow{
  position:absolute;
  inset:12% 6% 10% 10%;
  border-radius:34px;
  background:
    radial-gradient(circle at 72% 25%, rgba(201,130,75,.05), transparent 24%),
    radial-gradient(circle at 38% 50%, rgba(116,146,179,.10), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.012), rgba(255,255,255,.002));
  filter:blur(8px);
}
.overview-panel{
  position:relative;
  z-index:2;
  width:min(100%, 575px);
  min-height:495px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(14,23,34,.96), rgba(10,18,29,.98));
  box-shadow:
    0 34px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;
}
.overview-panel:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
  opacity:.22;
  pointer-events:none;
}
.overview-top{
  position:relative;
  z-index:2;
  min-height:58px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.overview-top span,
.overview-heading small,
.overview-item small,
.overview-footer span{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.overview-top span{color:#69727b}
.overview-status{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:#89929b !important;
  background:rgba(255,255,255,.02);
}
.overview-body{
  position:relative;
  z-index:2;
  padding:28px 24px 24px;
}
.overview-heading h3{
  margin:10px 0 16px;
  font-size:40px;
  line-height:1.04;
  letter-spacing:-.055em;
  font-weight:590;
}
.overview-heading p{
  margin:0;
  max-width:460px;
  color:#8f98a1;
  font-size:14px;
  line-height:1.72;
}
.overview-list{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.overview-item{
  min-height:74px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:18px;
  background:rgba(255,255,255,.018);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transition:transform .24s ease, border-color .24s ease, background-color .24s ease;
}
.overview-item:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.028);
}
.overview-item-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.overview-number{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#73808d;
}
.overview-item strong{
  display:block;
  font-size:14px;
  color:#edf0f2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.overview-item small{
  display:block;
  margin-top:6px;
  color:#69737d;
}
.overview-chip{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.overview-chip.live{
  color:#d4f46a;
  border-color:rgba(201,130,75,.18);
  background:rgba(201,130,75,.06);
}
.overview-chip.dev{
  color:#a9afff;
  border-color:rgba(135,144,255,.18);
  background:rgba(135,144,255,.08);
}
.overview-chip.neutral{
  color:#9aa2ac;
}
.overview-footer{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.overview-footer > div{
  min-height:88px;
  padding:16px 18px 14px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.overview-footer > div:last-child{
  border-right:0;
}
.overview-footer b{
  display:block;
  font-size:18px;
  margin-bottom:7px;
}
.overview-footer span{
  color:#67717b;
}
.hero-side-note{
  position:absolute;
  right:0;
  bottom:6px;
  z-index:1;
  max-width:190px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(11,19,30,.58);
  backdrop-filter:blur(10px);
}
.hero-side-note span{
  display:block;
  margin-bottom:10px;
  color:#66717b;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.10em;
}
.hero-side-note strong{
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.03em;
  font-weight:590;
}

@media(max-width:1050px){
  .hero-clean-visual{
    min-height:520px;
  }
  .hero-side-note{
    right:12px;
    bottom:0;
  }
}

@media(max-width:760px){
  .hero-clean-visual{
    min-height:auto;
  }
  .overview-panel{
    width:100%;
    min-height:auto;
    border-radius:23px;
  }
  .overview-top{
    min-height:54px;
    padding:0 16px;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    padding-top:12px;
    padding-bottom:12px;
  }
  .overview-body{
    padding:22px 16px 18px;
  }
  .overview-heading h3{
    font-size:31px;
  }
  .overview-item{
    min-height:70px;
    padding:13px 14px;
    align-items:flex-start;
    flex-direction:column;
  }
  .overview-item-left{
    width:100%;
  }
  .overview-chip{
    align-self:flex-start;
  }
  .overview-footer{
    grid-template-columns:1fr;
  }
  .overview-footer > div{
    min-height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .overview-footer > div:last-child{
    border-bottom:0;
  }
  .hero-side-note{
    position:relative;
    max-width:none;
    width:100%;
    margin-top:14px;
    right:auto;
    bottom:auto;
  }
}

@media(max-width:500px){
  .overview-heading h3{
    font-size:28px;
  }
}


/* v3.5.2 — corporate portfolio refinement */
.portfolio-enterprise{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
.product-panel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(11,20,31,.94), rgba(8,15,24,.98));
  box-shadow:
    0 18px 48px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
  min-height:435px;
  display:flex;
  flex-direction:column;
}
.product-panel-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:26px 26px 0;
}
.product-panel-brand{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.product-panel-mark{
  width:54px;
  height:54px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:700;
  flex:0 0 auto;
}
.product-panel-label,
.product-panel-grid span,
.portfolio-note-label{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#69737d;
}
.product-panel-top h3{
  margin:8px 0 0;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:590;
}
.product-panel-intro{
  margin:24px 0 0;
  padding:0 26px 22px;
  color:#a4acb5;
  font-size:15px;
  line-height:1.72;
  max-width:640px;
}
.product-panel-grid{
  margin:0 26px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
}
.product-panel-grid > div{
  min-height:94px;
  padding:17px 18px 16px 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.product-panel-grid > div:nth-child(2n){
  border-right:0;
  padding-left:18px;
}
.product-panel-grid > div:nth-last-child(-n+2){
  border-bottom:0;
}
.product-panel-grid strong{
  display:block;
  margin-top:10px;
  font-size:15px;
  line-height:1.45;
  color:#edf0f3;
  font-weight:560;
}
.product-panel-link{
  margin-top:auto;
  min-height:74px;
  padding:0 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:650;
}
a.product-panel-link:hover span{
  transform:translate(2px,-2px);
}
.product-panel-link span{
  transition:transform .2s ease;
}
.portfolio-note{
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  padding:24px 0 0;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:30px;
  align-items:start;
}
.portfolio-note strong{
  display:block;
  margin-top:10px;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.03em;
  font-weight:580;
}
.portfolio-note p{
  margin:0;
  color:#8f98a1;
  font-size:14px;
  line-height:1.8;
  max-width:760px;
}

/* neutralize older portfolio card hover style */
.product-panel,
.portfolio-note{
  transform:none !important;
}
.product-panel:hover{
  border-color:rgba(255,255,255,.1);
  box-shadow:
    0 18px 48px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
}

@media(max-width:1100px){
  .portfolio-note{
    grid-template-columns:1fr;
    gap:14px;
  }
}
@media(max-width:860px){
  .portfolio-enterprise{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .product-panel{
    min-height:auto;
    border-radius:22px;
  }
  .product-panel-top{
    padding:22px 20px 0;
    flex-direction:column;
    align-items:flex-start;
  }
  .product-panel-intro{
    padding:0 20px 18px;
    margin-top:20px;
    font-size:14px;
  }
  .product-panel-grid{
    margin:0 20px;
    grid-template-columns:1fr;
  }
  .product-panel-grid > div,
  .product-panel-grid > div:nth-child(2n){
    border-right:0;
    padding:16px 0;
  }
  .product-panel-grid > div:nth-last-child(-n+2){
    border-bottom:1px solid var(--line);
  }
  .product-panel-grid > div:last-child{
    border-bottom:0;
  }
  .product-panel-link{
    min-height:66px;
    padding:0 20px;
  }
  .portfolio-note{
    padding-top:18px;
  }
  .portfolio-note strong{
    font-size:21px;
  }
}

/* keep the older concept cards visually out of the way if cached markup remains */
.portfolio-grid{
  display:none;
}


/* v3.5.3 — high-end editorial portfolio */
.portfolio-editorial{
  border-top:1px solid var(--line);
}
.editorial-product{
  display:grid;
  grid-template-columns:70px minmax(0,1.25fr) minmax(280px,.75fr);
  gap:34px;
  padding:48px 0 46px;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.editorial-index{
  padding-top:4px;
  font:9px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#59646e;
  letter-spacing:.10em;
}
.editorial-eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.editorial-eyebrow > span:first-child{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  color:#69747f;
}
.editorial-main h3{
  margin:17px 0 18px;
  font-size:clamp(34px,3.5vw,49px);
  line-height:1.02;
  letter-spacing:-.052em;
  font-weight:585;
}
.editorial-main p{
  max-width:660px;
  margin:0;
  color:#9ca5ae;
  font-size:15px;
  line-height:1.76;
}
.editorial-link{
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:650;
  color:#e5e8eb;
}
.editorial-link span{
  transition:transform .2s ease;
}
a.editorial-link:hover span{
  transform:translate(2px,-2px);
}
.editorial-link.disabled{
  color:#68727c;
}
.editorial-meta{
  border-left:1px solid var(--line);
  padding-left:28px;
}
.editorial-meta > div{
  padding:0 0 20px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.editorial-meta > div:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
.editorial-meta span,
.portfolio-editorial-note > span{
  display:block;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#66717b;
}
.editorial-meta strong{
  display:block;
  margin-top:8px;
  color:#d7dbdf;
  font-size:13px;
  line-height:1.5;
  font-weight:540;
}
.portfolio-editorial-note{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:40px;
  padding:28px 0 0;
}
.portfolio-editorial-note p{
  margin:0;
  max-width:760px;
  color:#838d96;
  font-size:13px;
  line-height:1.75;
}

/* disable previous card layouts */
.portfolio-enterprise,
.portfolio-grid{
  display:none !important;
}

@media(max-width:920px){
  .editorial-product{
    grid-template-columns:55px 1fr;
  }
  .editorial-meta{
    grid-column:2;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.06);
    padding:22px 0 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .editorial-meta > div{
    margin:0;
    padding:0 18px 0 0;
    border-bottom:0;
    border-right:1px solid rgba(255,255,255,.055);
  }
  .editorial-meta > div:last-child{
    border-right:0;
    padding-right:0;
  }
}
@media(max-width:650px){
  .editorial-product{
    grid-template-columns:1fr;
    gap:18px;
    padding:36px 0 34px;
  }
  .editorial-index{
    padding:0;
  }
  .editorial-main h3{
    font-size:36px;
  }
  .editorial-meta{
    grid-column:auto;
    grid-template-columns:1fr;
    gap:0;
    padding-top:18px;
  }
  .editorial-meta > div{
    padding:0 0 16px;
    margin-bottom:16px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.055);
  }
  .editorial-meta > div:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
  }
  .portfolio-editorial-note{
    grid-template-columns:1fr;
    gap:12px;
  }
}


/* v3.5.4 — quiet corporate hero */
.hero-quiet-visual{
  position:relative;
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
}
.hero-quiet-light{
  position:absolute;
  width:620px;
  height:620px;
  right:-70px;
  top:-55px;
  border-radius:50%;
  background:
    radial-gradient(circle at 42% 42%,
      rgba(126,151,178,.11) 0%,
      rgba(90,116,145,.055) 28%,
      rgba(20,35,52,.022) 48%,
      transparent 68%);
  filter:blur(4px);
}
.hero-quiet-grid{
  position:absolute;
  inset:6% 0 8% 10%;
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(135deg,transparent 4%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.25) 68%,transparent 92%);
}
.hero-signature{
  position:absolute;
  right:8px;
  bottom:48px;
  width:250px;
}
.hero-signature > span{
  display:block;
  font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.22em;
  color:#7a858f;
}
.hero-signature-line{
  width:100%;
  height:1px;
  margin:13px 0 11px;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.025));
}
.hero-signature-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
}
.hero-signature-meta span{
  font:7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  color:#53606b;
}

/* Make the left side feel slightly more editorial now that the right is intentionally quiet. */
.hero{
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:72px;
}
.hero-copy{
  max-width:760px;
}
.hero h1{
  max-width:760px;
}

@media(max-width:1050px){
  .hero{
    grid-template-columns:1fr;
    gap:28px;
  }
  .hero-quiet-visual{
    min-height:220px;
  }
  .hero-quiet-light{
    width:420px;
    height:420px;
    right:0;
    top:-120px;
  }
  .hero-quiet-grid{
    inset:0;
  }
  .hero-signature{
    right:0;
    bottom:26px;
  }
}
@media(max-width:620px){
  .hero-quiet-visual{
    min-height:160px;
  }
  .hero-signature{
    width:210px;
    bottom:14px;
  }
  .hero-signature-meta{
    gap:10px;
  }
}


/* v3.5.5 — less copy, more brand */
.hero{
  padding-bottom:105px;
}
.hero-actions{
  margin-top:34px;
}
.hero-meta,
.brand-line,
.intro-strip{
  display:none !important;
}

.editorial-meta{
  display:grid;
  gap:0;
}
.editorial-meta > div{
  margin-bottom:18px;
  padding-bottom:18px;
}
.portfolio-editorial-note{
  padding-top:24px;
  padding-bottom:4px;
}

.company-minimal{
  background:#0a1420;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.company-minimal-head{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  column-gap:80px;
  row-gap:12px;
  align-items:end;
  margin-bottom:64px;
}
.company-minimal-head .section-kicker{
  grid-column:1 / -1;
}
.company-minimal-head h2{
  margin:0;
  max-width:760px;
  font-size:clamp(42px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.058em;
  font-weight:585;
}
.company-minimal-head > p{
  margin:0 0 6px;
  max-width:470px;
  color:#8e98a2;
  font-size:14px;
  line-height:1.75;
}
.company-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.company-values article{
  min-height:220px;
  padding:27px 30px 16px 0;
  border-right:1px solid var(--line);
}
.company-values article:not(:first-child){
  padding-left:30px;
}
.company-values article:last-child{
  border-right:0;
}
.company-values article > span{
  display:block;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#59656f;
  letter-spacing:.1em;
}
.company-values h3{
  margin:52px 0 12px;
  font-size:25px;
  letter-spacing:-.04em;
  font-weight:580;
}
.company-values p{
  margin:0;
  max-width:300px;
  color:#838d96;
  font-size:13px;
  line-height:1.68;
}

.closing-minimal{
  padding:125px 0 135px;
}
.closing-minimal .closing-inner{
  max-width:920px;
}
.closing-minimal h2{
  margin-bottom:0;
}
.closing-minimal p,
.closing-minimal .button{
  display:none;
}

@media(max-width:900px){
  .company-minimal-head{
    grid-template-columns:1fr;
    gap:22px;
  }
  .company-values{
    grid-template-columns:1fr;
  }
  .company-values article,
  .company-values article:not(:first-child){
    min-height:auto;
    padding:26px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .company-values article:last-child{
    border-bottom:0;
  }
  .company-values h3{
    margin-top:28px;
  }
}


/* v3.5.6 — ambient hero, no duplicate right-side content */
.hero{
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:76px;
}
.hero-copy{
  max-width:780px;
}
.hero h1{
  max-width:780px;
}
.hero-ambient-visual{
  position:relative;
  min-height:570px;
  overflow:hidden;
  isolation:isolate;
}
.ambient-light{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.ambient-light-main{
  width:680px;
  height:680px;
  right:-170px;
  top:-50px;
  background:
    radial-gradient(
      circle at 38% 43%,
      rgba(130,158,187,.115) 0%,
      rgba(93,121,151,.07) 24%,
      rgba(48,68,89,.035) 43%,
      transparent 68%
    );
  filter:blur(5px);
}
.ambient-light-secondary{
  width:390px;
  height:390px;
  left:8%;
  bottom:-105px;
  background:
    radial-gradient(
      circle,
      rgba(201,130,75,.032) 0%,
      rgba(201,130,75,.012) 35%,
      transparent 68%
    );
  filter:blur(12px);
}
.ambient-architecture{
  position:absolute;
  inset:7% 0 7% 4%;
  opacity:.72;
}
.architecture-line,
.architecture-plane{
  position:absolute;
  display:block;
  pointer-events:none;
}
.architecture-line{
  background:rgba(255,255,255,.055);
}
.line-v1{
  width:1px;
  height:62%;
  left:34%;
  top:6%;
}
.line-v2{
  width:1px;
  height:37%;
  right:16%;
  bottom:10%;
  background:rgba(255,255,255,.04);
}
.line-h1{
  height:1px;
  width:64%;
  right:3%;
  top:33%;
}
.line-h2{
  height:1px;
  width:45%;
  left:12%;
  bottom:19%;
  background:linear-gradient(90deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
}
.architecture-plane{
  border:1px solid rgba(255,255,255,.045);
  background:linear-gradient(145deg,rgba(255,255,255,.012),transparent 62%);
}
.plane-one{
  width:44%;
  height:39%;
  right:9%;
  top:20%;
  transform:skewY(-5deg);
}
.plane-two{
  width:30%;
  height:24%;
  left:18%;
  bottom:16%;
  border-color:rgba(201,130,75,.035);
  transform:skewY(4deg);
}

/* Slightly quieter CTA to keep the hero premium */
.hero .button-accent{
  min-height:48px;
  padding-left:20px;
  padding-right:18px;
  box-shadow:0 12px 38px rgba(201,130,75,.055);
}

@media(max-width:1050px){
  .hero{
    grid-template-columns:1fr;
    gap:22px;
  }
  .hero-ambient-visual{
    min-height:235px;
  }
  .ambient-light-main{
    width:500px;
    height:500px;
    right:-80px;
    top:-165px;
  }
  .ambient-architecture{
    inset:0;
  }
}
@media(max-width:620px){
  .hero-ambient-visual{
    min-height:165px;
  }
  .ambient-light-main{
    width:390px;
    height:390px;
    right:-125px;
    top:-120px;
  }
  .ambient-light-secondary{
    width:260px;
    height:260px;
    left:-30px;
    bottom:-100px;
  }
  .plane-one{
    width:52%;
    right:0;
  }
  .line-v1{
    left:28%;
  }
}


/* v3.5.7 — subtle Ruzemi brand sculpture */
.hero{
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:72px;
}
.hero-sculpture-visual{
  position:relative;
  min-height:570px;
  overflow:hidden;
  isolation:isolate;
}
.sculpture-light{
  position:absolute;
  width:700px;
  height:700px;
  right:-210px;
  top:-75px;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 42%,
      rgba(119,148,178,.13) 0%,
      rgba(74,101,130,.06) 29%,
      rgba(36,55,76,.025) 49%,
      transparent 70%);
  filter:blur(7px);
}
.brand-sculpture{
  position:absolute;
  width:520px;
  height:520px;
  right:-38px;
  top:26px;
  transform:rotate(-7deg);
  opacity:.92;
}
.sculpture-ribbon{
  position:absolute;
  display:block;
  border-radius:50%;
  box-sizing:border-box;
}
.ribbon-main{
  width:430px;
  height:430px;
  left:28px;
  top:20px;
  border:54px solid rgba(232,236,240,.082);
  border-left-color:rgba(232,236,240,.028);
  border-bottom-color:rgba(232,236,240,.05);
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.012),
    0 30px 90px rgba(0,0,0,.07);
}
.ribbon-inner{
  width:300px;
  height:300px;
  left:100px;
  top:88px;
  border:1px solid rgba(255,255,255,.045);
  opacity:.65;
}
.sculpture-cut{
  position:absolute;
  width:235px;
  height:64px;
  left:184px;
  top:313px;
  border-radius:40px 8px 8px 40px;
  background:
    linear-gradient(90deg,
      rgba(227,232,237,.085),
      rgba(227,232,237,.045) 58%,
      rgba(227,232,237,.018));
  transform:rotate(43deg);
  transform-origin:left center;
  box-shadow:0 16px 46px rgba(0,0,0,.08);
}
.sculpture-accent{
  position:absolute;
  width:112px;
  height:2px;
  left:212px;
  top:354px;
  background:linear-gradient(90deg,var(--accent),rgba(201,130,75,.12));
  transform:rotate(43deg);
  transform-origin:left center;
  box-shadow:0 0 16px rgba(201,130,75,.08);
}
.sculpture-lines{
  position:absolute;
  inset:7% 3% 8% 5%;
  opacity:.62;
}
.s-line{
  position:absolute;
  display:block;
  background:rgba(255,255,255,.045);
}
.s-line-v{
  width:1px;
  height:56%;
  right:22%;
  top:7%;
}
.s-line-h{
  height:1px;
  width:68%;
  left:8%;
  bottom:19%;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
}
.s-line-d{
  width:1px;
  height:190px;
  right:9%;
  bottom:6%;
  transform:rotate(34deg);
  transform-origin:bottom center;
  background:rgba(201,130,75,.045);
}

/* keep the shape understated rather than logo-like */
@media(max-width:1050px){
  .hero{
    grid-template-columns:1fr;
    gap:18px;
  }
  .hero-sculpture-visual{
    min-height:275px;
  }
  .brand-sculpture{
    width:400px;
    height:400px;
    right:0;
    top:-15px;
    transform:rotate(-7deg) scale(.78);
    transform-origin:top right;
  }
  .sculpture-light{
    width:500px;
    height:500px;
    right:-60px;
    top:-165px;
  }
}
@media(max-width:620px){
  .hero-sculpture-visual{
    min-height:205px;
  }
  .brand-sculpture{
    right:-70px;
    top:-28px;
    transform:rotate(-7deg) scale(.62);
  }
  .sculpture-light{
    width:390px;
    height:390px;
    right:-100px;
    top:-125px;
  }
}

/* v3.5.8 — Kotlin ambient hero */
.hero{grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);gap:70px}
.hero-code-visual{position:relative;min-height:570px;overflow:hidden;isolation:isolate}
.hero-code-glow{position:absolute;width:720px;height:720px;right:-220px;top:-90px;border-radius:50%;background:radial-gradient(circle at 42% 45%,rgba(86,124,160,.12) 0%,rgba(57,85,111,.055) 32%,rgba(30,48,66,.02) 50%,transparent 70%);filter:blur(7px);pointer-events:none}
.hero-code-layer{position:absolute;top:1%;right:-4%;width:108%;height:98%;overflow:hidden;opacity:.68;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 9%,rgba(0,0,0,.78) 23%,#000 42%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 9%,rgba(0,0,0,.78) 23%,#000 42%,#000 88%,transparent 100%)}
.hero-code-inner{position:absolute;inset:0;padding:4vh 1.8vw 4vh 3vw;overflow:hidden;transform:perspective(1500px) rotateY(-2.2deg);transform-origin:right center}
.hero-code{display:inline;margin:0;white-space:pre-wrap;font-family:"JetBrains Mono","Fira Code",ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:clamp(10px,.76vw,13px);line-height:1.74;letter-spacing:-.01em;color:#83909d;text-shadow:0 0 14px rgba(100,150,190,.025)}
.hero-code .keyword{color:#aa91cc}.hero-code .type{color:#7296bd}.hero-code .function{color:#72a4a8}.hero-code .string{color:#8ea477}.hero-code .comment{color:#48545f}.hero-code .command{color:#6f9cad}.hero-code .success{color:#7f9d7f}.hero-code .plain{color:#747f8a}
.hero-code-cursor{display:inline-block;width:6px;height:1.05em;margin-left:2px;vertical-align:-2px;background:rgba(153,177,197,.62);animation:ruzemiCodeBlink 1s steps(1) infinite}
.hero-code-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,17,29,1) 0%,rgba(8,17,29,.94) 10%,rgba(8,17,29,.68) 25%,rgba(8,17,29,.22) 50%,rgba(8,17,29,.04) 82%,rgba(8,17,29,.18) 100%),linear-gradient(180deg,rgba(8,17,29,.78) 0%,rgba(8,17,29,.10) 17%,rgba(8,17,29,.05) 78%,rgba(8,17,29,.78) 100%)}
@keyframes ruzemiCodeBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
@media(max-width:1050px){.hero{grid-template-columns:1fr;gap:20px}.hero-code-visual{min-height:280px}.hero-code-layer{right:-12%;width:118%;opacity:.50}.hero-code-inner{padding:2vh 2vw;transform:perspective(1400px) rotateY(-1.2deg)}.hero-code{font-size:10px;line-height:1.65}.hero-code-shade{background:linear-gradient(180deg,rgba(8,17,29,.18) 0%,rgba(8,17,29,.14) 45%,rgba(8,17,29,.72) 100%)}}
@media(max-width:620px){.hero-code-visual{min-height:205px}.hero-code-layer{right:-28%;width:140%;opacity:.34}.hero-code{font-size:9px;line-height:1.58}}
@media(prefers-reduced-motion:reduce){.hero-code-cursor{animation:none}}


/* v3.5.9 — Kotlin hero visibility + cache-safe release */
.hero-code-layer{
  opacity:.84;
}
.hero-code{
  color:#9ba8b5;
  font-size:clamp(11px,.82vw,14px);
  line-height:1.72;
}
.hero-code .keyword{color:#b39adb}
.hero-code .type{color:#82a9d3}
.hero-code .function{color:#83b7b9}
.hero-code .string{color:#9db783}
.hero-code .comment{color:#5b6873}
.hero-code .command{color:#83b3c4}
.hero-code .success{color:#8bb28c}
.hero-code .plain{color:#8995a0}

.hero-code-shade{
  background:
    linear-gradient(
      90deg,
      rgba(8,17,29,1) 0%,
      rgba(8,17,29,.88) 9%,
      rgba(8,17,29,.52) 23%,
      rgba(8,17,29,.14) 47%,
      rgba(8,17,29,.025) 82%,
      rgba(8,17,29,.10) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8,17,29,.56) 0%,
      rgba(8,17,29,.04) 16%,
      rgba(8,17,29,.02) 80%,
      rgba(8,17,29,.62) 100%
    );
}

@media(max-width:1050px){
  .hero-code-layer{opacity:.60}
}
@media(max-width:620px){
  .hero-code-layer{opacity:.44}
}


/* v3.5.10 — seamless Kotlin layer */
.hero-code-visual,
.hero-code-layer,
.hero-code-inner,
.hero-code{
  background:transparent !important;
}

.hero-code-layer{
  opacity:.86;
  -webkit-mask-image:
    radial-gradient(
      ellipse 92% 88% at 58% 48%,
      #000 0%,
      #000 56%,
      rgba(0,0,0,.82) 70%,
      rgba(0,0,0,.34) 86%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 92% 88% at 58% 48%,
      #000 0%,
      #000 56%,
      rgba(0,0,0,.82) 70%,
      rgba(0,0,0,.34) 86%,
      transparent 100%
    );
}

.hero-code-shade{
  display:none !important;
  background:none !important;
}

.hero-code-glow{
  opacity:.72;
  mix-blend-mode:screen;
}

.hero-code-inner{
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}

.hero-code{
  text-shadow:0 0 18px rgba(100,150,190,.025);
}

@media(max-width:1050px){
  .hero-code-layer{
    opacity:.62;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 78%,transparent 100%);
  }
}

@media(max-width:620px){
  .hero-code-layer{opacity:.46}
}


/* v3.5.11 — integrated Kotlin layer, no visible box */
.hero{
  position:relative !important;
  display:block !important;
  min-height:calc(100vh - 92px);
  padding-top:92px;
  padding-bottom:110px;
}

.hero-copy{
  position:relative;
  z-index:3;
  max-width:760px;
}

.hero-visual.hero-code-visual{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  z-index:1;
  overflow:hidden;
  background:transparent !important;
  pointer-events:none;
}

.hero-code-glow{
  width:900px;
  height:900px;
  right:-260px;
  top:-180px;
  opacity:.65;
  mix-blend-mode:screen;
  filter:blur(10px);
  background:
    radial-gradient(
      circle at 40% 45%,
      rgba(86,124,160,.10) 0%,
      rgba(57,85,111,.045) 28%,
      rgba(30,48,66,.012) 46%,
      transparent 70%
    );
}

.hero-code-layer{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:.84;
  background:transparent !important;
  overflow:hidden;
  /* Full-bleed layer: no column box, only a soft reveal on the right half */
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 47%,
      rgba(0,0,0,.10) 54%,
      rgba(0,0,0,.55) 62%,
      #000 74%,
      #000 91%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 47%,
      rgba(0,0,0,.10) 54%,
      rgba(0,0,0,.55) 62%,
      #000 74%,
      #000 91%,
      transparent 100%
    );
}

.hero-code-inner{
  position:absolute !important;
  inset:0 !important;
  padding:112px 6vw 90px 56% !important;
  transform:none !important;
  transform-origin:initial !important;
  overflow:hidden;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.hero-code{
  display:block;
  margin:0;
  max-width:100%;
  white-space:pre-wrap;
  background:transparent !important;
  color:#9eacb9;
  font-size:clamp(11px,.8vw,14px);
  line-height:1.72;
  text-shadow:0 0 16px rgba(100,150,190,.02);
}

.hero-code-cursor{
  background:rgba(168,188,205,.68);
}

.hero-code-shade{
  display:none !important;
}

@media (max-width: 1050px){
  .hero{
    min-height:auto;
    padding-top:80px;
    padding-bottom:96px;
  }

  .hero-copy{
    max-width:100%;
    padding-right:0;
  }

  .hero-visual.hero-code-visual{
    inset:auto 0 0 0 !important;
    top:0 !important;
    min-height:100% !important;
  }

  .hero-code-layer{
    opacity:.56;
    -webkit-mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,0,0,.08) 8%,
        #000 20%,
        #000 78%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,0,0,.08) 8%,
        #000 20%,
        #000 78%,
        transparent 100%
      );
  }

  .hero-code-inner{
    padding:22px 5vw 20px 52% !important;
  }

  .hero-code{
    font-size:10px;
    line-height:1.62;
  }
}

@media (max-width: 620px){
  .hero{
    padding-top:72px;
    padding-bottom:82px;
  }

  .hero-code-layer{
    opacity:.36;
  }

  .hero-code-inner{
    padding:18px 4vw 16px 46% !important;
  }

  .hero-code{
    font-size:9px;
    line-height:1.55;
  }
}


/* v3.5.12 — larger, subtler, more graphic Kotlin background */
.hero-copy{
  max-width: 740px;
}

.hero-visual.hero-code-visual{
  z-index: 1;
}

.hero-code-glow{
  width: 980px;
  height: 980px;
  right: -280px;
  top: -220px;
  opacity: .52;
  filter: blur(14px);
  background:
    radial-gradient(
      circle at 42% 46%,
      rgba(92, 132, 171, .085) 0%,
      rgba(60, 91, 121, .036) 30%,
      rgba(30, 48, 66, .008) 52%,
      transparent 72%
    );
}

.hero-code-layer{
  opacity: .58;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 50%,
      rgba(0,0,0,.02) 57%,
      rgba(0,0,0,.28) 64%,
      rgba(0,0,0,.78) 74%,
      rgba(0,0,0,.95) 85%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 50%,
      rgba(0,0,0,.02) 57%,
      rgba(0,0,0,.28) 64%,
      rgba(0,0,0,.78) 74%,
      rgba(0,0,0,.95) 85%,
      transparent 100%
    );
}

.hero-code-inner{
  padding: 106px 7vw 92px 55% !important;
}

.hero-code{
  color: rgba(176, 193, 208, .78);
  font-size: clamp(12px, .95vw, 17px);
  line-height: 1.95;
  letter-spacing: -.02em;
  text-shadow: none;
  transform: scale(1.02);
  transform-origin: top left;
  max-width: 540px;
}

.hero-code .keyword{color: rgba(192, 164, 228, .76)}
.hero-code .type{color: rgba(141, 178, 214, .74)}
.hero-code .function{color: rgba(126, 183, 185, .72)}
.hero-code .string{color: rgba(162, 189, 135, .72)}
.hero-code .comment{color: rgba(102, 117, 130, .56)}
.hero-code .command{color: rgba(132, 177, 193, .74)}
.hero-code .success{color: rgba(145, 187, 145, .75)}
.hero-code .plain{color: rgba(145, 158, 170, .67)}

.hero-code-cursor{
  width: 7px;
  height: 1.05em;
  background: rgba(178, 198, 214, .46);
  box-shadow: 0 0 10px rgba(178, 198, 214, .06);
}

@media (max-width: 1050px){
  .hero-code-layer{
    opacity: .42;
  }
  .hero-code-inner{
    padding: 22px 5vw 18px 50% !important;
  }
  .hero-code{
    font-size: 11px;
    line-height: 1.78;
    max-width: 440px;
    transform: none;
  }
}

@media (max-width: 620px){
  .hero-code-layer{
    opacity: .28;
  }
  .hero-code-inner{
    padding: 16px 4vw 14px 44% !important;
  }
  .hero-code{
    font-size: 10px;
    line-height: 1.62;
    max-width: 300px;
  }
}


/* v3.5.13 — advanced technical Kotlin hero */
.hero-visual.hero-code-visual{
  overflow:hidden;
}

/* extremely subtle technical grid, full-bleed */
.hero-visual.hero-code-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 50%, #000 70%, rgba(0,0,0,.55) 92%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 50%, #000 70%, rgba(0,0,0,.55) 92%, transparent 100%);
}

/* soft moving technical highlight */
.hero-visual.hero-code-visual::after{
  content:"";
  position:absolute;
  z-index:2;
  top:-12%;
  bottom:-12%;
  width:180px;
  right:21%;
  pointer-events:none;
  opacity:.32;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(127,169,204,.035) 40%,
      rgba(201,130,75,.025) 50%,
      rgba(127,169,204,.025) 60%,
      transparent
    );
  filter:blur(16px);
  animation:ruzemiTechSweep 9s ease-in-out infinite;
}

.hero-code-glow{
  width:1050px;
  height:1050px;
  right:-310px;
  top:-260px;
  opacity:.60;
  filter:blur(18px);
  background:
    radial-gradient(
      circle at 38% 44%,
      rgba(86,126,166,.10) 0%,
      rgba(55,83,111,.045) 26%,
      rgba(23,40,58,.012) 48%,
      transparent 72%
    );
}

.hero-code-layer{
  opacity:.66;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 49%,
      rgba(0,0,0,.08) 56%,
      rgba(0,0,0,.42) 64%,
      rgba(0,0,0,.92) 75%,
      #000 88%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 49%,
      rgba(0,0,0,.08) 56%,
      rgba(0,0,0,.42) 64%,
      rgba(0,0,0,.92) 75%,
      #000 88%,
      transparent 100%
    );
}

.hero-code-inner{
  padding:92px 6.5vw 86px 53% !important;
}

/* larger and slightly more architectural */
.hero-code{
  max-width:610px;
  font-size:clamp(13px,1.04vw,18px);
  line-height:1.88;
  letter-spacing:-.025em;
  color:rgba(185,201,215,.78);
  transform:none;
  text-rendering:geometricPrecision;
}

.hero-code .keyword{
  color:rgba(194,163,229,.84);
  text-shadow:0 0 18px rgba(194,163,229,.025);
}
.hero-code .type{
  color:rgba(137,180,222,.84);
}
.hero-code .function{
  color:rgba(126,189,190,.82);
}
.hero-code .string{
  color:rgba(164,194,138,.80);
}
.hero-code .comment{
  color:rgba(100,117,132,.52);
}
.hero-code .command{
  color:rgba(131,180,198,.84);
}
.hero-code .success{
  color:rgba(158,202,127,.88);
  text-shadow:0 0 14px rgba(201,130,75,.08);
}
.hero-code .plain{
  color:rgba(143,157,169,.68);
}

.hero-code-cursor{
  width:7px;
  background:rgba(201,130,75,.48);
  box-shadow:
    0 0 8px rgba(201,130,75,.08),
    0 0 18px rgba(201,130,75,.035);
}

/* faint line-depth effect without creating a panel */
.hero-code-inner::after{
  content:"";
  position:absolute;
  inset:9% 4% 8% 50%;
  pointer-events:none;
  border-left:1px solid rgba(255,255,255,.028);
  border-bottom:1px solid rgba(255,255,255,.018);
  opacity:.8;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
}

@keyframes ruzemiTechSweep{
  0%,100%{
    transform:translateX(90px);
    opacity:.08;
  }
  50%{
    transform:translateX(-120px);
    opacity:.32;
  }
}

@media(max-width:1050px){
  .hero-code-layer{opacity:.50}
  .hero-code-inner{padding:20px 4.5vw 18px 49% !important}
  .hero-code{
    max-width:470px;
    font-size:11px;
    line-height:1.70;
  }
  .hero-visual.hero-code-visual::after{
    opacity:.20;
  }
}

@media(max-width:620px){
  .hero-code-layer{opacity:.31}
  .hero-code-inner{padding:15px 3.5vw 14px 43% !important}
  .hero-code{
    max-width:320px;
    font-size:9.5px;
    line-height:1.58;
  }
  .hero-visual.hero-code-visual::before{
    opacity:.08;
  }
  .hero-visual.hero-code-visual::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-visual.hero-code-visual::after{
    animation:none;
    opacity:.12;
  }
}


/* v3.5.15 — JS failure safety
   Content is visible by default. Reveal hiding is enabled only after valid JS starts. */
.reveal{
  opacity:1 !important;
  transform:none !important;
}

.js .reveal{
  opacity:0 !important;
  transform:translateY(18px) !important;
  transition:opacity .72s ease, transform .72s ease !important;
}

.js .reveal.visible{
  opacity:1 !important;
  transform:none !important;
}

@media(prefers-reduced-motion:reduce){
  .js .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* v3.5.16 — metallic ivory/silver + copper identity */
:root{
  --accent:#c9824b;
  --accent-light:#e6a56a;
  --accent-dark:#9c5a31;
  --metal:#eee9e1;
}

body{
  background:
    radial-gradient(circle at 82% 7%,rgba(197,180,159,.075),transparent 27%),
    radial-gradient(circle at 63% 46%,rgba(201,130,75,.026),transparent 29%),
    var(--bg);
}

.site-header{
  background:rgba(7,15,25,.80);
  border-bottom-color:rgba(225,205,187,.07);
}

.brand-logo img{
  height:54px;
  max-width:248px;
}
.footer-logo img{
  height:55px;
  max-width:252px;
}

.micro-dot{
  background:linear-gradient(135deg,var(--accent-light),var(--accent-dark));
  box-shadow:0 0 16px rgba(201,130,75,.25);
}

.nav-pill span,
.quiet-link span{
  color:var(--accent-light);
}

.button-accent{
  background:
    linear-gradient(125deg,#f2eee7 0%,#ddd6cc 38%,#d79a63 70%,#b56b3d 100%);
  color:#101114;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 14px 42px rgba(104,61,34,.15),
    inset 0 1px 0 rgba(255,255,255,.38);
}

.button-accent:hover{
  box-shadow:
    0 18px 48px rgba(140,82,45,.20),
    inset 0 1px 0 rgba(255,255,255,.42);
}

.hero-code-cursor{
  background:rgba(214,149,94,.64) !important;
  box-shadow:
    0 0 8px rgba(201,130,75,.09),
    0 0 18px rgba(201,130,75,.04) !important;
}

.hero-code .success{
  color:rgba(203,176,151,.82) !important;
  text-shadow:0 0 14px rgba(201,130,75,.055) !important;
}

.hero-visual.hero-code-visual::after{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(206,190,174,.028) 40%,
      rgba(201,130,75,.034) 50%,
      rgba(206,190,174,.022) 60%,
      transparent
    ) !important;
}

@media(max-width:760px){
  .brand-logo img{height:47px;max-width:218px}
  .footer-logo img{height:49px;max-width:225px}
}


/* v3.5.18 — refined hero transition */
.hero{
  position:relative;
  min-height:clamp(700px,82vh,860px);
  padding-top:68px;
  padding-bottom:120px;
  align-items:start;
}

.hero-copy{
  position:relative;
  z-index:4;
  padding-top:14px;
}

.hero-visual.hero-code-visual{
  inset:0 !important;
  min-height:100% !important;
}

.hero-code-layer{
  top:-1.5% !important;
  height:109% !important;
  opacity:.64;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 48%,
      rgba(0,0,0,.10) 56%,
      rgba(0,0,0,.45) 64%,
      rgba(0,0,0,.90) 76%,
      #000 90%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.88) 8%,
      #000 18%,
      #000 90%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 48%,
      rgba(0,0,0,.10) 56%,
      rgba(0,0,0,.45) 64%,
      rgba(0,0,0,.90) 76%,
      #000 90%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.88) 8%,
      #000 18%,
      #000 90%,
      transparent 100%
    );
}

.hero-code-inner{
  padding:96px 6.5vw 26px 53% !important;
}

.hero-code{
  max-width:620px;
}

.hero-transition{
  position:absolute;
  left:0;
  right:0;
  bottom:30px;
  z-index:5;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:42px;
  text-decoration:none;
  color:inherit;
}

.hero-transition-meta{
  min-width:230px;
  display:flex;
  align-items:center;
  gap:14px;
}

.hero-transition-kicker{
  font:11px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#8d8178;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hero-transition-rule{
  display:block;
  height:1px;
  flex:1 1 auto;
  min-width:120px;
  background:linear-gradient(90deg, rgba(201,130,75,.48), rgba(201,130,75,.08));
}

.hero-transition-traces{
  position:relative;
  width:min(44vw, 510px);
  height:72px;
  flex:0 0 auto;
  opacity:.96;
}

.hero-transition-traces .trace{
  position:absolute;
  right:0;
  display:block;
  border-bottom:1px solid rgba(201,130,75,.34);
  border-left:1px solid rgba(201,130,75,.34);
  border-bottom-left-radius:20px;
}

.hero-transition-traces .trace::after{
  content:"";
  position:absolute;
  left:-6px;
  bottom:-5px;
  width:9px;
  height:9px;
  border:1px solid rgba(201,130,75,.55);
  border-radius:50%;
  background:rgba(8,17,29,.9);
  box-shadow:0 0 0 3px rgba(201,130,75,.06);
}

.hero-transition-traces .trace-a{
  width:100%;
  height:64px;
  bottom:0;
}

.hero-transition-traces .trace-b{
  width:74%;
  height:42px;
  bottom:12px;
}

.hero-transition-traces .trace-c{
  width:49%;
  height:24px;
  bottom:22px;
}

.hero-transition:hover .hero-transition-kicker{
  color:#b6967a;
}

.hero-transition:hover .hero-transition-rule,
.hero-transition:hover .hero-transition-traces .trace{
  filter:brightness(1.12);
}

.products.section{
  padding-top:112px;
}

@media (max-width: 1100px){
  .hero{
    min-height:clamp(680px,80vh,800px);
    padding-bottom:110px;
  }

  .hero-code-inner{
    padding:86px 5vw 18px 50% !important;
  }

  .hero-transition{
    gap:24px;
    bottom:24px;
  }

  .hero-transition-traces{
    width:min(38vw, 360px);
    height:60px;
  }
}

@media (max-width: 760px){
  .hero{
    min-height:auto;
    padding-top:60px;
    padding-bottom:84px;
  }

  .hero-transition{
    position:relative;
    bottom:auto;
    margin-top:34px;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .hero-transition-meta{
    width:100%;
  }

  .hero-transition-rule{
    min-width:0;
  }

  .hero-transition-traces{
    width:100%;
    max-width:320px;
    height:54px;
  }

  .products.section{
    padding-top:84px;
  }
}

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


/* v3.5.19 — refined premium hero CTA */
.hero-actions .button-accent{
  min-height:54px;
  padding:0 14px 0 22px;
  gap:14px;
  border-radius:18px;
  font-size:13px;
  font-weight:620;
  letter-spacing:-0.01em;
  color:#12151a;
  text-decoration:none;
  background:
    linear-gradient(
      135deg,
      #f8f4ef 0%,
      #eee7df 26%,
      #dfcfbe 52%,
      #d49a66 78%,
      #bd7647 100%
    );
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    0 4px 10px rgba(157,95,55,.10),
    inset 0 1px 0 rgba(255,255,255,.52);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.hero-actions .button-accent:hover{
  transform:translateY(-2px);
  filter:brightness(1.015);
  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    0 6px 14px rgba(157,95,55,.12),
    inset 0 1px 0 rgba(255,255,255,.58);
}

.hero-actions .button-accent:active{
  transform:translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,.17),
    0 2px 6px rgba(157,95,55,.10),
    inset 0 1px 0 rgba(255,255,255,.48);
}

.hero-actions .button-accent span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(8,17,29,.08);
  color:#1b1e22;
  font-size:13px;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
}

@media (max-width: 760px){
  .hero-actions .button-accent{
    min-height:50px;
    padding:0 12px 0 18px;
    border-radius:16px;
    font-size:12px;
  }

  .hero-actions .button-accent span{
    width:26px;
    height:26px;
    font-size:12px;
  }
}


/* v3.5.20 — luxury corporate hero CTA */
.hero-actions .button-accent{
  position:relative;
  min-height:54px;
  padding:0 18px 0 22px;
  gap:18px;
  border-radius:14px;
  overflow:hidden;

  color:#eee9e1;
  font-size:12.5px;
  font-weight:560;
  letter-spacing:.005em;

  background:
    linear-gradient(
      180deg,
      rgba(22,31,42,.94) 0%,
      rgba(13,22,32,.96) 100%
    );

  border:1px solid rgba(224,205,188,.18);

  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(201,130,75,.035);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

/* very subtle metallic edge */
.hero-actions .button-accent::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:
    linear-gradient(
      112deg,
      rgba(245,239,231,.20) 0%,
      rgba(245,239,231,.06) 38%,
      rgba(201,130,75,.17) 72%,
      rgba(201,130,75,.28) 100%
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.78;
}

/* quiet copper accent line */
.hero-actions .button-accent::after{
  content:"";
  position:absolute;
  left:22px;
  right:50px;
  bottom:7px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(201,130,75,.22) 18%,
      rgba(201,130,75,.44) 58%,
      transparent
    );
  opacity:.55;
}

.hero-actions .button-accent:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(
      180deg,
      rgba(26,36,48,.97) 0%,
      rgba(15,25,36,.98) 100%
    );
  border-color:rgba(224,205,188,.25);
  box-shadow:
    0 14px 32px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(201,130,75,.05);
}

.hero-actions .button-accent:active{
  transform:translateY(0);
  box-shadow:
    0 8px 20px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* arrow is no longer a filled circle */
.hero-actions .button-accent span{
  position:relative;
  width:23px;
  height:23px;
  flex:0 0 23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:0;
  background:transparent;
  color:#d49a66;
  font-size:13px;
  font-weight:500;

  border-left:1px solid rgba(224,205,188,.12);
  box-shadow:none;
}

.hero-actions .button-accent:hover span{
  color:#e0ab7a;
}

/* make the hero action spacing feel more editorial */
.hero-actions{
  margin-top:40px;
}

@media(max-width:760px){
  .hero-actions .button-accent{
    min-height:50px;
    padding:0 16px 0 19px;
    border-radius:13px;
    font-size:12px;
  }

  .hero-actions .button-accent::after{
    left:19px;
    right:45px;
    bottom:6px;
  }

  .hero-actions .button-accent span{
    width:21px;
    height:21px;
    flex-basis:21px;
  }
}


/* v3.5.21 — fixed circuit brand rail + scroll illumination */
.brand-wordmark-desktop{display:block}
.brand-full-compact{display:none}

/* Prevent the global brand image sizing rule from making the wordmark too tall. */
.site-header .brand-logo .brand-wordmark-desktop{
  width:166px !important;
  height:auto !important;
  max-width:166px !important;
}
.site-header .brand-logo .brand-full-compact{
  width:205px !important;
  height:auto !important;
  max-width:205px !important;
}

.circuit-scroll-rail{
  --rail-progress:0%;
  position:fixed;
  z-index:42;
  top:94px;
  bottom:24px;
  left:max(18px, calc((100vw - 1220px)/2 - 96px));
  width:82px;
  pointer-events:none;
  opacity:1;
}

.circuit-rail-logo{
  position:absolute;
  z-index:4;
  top:0;
  left:4px;
  width:74px;
  height:74px;
  display:block;
  pointer-events:auto;
  transition:transform .24s ease, filter .24s ease;
}

.circuit-rail-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.20));
}

.circuit-rail-logo:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

.circuit-rail-track{
  position:absolute;
  top:68px;
  bottom:0;
  left:0;
  right:0;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 5%,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 5%,#000 94%,transparent 100%);
}

.circuit-rail-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

.circuit-rail-svg path{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.circuit-rail-base path{
  stroke:rgba(201,130,75,.115);
  stroke-width:1.15;
}

.circuit-rail-progress{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:var(--rail-progress);
  overflow:hidden;
  transition:height .08s linear;
}

.circuit-rail-active{
  height:calc(100vh - 118px);
  min-height:100%;
}

.circuit-rail-active path{
  stroke:rgba(214,149,94,.76);
  stroke-width:1.45;
  filter:drop-shadow(0 0 4px rgba(201,130,75,.18));
}

.circuit-rail-position{
  position:absolute;
  z-index:3;
  left:39px;
  top:var(--rail-progress);
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#d7965c;
  border:1px solid rgba(246,224,204,.68);
  box-shadow:
    0 0 0 5px rgba(201,130,75,.055),
    0 0 15px rgba(201,130,75,.28);
  transition:top .08s linear;
}

.circuit-rail-nodes{
  position:absolute;
  top:68px;
  bottom:0;
  left:0;
  right:0;
  pointer-events:none;
}

.circuit-rail-nodes a{
  position:absolute;
  left:34px;
  width:15px;
  height:15px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  pointer-events:auto;
}

.circuit-rail-nodes a::before{
  content:"";
  position:absolute;
  left:-16px;
  width:17px;
  height:1px;
  background:rgba(201,130,75,.18);
}

.circuit-rail-nodes a span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#08111d;
  border:1px solid rgba(201,130,75,.33);
  box-shadow:0 0 0 3px rgba(8,17,29,.82);
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.circuit-rail-nodes a.is-passed span{
  border-color:rgba(214,149,94,.72);
  background:rgba(201,130,75,.22);
}

.circuit-rail-nodes a.is-current span{
  border-color:#e0a46e;
  background:#d28a51;
  transform:scale(1.18);
  box-shadow:
    0 0 0 4px rgba(201,130,75,.08),
    0 0 12px rgba(201,130,75,.25);
}

/* Keep the left side feeling deliberate rather than cramped. */
@media(min-width:1281px){
  .site-header .nav{
    padding-left:0;
  }
}

@media(max-width:1280px){
  .circuit-scroll-rail{display:none}
  .brand-wordmark-desktop{display:none}
  .brand-full-compact{display:block}
}

@media(prefers-reduced-motion:reduce){
  .circuit-rail-progress,
  .circuit-rail-position,
  .circuit-rail-logo,
  .circuit-rail-nodes a span{
    transition:none !important;
  }
}


/* v3.5.22 — cleaner brand header + Kotlin shifted right */

/* Force only one header logo state per breakpoint. */
.brand-wordmark-desktop{
  display:block !important;
}
.brand-full-compact{
  display:none !important;
}

.site-header .brand.brand-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.site-header .brand-logo .brand-wordmark-desktop{
  width:176px !important;
  max-width:176px !important;
  height:auto !important;
}

/* Move the Kotlin visual slightly more to the right on desktop. */
.hero-code-layer{
  right:-6.5% !important;
  width:110% !important;
}

.hero-code-inner{
  padding:96px 4.8vw 24px 58% !important;
}

/* Tablet/laptop adjustment */
@media (max-width: 1280px){
  .brand-wordmark-desktop{
    display:none !important;
  }
  .brand-full-compact{
    display:block !important;
  }

  .hero-code-layer{
    right:-5% !important;
    width:108% !important;
  }

  .hero-code-inner{
    padding:88px 4.8vw 18px 54% !important;
  }
}

/* Mobile keeps current simpler behavior */
@media (max-width: 760px){
  .hero-code-layer{
    right:-22% !important;
    width:128% !important;
  }

  .hero-code-inner{
    padding:68px 6vw 16px 45% !important;
  }
}


/* v3.5.23 — more breathing room between circuit brand rail and hero copy */
@media(min-width:1281px){
  .circuit-scroll-rail{
    left:max(14px, calc((100vw - 1220px)/2 - 138px)) !important;
  }
}


/* v3.5.24 — single header lockup: [circuit-R]UZEMI */
.brand-wordmark-desktop,
.brand-full-compact{
  display:none !important;
}

.site-header .brand.brand-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.site-header .brand-logo .brand-circuit-lockup{
  display:block !important;
  width:246px !important;
  max-width:246px !important;
  height:auto !important;
  object-fit:contain;
}

@media(max-width:760px){
  .site-header .brand-logo .brand-circuit-lockup{
    width:210px !important;
    max-width:210px !important;
  }
}


/* v3.5.25 — tighter integrated [circuit-R]UZEMI lockup */
.site-header .brand-logo .brand-circuit-lockup{
  width:232px !important;
  max-width:232px !important;
}

@media(max-width:760px){
  .site-header .brand-logo .brand-circuit-lockup{
    width:198px !important;
    max-width:198px !important;
  }
}


/* v3.5.26 — corrected [circuit-R]UZEMI lockup */
.site-header .brand-logo .brand-circuit-lockup{
  width:252px !important;
  max-width:252px !important;
}

@media(max-width:760px){
  .site-header .brand-logo .brand-circuit-lockup{
    width:214px !important;
    max-width:214px !important;
  }
}


/* v3.5.27 — polished custom UZEMI lettering */
.site-header .brand-logo .brand-circuit-lockup{
  width:264px !important;
  max-width:264px !important;
}

@media(max-width:760px){
  .site-header .brand-logo .brand-circuit-lockup{
    width:224px !important;
    max-width:224px !important;
  }
}


/* ============================================================
   v3.5.28 — final polish pass
   Mobile • product signatures • rail states • subpages • UX
   ============================================================ */

/* Global interaction consistency */
a{
  text-underline-offset:3px;
}
a:focus-visible,
button:focus-visible{
  outline:2px solid rgba(224,164,110,.82);
  outline-offset:4px;
}
.nav-links > a:not(.nav-pill),
.footer a,
.legal-back,
.editorial-link{
  position:relative;
}
.nav-links > a:not(.nav-pill)::after,
.footer a::after,
.legal-back::after,
.editorial-link::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-5px;
  height:1px;
  background:linear-gradient(90deg,rgba(238,233,225,.55),rgba(201,130,75,.72));
  transition:right .22s ease;
}
.nav-links > a:not(.nav-pill):hover::after,
.footer a:hover::after,
.legal-back:hover::after,
.editorial-link:hover::after{
  right:0;
}

/* Product rows: identity without turning them into cards */
.editorial-product{
  position:relative;
}
.editorial-product::before{
  content:"";
  position:absolute;
  left:70px;
  top:0;
  width:54px;
  height:1px;
  opacity:.72;
}
.product-baby::before{
  background:linear-gradient(90deg,rgba(208,158,165,.85),rgba(201,130,75,.08));
}
.product-workplace::before{
  background:linear-gradient(90deg,rgba(130,163,188,.82),rgba(201,130,75,.12));
}
.editorial-eyebrow::before{
  content:"";
  width:10px;
  height:10px;
  flex:0 0 10px;
  border:1px solid rgba(255,255,255,.15);
  transform:rotate(45deg);
  box-shadow:inset 0 0 0 2px #08111d;
}
.product-baby .editorial-eyebrow::before{
  background:rgba(208,158,165,.72);
  border-color:rgba(229,185,190,.38);
}
.product-workplace .editorial-eyebrow::before{
  background:rgba(121,155,182,.68);
  border-color:rgba(153,184,207,.35);
}
.product-baby .status-live i{
  background:#d0a0a6;
}
.product-workplace .status-dev{
  color:#9cb3c7;
  border-color:rgba(139,171,196,.17);
  background:rgba(108,144,172,.05);
}
.product-workplace .status-dev i{
  background:#839fb6;
}

/* Rail: only the current section is prominent; passed nodes settle back */
.circuit-rail-nodes a.is-passed:not(.is-current) span{
  border-color:rgba(201,130,75,.40);
  background:rgba(201,130,75,.08);
  box-shadow:0 0 0 3px rgba(8,17,29,.86);
  opacity:.62;
}
.circuit-rail-nodes a.is-current span{
  opacity:1;
}
.circuit-rail-nodes a.is-current::before{
  background:linear-gradient(90deg,rgba(201,130,75,.16),rgba(224,164,110,.70));
}
.circuit-rail-logo img{
  content:url("assets/brand/ruzemi-symbol-metallic-ui.png");
}

/* Legal/privacy: same visual language as homepage, but restrained */
.legal-page{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 10%,rgba(201,130,75,.035),transparent 26%),
    radial-gradient(circle at 84% 24%,rgba(117,150,179,.045),transparent 25%);
}
.legal-page::before{
  content:"";
  position:absolute;
  top:74px;
  right:-20px;
  width:min(42vw,520px);
  height:150px;
  pointer-events:none;
  opacity:.42;
  background:
    linear-gradient(90deg,transparent 0 16%,rgba(201,130,75,.22) 16% 16.2%,transparent 16.2% 100%),
    linear-gradient(0deg,transparent 0 36%,rgba(201,130,75,.16) 36% 36.5%,transparent 36.5% 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 38%,transparent);
}
.legal-wrap{
  position:relative;
  z-index:1;
}
.legal-wrap h1{
  color:#f0ece6;
}
.legal-block{
  transition:border-color .2s ease;
}
.legal-block:hover{
  border-color:rgba(201,130,75,.18);
}

/* 404 uses the current symbol instead of the old identity */
.error-symbol{
  border-color:rgba(224,205,188,.11);
  background:
    radial-gradient(circle at 50% 45%,rgba(201,130,75,.06),transparent 60%),
    rgba(255,255,255,.012);
}
.error-symbol img{
  width:96px;
  height:96px;
}

/* Footer/header lockup consistency on secondary pages */
.legal-page + .footer .brand-circuit-lockup,
.footer .brand-circuit-lockup{
  width:218px !important;
  max-width:218px !important;
  height:auto !important;
}

/* Rendering/performance for below-the-fold sections */
.products.section,
.company.section,
.closing-minimal,
.footer{
  content-visibility:auto;
  contain-intrinsic-size:1px 700px;
}

/* Mobile-specific audit */
@media(max-width:760px){
  :root{
    --shell:min(100% - 36px,680px);
  }

  .site-header{
    backdrop-filter:blur(14px);
  }

  .nav{
    height:68px;
  }

  .site-header .brand-logo .brand-circuit-lockup{
    width:196px !important;
    max-width:196px !important;
  }

  .nav-links{
    top:62px;
    border-radius:14px;
    background:rgba(8,17,29,.975);
    border-color:rgba(224,205,188,.09);
    box-shadow:0 24px 60px rgba(0,0,0,.38);
  }

  .hero{
    padding-top:52px;
    padding-bottom:74px;
  }

  .hero h1{
    font-size:clamp(45px,13vw,66px);
    line-height:.96;
    letter-spacing:-.058em;
    margin-top:24px;
  }

  .hero-lead{
    max-width:34rem;
    line-height:1.7;
  }

  .hero-actions{
    margin-top:30px;
  }

  /* Code is atmospheric on mobile, not a second content column */
  .hero-visual.hero-code-visual{
    opacity:.62;
  }
  .hero-code-layer{
    opacity:.22 !important;
    right:-34% !important;
    width:138% !important;
  }
  .hero-code-inner{
    padding:36px 2vw 10px 49% !important;
  }
  .hero-code{
    font-size:8.5px !important;
    line-height:1.48 !important;
    max-width:260px !important;
  }
  .hero-visual.hero-code-visual::before,
  .hero-visual.hero-code-visual::after,
  .hero-code-glow{
    display:none !important;
  }

  .hero-transition{
    margin-top:26px;
  }
  .hero-transition-traces{
    opacity:.55;
    height:42px;
  }

  .section{
    padding-top:82px;
    padding-bottom:82px;
  }

  .section-head h2,
  .company-minimal-head h2{
    font-size:clamp(38px,11vw,54px);
    line-height:1.04;
  }

  .editorial-product::before{
    left:0;
    width:42px;
  }

  .editorial-main h3{
    font-size:34px;
  }

  .editorial-main p{
    font-size:14px;
    line-height:1.68;
  }

  .editorial-meta{
    margin-top:2px;
  }

  .company-values article,
  .company-values article:not(:first-child){
    padding-top:24px;
    padding-bottom:24px;
  }

  .closing-minimal{
    padding:90px 0 100px;
  }

  .footer-inner{
    gap:28px;
  }

  .footer .brand-circuit-lockup{
    width:190px !important;
    max-width:190px !important;
  }

  .legal-page{
    padding-top:68px;
  }
  .legal-page::before{
    display:none;
  }
}

/* Narrow phone safeguard */
@media(max-width:420px){
  :root{
    --shell:min(100% - 28px,680px);
  }
  .site-header .brand-logo .brand-circuit-lockup{
    width:178px !important;
    max-width:178px !important;
  }
  .hero h1{
    font-size:clamp(42px,12.7vw,58px);
  }
  .hero-actions .button-accent{
    min-height:48px;
  }
}

/* Respect reduced motion across the remaining interaction layer */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
  }
  .nav-links > a::after,
  .footer a::after,
  .legal-back::after,
  .editorial-link::after{
    transition:none !important;
  }
}


/* ============================================================
   v3.5.29 — premium branded 404
   ============================================================ */
.error-page-premium{
  position:relative;
  min-height:calc(100vh - 80px);
  display:flex;
  align-items:center;
  padding:74px 0 96px;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 44%,rgba(118,145,172,.055),transparent 30%),
    radial-gradient(circle at 70% 60%,rgba(201,130,75,.035),transparent 26%);
}

.error-layout{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, .94fr) minmax(460px, 1.06fr);
  align-items:center;
  gap:72px;
}

.error-copy{
  position:relative;
  z-index:3;
  max-width:650px;
}

.error-copy h1{
  margin:24px 0 26px;
  font-size:clamp(62px,7.3vw,108px);
  line-height:.90;
  letter-spacing:-.072em;
  font-weight:570;
  color:#f1eee9;
}

.error-copy h1 span{
  color:#888d94;
}

.error-copy > p{
  max-width:560px;
  margin:0;
  color:#929aa3;
  font-size:15px;
  line-height:1.76;
}

.error-copy .error-actions{
  justify-content:flex-start;
  margin-top:34px;
}

.error-visual{
  position:relative;
  min-height:520px;
  isolation:isolate;
}

.error-watermark{
  position:absolute;
  z-index:0;
  top:36px;
  right:-18px;
  font-size:clamp(180px,18vw,320px);
  line-height:.78;
  letter-spacing:-.09em;
  font-weight:640;
  color:rgba(238,233,225,.027);
  user-select:none;
}

.error-mark{
  position:absolute;
  z-index:3;
  top:112px;
  left:86px;
  width:178px;
  height:178px;
}

.error-mark::before{
  content:"";
  position:absolute;
  inset:20%;
  border-radius:50%;
  background:rgba(201,130,75,.08);
  filter:blur(34px);
}

.error-mark img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 26px 48px rgba(0,0,0,.24));
}

.error-circuit{
  position:absolute;
  z-index:1;
  inset:70px -25px 10px 5px;
  width:calc(100% + 20px);
  height:calc(100% - 70px);
  overflow:visible;
}

.error-trace{
  fill:none;
  stroke:rgba(201,130,75,.23);
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.error-circuit .trace-two{
  stroke:rgba(201,130,75,.16);
}

.error-circuit .trace-three{
  stroke:rgba(225,207,191,.10);
}

.error-node{
  fill:#08111d;
  stroke:rgba(214,149,94,.52);
  stroke-width:1.3;
  vector-effect:non-scaling-stroke;
}

.error-system-label{
  position:absolute;
  z-index:4;
  right:22px;
  bottom:76px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:154px;
  padding:13px 15px;
  border-top:1px solid rgba(201,130,75,.20);
  border-bottom:1px solid rgba(255,255,255,.045);
}

.error-system-label span,
.error-system-label strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;
}

.error-system-label span{
  color:#656f79;
  font-size:8px;
  letter-spacing:.12em;
}

.error-system-label strong{
  color:#bca28c;
  font-size:10px;
  letter-spacing:.09em;
  font-weight:520;
}

.error-page-premium::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,130,75,.10) 24%,
    rgba(201,130,75,.24) 66%,
    transparent 100%
  );
}

@media(max-width:1050px){
  .error-page-premium{
    min-height:auto;
    padding:72px 0 88px;
  }

  .error-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .error-copy{
    max-width:760px;
  }

  .error-visual{
    min-height:340px;
    max-width:660px;
    width:100%;
    margin:0 auto;
  }

  .error-watermark{
    top:12px;
    right:0;
    font-size:220px;
  }

  .error-mark{
    top:60px;
    left:14%;
    width:145px;
    height:145px;
  }

  .error-circuit{
    inset:30px -10px 0 0;
    height:330px;
  }

  .error-system-label{
    right:7%;
    bottom:45px;
  }
}

@media(max-width:620px){
  .error-page-premium{
    padding:58px 0 70px;
  }

  .error-copy h1{
    margin-top:20px;
    font-size:clamp(52px,15vw,72px);
    line-height:.92;
  }

  .error-copy > p{
    font-size:14px;
    line-height:1.7;
  }

  .error-copy .error-actions{
    align-items:flex-start;
    gap:18px;
  }

  .error-visual{
    min-height:260px;
    overflow:hidden;
  }

  .error-watermark{
    top:25px;
    right:-10px;
    font-size:155px;
  }

  .error-mark{
    top:52px;
    left:8px;
    width:112px;
    height:112px;
  }

  .error-circuit{
    inset:20px -100px 0 -20px;
    width:calc(100% + 110px);
    height:250px;
    opacity:.72;
  }

  .error-system-label{
    right:0;
    bottom:32px;
    min-width:128px;
    padding:10px 12px;
  }
}

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