.pptf-page {
    --pptf-paper: #fffdf7;
    --pptf-cream: #fff4dc;
    --pptf-ink: #17212f;
    --pptf-muted: #58677a;
    --pptf-soft: #6e7b89;
    --pptf-line: rgba(23, 33, 47, 0.12);
    --pptf-green: #2f8f6b;
    --pptf-board: #19453b;
    --pptf-yellow: #f4be4f;
    --pptf-coral: #e96f4c;
    --pptf-blue: #2c7be5;
    --pptf-violet: #6654d9;
    --pptf-shadow: 0 28px 80px rgba(39, 54, 74, 0.18);
    background:
        radial-gradient(circle at 8% 8%, rgba(244, 190, 79, 0.22), transparent 25rem),
        radial-gradient(circle at 88% 14%, rgba(44, 123, 229, 0.16), transparent 24rem),
        radial-gradient(circle at 35% 84%, rgba(47, 143, 107, 0.16), transparent 30rem),
        linear-gradient(180deg, #fffdf7 0%, #f8fbff 48%, #eef8f3 100%);
    color: var(--pptf-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.pptf-page::before {
    animation: pptfRulebook 22s linear infinite;
    background-image:
        linear-gradient(rgba(25, 69, 59, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 69, 59, 0.055) 1px, transparent 1px);
    background-size: 38px 38px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    pointer-events: none;
    position: absolute;
}

.pptf-page *,
.pptf-page *::before,
.pptf-page *::after {
    box-sizing: border-box;
}

.pptf-page a {
    text-decoration: none;
}

.pptf-page svg {
    display: block;
    fill: currentColor;
    height: 20px;
    width: 20px;
}

.pptf-hero,
.pptf-section,
.pptf-workflow,
.pptf-school-panel,
.pptf-seo-band,
.pptf-final-cta {
    margin: 0 auto;
    max-width: 1240px;
    padding-left: clamp(18px, 4vw, 46px);
    padding-right: clamp(18px, 4vw, 46px);
    position: relative;
    z-index: 1;
}

.pptf-hero {
    align-items: center;
    display: grid;
    gap: clamp(34px, 6vw, 76px);
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 0.9fr);
    min-height: min(910px, calc(100vh - 24px));
    padding-bottom: clamp(58px, 7vw, 98px);
    padding-top: clamp(58px, 8vw, 112px);
}

.pptf-backdrop {
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.pptf-backdrop span {
    animation: pptfFloatShape 10s ease-in-out infinite alternate;
    border: 1px solid rgba(23, 33, 47, 0.12);
    position: absolute;
}

.pptf-backdrop span:nth-child(1) {
    background: rgba(244, 190, 79, 0.24);
    border-radius: 22px;
    height: 92px;
    left: 3%;
    top: 18%;
    transform: rotate(12deg);
    width: 92px;
}

.pptf-backdrop span:nth-child(2) {
    animation-delay: -2s;
    background: rgba(47, 143, 107, 0.16);
    border-radius: 999px;
    height: 148px;
    right: 8%;
    top: 12%;
    width: 148px;
}

.pptf-backdrop span:nth-child(3) {
    animation-delay: -5s;
    background: rgba(233, 111, 76, 0.13);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    height: 128px;
    left: 47%;
    top: 70%;
    width: 128px;
}

.pptf-backdrop span:nth-child(4) {
    animation-delay: -8s;
    background: rgba(102, 84, 217, 0.13);
    border-radius: 18px;
    bottom: 13%;
    height: 84px;
    right: 38%;
    transform: rotate(-18deg);
    width: 120px;
}

.pptf-bell-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.pptf-bell-strip span,
.pptf-seo-band b {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--pptf-line);
    border-radius: 999px;
    color: var(--pptf-ink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
    padding: 10px 14px;
}

.pptf-kicker,
.pptf-section__head span,
.pptf-seo-band > span {
    color: #b25a36;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 13px;
    text-transform: uppercase;
}

.pptf-hero h1 {
    font-size: clamp(44px, 7vw, 86px);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 0.98;
    margin: 0;
    max-width: 820px;
}

.pptf-hero h1 span {
    animation: pptfTextSweep 5.5s ease-in-out infinite;
    background: linear-gradient(95deg, #17212f 0%, #19453b 24%, #e96f4c 43%, #2c7be5 58%, #17212f 76%);
    background-clip: text;
    background-size: 240% 100%;
    color: transparent;
    display: block;
    -webkit-background-clip: text;
}

.pptf-hero h1 em {
    color: #263448;
    display: block;
    font-size: clamp(34px, 5vw, 62px);
    font-style: normal;
    margin-top: 8px;
}

.pptf-lede {
    color: var(--pptf-muted);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.72;
    margin: 22px 0 0;
    max-width: 700px;
}

.pptf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.pptf-btn {
    align-items: center;
    border-radius: 14px;
    display: inline-flex;
    font-size: 15px;
    font-weight: 950;
    gap: 10px;
    justify-content: center;
    min-height: 52px;
    padding: 14px 20px;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.pptf-btn--primary {
    background: linear-gradient(135deg, var(--pptf-green), #7abf8c);
    box-shadow: 0 18px 44px rgba(47, 143, 107, 0.28);
    color: #ffffff;
}

.pptf-btn--primary:hover,
.pptf-btn--primary:focus {
    color: #ffffff;
    transform: translateY(-2px);
}

.pptf-btn--soft {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--pptf-line);
    color: var(--pptf-ink);
}

.pptf-btn--soft:hover,
.pptf-btn--soft:focus {
    background: #ffffff;
    color: var(--pptf-ink);
}

.pptf-proof {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 34px;
}

.pptf-proof span {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--pptf-line);
    border-radius: 18px;
    color: var(--pptf-soft);
    display: grid;
    font-size: 12px;
    line-height: 1.25;
    min-height: 88px;
    padding: 14px;
}

.pptf-proof strong {
    color: var(--pptf-ink);
    font-size: 24px;
    line-height: 1.1;
}

.pptf-hero__visual {
    min-height: 570px;
    perspective: 1150px;
}

.pptf-classroom {
    animation: pptfSceneFloat 6.8s ease-in-out infinite;
    height: 560px;
    position: relative;
    transform: rotateX(58deg) rotateZ(-32deg);
    transform-style: preserve-3d;
    transition: transform 240ms ease;
}

.pptf-classroom::before {
    background:
        linear-gradient(90deg, rgba(25, 69, 59, 0.13) 1px, transparent 1px),
        linear-gradient(rgba(25, 69, 59, 0.13) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255, 244, 220, 0.96), rgba(224, 244, 234, 0.9));
    background-size: 34px 34px, 34px 34px, auto;
    border: 1px solid rgba(23, 33, 47, 0.12);
    border-radius: 36px;
    box-shadow: var(--pptf-shadow);
    content: "";
    inset: 98px 12px 20px 24px;
    position: absolute;
    transform: translateZ(-38px);
}

.pptf-board,
.pptf-window,
.pptf-teacher-desk,
.pptf-card {
    position: absolute;
    transform-style: preserve-3d;
}

.pptf-board {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%),
        linear-gradient(135deg, #1c5347, #12352f);
    border: 12px solid #8a5a33;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(20, 30, 43, 0.28);
    color: #f4fff8;
    height: 192px;
    left: 58px;
    padding: 22px 24px;
    top: 18px;
    transform: translateZ(114px) rotateZ(2deg);
    width: 390px;
}

.pptf-board b {
    color: #f7d87b;
    display: block;
    font-size: 18px;
    line-height: 1.1;
    margin-bottom: 16px;
}

.pptf-board span {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    display: block;
    height: 10px;
    margin: 11px 0;
}

.pptf-board span:nth-of-type(1) {
    width: 72%;
}

.pptf-board span:nth-of-type(2) {
    width: 86%;
}

.pptf-board span:nth-of-type(3) {
    width: 58%;
}

.pptf-board i {
    background: rgba(247, 216, 123, 0.15);
    border: 1px solid rgba(247, 216, 123, 0.36);
    border-radius: 999px;
    bottom: 16px;
    color: #fff2b7;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    padding: 8px 11px;
    position: absolute;
    right: 16px;
}

.pptf-window {
    background: linear-gradient(145deg, #d8efff, #fff8da);
    border: 10px solid #ffffff;
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(39, 54, 74, 0.16);
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    height: 132px;
    right: 18px;
    top: 76px;
    transform: translateZ(72px) rotateZ(-4deg);
    width: 148px;
}

.pptf-window span {
    border: 1px solid rgba(44, 123, 229, 0.16);
    border-radius: 10px;
}

.pptf-teacher-desk {
    height: 386px;
    left: 40px;
    top: 156px;
    width: 510px;
}

.pptf-teacher-desk::before {
    background: linear-gradient(135deg, #b9793a, #6c4428);
    border-radius: 24px;
    box-shadow: 0 24px 56px rgba(39, 54, 74, 0.23);
    content: "";
    height: 146px;
    left: 36px;
    position: absolute;
    top: 168px;
    transform: translateZ(34px);
    width: 410px;
}

.pptf-paper,
.pptf-laptop,
.pptf-chalk,
.pptf-pencil,
.pptf-stamp {
    box-shadow: 0 20px 42px rgba(39, 54, 74, 0.2);
    position: absolute;
    transform-style: preserve-3d;
}

.pptf-paper {
    animation: pptfPaperLift 4.8s ease-in-out infinite;
    background: #ffffff;
    border-radius: 16px;
    color: var(--pptf-ink);
    height: 244px;
    left: 250px;
    padding: 20px;
    top: 60px;
    transform: translateZ(128px) rotateZ(-13deg);
    width: 176px;
}

.pptf-paper strong,
.pptf-paper small,
.pptf-paper em {
    display: block;
}

.pptf-paper strong {
    font-size: 18px;
    line-height: 1.1;
}

.pptf-paper small {
    color: var(--pptf-green);
    font-weight: 900;
    margin: 8px 0 16px;
}

.pptf-paper span {
    background: rgba(23, 33, 47, 0.16);
    border-radius: 999px;
    display: block;
    height: 8px;
    margin-bottom: 12px;
}

.pptf-paper span:nth-of-type(even) {
    width: 70%;
}

.pptf-paper em {
    background: #eaf7f0;
    border-radius: 999px;
    bottom: 16px;
    color: #207653;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
    left: 18px;
    padding: 8px 10px;
    position: absolute;
}

.pptf-laptop {
    background: linear-gradient(145deg, #17212f, #314564);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    color: #ffffff;
    height: 196px;
    left: 90px;
    padding: 26px 24px;
    top: 86px;
    transform: translateZ(116px) rotateZ(10deg);
    width: 224px;
}

.pptf-laptop::after {
    background: linear-gradient(90deg, #101822, #44536b);
    border-radius: 8px;
    bottom: -32px;
    content: "";
    height: 36px;
    left: -24px;
    position: absolute;
    transform: rotateX(72deg);
    width: 272px;
}

.pptf-laptop div {
    color: #f7d87b;
    font-size: 19px;
    font-weight: 950;
    margin-bottom: 26px;
}

.pptf-laptop span {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    display: block;
    height: 11px;
    margin-top: 13px;
}

.pptf-laptop span:last-child {
    width: 64%;
}

.pptf-chalk {
    background: #f8fafc;
    border-radius: 999px;
    height: 16px;
    left: 54px;
    top: 308px;
    transform: translateZ(108px) rotateZ(-20deg);
    width: 90px;
}

.pptf-pencil {
    background: linear-gradient(90deg, #f4be4f 0 78%, #263448 78% 88%, #f4d0bc 88%);
    border-radius: 999px;
    height: 18px;
    left: 154px;
    top: 316px;
    transform: translateZ(118px) rotateZ(20deg);
    width: 134px;
}

.pptf-stamp {
    align-items: center;
    animation: pptfStamp 5.2s ease-in-out infinite;
    background: #fff0e8;
    border: 2px solid rgba(233, 111, 76, 0.42);
    border-radius: 999px;
    color: #b1482c;
    display: flex;
    font-size: 12px;
    font-weight: 950;
    height: 74px;
    justify-content: center;
    left: 328px;
    top: 290px;
    transform: translateZ(130px) rotateZ(12deg);
    width: 74px;
}

.pptf-card {
    animation: pptfCardFloat 5s ease-in-out infinite;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--pptf-line);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(39, 54, 74, 0.17);
    color: var(--pptf-ink);
    font-size: 13px;
    font-weight: 950;
    padding: 13px 15px;
    white-space: nowrap;
}

.pptf-card--one {
    left: 4px;
    top: 234px;
    transform: translateZ(184px) rotateZ(14deg);
}

.pptf-card--two {
    animation-delay: -2s;
    right: 28px;
    top: 232px;
    transform: translateZ(174px) rotateZ(-10deg);
}

.pptf-card--three {
    animation-delay: -3.6s;
    bottom: 32px;
    left: 210px;
    transform: translateZ(188px) rotateZ(6deg);
}

.pptf-section {
    padding-bottom: clamp(54px, 8vw, 98px);
    padding-top: clamp(52px, 8vw, 94px);
}

.pptf-section__head {
    margin: 0 auto 30px;
    max-width: 840px;
    text-align: center;
}

.pptf-section__head h2,
.pptf-workflow h2,
.pptf-school-panel h2,
.pptf-final-cta h2 {
    color: var(--pptf-ink);
    font-size: clamp(30px, 5vw, 56px);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.04;
    margin: 0;
}

.pptf-section__head p,
.pptf-workflow p,
.pptf-final-cta p {
    color: var(--pptf-muted);
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.72;
    margin: 16px 0 0;
}

.pptf-feature-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pptf-feature-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(244, 190, 79, 0.15), transparent 12rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 254, 251, 0.82));
    border: 1px solid var(--pptf-line);
    border-radius: 22px;
    box-shadow: 0 18px 54px rgba(39, 54, 74, 0.11);
    min-height: 258px;
    padding: 24px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.pptf-feature-card:hover {
    border-color: rgba(47, 143, 107, 0.45);
    transform: translateY(-5px);
}

.pptf-feature-card__icon {
    align-items: center;
    background: #eaf7f0;
    border: 1px solid rgba(47, 143, 107, 0.2);
    border-radius: 16px;
    color: var(--pptf-green);
    display: inline-flex;
    height: 52px;
    justify-content: center;
    margin-bottom: 18px;
    width: 52px;
}

.pptf-feature-card h3 {
    font-size: 21px;
    font-weight: 950;
    line-height: 1.18;
    margin: 0;
}

.pptf-feature-card p {
    color: var(--pptf-muted);
    font-size: 14px;
    line-height: 1.62;
    margin: 12px 0 0;
}

.pptf-workflow {
    align-items: start;
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    padding-bottom: clamp(54px, 8vw, 96px);
}

.pptf-workflow__copy {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 244, 220, 0.74)),
        radial-gradient(circle at bottom left, rgba(44, 123, 229, 0.12), transparent 18rem);
    border: 1px solid var(--pptf-line);
    border-radius: 28px;
    padding: clamp(26px, 4vw, 46px);
    position: sticky;
    top: 20px;
}

.pptf-steps {
    display: grid;
    gap: 16px;
}

.pptf-steps article {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--pptf-line);
    border-radius: 22px;
    display: grid;
    gap: 10px 18px;
    grid-template-columns: 72px 1fr;
    min-height: 156px;
    padding: 22px;
}

.pptf-steps strong {
    align-items: center;
    background: linear-gradient(135deg, #f4be4f, #e96f4c);
    border-radius: 18px;
    color: #17212f;
    display: inline-flex;
    font-size: 20px;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.pptf-steps h3 {
    font-size: 22px;
    font-weight: 950;
    line-height: 1.15;
    margin: 0;
}

.pptf-steps p {
    grid-column: 2;
    margin: -38px 0 0;
}

.pptf-school-panel {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 246, 239, 0.9)),
        radial-gradient(circle at right, rgba(233, 111, 76, 0.16), transparent 20rem);
    border: 1px solid var(--pptf-line);
    border-radius: 30px;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
    margin-bottom: clamp(54px, 8vw, 96px);
    padding-bottom: clamp(30px, 5vw, 52px);
    padding-top: clamp(30px, 5vw, 52px);
}

.pptf-school-points {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pptf-school-points span {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--pptf-line);
    border-radius: 16px;
    color: var(--pptf-ink);
    display: flex;
    font-size: 14px;
    font-weight: 900;
    gap: 10px;
    line-height: 1.25;
    min-height: 64px;
    padding: 14px;
}

.pptf-school-points svg {
    color: var(--pptf-green);
    flex: 0 0 auto;
}

.pptf-seo-band {
    border-bottom: 1px solid var(--pptf-line);
    border-top: 1px solid var(--pptf-line);
    padding-bottom: 28px;
    padding-top: 28px;
}

.pptf-seo-band div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pptf-final-cta {
    align-items: center;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    padding-bottom: clamp(56px, 8vw, 102px);
    padding-top: clamp(54px, 8vw, 96px);
}

.pptf-final-cta > div {
    max-width: 820px;
}

.pptf-final-cta .pptf-btn {
    flex: 0 0 auto;
}

.pptf-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 520ms ease, transform 520ms ease;
}

.pptf-reveal.is-pptf-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes pptfRulebook {
    from { background-position: 0 0, 0 0; }
    to { background-position: 38px 38px, 38px 38px; }
}

@keyframes pptfFloatShape {
    from { translate: 0 0; }
    to { translate: 22px -18px; }
}

@keyframes pptfTextSweep {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes pptfSceneFloat {
    0%, 100% { transform: rotateX(58deg) rotateZ(-32deg) translateY(0); }
    50% { transform: rotateX(58deg) rotateZ(-32deg) translateY(-14px); }
}

@keyframes pptfPaperLift {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -12px; }
}

@keyframes pptfStamp {
    0%, 100% { transform: translateZ(130px) rotateZ(12deg) scale(1); }
    50% { transform: translateZ(130px) rotateZ(20deg) scale(1.06); }
}

@keyframes pptfCardFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -16px; }
}

@media (prefers-reduced-motion: reduce) {
    .pptf-page::before,
    .pptf-backdrop span,
    .pptf-hero h1 span,
    .pptf-classroom,
    .pptf-paper,
    .pptf-stamp,
    .pptf-card {
        animation: none;
    }
}

@media (max-width: 1080px) {
    .pptf-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pptf-hero__copy {
        max-width: 900px;
    }

    .pptf-hero__visual {
        margin: 0 auto;
        max-width: 640px;
        width: 100%;
    }

    .pptf-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .pptf-proof,
    .pptf-school-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pptf-workflow,
    .pptf-school-panel {
        grid-template-columns: 1fr;
    }

    .pptf-workflow__copy {
        position: relative;
        top: auto;
    }

    .pptf-school-panel {
        border-radius: 24px;
        margin-left: 18px;
        margin-right: 18px;
    }

    .pptf-final-cta {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .pptf-hero,
    .pptf-section,
    .pptf-workflow,
    .pptf-seo-band,
    .pptf-final-cta {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pptf-actions,
    .pptf-btn {
        width: 100%;
    }

    .pptf-feature-grid,
    .pptf-proof,
    .pptf-school-points {
        grid-template-columns: 1fr;
    }

    .pptf-hero__visual {
        min-height: 405px;
        overflow: hidden;
    }

    .pptf-classroom {
        animation: none;
        height: 405px;
        margin-left: -46px;
        transform: scale(0.68) rotateX(58deg) rotateZ(-32deg);
        transform-origin: 50% 26%;
        width: 610px;
    }

    .pptf-steps article {
        grid-template-columns: 1fr;
    }

    .pptf-steps p {
        grid-column: auto;
        margin: 0;
    }

    .pptf-school-panel {
        margin-left: 16px;
        margin-right: 16px;
        padding-left: 20px;
        padding-right: 20px;
    }
}