:root{--blue:#0e5bfa;--ink:#07183d;--muted:#62718d;font-family:'Noto Sans Thai','Inter',sans-serif;color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#edf5ff}a{color:inherit;text-decoration:none}.skip{position:absolute;top:-100px;left:15px;z-index:99;padding:10px;background:#fff}.skip:focus{top:10px}.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:76px;padding:12px max(28px,calc((100vw - 1450px)/2));background:#f7fbffed;border-bottom:1px solid #dce9fb}.brand{display:flex;align-items:center;gap:9px;font-family:Inter,sans-serif;font-size:25px;font-weight:900;letter-spacing:-1.5px}.brand b{color:var(--blue)}.nav nav{display:flex;align-items:center;gap:38px;color:#40516f;font-size:13px;font-weight:750}.nav nav a:hover,.nav nav .active{color:var(--blue)}.nav-cta{padding:11px 20px;border-radius:99px;background:linear-gradient(120deg,#0055f4,#1389fa);color:#fff;font-size:13px;font-weight:800}.portfolio-hero{position:relative;display:flex;align-items:center;min-height:380px;overflow:hidden;padding:54px max(28px,calc((100vw - 1450px)/2));background:radial-gradient(ellipse 52% 88% at 70% 82%,#cce7ff 0,transparent 70%),linear-gradient(145deg,#f8fbff,#eaf4ff)}.portfolio-hero:before,.portfolio-hero:after{content:'';position:absolute;pointer-events:none;border-radius:50%;border:55px solid #ffffff6e}.portfolio-hero:before{width:540px;height:540px;left:-350px;top:-390px}.portfolio-hero:after{width:650px;height:650px;right:-380px;top:-460px}.hero-content{position:relative;z-index:2}.eyebrow{margin:0 0 11px;color:var(--blue);font-family:Inter,sans-serif;font-size:12px;font-weight:800;letter-spacing:3px}.portfolio-hero h1{margin:0;font-size:clamp(42px,4.7vw,76px);line-height:1.18;font-weight:900;letter-spacing:-3.3px}.portfolio-hero h1 span{display:inline-block;color:var(--blue)}.hero-lead{margin:16px 0 0;font-size:clamp(16px,1.4vw,22px);font-weight:600}.hero-mascot{position:absolute;z-index:1;width:clamp(245px,31vw,500px);height:auto;bottom:-210px;left:56%;transform:translateX(-50%);filter:drop-shadow(0 18px 26px #0051c335)}.hero-note{position:absolute;z-index:2;right:5%;top:83px;color:#0c60e8;font-size:24px;font-weight:800;line-height:1.5;transform:rotate(-8deg)}.work-wrap{max-width:1535px;margin:auto;padding:55px 28px 95px}.work-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin:0 0 28px}.work-heading h2{margin:0;font-size:clamp(28px,2.7vw,42px);line-height:1.2}.work-heading h2 span{color:var(--blue)}.work-heading p{margin:8px 0 0;color:var(--muted);font-size:14px}.work-heading>a{flex:none;padding:10px 20px;border:1px solid #a9c8f9;border-radius:99px;color:var(--blue);font-size:13px;font-weight:800}.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.work-card{min-width:0;overflow:hidden;border:1px solid #d7e5f8;border-radius:22px;background:#fff;box-shadow:0 15px 40px #164c8e1d;transition:transform .25s,box-shadow .25s}.work-card:hover,.work-card:focus-visible{transform:translateY(-7px);box-shadow:0 25px 48px #164c8e32}.work-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.work-art{position:relative;height:340px;overflow:hidden;padding:17px;background-size:cover;background-position:center}.work-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0014393f,transparent 35%);pointer-events:none}.mini .work-art{background-image:linear-gradient(90deg,#f2dfd159,#f2dfd100),url('assets/makeup-hero.webp');background-position:65% center}.business .work-art{background-image:linear-gradient(90deg,#eaf4ff28,#f0f7ff22),url('assets/example-business.webp');background-position:63% center}.pro .work-art{background-image:url('assets/example-landing.webp');background-position:58% center}.plan-pill{position:absolute;z-index:3;top:17px;left:16px;padding:7px 14px;border-radius:99px;background:#fffffff2;box-shadow:0 5px 16px #0e315b2d;color:#0958e7;font-size:13px;font-weight:850}.mini .plan-pill{color:#8a5b47}.pro .plan-pill{color:#6a46ce}.browser{position:absolute;z-index:2;left:10%;bottom:-25px;width:76%;height:215px;overflow:hidden;border:7px solid #15233a;border-radius:16px 16px 5px 5px;background:#fff;box-shadow:0 20px 35px #07193580;transform:rotate(-3deg);transition:transform .3s}.work-card:hover .browser{transform:rotate(0deg) translateY(-5px)}.browser-top{display:flex;align-items:center;gap:4px;height:27px;padding:0 9px;background:#fff;color:#17223d}.browser-top i{width:5px;height:5px;border-radius:50%;background:#e3a998}.browser-top i:nth-child(2){background:#f8cc83}.browser-top i:nth-child(3){background:#92ca9a}.browser-top b{margin-left:15px;font-family:Inter,sans-serif;font-size:8px;letter-spacing:.2px}.browser-stage{position:relative;height:calc(100% - 27px);padding:25px 17px;background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:flex-start}.mini .browser-stage{background-image:linear-gradient(90deg,#fff6efee 0,#fff6efaf 58%,transparent 100%),url('assets/makeup-hero.webp');background-position:62% center}.business .browser-stage{background-image:linear-gradient(90deg,#ffffffed 0,#ffffffb4 58%,transparent 100%),url('assets/example-business.webp');background-position:64% center}.pro .browser-stage{background-image:linear-gradient(90deg,#071a46ee,#08225d94),url('assets/example-landing.webp');color:#fff}.browser-stage>span{font-size:7px;letter-spacing:1px;font-weight:800}.browser-stage strong{margin-top:12px;font-size:20px;line-height:1.27;letter-spacing:-.5px}.browser-stage em{display:block;margin-top:17px;padding:5px 9px;border-radius:99px;background:#17386e;color:#fff;font-size:7px;font-style:normal}.mini .browser-stage em{background:#6d4036}.pro .browser-stage em{background:#0e5bfa}.bars{position:absolute;right:15px;bottom:8px;display:flex;align-items:end;gap:5px;height:80px}.bars i{display:block;width:14px;height:31%;border-radius:4px 4px 0 0;background:#1f8dffad}.bars i:nth-child(2){height:52%}.bars i:nth-child(3){height:70%}.bars i:nth-child(4){height:95%}.phone{position:absolute;z-index:3;right:6%;bottom:-13px;width:84px;height:166px;padding:5px;border:4px solid #15233a;border-radius:18px;background:#fff;box-shadow:0 15px 25px #06133477;transform:rotate(6deg)}.phone-screen{display:flex;flex-direction:column;gap:21px;height:100%;padding:16px 5px 5px;border-radius:10px;background-size:cover;background-position:center}.mini .phone-screen{background-image:linear-gradient(#fff9f4cc,#fff9f4ae),url('assets/makeup-hero.webp')}.business .phone-screen{background-image:linear-gradient(#fffdfbe8,#fffdfb88),url('assets/example-business.webp')}.pro .phone-screen{background-image:linear-gradient(#081c46d9,#081c46a8),url('assets/example-landing.webp');color:#fff}.phone-screen b{font-size:6px}.phone-screen strong{font-size:10px;line-height:1.3}.work-info{display:flex;align-items:center;justify-content:space-between;gap:13px;min-height:156px;padding:22px 24px}.work-kind{color:#0d63e5;font-size:11px;font-weight:800}.work-info h3{margin:6px 0 3px;font-size:22px;line-height:1.25}.work-info p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.open{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#e6f0ff;color:var(--blue);font-size:25px}.work-note{margin:21px 0 0;color:#667996;font-size:12px;line-height:1.7}.cta{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:67px max(28px,calc((100vw - 1450px)/2));background:#0b56de;color:#fff}.cta h2{margin:0;font-size:clamp(26px,3vw,43px)}.cta p{margin:8px 0 0;color:#dbeaff}.cta a{flex:none;padding:13px 22px;border-radius:99px;background:#fff;color:#0b56de;font-weight:800}footer{display:flex;justify-content:space-between;gap:15px;padding:30px max(28px,calc((100vw - 1450px)/2));background:#071b47;color:#fff;font-size:12px}footer>a:first-child{font-weight:900;font-size:19px}@media(max-width:1150px){.hero-note{display:none}.hero-mascot{left:77%;width:350px;bottom:-160px}.portfolio-hero h1{max-width:600px}.work-art{height:285px}.browser{width:80%;left:7%;height:190px}.phone{width:70px;height:145px}.work-info{padding:18px}.work-info h3{font-size:18px}}@media(max-width:850px){.nav nav{gap:13px}.nav nav a{font-size:11px}.work-grid{grid-template-columns:1fr 1fr}.portfolio-hero{min-height:340px}.hero-mascot{opacity:.6}}@media(max-width:620px){.nav{min-height:66px;padding:10px 18px}.brand{font-size:21px}.brand img{width:31px}.nav nav{display:none}.nav-cta{font-size:11px;padding:9px 13px}.portfolio-hero{min-height:330px;padding:50px 22px}.portfolio-hero h1{font-size:clamp(37px,10vw,53px);letter-spacing:-2px;max-width:340px}.hero-lead{max-width:290px;font-size:14px}.hero-mascot{left:91%;bottom:-65px;width:210px;opacity:.5}.work-wrap{padding:42px 18px 70px}.work-heading{align-items:start;flex-direction:column}.work-grid{grid-template-columns:1fr}.work-art{height:300px}.browser{width:76%;left:10%;height:210px}.phone{width:80px;height:158px}.work-info{min-height:125px;padding:18px 20px}.work-info h3{font-size:21px}.cta{align-items:start;flex-direction:column;padding:54px 20px}footer{flex-wrap:wrap;padding:30px 20px}}

/* Orchid Nail Studio demo card — the gradient keeps the card finished until
   assets/portfolio-nail.webp (see ASSET-PROMPTS-MINISITE.md) is generated. */
.work-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.nail .work-art{background-image:url('assets/portfolio-nail.webp'),radial-gradient(120% 90% at 78% 12%,#f3c9d4cc,transparent 64%),linear-gradient(150deg,#f7eef1 0%,#e3b3c2 52%,#a4475f 100%)}
.nail .plan-pill{color:#a4475f}
.nail .browser-stage{background-image:linear-gradient(95deg,#fffcfcf2 0,#fffcfcc4 58%,#f7eef194 100%),linear-gradient(150deg,#f3d4dd,#c98fa4);color:#32202b}
.nail .browser-stage>span{color:#a4475f}
.nail .browser-stage em{background:#a4475f;color:#fffcfc}
.nail .phone-screen{background-image:linear-gradient(#fffcfce8,#fffcfcb4),linear-gradient(150deg,#f3d4dd,#c98fa4);color:#32202b}
.nail .work-kind{color:#a4475f}
@media(max-width:850px){.work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.work-grid{grid-template-columns:1fr}}