:root{--dtm-ink:#101828;--dtm-muted:#667085;--dtm-line:#e7eaf0;--dtm-purple:#6541e8;--dtm-purple-2:#7c5cff;--dtm-bg:#f6f7fb}
.dtm-page{min-height:calc(100vh - 58px);padding:0 0 72px;background:radial-gradient(circle at 10% 18%,rgba(124,92,255,.10),transparent 28%),radial-gradient(circle at 90% 12%,rgba(74,144,226,.08),transparent 25%),var(--dtm-bg)}
.dtm-hero{position:relative;isolation:isolate;max-width:1440px;min-height:330px;margin:0 auto;padding:48px 34px 42px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfaff 100%);border-bottom:1px solid #ececf4}
.dtm-hero:before{content:"";position:absolute;z-index:-1;width:520px;height:300px;left:-150px;top:-80px;border-radius:50%;background:rgba(125,92,255,.11);filter:blur(20px)}
.dtm-hero:after{content:"";position:absolute;z-index:-1;width:460px;height:260px;right:-130px;bottom:-100px;border-radius:50%;background:rgba(83,139,235,.10);filter:blur(18px)}
.dtm-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid #e0d9ff;border-radius:999px;background:#faf9ff;color:#6844d8;font-size:12px;font-weight:800;letter-spacing:.06em;box-shadow:0 6px 20px rgba(101,65,232,.07)}
.dtm-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#7c5cff;box-shadow:0 0 0 4px rgba(124,92,255,.12)}
.dtm-title{margin:17px 0 5px;font-size:clamp(58px,8vw,92px);line-height:.95;font-weight:800;letter-spacing:-5px;background:linear-gradient(135deg,#5530d4 0%,#7547ea 48%,#4c36b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dtm-subtitle{margin:10px 0 0;color:#697586;font-size:16px;font-weight:500}
.dtm-hero-art{position:absolute;z-index:-1;right:20px;bottom:-30px;width:360px;height:255px;opacity:.72;filter:drop-shadow(0 22px 30px rgba(77,55,180,.12))}
.dtm-hero-art .paper{fill:#fff;stroke:#b9aaf0;stroke-width:5}.dtm-hero-art .clip{fill:#7156df}.dtm-hero-art .line{stroke:#c7bcf5;stroke-width:8;stroke-linecap:round}.dtm-hero-art .check{fill:#fff;stroke:#7964e7;stroke-width:5}.dtm-hero-art .pencil{fill:#c832c9}.dtm-hero-art .dtm-label{fill:#6844df}.dtm-hero-art .spark{fill:#8d63e8}
.dtm-category-filters{position:relative;z-index:5;max-width:1060px;margin:-25px auto 34px;padding:8px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.94);border:1px solid rgba(224,227,235,.95);border-radius:18px;box-shadow:0 16px 42px rgba(16,24,40,.09);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dtm-category-filter{flex:1;min-height:50px;padding:0 22px;border:0;border-radius:12px;background:transparent;color:#667085;font:700 14px Poppins,sans-serif;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;white-space:nowrap}.dtm-category-filter:hover{color:#344054;background:#f7f7fb;transform:translateY(-1px)}.dtm-category-filter.active{color:#fff;background:linear-gradient(135deg,#5e38dc,#7753ea);box-shadow:0 9px 22px rgba(101,65,232,.24)}
.dtm-category-filter:before{margin-right:8px;font-size:15px}.dtm-category-filter[data-category="math"]:before{content:"∑"}.dtm-category-filter[data-category="math-english"]:before{content:"A"}.dtm-category-filter[data-category="iq"]:before{content:"✦"}
.dtm-grid{max-width:1220px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dtm-card{--accent:#6541e8;--soft:#f0edff;position:relative;min-height:260px;padding:22px;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--dtm-line);border-radius:20px;box-shadow:0 8px 26px rgba(16,24,40,.045);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.dtm-card:nth-child(3n+2){--accent:#3277df;--soft:#edf5ff}.dtm-card:nth-child(3n){--accent:#20aa72;--soft:#eaf9f2}.dtm-card:nth-child(6n+4){--accent:#e79520;--soft:#fff5e5}.dtm-card:nth-child(6n+5){--accent:#d83b82;--soft:#fff0f6}.dtm-card:nth-child(6n){--accent:#7150d7;--soft:#f2efff}.dtm-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent),white 25%))}.dtm-card:after{content:"☆";position:absolute;right:19px;top:17px;color:#c4c9d3;font-size:22px}.dtm-card:hover{transform:translateY(-5px);border-color:#d9dce5;box-shadow:0 20px 42px rgba(16,24,40,.10)}
.dtm-card__top{display:flex;align-items:center;gap:15px;padding-right:25px}.dtm-icon{position:relative;width:70px;height:70px;flex:0 0 70px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:var(--soft);color:var(--accent);overflow:hidden}.dtm-icon:before{content:"";position:absolute;width:37px;height:48px;border:5px solid var(--accent);border-radius:5px;transform:rotate(-45deg);opacity:.9}.dtm-icon:after{content:"";position:absolute;width:23px;height:4px;border-radius:4px;background:var(--accent);transform:rotate(-45deg) translate(2px,-9px);box-shadow:0 9px 0 var(--accent),0 18px 0 var(--accent);opacity:.75}.dtm-card__top h2{margin:0;color:var(--dtm-ink);font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.3px}.dtm-card__top p{margin:6px 0 0;color:#8a93a3;font-size:12px;font-weight:600}.dtm-card-result{min-height:20px;margin:17px 0 12px;color:var(--accent);font-size:13px;font-weight:800}.dtm-card-result span{margin-left:5px;color:#8a93a3;font-weight:600}.dtm-card>a{position:relative;margin-top:auto;min-height:48px;padding:0 45px 0 17px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;box-shadow:0 8px 18px color-mix(in srgb,var(--accent),transparent 78%);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.dtm-card>a:after{content:"→";position:absolute;right:16px;font-size:21px;font-weight:400}.dtm-card>a:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 11px 24px color-mix(in srgb,var(--accent),transparent 72%)}
.dtm-filter-empty{display:none;grid-column:1/-1;padding:52px 25px;text-align:center;border:1px dashed #d8dce6;border-radius:18px;background:#fff;color:#7b8493}.dtm-filter-empty strong{display:block;margin-bottom:6px;color:#344054;font-size:16px}
@media(max-width:980px){.dtm-hero{min-height:285px}.dtm-hero-art{right:-30px;opacity:.45}.dtm-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}.dtm-category-filters{margin-left:24px;margin-right:24px}.dtm-category-filter{font-size:13px;padding:0 14px}}
@media(max-width:620px){.dtm-page{padding-bottom:50px}.dtm-hero{min-height:235px;padding:31px 18px 28px}.dtm-badge{font-size:10px;padding:7px 12px}.dtm-title{font-size:58px;letter-spacing:-3px}.dtm-subtitle{font-size:13px}.dtm-hero-art{width:235px;height:170px;right:-65px;bottom:-20px;opacity:.22}.dtm-category-filters{margin:-18px 12px 22px;padding:6px;gap:5px;border-radius:15px;overflow:auto;justify-content:flex-start}.dtm-category-filter{flex:0 0 auto;min-height:44px;padding:0 13px;font-size:11px}.dtm-category-filter:before{font-size:13px;margin-right:5px}.dtm-grid{grid-template-columns:1fr;padding:0 12px;gap:13px}.dtm-card{min-height:220px;padding:19px;border-radius:18px}.dtm-icon{width:62px;height:62px;flex-basis:62px;border-radius:16px}.dtm-card__top{gap:12px}.dtm-card__top h2{font-size:18px}.dtm-card__top p{font-size:11px}.dtm-card>a{min-height:47px;font-size:12px}}

/* DTM visual polish: decorative ovals stay in the card corners. */
.dtm-card:after{content:"";position:absolute;z-index:0;right:-74px;top:18px;width:250px;height:150px;border-radius:50%;background:var(--soft);opacity:.92;transform:rotate(-8deg);pointer-events:none}
.dtm-card:before{z-index:2}
.dtm-card__top,.dtm-card-result,.dtm-card>a{position:relative;z-index:3}
.dtm-icon{z-index:3}

/* The hero illustration is intentionally more visible and slightly opened into the hero area. */
.dtm-hero-art{z-index:0;right:8px;bottom:-24px;width:390px;height:275px;opacity:.88;filter:drop-shadow(0 22px 30px rgba(77,55,180,.15))}
.dtm-badge,.dtm-title,.dtm-subtitle{position:relative;z-index:2}
@media(max-width:980px){.dtm-hero-art{right:-24px;bottom:-24px;opacity:.68}}
@media(max-width:620px){.dtm-hero-art{width:250px;height:182px;right:-54px;bottom:-18px;opacity:.42}}