:root{
  --guide-purple:#6b5cff;
  --guide-blue:#41a7ff;
  --guide-soft:#f2f9ff;
  --guide-border:rgba(28,83,105,.15);
}

.product-page{width:min(100%,1500px);margin:0 auto;overflow:hidden}
.product-hero{position:relative;width:min(calc(100% - 28px),var(--max));margin:42px auto 28px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:34px;align-items:center;padding:clamp(34px,5vw,68px);overflow:hidden;border:1px solid rgba(191,220,214,.75);border-radius:42px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(224,249,243,.84));box-shadow:var(--shadow)}
.product-hero:before{content:"";position:absolute;width:430px;height:430px;right:-130px;top:-210px;border-radius:50%;background:rgba(87,207,198,.33)}
.product-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(10,142,147,.13) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(90deg,transparent 20%,#000)}
.product-hero__copy,.product-hero__visual{position:relative;z-index:1}
.product-hero__copy h1{max-width:820px;margin-top:15px}
.product-hero__copy .lead{max-width:760px}
.product-hero__visual{min-height:470px;display:grid;place-items:center}
.product-hero__visual>img{width:min(95%,510px);filter:drop-shadow(0 32px 38px rgba(10,60,55,.2));animation:floatPig 5s ease-in-out infinite}
.product-orbit{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(10,142,147,.2)}
.product-orbit:nth-child(2){width:96%;border-color:rgba(255,209,102,.5)}
.product-badge-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.product-badge-row span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.75);color:var(--teal-dark);font-weight:900;font-size:.82rem}

.product-showcase{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.phone-shell{position:relative;width:min(100%,390px);margin:auto;padding:18px;border:1px solid rgba(20,58,54,.16);border-radius:46px;background:#182826;box-shadow:0 30px 80px rgba(20,58,54,.24)}
.phone-shell:before{content:"";display:block;width:38%;height:22px;margin:-3px auto 12px;border-radius:0 0 14px 14px;background:#0c1715}
.phone-screen{padding:22px 16px;border-radius:30px;background:linear-gradient(180deg,#e9faf6,#f7fffc);overflow:hidden}
.phone-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-weight:1000;color:var(--ink)}
.phone-balance{padding:20px;border-radius:24px;color:#fff;background:linear-gradient(135deg,var(--teal-dark),var(--teal-light));box-shadow:0 15px 28px rgba(10,104,100,.22)}
.phone-balance small{display:block;opacity:.8;font-weight:800}.phone-balance strong{display:block;margin-top:6px;font-size:2rem}
.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.phone-mini{min-height:108px;padding:14px;border:1px solid var(--line);border-radius:20px;background:#fff}
.phone-mini img{width:42px;height:42px;object-fit:contain}.phone-mini strong{display:block;margin-top:6px}.phone-mini span{color:var(--muted);font-size:.78rem;font-weight:700}
.showcase-copy h2{font-size:clamp(2rem,4.3vw,4.2rem);line-height:1.02;letter-spacing:-.045em;margin:10px 0 18px}
.showcase-copy p{color:var(--muted);font-size:1.08rem;line-height:1.75}

.feature-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feature-tile{position:relative;min-height:300px;padding:26px;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.88);box-shadow:0 16px 45px rgba(20,58,54,.08)}
.feature-tile:after{content:"";position:absolute;width:150px;height:150px;right:-54px;top:-54px;border-radius:50%;background:rgba(87,207,198,.12)}
.feature-tile img{position:relative;z-index:1;width:82px;height:82px;object-fit:contain;margin-bottom:22px;filter:drop-shadow(0 12px 14px rgba(20,58,54,.12))}
.feature-tile h3{position:relative;z-index:1;margin:0 0 10px;font-size:1.35rem}.feature-tile p{position:relative;z-index:1;margin:0;color:var(--muted);line-height:1.65}

.step-flow{counter-reset:guide-step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.step-flow__item{counter-increment:guide-step;position:relative;min-height:250px;padding:26px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,#fff,#f1faf7)}
.step-flow__item:before{content:counter(guide-step,decimal-leading-zero);display:block;margin-bottom:34px;color:var(--teal);font-size:1rem;font-weight:1000;letter-spacing:.12em}
.step-flow__item:not(:last-child):after{content:"→";position:absolute;right:-15px;top:48%;z-index:2;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-weight:1000}
.step-flow__item h3{margin:0 0 10px}.step-flow__item p{margin:0;color:var(--muted);line-height:1.6}

.safe-note{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:24px;border:1px solid rgba(14,142,135,.24);border-radius:26px;background:linear-gradient(135deg,#effff9,#fff)}
.safe-note__icon{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:var(--mint);font-size:1.7rem}.safe-note h3{margin:0 0 7px}.safe-note p{margin:0;color:var(--muted);line-height:1.65}

.guide-hero{width:min(calc(100% - 28px),var(--max));margin:42px auto 24px;padding:clamp(34px,5vw,64px);border:1px solid var(--line);border-radius:40px;background:linear-gradient(135deg,#102f2d,#0b6f6b 60%,#45cabb);color:#fff;box-shadow:var(--shadow)}
.guide-hero h1{max-width:940px;color:#fff}.guide-hero p{max-width:850px;color:rgba(255,255,255,.82);font-size:1.12rem;line-height:1.75}
.guide-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.guide-switch a{padding:12px 17px;border:1px solid rgba(255,255,255,.24);border-radius:18px;color:#fff;background:rgba(255,255,255,.08)}
.guide-switch a:hover{background:#fff;color:var(--teal-dark);text-decoration:none}

.guide-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.guide-index__card{display:flex;gap:18px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:26px;background:#fff}
.guide-index__card img{width:80px;height:80px;object-fit:contain}.guide-index__card h3{margin:0 0 6px}.guide-index__card p{margin:0;color:var(--muted)}

.tutorial-block{scroll-margin-top:120px}
.tutorial-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.tutorial-heading__mark{display:flex;align-items:center;gap:14px}.tutorial-heading__mark img{width:74px;height:74px;object-fit:contain}.tutorial-heading h2{margin:0}.tutorial-heading p{margin:7px 0 0}
.tutorial-list{display:grid;gap:14px}
.tutorial-step{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden}
.tutorial-step summary{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:20px;cursor:pointer;list-style:none}.tutorial-step summary::-webkit-details-marker{display:none}
.tutorial-step__number{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--teal-dark),var(--teal-light));color:#fff;font-weight:1000}
.tutorial-step__title strong{display:block;font-size:1.08rem;color:var(--ink)}.tutorial-step__title span{display:block;margin-top:4px;color:var(--muted);font-size:.88rem;font-weight:700}
.tutorial-step summary:after{content:"+";width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--mint);color:var(--teal-dark);font-size:1.35rem;font-weight:1000}.tutorial-step[open] summary:after{content:"–"}
.tutorial-step__body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);gap:22px;padding:0 20px 22px 82px;border-top:1px solid #e6f0ed}.tutorial-step__body>div{padding-top:20px}.tutorial-step__body p{margin:0 0 12px;color:var(--muted);line-height:1.7}.tutorial-step__body ul{margin:0;padding-left:20px;color:#324946;line-height:1.7}.tutorial-tip{padding:16px;border:1px solid #f1d98c;border-radius:18px;background:#fff9df}.tutorial-tip strong{display:block;margin-bottom:5px;color:#654d00}.tutorial-tip p{margin:0;color:#6d613e;font-size:.92rem}

.quick-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.quick-help__card{padding:22px;border:1px solid var(--line);border-radius:24px;background:#fff}.quick-help__card h3{margin:0 0 8px}.quick-help__card p{margin:0;color:var(--muted);line-height:1.6}.quick-help__card a{display:inline-block;margin-top:14px}

.pr-howto-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}.pr-howto-card{position:relative;min-height:250px;padding:23px;border:1px solid rgba(38,78,126,.16);border-radius:24px;background:#fff;box-shadow:0 14px 38px rgba(23,54,90,.07)}.pr-howto-card span{display:block;color:var(--pr-blue);font-weight:1000}.pr-howto-card h3{margin:28px 0 10px;color:var(--pr-ink)}.pr-howto-card p{margin:0;color:var(--pr-muted);line-height:1.6}

@media(max-width:1050px){.product-hero,.product-showcase{grid-template-columns:1fr}.product-hero__visual{position:absolute;right:-80px;bottom:-90px;width:430px;opacity:.34}.product-hero__copy{max-width:780px}.feature-catalog{grid-template-columns:repeat(2,1fr)}.step-flow{grid-template-columns:repeat(2,1fr)}.step-flow__item:nth-child(2):after{display:none}.pr-howto-grid{grid-template-columns:repeat(2,1fr)}.pr-howto-card:last-child{grid-column:1/-1}}
@media(max-width:760px){.product-hero{padding:30px 22px}.product-hero__visual{width:310px;right:-90px;bottom:-50px}.product-badge-row{max-width:70%}.feature-catalog,.step-flow,.guide-index,.quick-help,.pr-howto-grid{grid-template-columns:1fr}.step-flow__item:after{display:none!important}.tutorial-heading{align-items:flex-start;flex-direction:column}.tutorial-step summary{grid-template-columns:auto 1fr}.tutorial-step summary:after{display:none}.tutorial-step__body{grid-template-columns:1fr;padding:0 18px 20px}.tutorial-step__body>div{padding-top:18px}.phone-shell{width:320px}.pr-howto-card:last-child{grid-column:auto}}