.package-page { background: #fff; }
.package-hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#061827,#0a2f4a); padding: 78px 0 92px; color: #fff; }
.package-gear { position: absolute; right: -130px; top: -150px; width: 520px; height: 520px; background: url('image/dextensive-software-klein-light.png') left center / auto 100% no-repeat; filter: brightness(0) invert(1); opacity: .055; transform: rotate(-12deg); }
.package-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 72px; }
.package-hero .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 35px; color: #91a4b4; font-size: 11px; }
.package-hero .breadcrumbs a:hover { color: #fff; }
.package-hero h1 { max-width: 690px; margin: 17px 0 0; color: #fff; font-size: clamp(46px,4.8vw,68px); line-height: 1.04; letter-spacing: -.045em; }
.package-hero-intro { max-width: 700px; margin: 24px 0 0; color: #bdcbd6; font-size: 17px; line-height: 1.7; }
.package-hero-price { display: flex; align-items: baseline; gap: 4px; margin-top: 28px; color: #fff; }
.package-hero-price > span { color: var(--cyan-bright); font-size: 28px; font-weight: 900; }
.package-hero-price sup { color: var(--cyan-bright); font-size: 21px; font-weight: 900; }
.package-hero-price strong { font-size: 54px; line-height: 1; letter-spacing: -.05em; }
.package-hero-price small { margin-left: 7px; color: #9fb2c1; font-size: 10px; line-height: 1.55; }
.package-hero figure { margin: 0; transform: perspective(1600px) rotateY(-3deg); filter: drop-shadow(0 32px 58px rgba(0,0,0,.33)); }
.package-hero figure img { width: 100%; height: auto; border: 7px solid #fff; border-radius: 19px; background: #fff; }
.package-hero figcaption { margin-top: 10px; color: #8da3b5; font-size: 9px; text-align: right; }
.package-proof { border-bottom: 1px solid var(--line); background: #fff; }
.package-proof-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.package-proof article { position: relative; padding: 31px 31px 29px; }
.package-proof article + article { border-left: 1px solid var(--line); }
.package-proof span { color: #0b8aa1; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.package-proof h2 { margin: 7px 0 5px; font-size: 18px; }
.package-proof p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.package-detail-grid { display: grid; grid-template-columns: .68fr 1.32fr; align-items: center; gap: 72px; }
.package-detail-copy h2 { font-size: clamp(35px,3.7vw,51px); }
.package-detail-copy > p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.75; }
.package-detail-copy .text-link { display: inline-block; margin-top: 17px; }
.package-detail-visual { position: relative; margin: 0; }
.package-detail-visual > img { width: 100%; height: auto; border: 1px solid #d8e4ea; border-radius: 19px; background: #fff; box-shadow: 0 25px 65px rgba(14,48,73,.13); }
.package-detail-zoom { position: absolute; right: -22px; bottom: -25px; width: 235px; height: 155px; overflow: hidden; border: 7px solid #fff; border-radius: 16px; background-image: var(--zoom-image); background-position: var(--zoom-position); background-repeat: no-repeat; background-size: 255% auto; box-shadow: 0 20px 45px rgba(8,35,55,.22); }
.package-detail-zoom span { position: absolute; left: 10px; top: 10px; border-radius: 999px; background: var(--navy); padding: 5px 8px; color: #fff; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.package-detail-visual figcaption { margin: 13px 220px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.package-second-shot { margin-top: 85px; }
.package-second-shot figure { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 42px; margin: 0; border: 1px solid var(--line); border-radius: 20px; background: #f7fafb; padding: 18px; }
.package-second-shot img { width: 100%; height: auto; border-radius: 13px; }
.package-second-shot figcaption { padding-right: 25px; color: #52687b; font-size: 15px; line-height: 1.65; }
.package-module-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 48px; }
.package-module-grid a { position: relative; min-height: 176px; border: 1px solid #dbe6eb; border-radius: 17px; background: #fff; padding: 24px; transition: .2s; }
.package-module-grid a:hover { border-color: #75d7e3; box-shadow: 0 16px 35px rgba(12,58,79,.08); transform: translateY(-3px); }
.package-module-grid a > span { position: absolute; right: 20px; top: 19px; color: #0a94aa; font-weight: 900; }
.package-module-grid h3 { margin: 14px 30px 9px 0; font-size: 18px; }
.package-module-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.package-module-note { margin: 22px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.package-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; margin: 45px 0 0; border: 1px solid #dce7ed; border-radius: 18px; padding: 0; background: #dce7ed; list-style: none; }
.package-flow li { position: relative; display: grid; gap: 12px; min-height: 130px; align-content: center; background: #fff; padding: 23px; text-align: center; }
.package-flow li:not(:last-child)::after { position: absolute; right: -11px; top: 52px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: var(--navy); content: '→'; font-size: 12px; font-weight: 900; line-height: 22px; }
.package-flow span { color: #0790a7; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.package-flow strong { color: var(--ink); font-size: 15px; }
.package-cta { padding-top: 35px; }
@media(max-width:1000px){.package-hero-grid,.package-detail-grid{grid-template-columns:1fr}.package-hero-grid{gap:52px}.package-hero figure{max-width:950px;transform:none}.package-detail-grid{gap:45px}.package-module-grid{grid-template-columns:repeat(2,1fr)}.package-second-shot figure{grid-template-columns:1fr}.package-second-shot figcaption{padding:0 8px 8px}.package-detail-zoom{right:18px}}
@media(max-width:680px){.package-hero{padding:59px 0 72px}.package-hero h1{font-size:clamp(39px,12vw,54px)}.package-hero-intro{font-size:15px}.package-hero-price strong{font-size:46px}.package-proof-grid,.package-module-grid,.package-flow{grid-template-columns:1fr}.package-proof article+article{border-left:0;border-top:1px solid var(--line)}.package-detail-zoom{position:relative;right:auto;bottom:auto;width:100%;height:170px;margin-top:12px;border-width:4px}.package-detail-visual figcaption{margin:10px 0 0}.package-second-shot{margin-top:55px}.package-flow li:not(:last-child)::after{right:50%;top:auto;bottom:-11px;transform:translateX(50%) rotate(90deg)}}