/* Academy Web's independent 3D sample and hero experience. */
.p-web .w-hero{padding:54px 0 64px}
.p-web .w-in{gap:44px;align-items:center}
.p-web .w-hero h1{font-size:clamp(42px,5.2vw,68px)}
.hero-demo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:28px}
.hero-demo-actions .btn{min-height:54px;padding:14px 24px;gap:18px}
.hero-demo-secondary{font-size:14px;font-weight:800;color:var(--deep);text-decoration:none}
.hero-demo-secondary:hover{text-decoration:underline}
.hero-demo-note{margin-top:15px;font-size:12px;line-height:1.8;color:var(--muted)}
.hero-demo-card{display:block;overflow:hidden;border:1px solid #d7e3f0;border-radius:24px;background:#fff;color:#071c49;text-decoration:none;box-shadow:0 24px 65px -25px #173b6a40;transition:transform .2s,box-shadow .2s}
.hero-demo-card:hover{transform:translateY(-4px);box-shadow:0 30px 75px -25px #173b6a50}
.hero-demo-card:focus-visible{outline:3px solid #1288f8;outline-offset:5px}
.hero-demo-top{padding:22px 26px 24px;border-bottom:1px solid #e6edf5}
.hero-demo-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;font-weight:800}
.hero-demo-topline>span:first-child{display:flex;align-items:center;gap:7px}
.hero-demo-top i{width:7px;height:7px;background:#14b8a6;border-radius:50%}
.hero-demo-topline>span:last-child{color:#74849a;font-size:8px;letter-spacing:.06em}
.hero-demo-top h2{margin:17px 0 10px;font-size:clamp(27px,2.6vw,34px);font-weight:900;line-height:1.25;letter-spacing:-.055em;color:#071c49}
.hero-demo-top h2 em{font-style:normal;color:#1288f8}
.hero-demo-top p{margin:0;color:#64758a;font-size:12px;line-height:1.7}
.hero-demo-visual{position:relative;background:#edf4fa;overflow:hidden;aspect-ratio:4/3}
.hero-demo-visual img{width:100%;height:100%;object-fit:cover;display:block}
.hero-demo-chip{position:absolute;left:18px;top:16px;padding:7px 11px;border-radius:30px;background:#fffffff0;box-shadow:0 3px 15px #071c4910;font-size:11px;font-weight:800}
.hero-demo-bottom{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 12px;gap:16px}
.hero-demo-bottom div>span{font-size:11px;color:#64809d;font-weight:700}
.hero-demo-bottom strong{display:block;font-size:26px;font-weight:900;letter-spacing:-.05em;margin-top:4px}
.hero-demo-bottom p{font-size:12px;color:#64758a;margin:6px 0 0}
.hero-demo-arrow{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;background:#1288f8;color:#fff;border-radius:50%;font-size:25px}
.hero-demo-caption{display:block;padding:0 24px 20px;color:#7b899c;font-size:10px}
.website-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.website-preview-grid .try{margin-top:0}
.hero-demo-visual{display:block;aspect-ratio:16/9}
.hero-demo-story{padding:23px 26px 25px}
.hero-demo-story h2{margin:0;font-size:clamp(23px,2.2vw,29px);font-weight:900;line-height:1.35;letter-spacing:-.055em}
.hero-demo-benefits{display:grid;gap:9px;list-style:none;padding:0;margin:19px 0}
.hero-demo-benefits li{display:flex;align-items:baseline;gap:10px;font-size:14px;color:#486078;line-height:1.6}
.hero-demo-benefits li>span{color:#1288f8;font-size:15px}.hero-demo-benefits p{margin:0}.hero-demo-benefits b{color:#071c49;font-weight:900}
.hero-demo-custom{margin:0;color:#74849a;font-size:11px;line-height:1.7}
.hero-demo-enter{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #e6edf5;padding-top:15px;margin-top:17px;font-size:14px;font-weight:900}
.hero-demo-enter .hero-demo-arrow{width:35px;height:35px;font-size:21px}
@media(max-width:480px){.hero-demo-story{padding:20px}.hero-demo-benefits li{font-size:13px}.hero-demo-custom{font-size:10px}}
.sample-connect{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:45px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.sample-connect h2{font-size:clamp(25px,3.2vw,38px);line-height:1.3;letter-spacing:-.05em;margin:8px 0 14px}
.sample-connect p{max-width:650px;color:var(--muted);font-size:14px;line-height:1.8}
.sample-connect>.btn{flex-shrink:0}
@media(max-width:760px){.sample-connect{flex-direction:column;align-items:flex-start;gap:20px}.sample-connect p{font-size:13px}}
@media(max-width:900px){.p-web .w-hero{padding:32px 0 44px}.p-web .w-in{gap:26px}.hero-demo-card{width:100%;max-width:540px;justify-self:center}.hero-demo-visual{aspect-ratio:16/10}.website-preview-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:480px){.hero-demo-top{padding:20px}.hero-demo-topline{font-size:9px}.hero-demo-topline>span:last-child{font-size:7px}.hero-demo-bottom{padding:18px 18px 12px}.hero-demo-bottom strong{font-size:23px}.hero-demo-caption{padding:0 18px 17px}.hero-demo-actions{gap:13px}.hero-demo-actions .btn{padding:13px 18px;font-size:14px}.hero-demo-secondary{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero-demo-card{transition:none}}