.design-style-tech_phantom_blockchain_application_development_single_page_website_xlh { --bg: oklch(0.15 0.03 325); --bg-2: oklch(0.175 0.032 325); --surface: oklch(0.21 0.045 325); --surface-2: oklch(0.235 0.048 325); --primary: oklch(0.72 0.14 325); --secondary: oklch(0.62 0.14 5); --accent: oklch(0.78 0.16 92); --accent-2: oklch(0.90 0.12 92); --text: oklch(0.94 0.02 325); --text-2: oklch(0.82 0.025 325); --muted: oklch(0.62 0.03 325); --line: oklch(0.30 0.03 325); --line-2: oklch(0.36 0.035 325); --container: 1140px; --container-lg: 1400px; --container-xl: 1640px; --gutter: clamp(14px, 2vw, 28px); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px; --sh-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px rgba(0,0,0,.35); --sh-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 30px rgba(0,0,0,.45); --sh-3: 0 1px 0 rgba(255,255,255,.08) inset, 0 26px 64px rgba(0,0,0,.55); --fs-xs: clamp(.72rem, .7rem + .1vw, .78rem); --fs-sm: clamp(.82rem, .8rem + .15vw, .9rem); --fs-md: clamp(.95rem, .9rem + .25vw, 1.06rem); --fs-lg: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); --fs-xl: clamp(1.45rem, 1.28rem + .9vw, 1.92rem); --fs-2xl: clamp(1.85rem, 1.5rem + 1.9vw, 2.8rem); --fs-3xl: clamp(2.3rem, 1.8rem + 2.8vw, 3.45rem); --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.6; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: .15s; --t-base: .25s; --t-slow: .45s; font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); line-height: var(--lh-body); overflow-wrap: break-word; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh *, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh *::before, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh *::after { box-sizing: border-box; margin: 0; padding: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-notice { background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--gutter); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); position: sticky; top: 0; z-index: 100; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(0,0,0,.3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-notice .ds-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 3px oklch(0.78 0.16 92 / .16); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-notice strong { color: var(--accent-2); font-weight: 600; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--sp-6); max-width: var(--container-lg); margin-inline: auto; padding: var(--sp-5) var(--gutter) var(--sp-8); align-items: start; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side { position: sticky; top: 58px; display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-brand { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-brand > div { min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-brand .ds-mark { width: 32px; height: 32px; border-radius: var(--r-sm); background: linear-gradient(160deg, var(--primary), oklch(0.6 0.14 325)); display: grid; place-items: center; color: oklch(0.16 0.03 325); font-weight: 800; font-size: var(--fs-sm); flex-shrink: 0; box-shadow: var(--sh-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-brand b { font-size: var(--fs-sm); letter-spacing: .04em; display: block; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-brand small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; margin-top: 1px; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav { display: flex; flex-direction: column; gap: 2px; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav a { display: flex; align-items: center; padding: var(--sp-2) var(--sp-3); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); border-left: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); min-height: 34px; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav a:hover, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav a:focus-visible { color: var(--accent-2); border-left-color: var(--accent); background: oklch(0.78 0.16 92 / .05); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-meta { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body); border-top: 1px solid var(--line); padding-top: var(--sp-4); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-meta b { color: var(--accent); font-variant-numeric: tabular-nums; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-7); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(150deg, var(--surface-2), var(--surface)); padding: var(--sp-6) var(--sp-6) var(--sp-7); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-6); align-items: center; box-shadow: var(--sh-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, oklch(0.72 0.14 325 / .5) 1px, transparent 1.4px); background-size: 14px 14px; opacity: .28; pointer-events: none; mask-image: linear-gradient(120deg, #000 10%, transparent 62%); -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 62%); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero-copy { position: relative; z-index: 1; min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-kicker { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--sp-4); text-wrap: balance; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero h1 em { font-style: normal; color: var(--primary); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero p { color: var(--text-2); font-size: var(--fs-md); max-width: 46ch; margin-bottom: var(--sp-5); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease); min-height: 44px; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn-primary { background: var(--accent); color: oklch(0.18 0.03 92); box-shadow: var(--sh-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn-primary:hover { background: var(--accent-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: oklch(0.21 0.045 325 / .5); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn-ghost:hover { border-color: var(--primary); color: var(--accent-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn:active { transform: translateY(0); box-shadow: var(--sh-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn:focus-visible, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero-visual { position: relative; z-index: 1; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sh-2); min-width: 0; border: 1px solid var(--line); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero-visual img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero-fold { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 52px 52px 0; border-color: transparent var(--secondary) transparent transparent; z-index: 2; filter: drop-shadow(-2px 2px 4px rgba(0,0,0,.4)); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--sp-5) 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stat { min-width: 0; text-align: center; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stat .ds-num { font-size: var(--fs-xl); font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); letter-spacing: -.01em; animation: ds-count-up .8s var(--ease-out) both; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stat:nth-child(2) .ds-num { animation-delay: .1s; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stat:nth-child(3) .ds-num { animation-delay: .2s; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stat:nth-child(4) .ds-num { animation-delay: .3s; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stat span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section { min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section-head h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; line-height: var(--lh-snug); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section-head span { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); position: relative; min-width: 0; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 26px 26px; border-color: transparent transparent var(--secondary) transparent; opacity: .55; border-radius: 0 0 var(--r-md) 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote p { font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--sp-4); line-height: var(--lh-body); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote footer { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote footer .ds-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); flex-shrink: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote footer span { min-width: 0; overflow-wrap: break-word; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quote footer b { color: var(--text); font-weight: 600; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-steps { display: flex; flex-direction: column; gap: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); transition: background-color var(--t-fast) var(--ease); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step:last-child { border-bottom: none; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step-num { font-size: var(--fs-lg); font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step-body { min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step-body h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-1); letter-spacing: -.005em; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step-body p { font-size: var(--fs-sm); color: var(--muted); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step-tag { font-size: var(--fs-xs); color: var(--accent); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); white-space: nowrap; align-self: start; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); list-style: none; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-checklist li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-checklist li span { min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-checklist li::before { content: '✓'; color: var(--accent); font-weight: 800; flex-shrink: 0; width: 18px; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-checklist li b { color: var(--accent-2); font-variant-numeric: tabular-nums; font-weight: 600; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; position: relative; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan.ds-featured { border-color: var(--accent); background: linear-gradient(165deg, var(--surface-2), var(--surface)); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan.ds-featured::before { content: '推荐'; position: absolute; top: calc(var(--sp-3) * -1); right: var(--sp-4); background: var(--accent); color: oklch(0.18 0.03 92); font-size: var(--fs-xs); font-weight: 700; padding: 2px var(--sp-3); border-radius: var(--r-pill); box-shadow: var(--sh-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.005em; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan .ds-price { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); letter-spacing: -.015em; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan .ds-price small { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; letter-spacing: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan ul li { min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan ul li::before { content: '—'; color: var(--primary); margin-right: var(--sp-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan .ds-btn { margin-top: auto; justify-content: center; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare { width: 100%; max-width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare th, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare tbody tr { transition: background-color var(--t-fast) var(--ease); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare tbody tr:hover { background: oklch(0.78 0.16 92 / .04); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare th { color: var(--accent); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare td b { color: var(--accent-2); font-variant-numeric: tabular-nums; font-weight: 600; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion { display: flex; flex-direction: column; gap: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion details:hover { border-color: var(--line-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion details[open] { border-color: var(--primary); box-shadow: var(--sh-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion summary { cursor: pointer; list-style: none; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; transition: color var(--t-fast) var(--ease); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion summary:hover { color: var(--accent-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion summary::-webkit-details-marker { display: none; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion summary::after { content: '+'; color: var(--accent); font-size: var(--fs-lg); font-weight: 400; transition: transform var(--t-base) var(--ease); flex-shrink: 0; line-height: 1; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion details[open] summary::after { transform: rotate(45deg); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion .ds-acc-body { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); display: grid; gap: var(--sp-3); min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion .ds-acc-body .ds-acc-img { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 7; border: 1px solid var(--line); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion .ds-acc-body img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery figure { border-radius: var(--r-md); overflow: hidden; position: relative; aspect-ratio: 3 / 2; min-width: 0; border: 1px solid var(--line); margin: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease-out); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery figure:hover img { transform: scale(1.06); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4) var(--sp-3) var(--sp-2); font-size: var(--fs-xs); color: var(--text); background: linear-gradient(transparent, oklch(0.15 0.03 325 / .92)); overflow-wrap: break-word; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta { border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(150deg, var(--surface-2), var(--surface)); padding: var(--sp-6); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center; position: relative; overflow: hidden; box-shadow: var(--sh-1); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .8; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta > div { min-width: 0; position: relative; z-index: 1; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta h2 { font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--sp-2); letter-spacing: -.01em; line-height: var(--lh-snug); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta p { color: var(--text-2); font-size: var(--fs-sm); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta .ds-hero-actions { justify-content: flex-end; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer { border-top: 1px solid var(--line); padding: var(--sp-6) var(--gutter) var(--sp-5); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer-inner { max-width: var(--container-lg); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer-inner > div { min-width: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer h4 { font-size: var(--fs-sm); margin-bottom: var(--sp-3); color: var(--text); font-weight: 600; letter-spacing: .01em; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer p, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer a { font-size: var(--fs-xs); color: var(--muted); text-decoration: none; display: block; margin-bottom: var(--sp-2); transition: color var(--t-fast) var(--ease); overflow-wrap: break-word; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer a:hover, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer a:focus-visible { color: var(--accent-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer-bottom { max-width: var(--container-lg); margin: var(--sp-5) auto 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } @keyframes ds-count-up { from { transform: translateY(10px); } to { transform: translateY(0); } } @keyframes ds-fade-up { from { transform: translateY(14px); } to { transform: translateY(0); } } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section { animation: ds-fade-up .6s var(--ease-out) both; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section:nth-child(2) { animation-delay: .05s; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section:nth-child(3) { animation-delay: .1s; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section:nth-child(4) { animation-delay: .15s; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-section:nth-child(5) { animation-delay: .2s; } @media (min-width: 1600px) { .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-layout { max-width: var(--container-xl); grid-template-columns: 256px minmax(0, 1fr); gap: var(--sp-7); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-brand { border-bottom: none; padding-bottom: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav a { border-left: none; border-radius: var(--r-pill); border: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav a:hover, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-nav a:focus-visible { border-left: 1px solid var(--accent); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-side-meta { border-top: none; padding-top: 0; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero { grid-template-columns: minmax(0, 1fr); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-quotes { grid-template-columns: minmax(0, 1fr); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta { grid-template-columns: minmax(0, 1fr); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-cta .ds-hero-actions { justify-content: flex-start; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 640px) { .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-checklist { grid-template-columns: minmax(0, 1fr); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plans { grid-template-columns: minmax(0, 1fr); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step { grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-step-tag { grid-column: 2; justify-self: start; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-compare { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-footer-inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 380px) { .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-layout { padding-inline: var(--sp-3); gap: var(--sp-4); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero { padding: var(--sp-4); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero h1 { font-size: var(--fs-2xl); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery { grid-template-columns: minmax(0, 1fr); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-hero-actions { flex-direction: column; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-btn { width: 100%; justify-content: center; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion summary { padding: var(--sp-3); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-accordion .ds-acc-body { padding: 0 var(--sp-3) var(--sp-4); } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-plan.ds-featured::before { right: var(--sp-3); } } @media (prefers-reduced-motion: reduce) { .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh *, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh *::before, .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .design-style-tech_phantom_blockchain_application_development_single_page_website_xlh .ds-gallery figure:hover img { transform: none; } }