@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#171717;--gold:#ffae00;--cream:#fcca50;--scene:1440px;--table-depth:140px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:#fff;font-family:Inter,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #ffcf86;outline-offset:6px}button{border:0;background:none}img{display:block;max-width:100%}.skip{position:fixed;top:-80px;left:20px;z-index:20;background:#ffcf86;color:#171717;padding:15px}.skip:focus{top:15px}.hero{position:relative;isolation:isolate;overflow:hidden;background:#171717}.environment{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 45%,#08080873),linear-gradient(#08080840,transparent 50%)}.header{max-width:var(--scene);width:90%;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:35px 0 20px}.brand{width:94px;flex-shrink:0}.brand img{width:100%;height:auto}.header nav{display:flex;align-items:center;justify-content:center;gap:clamp(28px,3.5vw,58px);padding:30px 45px;border-radius:23px;background:#141414;box-shadow:7px 8px 15px #0b0b0b,inset 1px 1px 2px #302c25;font:500 17px 'DM Sans',sans-serif}.header nav button{padding:0}.header nav .active{color:var(--gold);font-weight:700}.header nav a:hover,.header nav button:hover{color:#fcca50}.intro{display:flex;align-items:flex-start;justify-content:space-between;gap:80px;width:85%;max-width:1330px;margin:26px auto 0;min-height:230px;font-family:'DM Sans',sans-serif}.intro h1{font-size:clamp(25px,1.95vw,32px);font-weight:400;line-height:1.33;max-width:850px;margin:25px 0 0}.intro strong{font-weight:700;color:#ffca5b;background:linear-gradient(110deg,#ffae00,#ffda8c);background-clip:text;-webkit-text-fill-color:transparent}.portrait{width:285px;aspect-ratio:1;flex-shrink:0;position:relative;border-radius:50%;background:#151515;box-shadow:-2px -1px 2px #51402350,6px 8px 18px #090909;overflow:hidden}.portrait img{position:absolute;bottom:-5px;left:0;width:100%;height:112%;object-fit:contain}.scene{position:relative;width:94%;max-width:var(--scene);margin:0 auto;padding:55px 0 var(--table-depth);z-index:2}.stage{display:flex;align-items:flex-end;gap:20px}.lamp-object{position:relative;flex:0 0 clamp(420px,38vw,560px);margin:0;z-index:2}.lamp-object img{width:100%;height:auto;transform:translateY(2.5%)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1;min-width:0;align-items:end}.card-object{position:relative}.card-object:before{content:'';position:absolute;width:108%;height:48px;bottom:-26px;left:12%;transform:rotate(8deg);border-radius:50%;background:#0009;filter:blur(16px);z-index:-1}.card-object:after{content:'';position:absolute;bottom:-7px;left:6%;height:13px;width:90%;background:#000a;filter:blur(5px);z-index:-1}.card{--light:.32;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:420px;padding:25px 26px 24px;border-radius:22px;border:1px solid #ffe2af12;background:linear-gradient(135deg,#ffdda617,transparent 42%),linear-gradient(145deg,#262524,#141414);box-shadow:inset 1px 1px 8px rgb(254 190 79 / var(--light)),inset -2px -3px 9px #0005,14px 18px 32px #0006}.card-object:nth-child(2) .card{--light:.18;background:linear-gradient(135deg,#ffdda610,transparent 40%),linear-gradient(145deg,#262524,#141414)}.card-object:nth-child(3) .card{--light:.09;background:linear-gradient(135deg,#ffdda609,transparent 38%),linear-gradient(145deg,#262524,#141414)}.tag{align-self:flex-start;border-radius:30px;background:#ffae0033;color:#fcca50;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.02em;padding:8px 17px}.tag.pink{background:#622f48;color:#ffa2ad}.tag.teal{background:#0e2b2b;color:#62bab1}.card h2{font-size:clamp(20px,1.65vw,26px);margin:21px 0 17px;letter-spacing:-.6px;text-shadow:0 3px 5px #000;overflow-wrap:anywhere}.card p{font-size:14px;line-height:1.45;margin:0;color:#e6e3df;min-height:61px}.preview{height:163px;margin:18px 0 25px;position:relative}.phones{display:flex;align-items:center;justify-content:center;gap:0}.phones img{width:54%;height:100%;object-fit:contain}.phones img:first-child{transform:scaleX(-1) rotate(-6deg)}.phones img:last-child{transform:rotate(6deg)}.case-link{color:var(--cream);font-size:13px;font-weight:600;align-self:flex-start;text-align:left;padding:0;margin-top:auto;line-height:1.5}.case-link span{display:inline-block;transition:transform .2s}.case-link:hover span{transform:translateX(5px)}.dashboard,.learning{height:155px;border:1px solid #b773853f;border-radius:9px;background:#f3e9e9;color:#473339;transform:perspective(700px) rotateY(-8deg) rotateZ(-5deg);box-shadow:7px 12px 15px #0008;overflow:hidden;align-self:center;width:100%;max-width:260px}.mock-top{display:flex;justify-content:space-between;align-items:center;background:#fff9;padding:10px 12px;font-size:12px;font-weight:700}.mock-top span{font-size:6px;font-weight:400}.mock-body{padding:11px 13px}.mock-body small{font-size:5px;letter-spacing:1px;display:block}.mock-numbers{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.mock-numbers b{font-size:18px}.mock-numbers small{font-weight:400;letter-spacing:0;margin-top:3px}.mock-numbers em{font-size:7px;color:#487a62}.chart{height:44px;display:flex;align-items:end;gap:7px;border-bottom:1px solid #b68c98;margin-top:7px}.chart i{flex:1;background:linear-gradient(#ac637d,#d6a9b4);height:38%}.chart i:nth-child(2n){height:56%}.chart i:nth-child(3n){height:68%}.chart i:nth-child(4n){height:82%}.chart i:last-child{height:96%}.mock-bottom{font-size:6px;margin-top:7px;display:flex;justify-content:space-between}.learning{background:#e3efeb;color:#234e48;border-color:#67b2a04f;transform:perspective(700px) rotateY(-8deg) rotateZ(5deg)}.learning .mock-body>b{display:block;font-size:16px;line-height:1.15;margin-top:7px}.lesson{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:7px}.lesson-art{padding:8px;background:#9fc8b9;border-radius:5px;font-family:Georgia,serif;font-size:16px}.lesson small{font-size:5px;letter-spacing:0;margin-top:4px}.progress{height:3px;background:#c2d9d0;margin:9px 0 5px}.progress i{display:block;width:66%;height:100%;background:#448575}.table{position:absolute;z-index:0;bottom:0;left:0;right:0;height:calc(var(--table-depth) + 48px);background:#583419 url('Assets/Table Image.png') center 57% / 100% auto no-repeat;box-shadow:0 -1px 2px #e8a34855}.table:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,#09070488),linear-gradient(transparent 72%,#10080466)}.scroll-hint{display:none}.featured{position:relative;isolation:isolate;padding:25px 6% 70px;background:#061318 url('Assets/story-background.png') center center/cover no-repeat}.featured:before{content:'';position:absolute;inset:0;z-index:-1;background:#02101533}.quest-brand{display:flex;align-items:center;justify-content:center;max-width:720px;margin:0 auto 36px;height:190px}.quest-brand img:first-child{width:24%;height:100%;object-fit:contain}.quest-brand img:last-child{width:76%;height:auto}.case-panel{max-width:1360px;margin:auto;background:linear-gradient(#212020df,#151515d9);backdrop-filter:blur(9px);border-radius:32px;padding:45px 55px 35px}.case-panel h2{font-size:40px;margin:0 0 18px}.summary{font-size:25px;line-height:1.32;margin:0 0 28px}.full-case{font-size:23px;color:#ffda8b}.case-grid{display:grid;grid-template-columns:1fr 2.8fr;gap:60px;margin-top:50px}.case-grid h3{font-size:24px;margin:0 0 10px}.case-grid p{font-size:19px;color:#aaa;line-height:1.35;margin:0 0 25px}.case-grid h3:not(:first-child){margin-top:30px}.metrics{display:flex;justify-content:space-between;gap:25px;margin-top:20px}.metrics p{font-size:28px;margin:0;line-height:1.4}dialog{width:min(90%,540px);padding:40px;border:1px solid #6d5634;border-radius:24px;background:linear-gradient(135deg,#302b23,#171717);color:#fff;box-shadow:0 20px 80px #000a}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog h2{font-size:30px}dialog p{line-height:1.65;color:#ccc}.dialog-label{font-size:11px;color:#ffcf86;letter-spacing:2px}.close{position:absolute;top:10px;right:15px;font-size:30px}.dialog-done{padding:12px 18px;border-radius:9px;background:#ffcf86;color:#171717;margin-top:12px;font-weight:600}
@media(min-width:1700px){.scene{padding-top:70px}.intro{min-height:260px}.hero{--table-depth:160px}}
@media(min-width:768px) and (max-width:1399px){.header nav{padding:23px 30px;gap:30px}.intro{gap:40px;min-height:210px}.portrait{width:210px}.intro h1{font-size:25px}.scene{padding-top:40px}.cards{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 10px 55px;margin-bottom:-55px;scrollbar-color:#ab783a #24211b;scrollbar-width:thin}.card-object{flex:0 0 275px;scroll-snap-align:start}.card{min-height:425px}.scroll-hint{display:block;position:absolute;right:15px;bottom:45px;font-size:12px;color:#ffe0ab}.case-panel{padding:35px}.summary{font-size:22px}.case-grid{gap:35px}.metrics p{font-size:21px}}
@media(max-width:767px){:root{--table-depth:70px}.header{padding:20px 0;width:90%;gap:15px}.brand{width:56px}.header nav{gap:clamp(12px,3vw,25px);padding:17px 19px;border-radius:16px;font-size:13px}.intro{width:88%;flex-direction:column-reverse;gap:23px;margin:20px auto 0;min-height:0}.portrait{width:155px;align-self:center}.intro h1{font-size:25px;line-height:1.4;margin:0}.scene{width:88%;max-width:480px;padding-top:38px;padding-bottom:45px}.stage{flex-direction:column;align-items:stretch;gap:24px}.lamp-object,.table{display:none}.cards{grid-template-columns:1fr;gap:25px}.card{min-height:430px;padding:27px 30px}.card h2{font-size:26px}.card p{font-size:15px;min-height:0}.preview{height:185px;margin:20px 0 25px}.dashboard,.learning{height:170px;margin:28px auto 32px}.case-link{font-size:14px}.card-object:before,.card-object:after{display:none}.environment{background:linear-gradient(#111,#171717)}.table{height:70px;background-size:auto 200px}.featured{padding:25px 6% 40px}.quest-brand{height:110px;margin-bottom:25px}.case-panel{padding:26px 24px;border-radius:24px}.case-panel h2{font-size:28px}.summary{font-size:18px;line-height:1.5}.full-case{font-size:17px}.case-grid{grid-template-columns:1fr;gap:10px;margin-top:35px}.case-grid h3{font-size:20px}.case-grid p{font-size:16px}.metrics{flex-direction:column;gap:15px;border-top:1px solid #ffffff1a;padding-top:24px}.metrics p{font-size:22px}}
@media(max-width:359px){.header nav{padding:15px 12px;gap:12px;font-size:12px}.brand{width:45px}.intro h1{font-size:23px}.card{padding:25px 22px}.card h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Preserve the portrait's head and the lamp's taller silhouette. */
.portrait img{height:100%;bottom:0}

@media(max-width:767px){.dashboard{transform:rotate(-5deg)}.learning{transform:rotate(5deg)}}
.table{background-size:100% 255%;background-position:center 65%}
@media(max-width:767px){.table{background-size:auto 255%}}

/* Light follows the reserved lamp column instead of a viewport breakpoint. */
@media(min-width:768px){
 .scene{--lamp-width:clamp(420px,38vw,560px)}

}
/* Enlarge toward the outer edge, keeping the card-side boundary fixed.
   The rear foot and cord meet the tabletop at y=1238 in the 1402px asset. */
@media(min-width:768px){
 .lamp-object img{width:108%;max-width:none;margin-left:-8%;transform:translateY(calc(11.7% - 48px))}
 .scene{padding-top:0;margin-top:-55px}
}
@media(min-width:768px) and (max-width:1399px){
 .scene{margin-top:0;padding-top:8px}
}

/* Two diffuse ellipses anchored to the lamp and tabletop, behind live content. */
@media(min-width:768px){
 .scene{--ambient-width:min(82vw,1200px);--ambient-height:clamp(650px,60vw,880px);--beam-width:clamp(680px,67vw,980px)}
 .scene::before,.scene::after{content:'';position:absolute;pointer-events:none;z-index:-1;border-radius:50%}
 .scene::before{
  width:var(--ambient-width);height:var(--ambient-height);
  left:calc(var(--lamp-width) * .95 - var(--ambient-width) * .5);
  bottom:calc(var(--table-depth) - 65px);
  background:radial-gradient(ellipse at center,rgb(184 106 36 / .28) 0%,rgb(113 69 31 / .14) 50%,rgb(113 69 31 / 0) 72%);
  filter:blur(45px);
 }
 .scene::after{
  width:var(--beam-width);height:clamp(270px,28vw,400px);
  left:calc(var(--lamp-width) * .2);
  bottom:calc(var(--table-depth) + var(--lamp-width) * .32);
  transform:rotate(24deg);
  background:radial-gradient(ellipse at 36% 50%,rgb(255 179 71 / .32) 0%,rgb(238 161 60 / .18) 32%,rgb(255 179 71 / 0) 70%);
  filter:blur(38px);
 }
}
/* Warm face reflection, localized catchlight, and a fading upper-left rim. */
.card-object .card{
 --face:.13;--face-mid:.06;--hotspot:.12;--rim:.20;
 background:radial-gradient(ellipse 110px 100px at 0 0,rgb(255 216 154 / var(--hotspot)),transparent 85%),linear-gradient(135deg,rgb(255 221 166 / var(--face)) 0%,rgb(255 221 166 / var(--face-mid)) 16%,transparent 42%),linear-gradient(145deg,#282725,#131414);
 border:1px solid rgb(255 226 175 / .08);
 box-shadow:inset -1px -2px 8px #0005,8px 14px 28px #0006;
}
.card-object:nth-child(2) .card{--face:.085;--face-mid:.039;--hotspot:.075;--rim:.13}
.card-object:nth-child(3) .card{--face:.04;--face-mid:.018;--hotspot:.035;--rim:.06}
.card::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:1px solid rgb(255 220 160 / var(--rim));box-shadow:inset 2px 2px 6px rgb(255 230 185 / var(--rim));mask-image:linear-gradient(135deg,#000 0%,#0009 22%,transparent 58%)}
@media(max-width:767px){
 .scene::before,.scene::after{display:none}
 .card-object .card{background:linear-gradient(145deg,#282725,#131414);border-color:#ffffff12;box-shadow:inset -1px -2px 8px #0005,8px 14px 28px #0006}
 .card::before{display:none}
}
/* A tight ellipse at each card's base establishes contact with the wood.
   Keep the broader ::before cast shadow unchanged. */
@media(min-width:768px){
 .card-object::after{
  width:94%;height:16px;left:3%;bottom:-7px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgb(0 0 0 / .88) 0%,rgb(0 0 0 / .72) 42%,rgb(0 0 0 / .28) 72%,transparent 100%);
  filter:blur(3px);
 }
}
/* Broader down-right cast shadows add depth beyond the tight contact ellipse. */
@media(min-width:768px){
 .card-object::before{
  width:118%;height:58px;left:14%;bottom:-32px;
  background:rgb(0 0 0 / .68);
  filter:blur(18px);
 }
}
/* Match the introduction to the header's left edge, including the SVG inset. */
.intro{width:90%;max-width:var(--scene);padding-left:6.63px}
.portrait{width:327.75px}
@media(min-width:768px) and (max-width:1399px){.portrait{width:241.5px}}
@media(max-width:767px){.intro{padding-left:3.95px}.portrait{width:178.25px}}
@media(max-width:359px){.intro{padding-left:3.17px}}
/* Keep the circle fixed; enlarge only the portrait, with an open top and
   the original circular lower edge as its clipping boundary. */
.portrait{overflow:visible}
.portrait img{
 width:115%;height:115%;max-width:none;
 left:-7.5%;bottom:-3%;
 object-fit:contain;
 clip-path:url(#portrait-cutout);
}
/* Stretch every card to the tallest content-driven card in the row. */
.cards{align-items:stretch}
.card-object{display:flex}
.card-object .card{width:100%;flex:1}
@media(max-width:767px){.cards{grid-auto-rows:1fr}}
/* Concentrated light outside the shade and reflected spill behind card one. */
.lamp-hotspot,.first-card-glow{display:none;pointer-events:none}
@media(min-width:768px){
 .lamp-hotspot,.first-card-glow{display:block;position:absolute;z-index:-1;border-radius:50%}
 .lamp-hotspot{
  width:clamp(280px,26vw,390px);height:clamp(190px,20vw,290px);
  left:calc(var(--lamp-width) * .63);
  bottom:calc(var(--table-depth) + var(--lamp-width) * .46);
  transform:rotate(26deg);
  background:radial-gradient(ellipse,rgb(255 199 103 / .47),rgb(255 179 71 / .22) 38%,transparent 72%);
  filter:blur(23px);
 }
 .first-card-glow{
  width:clamp(340px,31vw,455px);height:540px;
  left:calc(var(--lamp-width) - 110px);
  bottom:calc(var(--table-depth) - 15px);
  background:radial-gradient(ellipse at 37% 44%,rgb(199 121 43 / .25),rgb(154 89 31 / .12) 45%,transparent 73%);
  filter:blur(45px);
 }
}
/* Let the concentrated glow wash over the lamp, while cards stay in front. */
@media(min-width:768px){
 .lamp-hotspot{z-index:3}
 .cards{position:relative;z-index:4}
}