:root {
  --bg: #050b08;
  --bg2: #102219;
  --panel: rgba(240,255,247,.08);
  --panel2: rgba(240,255,247,.13);
  --line: rgba(211,255,229,.19);
  --text: #f6fff8;
  --muted: #adc5b5;
  --cyan: #4dffa7;
  --violet: #0aa866;
  --gold: #b9ff6a;
  --green-dark: #063d29;
  --green-ink: #031d13;
}

body {
  background:
    radial-gradient(circle at 14% 4%, rgba(77,255,167,.15), transparent 33%),
    radial-gradient(circle at 86% 12%, rgba(185,255,106,.1), transparent 34%),
    radial-gradient(circle at 58% 94%, rgba(10,168,102,.12), transparent 38%),
    linear-gradient(145deg, #020604, var(--bg), var(--bg2));
}

.site-header { background: rgba(3,11,7,.72); border-bottom-color: rgba(211,255,229,.11); }
.brand span span { color: var(--cyan); }
.brand-mark {
  background:
    radial-gradient(circle at 28% 20%, #f1ffdb 0 8%, transparent 23%),
    linear-gradient(135deg, #dfff8e, var(--cyan) 50%, var(--violet));
  box-shadow: 0 0 34px rgba(77,255,167,.34);
}
.brand-mark::after { color: var(--green-ink); }
.button.primary {
  color: var(--green-ink);
  background: linear-gradient(135deg, #cfff81, var(--cyan) 56%, #20d981);
  box-shadow: 0 14px 38px rgba(77,255,167,.24);
}
.gradient { background-image: linear-gradient(90deg, var(--cyan), #efffd9, #b9ff6a, #efc779); }
.status-chip { border-color: rgba(77,255,167,.36); color: #dfffee; background: rgba(77,255,167,.075); }
.orbit { border-color: rgba(77,255,167,.28); box-shadow: 0 0 90px rgba(77,255,167,.15); }
.float-site { background: rgba(7,24,15,.78); }
.mini-grid span { background: linear-gradient(135deg, rgba(77,255,167,.14), rgba(185,255,106,.06)); }
.glass-style::before { background: radial-gradient(circle at 20% 10%, #b9ff6a, transparent 40%), linear-gradient(135deg,#0d573a,#173823); }
.arch-style::before { background: repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 30px),linear-gradient(145deg,#070b08,#47534a); }
.cine-style::before { background: radial-gradient(circle at center,#ff8b4f,transparent 24%),linear-gradient(#070807,#14251b); }
.edit-style::before { background: linear-gradient(120deg,#f2eddb 0 48%,#17472f 48%); }
.contact-panel a, .footer-col a:hover { color: var(--cyan); }
.fieldset legend { color: var(--cyan); }
.progress span { background: linear-gradient(90deg,#0a8d58,var(--cyan),#b9ff6a); }
:focus-visible { outline-color: var(--cyan); }

/* Design Lab: five complete worlds */
.worlds-section { padding: 0 0 95px; }
.world-jump-shell {
  position: sticky;
  top: 76px;
  z-index: 35;
  margin-bottom: 60px;
  border-block: 1px solid rgba(211,255,229,.11);
  background: rgba(3,11,7,.8);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.world-jump {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.world-jump::-webkit-scrollbar { display: none; }
.world-jump a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--muted);
  font-size: 13px;
}
.world-jump a:hover { color: #fff; border-color: rgba(77,255,167,.5); }
.world-jump span { color: var(--cyan); font: 700 11px ui-monospace,monospace; }

.design-worlds { display: grid; gap: 112px; }
.design-world { scroll-margin-top: 158px; }
.world-heading {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) auto;
  gap: 25px;
  align-items: end;
  margin-bottom: 24px;
}
.world-heading > span { align-self: start; color: var(--cyan); font: 700 12px ui-monospace,monospace; }
.world-heading h2 { margin: 0 0 9px; font-size: clamp(35px,5vw,66px); line-height: .98; letter-spacing: -.052em; }
.world-heading p { margin: 0; max-width: 720px; color: var(--muted); }
.world-choose { background: rgba(255,255,255,.045); }

.world-browser {
  --world-x: 0;
  --world-y: 0;
  min-height: 690px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 32px;
  box-shadow: 0 34px 110px rgba(0,0,0,.48);
  transform: perspective(1500px) rotateX(calc(var(--world-y) * -1.25deg)) rotateY(calc(var(--world-x) * 1.25deg));
  transition: transform .18s ease;
}

/* Verdant Glass */
.glass-site {
  background:
    radial-gradient(circle at 12% 15%, rgba(206,255,146,.78), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(69,255,164,.65), transparent 29%),
    radial-gradient(circle at 68% 92%, rgba(0,118,72,.72), transparent 34%),
    linear-gradient(145deg,#0b2d1d,#07120c 60%,#16452c);
}
.glass-site > header {
  position: relative; z-index: 4; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 30px; border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(4,26,16,.22); backdrop-filter: blur(25px);
}
.glass-site header strong { letter-spacing: .18em; }
.glass-site header nav { display: flex; gap: 24px; font-size: 13px; }
.glass-site header i { justify-self: end; font-style: normal; }
.glass-scene { min-height: 614px; position: relative; padding: 66px 7%; }
.orb { position: absolute; display: block; border-radius: 50%; box-shadow: inset -22px -24px 50px rgba(0,0,0,.18), inset 10px 12px 28px rgba(255,255,255,.22); }
.orb-one { width: 260px; height: 260px; right: 7%; top: 13%; background: linear-gradient(145deg,rgba(185,255,106,.92),rgba(16,178,98,.68)); }
.orb-two { width: 150px; height: 150px; left: 45%; bottom: 7%; background: linear-gradient(145deg,rgba(255,255,255,.44),rgba(77,255,167,.32)); }
.glass-panel {
  position: relative; z-index: 2; width: min(610px,72%); min-height: 420px; padding: 45px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 30px;
  background: linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.055));
  backdrop-filter: blur(30px) saturate(135%); box-shadow: 0 28px 80px rgba(0,0,0,.25);
}
.glass-panel small { font: 700 11px ui-monospace,monospace; letter-spacing: .14em; }
.glass-panel h3 { margin: 40px 0 20px; font-size: clamp(46px,6vw,83px); line-height: .92; letter-spacing: -.065em; }
.glass-panel p { width: 70%; color: #d6e8dc; }
.glass-panel button { margin-top: 25px; border: 0; border-radius: 999px; padding: 13px 17px; color: #082217; background: #cfff81; font-weight: 800; }
.glass-metric {
  position: absolute; z-index: 3; min-width: 165px; padding: 17px; border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px; background: rgba(4,26,16,.24); backdrop-filter: blur(24px);
}
.glass-metric strong { display: block; font-size: 29px; }
.glass-metric span { color: #d2e3d8; font-size: 12px; }
.metric-one { right: 8%; top: 48%; }
.metric-two { right: 23%; bottom: 8%; }
.glass-ticker { position: absolute; left: -3%; right: -3%; bottom: 21px; white-space: nowrap; transform: rotate(-2deg); font: 800 18px ui-monospace,monospace; letter-spacing: .1em; color: rgba(231,255,240,.77); }

/* Architectural */
.architecture-site { background: #e8e9e3; color: #10130f; }
.architecture-grid { position: absolute; inset: 0; background: linear-gradient(90deg,transparent 0 11.9%,rgba(15,20,15,.13) 12% 12.1%,transparent 12.2% 37.9%,rgba(15,20,15,.13) 38% 38.1%,transparent 38.2% 73.9%,rgba(15,20,15,.13) 74% 74.1%,transparent 74.2%),repeating-linear-gradient(0deg,transparent 0 79px,rgba(15,20,15,.08) 80px); }
.architecture-site > header {
  position: relative; z-index: 2; min-height: 80px; padding: 0 30px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; border-bottom: 1px solid rgba(15,20,15,.28); font: 700 11px ui-monospace,monospace;
}
.architecture-site header strong { font-size: 16px; letter-spacing: .11em; }
.architecture-site header button { justify-self: end; border: 0; background: none; font-weight: 800; }
.architecture-body { position: relative; z-index: 2; min-height: 608px; display: grid; grid-template-columns: 12% 1fr; }
.architecture-body > aside { border-right: 1px solid rgba(15,20,15,.28); padding: 35px 20px; display: flex; flex-direction: column; }
.architecture-body aside small { font: 700 10px ui-monospace,monospace; }
.architecture-body aside b { margin: auto 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 82px; line-height: 1; letter-spacing: -.08em; }
.architecture-body > section { padding: 46px 5% 38px; }
.architecture-body section > small { color: #158c52; font: 800 11px ui-monospace,monospace; letter-spacing: .12em; }
.architecture-body h3 { margin: 32px 0 45px; font-size: clamp(62px,9vw,128px); line-height: .78; letter-spacing: -.075em; }
.architecture-footer { display: grid; grid-template-columns: 1fr 1.3fr; gap: 35px; align-items: end; }
.architecture-footer p { max-width: 330px; font-weight: 600; }
.plan-grid { height: 135px; border: 1px solid rgba(15,20,15,.45); display: grid; grid-template-columns: 1fr 1.4fr 1fr 1.7fr; }
.plan-grid i { border-right: 1px solid rgba(15,20,15,.35); position: relative; }
.plan-grid i:nth-child(2)::after { content:""; position:absolute; inset:22% 18%; border:1px solid #158c52; border-radius:50%; }

/* Luxury metallic */
.luxury-site { background: radial-gradient(circle at 70% 28%,#3e2d15,#130f09 48%,#070604); color:#f6ead2; }
.luxury-light { position:absolute; width:420px; height:420px; right:5%; top:6%; border-radius:50%; background:rgba(239,199,121,.14); filter:blur(70px); }
.luxury-site > header { position:relative; z-index:2; height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 31px; border-bottom:1px solid rgba(239,199,121,.22); }
.luxury-site header strong { color:#efc779; font-family:Georgia,serif; letter-spacing:.23em; }
.luxury-site header nav { display:flex; gap:25px; font-size:12px; color:#cdbd9e; }
.luxury-site header i { justify-self:end; font-style:normal; font-size:12px; }
.luxury-body { position:relative; z-index:2; min-height:610px; padding:58px 6%; display:grid; grid-template-columns:1fr 1fr; }
.luxury-body section > small { color:#efc779; font:700 10px ui-monospace,monospace; letter-spacing:.15em; }
.luxury-body section h3 { margin:45px 0 22px; font-family:Georgia,serif; font-size:clamp(49px,7vw,98px); line-height:.86; font-weight:400; letter-spacing:-.05em; }
.luxury-body section p { max-width:380px; color:#c8baa0; }
.luxury-body section button { margin-top:28px; border:1px solid rgba(239,199,121,.5); border-radius:999px; padding:13px 18px; background:transparent; color:#f6ead2; }
.luxury-object { position:relative; display:grid; place-items:center; }
.metal-ring { width:min(320px,70%); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 34% 25%,#fff4cd,transparent 11%),conic-gradient(from 45deg,#583914,#ffd891,#6b461b,#f7c56d,#2c1a08,#c6974c,#583914); box-shadow:inset -25px -30px 50px rgba(0,0,0,.4),0 35px 60px rgba(0,0,0,.44); }
.metal-ring::after { content:""; width:56%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 38% 30%,#4d4b46,#111 65%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.metal-ring span { position:absolute; z-index:2; color:#efc779; font-family:Georgia,serif; font-size:56px; }
.metal-shadow { width:250px; height:35px; margin-top:-38px; border-radius:50%; background:#080604; filter:blur(4px); }
.luxury-object > small { position:absolute; right:5%; bottom:4%; color:#efc779; }
.luxury-body > footer { position:absolute; left:6%; right:6%; bottom:25px; display:flex; gap:30px; border-top:1px solid rgba(239,199,121,.22); padding-top:17px; color:#b7a88e; font-size:10px; }
.luxury-body footer b { color:#f5dfb7; margin-right:5px; }

/* Cinematic */
.cinema-site { background:radial-gradient(circle at 68% 42%,rgba(255,112,58,.34),transparent 20%),radial-gradient(circle at 68% 42%,rgba(77,255,167,.12),transparent 42%),linear-gradient(145deg,#060607,#171017 64%,#0b0a0a); }
.cinema-noise { position:absolute; inset:0; opacity:.26; background-image:repeating-radial-gradient(circle at 20% 20%,rgba(255,255,255,.07) 0 1px,transparent 1px 4px); mix-blend-mode:soft-light; }
.cinema-sun { position:absolute; width:460px; height:460px; right:7%; top:14%; border-radius:50%; background:radial-gradient(circle at 45% 40%,#ffe2a8 0 3%,#ff8a47 19%,#b31e28 42%,#230f1d 70%); box-shadow:0 0 120px rgba(255,76,42,.38); }
.cinema-sun::after { content:""; position:absolute; inset:19% -10% -22%; border-radius:50%; border:1px solid rgba(77,255,167,.35); transform:rotateX(68deg); }
.cinema-site > header { position:relative; z-index:2; height:75px; padding:0 30px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.14); font:700 11px ui-monospace,monospace; }
.cinema-site header nav { display:flex; gap:25px; color:#aaa0aa; }
.cinema-body { position:relative; z-index:2; min-height:615px; padding:50px 5%; }
.cinema-body > small { color:var(--cyan); font:700 10px ui-monospace,monospace; letter-spacing:.14em; }
.cinema-body h3 { margin:55px 0 70px; font-size:clamp(58px,8.5vw,126px); line-height:.78; letter-spacing:-.075em; }
.cinema-body > footer { display:grid; grid-template-columns:auto 1fr 210px; gap:35px; align-items:center; }
.cinema-body footer button { border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.05); border-radius:999px; padding:13px 17px; }
.cinema-body footer button i { color:var(--cyan); font-style:normal; }
.cinema-body footer p { color:#b8adb8; max-width:420px; }
.cinema-body footer > div { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; font:700 10px ui-monospace,monospace; }
.cinema-body footer > div i { height:1px; background:linear-gradient(90deg,var(--cyan) 55%,rgba(255,255,255,.22) 55%); }

/* Editorial */
.editorial-site { background:#f4f0df; color:#101511; }
.editorial-site > header { height:83px; padding:0 28px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:2px solid #101511; }
.editorial-site header strong { font-family:Georgia,serif; font-size:27px; letter-spacing:-.03em; }
.editorial-site header span { font:700 10px ui-monospace,monospace; letter-spacing:.11em; }
.editorial-site header button { justify-self:end; border:0; background:none; font-weight:900; }
.editorial-body { min-height:607px; display:grid; grid-template-columns:18% 54% 28%; }
.editorial-body > * { padding:31px; border-right:1px solid rgba(16,21,17,.4); }
.editorial-body > aside { display:flex; flex-direction:column; }
.editorial-body aside small,.editorial-body section > small { color:#127343; font:800 10px ui-monospace,monospace; letter-spacing:.13em; }
.editorial-body aside p { font-family:Georgia,serif; font-size:18px; }
.editorial-body aside b { margin-top:auto; font-size:42px; line-height:.8; }
.editorial-body section h3 { margin:28px 0 35px; font-family:Georgia,serif; font-size:clamp(48px,6.6vw,92px); line-height:.82; font-weight:400; letter-spacing:-.06em; }
.editorial-art { min-height:205px; position:relative; overflow:hidden; background:radial-gradient(circle at 70% 30%,rgba(185,255,106,.9),transparent 22%),linear-gradient(145deg,#0b3b25,#103b2a 45%,#c7d0aa); }
.editorial-art i { position:absolute; width:45%; height:130%; top:-15%; border:1px solid rgba(255,255,255,.65); border-radius:50%; transform:rotate(27deg); }
.editorial-art i:nth-child(1){left:3%}.editorial-art i:nth-child(2){left:28%}.editorial-art i:nth-child(3){left:54%}
.editorial-art small { position:absolute; bottom:10px; left:12px; color:#fff; font:700 9px ui-monospace,monospace; }
.editorial-notes b { color:#127343; font:800 12px ui-monospace,monospace; }
.editorial-notes p { font-family:Georgia,serif; font-size:18px; }
.editorial-notes hr { border:0; border-top:1px solid rgba(16,21,17,.35); margin:27px 0; }

[dir=rtl] .architecture-body > aside { border-right:0; border-left:1px solid rgba(15,20,15,.28); }
[dir=rtl] .editorial-body > * { border-right:0; border-left:1px solid rgba(16,21,17,.4); }

@media(max-width:1000px){
  .world-heading{grid-template-columns:50px 1fr}.world-heading .world-choose{grid-column:2;justify-self:start}
  .world-browser{min-height:620px}.architecture-body h3,.cinema-body h3{font-size:80px}
  .editorial-body{grid-template-columns:20% 80%}.editorial-notes{display:none}
  .luxury-body{grid-template-columns:1.1fr .9fr}
}
@media(max-width:650px){
  .world-jump-shell{top:66px}.world-heading{grid-template-columns:1fr;gap:12px}.world-heading>span{display:none}.world-heading .world-choose{grid-column:1}
  .design-worlds{gap:82px}.world-browser{min-height:570px;border-radius:23px;transform:none}
  .glass-site>header,.architecture-site>header,.luxury-site>header,.editorial-site>header{padding-inline:17px;grid-template-columns:1fr auto}
  .glass-site header nav,.architecture-site header>span,.luxury-site header nav,.editorial-site header>span,.cinema-site header nav{display:none}
  .glass-scene{padding:35px 18px}.glass-panel{width:88%;padding:27px;min-height:355px}.glass-panel h3{font-size:49px}
  .glass-metric{min-width:130px;padding:12px}.metric-one{right:3%;top:58%}.metric-two{display:none}.orb-one{width:190px;height:190px;right:-5%}
  .architecture-body{grid-template-columns:18% 1fr}.architecture-body>aside{padding-inline:9px}.architecture-body aside b{font-size:58px}
  .architecture-body>section{padding:30px 18px}.architecture-body h3{font-size:53px;margin-bottom:28px}.architecture-footer{grid-template-columns:1fr}.plan-grid{height:95px}
  .luxury-body{grid-template-columns:1fr;padding:35px 20px}.luxury-body section h3{font-size:50px;margin-top:28px}.luxury-object{min-height:220px}
  .metal-ring{width:180px}.luxury-body>footer{gap:13px}
  .cinema-sun{width:280px;height:280px;right:-10%;top:23%}.cinema-body{padding:35px 20px}.cinema-body h3{font-size:55px;margin:47px 0 145px}
  .cinema-body>footer{grid-template-columns:1fr;gap:16px}.cinema-body footer>div{display:none}
  .editorial-body{grid-template-columns:1fr}.editorial-body>aside{display:none}.editorial-body>section{border:0;padding:27px 20px}
  .editorial-body section h3{font-size:53px}.editorial-art{min-height:220px}
}
@media(prefers-reduced-motion:reduce){.world-browser{transform:none!important}}